来自一个小萌新的Axure的上下滑动效果制作
用Axure做原型是一个很不错的选择,我们前端经常依靠界面设计从而制作页面。这次是做一个当我们在界面上用手指滑动时,手机页面也就跟随滚动,拖拽到底部或者顶部的时候还有个回弹效果。
实现步骤如下:
1. 首先创建两个矩形。
一个命名为顶部:(x:0,y:0,w:300,h:50)
一个命名为底部:(x:0,y:350,w:300,h:50)
如图:
2. 在它们中间加一个动态面板。命名为内容。尺寸:(x:0,y:50,w:300,h:300)
如图:
- 双击“内容”的动态面板,点击State 1,然后在新打开的界面添加一个动态面板,命名为“底部面板”。这个面板因为是我们滚动的主要内容,所以应该比“内容”的动态面板高度要高,尺寸:(x:0,y:0,w:300,y:600)
- 这个时候可以往我们的“底部面板”添加内容了,因为我比较懒,所以添加个矩形就好了,大小不要超过“底部面板”。填充颜色为蓝色。命名为“主要内容”。记得一点,一定要放在底部面板的state1里面,不要放外面啊。不然等会拖动不了。尺寸:(x:0,y:0,w:300,h:600)
- 点击右下角的结构页面里的“内容”动态面板。在右上角那里双击交互内容里面的“拖动时”,设置“移动”,下面的设置如图。
- 后面在设置拖动完之后的动作了。往里面添加条件。因为这时候我们要防止我们拖动结束之后时,页面会超出我们的屏幕。所以要增加一些限制。条件如图当我们设置好条件。如图。
- 还要再添加一个用例在拖动结束之后。跟上面的设置差不多,注意的一点是不要弄错y的位置。
- 大功告成,点击预览看一下是否能够拖动吧!如果不能再看一下步骤或图片里的注意事项吧。