cloud

使用Axure模拟高仿真iPhone交互动作(1)——推动切换

 

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

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

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


   
© cloud | Powered by LOFTER
评论(4)
热度(45)
  1. Singki Zhoucloud 转载了此文字
  2. 变乖De小米cloud 转载了此文字
    这套教程不错,很适合交互入门者,like me,哈哈!一口气6课都学完了,希望原作者继续更新呀!!
  3. tiramisucloud 转载了此文字
    我很喜欢
  4. 多情周公子cloud 转载了此文字
    学习!
  5. LensEriccloud 转载了此文字
  6. 新经济追随者cloud 转载了此文字
  7. maxdcloud 转载了此文字
  8. 呆呆cloud 转载了此文字
  9. zmingchuncloud 转载了此文字
  10. Doctorcloud 转载了此文字
  11. 未命名cloud 转载了此文字
  12. 泰雷大粑粑cloud 转载了此文字