Axure高仿真iPhone交互动作 模拟推动切换

0
5,272 views

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

移动平台的交互方式非常丰富,下面就像大家介绍几种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.同理,为“点击返回”按钮添加交互动作,点击该按钮后切换回之前的状态

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

回复

请输入你的评论!
请在这里输入您的名字