交互学堂
专注分享专业知识

Axure 8.0手机页面拖动弹回效果

Axure RP8.0教程 手机页面的拖动和弹回效果 。

  1. 用户向上拖动页面,页面向上滑动。

  2. 用户向下拖动页面,页面向下滑动。

  3. 当用户拖动页面到最底部时,页面弹回显示第一屏。

  4. 当用户拖动页面到最顶部时页面弹回显示最后一屏。

步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。

Axure 8.0手机页面拖动弹回效果

步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下样式还有调整一下大小和位置,制作成一个网页列表如下图所示

Axure 8.0手机页面拖动弹回效果

步骤三选择页面中列表页下面所有的部件,将他们转换成为一个动态面板,将这个动态面板的名称命名为拖动,将这个动态面板的名称命名为拖动,将这个拖动面板宽度大小为手机的内部宽度大小,高设置为手机内部高度减去列表页部件的高度大小。

Axure 8.0手机页面拖动弹回效果

步骤四点击进入到拖动面板的状态1页面中,按照一定的列表顺序继续制作这个页面的列表,使这个列表的高度远远超过拖动动态面板的高度,选择页面中所有的列表部件将他们转换成一个新的动态面板,为了区分将这个动态面板的名称命名为拖动2

Axure 8.0手机页面拖动弹回效果

步骤五现在我们来设置拖动2面板的交互动作,当我们拖动面板时,面板X轴是不变的只会改变Y轴的位置,所以我们在拖动2面板的动作交互,拖动动态面板时移动拖动2面板垂直轴拖动。

Axure 8.0手机页面拖动弹回效果

步骤六接下来我们需要设置两个矩形为动态面板拖动2设置一个参考,拖动两个矩形移动到到手机界面上一个矩形命名为顶部,调整位置到列表页下面,一个矩形下命名为底部,调整位置到手机底部内边框位置,将这矩形跳转一下层的顺序,设置到最底层。

Axure 8.0手机页面拖动弹回效果

步骤七我们返回到拖动面板的状态1页面,设置一下拖动2的,结束拖动动态面板时,的交互动作,在弹出的用例编辑器中,编辑一下条件当动态面板拖动2的部件范围未接触到顶部参考线时,移动拖动2面板到绝对位置(0,0)将拖动2面板弹回显示第一屏位置。

Axure 8.0手机页面拖动弹回效果

Axure 8.0手机页面拖动弹回效果

步骤八在设置,当结束拖动动态面板,第二个交互动作,当动态面板拖动2的部件范围未接触到底部参考线时拖动2面板到绝对位置(0,-1424)Y轴的位置计算方法为拖动面板的高度减去拖动2面板的高度将拖动2面板弹回显示最后一屏位置。

Axure 8.0手机页面拖动弹回效果

赞(0) 打赏
未经允许不得转载:IAMUE » Axure 8.0手机页面拖动弹回效果

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