axure拖动页面_如何利用axure实现移动端页面拖动展示效果

当一位有PC端原型设计经验的产品人员，设计移动端产品原型时，遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时，利用鼠标滚轮进行整个页面的展示，然后到了移动端，利用手指进行拖动，滑动展示整个页面。两种交互方式截然不同。

axure制作移动端产品原型时，会遇到很多难题，建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然，axure是完全可以实现移动端交互的，只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标。

接下来进入主题，跟大家分享一下​【如何利用axure实现移动端页面拖动展示效果】

打开axure前，大家不妨先设想一下任务的实现方法：

​1、移动端显示的页面是固定尺寸的，里面的整体页面可能会超出固定尺寸范围，所以我们需要建立一个动态模板，使其成为固定尺寸的页面，而将超长的整体页面放入其中。

2、整体页面必须可以被拖拽，所以整体页面又是一个动态面板

3、在我们使用移动端产品，进入页面后，向下拖拽，一般页面会被下拉，而且上方会出现【放开刷新】的提示​；同理，我们手指上滑，页面被拖至底部，再不停上滑，页面会被上拉，手指放开后，页面下滑至原位。所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时，自动返回原位的交互

这三个实现方法，是我们实现拖动交互的主要思路。接着我们就具体看一下如何在axure中实现目标。​

1、准备工作：打开axure，新建文档，添加一张iphone的背景素材，顶部添加的wifi和电量的信息&#