cloud

使用Axure模拟高仿真iPhone交互动作(2)——覆盖切换

覆盖切换

覆盖切换常用于需要用户输入内容或者选择操作的情况,具体效果为屏幕下方弹出界面将原有界面覆盖,完成操作后向下收回,显示原有界面。此操作一般表示界面之间没有层级性关联,弹出界面更像是一个临时界面,用完即关闭。

实现步骤:

1.在屏幕上放置一“点击切换”按钮。

2.建立一个动态面板,尺寸320*480,命名为“屏幕”,放置在iPhone框架中的白色区域。然后“右键—编辑动态面板—设置隐藏”将其显示状态设置为隐藏(之后说明原因)

3.进入动态面板“屏幕”,建立一个动态面板,位置(0.480)(即放置在有效区域下方),尺寸320*480,命名为“覆盖切换”。

4.进入动态面板“覆盖切换”,在有效区域绘制灰色色块(为方便与上一屏幕区分)及 “点击返回”按钮。

5.为“点击切换”按钮添加交互动作:单击时显示动态面板“屏幕”且动态面板“覆盖切换”上移至坐标(0,0),即屏幕位置

小Tips:上层覆盖动态面板导致无法选中下层的元素时,可以在右侧的动态面板管理中关闭动态面板的可见性。

6.同理为点击“返回按钮”添加交互动作:单击时动态面板“覆盖切换”下移至(0,480),500毫秒后隐藏动态面板“屏幕”

至此,覆盖切换效果制作完成。

 

说明:动态面板“屏幕”初始状态需要置为“隐藏”是因为显示状态下的动态面板下层的按钮是不可点击的,若不设置成隐藏则“点击切换”按钮无法点击。

同理,单击“点击返回”按钮后,要设置“等待500毫秒”后隐藏动态面板“屏幕”,以便“点击切换”按钮继续起作用。(500毫秒为动态面板“覆盖切换”移动时间,实际使用中需要配合动作时间进行相应修改)

   
© cloud | Powered by LOFTER
评论(1)
热度(9)
  1. Singki Zhoucloud 转载了此文字
  2. 变乖De小米cloud 转载了此文字