什么是动态面板

动态面板是Axure的高级交互元件&＃xff0c;由不同的状态面板组成&＃xff0c;是我们制作交互过程中运用频率最高的元件&＃xff0c;很多交互效果需要依赖动态面板实现。动态面板的状态面板就像是一个容器&＃xff0c;我们可以在里面放置任何东西&＃xff0c;自由发挥我们的设计创意&＃xff0c;甚至是为面板中的设计元素添加交互事件&＃xff0c;这一切就好像是在一个新的画布当中进行页面设计。

添加动态面板

在Axure中我们有两种方法添加动态面板。

方法一&＃xff1a;从Default元件库直接拖拽动态面板元件至设计区域。

方法二&＃xff1a;选中需要转换的目标元件&＃xff0c;鼠标右键单击选择操作命令【转换为动态面板】。

编辑动态面板

动态面板是由不同的状态组成&＃xff0c;每一个状态里面都可以包含多个元件。同一时间&＃xff0c;动态面板只能显示一个状态&＃xff0c;通过控制这些面板的显示状态&＃xff0c;可以实现很多丰富的交互效果。

编辑动态面板状态&＃xff1a;双击动态面板选择状态进行编辑&＃xff0c;进入状态面板中&＃xff0c;我们会看到中间有一个虚线框&＃xff0c;虚线框内部为设计区域。我们的设计工作就是在这个虚线框内部完成&＃xff0c;我们可以通过改变动态面板的尺寸来调整虚线框的大小。

管理动态面板状态&＃xff1a;双击动态面板进入状态编辑模式&＃xff0c;点击设计区域上方可以管理动态面板的状态&＃xff0c;在这里可以增加状态、复制状态、删除状态。

隔离模式&＃xff1a;默认情况下&＃xff0c;动态面板的状态就像一个封闭的黑盒&＃xff0c;将动态面板与外面的世界进行了隔离&＃xff0c;在这个盒子当中看不到外在的东西。当我们点击状态面板右上角的隔离按钮&＃xff0c;这个封闭的黑盒将变成透明的黑子&＃xff0c;可以看到动态面板以外的设计元素&＃xff0c;但这个盒子依旧是封闭的&＃xff0c;对于动态面板以外的设计元素&＃xff0c;我们只能查看&＃xff0c;不能进行操作。

关闭状态&＃xff1a;点击状态面板右上角的关闭按钮&＃xff0c;则退出动态面板状态&＃xff0c;回到页面视角。

动态面板样式

滚动条&＃xff1a;当动态面板尺寸小于内容尺寸时&＃xff0c;需要为动态面板设置滚动条以便查看完整内容。滚动条有四种样式设置&＃xff0c;包含&＃xff1a;禁止滚动、按需滚动、垂直滚动和水平滚动。选中动态面板&＃xff0c;在右侧样式面板中下拉选择滚动条样式。

100%宽度&＃xff1a;选择此项后&＃xff0c;在浏览中查看原型时&＃xff0c;动态面板的宽度将自适应浏览器宽度&＃xff0c;不会出现水平滚动条&＃xff0c;一般用于通栏设计。需要注意的是动态面板的内容宽度要大于浏览器的宽度。选中动态面板&＃xff0c;可以通过右侧的样式面板进行设置。

固定到浏览器&＃xff1a;始终固定在窗口的某个特定位置&＃xff0c;如App的底部导航&＃xff0c;资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板&＃xff0c;点击右侧样式面板的“固定到浏览器”&＃xff0c;勾选固定到浏览器窗口&＃xff0c;选择固定位置的方向&＃xff0c;设置边距&＃xff0c;勾选保持在前面(将动态面板图层置顶)。

动态面板事件

动态面板作为Axure的高级元件&＃xff0c;有一些自己专有的交互事件&＃xff0c;如&＃xff1a;动态面板状态改变时、拖动时、拖动结束时、向左/右/上/下拖动结束时、滚动时、向上滚动时、向下滚动时。

01状态改变时

该事件是由“设置面板状态”动作触发的。这个事件常用于需要进行不停改变面板状态的一连串交互动作&＃xff0c;如轮播图的循环播放。

02拖动事件

拖动时、向左/右/上/下拖动结束时&＃xff0c;允许我们针对拖动过程中&＃xff0c;拖动结束后设置不同的交互&＃xff0c;其中拖动结束后还可以根据拖动的方向设置不同的交互。如果你有拖动方面的需求&＃xff0c;可以将这些需要拖动的元件或元件组合转换为动态面板。

拖动时&＃xff1a;用于面板的拖动过程中。

向左拖动结束时&＃xff1a;面板向左拖动&＃xff0c;且完成拖动动作。

向右拖动结束时&＃xff1a;面板向右拖动&＃xff0c;且完成拖动动作。

向上拖动结束时&＃xff1a;面板向上拖动&＃xff0c;且完成拖动动作。

向下拖动结束时&＃xff1a;面板向下拖动&＃xff0c;且完成拖动动作。

03滚动事件

滚动时、向上滚动时、向下滚动时&＃xff0c;允许我们针对滚动过程中&＃xff0c;不同的滚动方向设置不同的交互。我们希望向上或向下滚动时&＃xff0c;显示不同的内容&＃xff0c;这个时候我们就可以将这些有滚动需求的元件转换为动态面板。有些时候&＃xff0c;还需要根据滚动的距离显示不同的页面或内容。

交互案例

案例1&＃xff1a;进度条加载

