使用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.同理，为“点击返回”按钮添加交互动作，点击该按钮后切换回之前的状态

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

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。