原型制作是产品经理的基本技能之一,今天分享一下如何用AXURE8制作top返回按钮。

第一步:制作一个长页面,如下图:

头部:head

中部:body

尾部:foot

中部body尽量长一些,一面返回按钮无效果!

1532763371(1).jpg

第二步:制作一个TOP的图片

至于美观样式,这里不再描述,可以把TOP按钮转化成动态面板,设置隐藏它,默认不可见的状态。
1532764389.jpg

第三步:在head的右边添加一个矩形,隐藏他不可见,取名为“TOP锚点”。
1532764484(1).jpg

第四步:给TOP按钮添加事件
1、点击面板页面,不要选择任何控件,添加用例如下:
NO1:页面载入时,隐藏TOP按钮;
NO2:窗口向下滚动时,显示TOP按钮;
NO3:窗口向上滚动时,隐藏TOP按钮,动画逐渐,时间500毫秒;
1532764561(1).jpg

2、选中TOP按钮,添加如下事件:
NO1:鼠标点击时,滚动到原件(锚链接),选中第三步的锚点,动作时间可以自己选;
1532764713.jpg

以上四个步骤就可以制作一个完美的TOP按钮,大家学会了吗?

AXURE8如何制作top返回按钮DEMO下载:
AXURE8如何制作top返回按钮DEMO.zip

最后编辑:2018年07月28日 ©著作权归作者所有

发表评论

×