【axure手机原型】Axure实现iPhone推动切换效果

转载自：老二牛车教育 » 【axure手机原型】Axure实现iPhone推动切换效果

我们在产品原型设计时，经常需要制作高保真原型，在视觉效果及交互体验上尽量与最终产品相近，以便向别人展示或者供用户调研时使用。

移动平台的交互方式非常丰富，下面就像大家介绍几种iPhone上常用的交互动作在Axure中的实现方式。

我们首先在Axure中建立一个iPhone的外壳模型作为主模拟界面。白色区域为屏幕显示区域，大小为320px*480px（iPhone屏幕的1/4大小，方便浏览）



推动切换

推动切换经常用于层级转换时，当点击操作完成后需要切换至下一层级界面时，当前界面向左推出，新界面从右侧推入。此操作多用于有层级关系的界面之间的切换。

实现步骤：

1.建立一个动态面板，尺寸320*480，命名为“屏幕”，放置在iPhone框架中的白色区域。此动态面板的作用是将可见内容限制在屏幕显示范围内。



2.进入动态面板“屏幕”中，再建立一个动态面板，位置（0,0），尺寸640*480，命名为“推动切换”。此动态面板的作用是控制界面切换的动作。



3.进入动态面板“推动切换”，在有效区域绘制两个320*480的色块（给色块设置不同颜色以方便区分）及按钮。



4.选中“点击切换”按钮，为其添加单击时的交互动作：当单击该按钮时，动态面板“推动切换”向左移动320px，即显示屏幕由左侧白色屏幕切换至右侧灰色屏幕。



移动位置有两种方式：（绝对 左：-320 上：0）或者（相对 左：-320 上：0）可以达到同样的效果。

绝对移动是将动态面板移动到一个固定的坐标，相对移动是将动态面板沿左/上移动相应距离。若动态面板移动到一个固定的位置或者可以获取准确的位置数据，推荐使用绝对移动，因为相对移动较容易出现多次点击会连续移动的bug。二者区别及适用情况需要在交互动作制作过程中多多体会。

动画中有“挥动”“线性”“缓慢结束”“弹跳”等多种动作方式可供选择，可根据实际需要进行设置。

5.同理，为“点击返回”按钮添加交互动作，点击该按钮后切换回之前的状态



至此，推动切换效果制作完成.

转载请注明：老二牛车教育 » 【axure手机原型】Axure实现iPhone推动切换效果