使用Axure模拟高仿真iPhone交互动作（6）——收起展开

收起展开

收起展开主要用于使用标题栏展开或收起其对应内容的操作。

实现步骤：

1.建立一个动态面板，尺寸320*480，命名为“屏幕”，放置在iPhone框架中的屏幕区域。

2.进入动态面板“屏幕”，再建立一个动态面板，尺寸320*160，命名为“收起展开1”，放置在有效区域最上方。

3.进入动态面板“收起展开1”，建立一个动态面板，尺寸为320*40，命名为“收起展开1标题”，放置在有效区域最上方，作为点击操作及状态提示区域。动态面板“收起展开1标题”设置两种状态，分别为“点击收起1”及“点击展开1”。

4.再建立一个动态面板，尺寸320*120，命名为“收起展开1内容”，放置在“收起展开1标题”下方（此时两个动态面板正好占据整个有效区域）。

注意：内容层要放在标题层之下，否则内容层收起时会覆盖在标题层上，造成标题层无法操作。

5.进入动态面板“收起展开1标题”的“点击收起1”状态，在有效区域绘制一个白×××块，并写上“点击收起1”，作为收起动作触发按钮。

6.同理，“点击展开1”状态中放置白×××块并写上“点击展开1”。

7.进入动态面板“收起展开1内容”，在有效区域绘制一个灰×××块并写上一些文字以便和标题进行区分。

8.同理，在动态面板“屏幕”中再制作两个动态面板“收起展开2”及“收起展开3”，方式及内容同“收起展开1”。

小Tips：建立多层及多个动态面板时一定要把每个动态面板及其状态命名清楚，这样有利于我们设置交互动作时更加清晰直观，不易出错。

9.设置收起展开的交互动作。

动作分析：点击“点击收起1”时，内容1向上收起，动态面板“收起展开2”及“收起展开3”同时向上移动，其他同理。

简单总结就是：1控制1、2、3，2控制2、3，3控制3。

进入动态面板“收起展开1标题”的“点击收起1”状态，为其设置单击时的交互动作。

首先是收起的动作：

注意：这里用的是相对移动。

待动作完成后（等待500毫秒），“收起展开1标题”状态转换为“点击展开1”。

同理设置“点击展开1”状态

同理设置动态面板“收起展开2标题”及“收起展开3标题”的交互动作

“点击收起2”交互动作

“点击展开2”交互动作

“点击收起3”交互动作

“点击展开3”交互动作

至此，收起展开效果制作完成。

总结

以上提供的几个动作只是一些最为基础的交互模拟，使用熟练后可以结合几种基本动作做出更为复杂的交互动作模拟，以达到更接近真实效果的交互体验。

Axure只是提供一个仿真的模拟平台，高保真模型制作过程中也要衡量其复杂度，不应在上面花费过多的时间却浪费了更为宝贵的设计时间

转载于:https://blog.51cto.com/yerik/1168373