1. 在设计区域中添加一个动态面板&＃xff0c;命名为“状态指示器”&＃xff0c;为动态面板添加两个空状态。

2. 添加两个相同尺寸的矩形&＃xff0c;将其中一个矩形填充为橙色&＃xff0c;并与另一个矩形重合对其。将橙色矩形转换为动态面板&＃xff0c;命名为“进度条”&＃xff0c;将进度条动态面板的宽度设置为1&＃xff0c;另外一个矩形命名为“背景”。

3.点击页面空白处&＃xff0c;点击【新建交互】按钮&＃xff0c;选择【页面载入时】事件&＃xff0c;添加动作【设置面板状态】&＃xff0c;设置状态指示器向后循环切换&＃xff0c;循环间隔100毫秒。

4. 选中状态指示器动态面板&＃xff0c;点击【新建交互】按钮&＃xff0c;选择事件【状态改变时】&＃xff0c;添加动作【设置尺寸】&＃xff0c;为“进度条”动态面板设置尺寸&＃xff0c;宽度尺寸设置为[[LVAR2.width&＃43;LVAR1.width/100]]&＃xff0c;其中LVAR1为背景&＃xff0c;LVAR2为进度条动态面板&＃xff0c;如下图所示&＃xff0c;高度设置为进度条动态面板的高度。点击添加情形&＃xff0c;设置逻辑条件&＃xff0c;当进度条宽度小于背景宽度&＃xff0c;执行刚才的【设置尺寸】动作&＃xff0c;设置如下图所示。

5. 选中状态指示器动态面板&＃xff0c;为指示器添加添加第二个情形&＃xff0c;添加动作【设置面板状态】&＃xff0c;将状态指示器设置为停止循环。

6. 拖动文本标签至设计区域&＃xff0c;命名为“百分比”。选中进度条动态面板&＃xff0c;点击【新建交互】按钮&＃xff0c;添加【尺寸改变时】事件&＃xff0c;添加【设置文本】动作。设置百分比文本的内容为[[Math.floor(LVAR1.width/LVAR2.width*100)]]%&＃xff0c;其中LVAR1为进度条&＃xff0c;LVAR2为背景。Math.floor为向下取整函数&＃xff0c;获取小于等于指定数值的最大整数。

7. 设置完毕&＃xff0c;点击预览按钮&＃xff0c;在浏览器中查看原型。

案例2&＃xff1a;音量调节器

1. 从元件库拖动喇叭图标、矩形、圆至设计区域&＃xff0c;为矩形和圆设置填充色&＃xff0c;调整好矩形和圆的尺寸&＃xff0c;调整时&＃xff0c;注意圆的高度大于矩形的高度。将矩形命名为“音量杆”。

2. 选中圆&＃xff0c;鼠标右键单击选择命令“转换为动态面板”&＃xff0c;动态面板命名为“调节球”。选中动态面板&＃xff0c;点击【新建交互】按钮&＃xff0c;选择【拖动时】事件&＃xff0c;选择【移动】动作&＃xff0c;设置调节球沿水平直线移动&＃xff0c;设置调节球移动边界&＃xff0c;左侧大于音量杆的水平坐标&＃xff0c;右侧小于音量杆的水平坐标&＃43;音量杆的宽度。移动边界的表达式为左侧>[[LVAR1.x]]&＃xff0c;右侧&＃xff1c;[[LVAR1.x&＃43;LVAR1.width]]&＃xff0c;其中变量LVAR1为音量杆。

3. 设置完毕&＃xff0c;点击预览按钮&＃xff0c;在浏览器中查看原型。

案例3&＃xff1a;轮播图

1. 拖拽动态面板元件至设计区域&＃xff0c;双击动态面板&＃xff0c;进入编辑状态。为面板添加3个状态&＃xff0c;并且为每个状态分别导入一张同样尺寸的图片。

2. 选中动态面板&＃xff0c;点击【新建交互】按钮&＃xff0c;选择【载入时】事件&＃xff0c;选择【设置面板状态】动作。选择当前元件&＃xff0c;状态设置为下一项&＃xff0c;勾选向后循环&＃xff0c;进入和退出动画选择向左滑动&＃xff0c;动画时间为500毫秒&＃xff0c;循环间隔设置为2000毫秒&＃xff0c;点击“完成”按钮。

3. 设置完毕&＃xff0c;点击预览&＃xff0c;在浏览器中查看原型

写在末尾

感谢大家的耐心阅读&＃xff0c;如果你有兴趣学习原型设计或Axure交互设计&＃xff0c;不妨关注下我的新书《Axure RP9实用教程&＃xff1a;原型&＃43;高保真&＃43;交互&＃43;设计》马上就要上市了&＃xff0c;这是我十年来作为产品经理的实战经验总结。这本书由浅入深讲解了Axure RP9的基础功能&＃xff0c;讲解过程中结合具体的案例帮助大家加深对元件交互功能的理解。最后两个章节&＃xff0c;都是满满的干货案例&＃xff0c;旨在通过具体的元件交互案例和页面制作案例&＃xff0c;帮助大家找到Axure RP9的交互使用场景&＃xff0c;同时也是检查并巩固理论学习的过程。读完这本书&＃xff0c;你一定能够轻松驾驭Axure这款工具的使用&＃xff0c;绝对物超所值。下图是本书的封面及目录结构。

本书在京东商城、当当网均有销售&＃xff0c;当然您也可以关注我的专栏学习Axure RP9教程。