Axure RP9进阶教程之动态面板篇

动态面板是Axure中使用范围最广泛的控件之一，其核心特点是能够多状态切换，同时通过多个状态，实现不同业务场景下的元件管理以及切换。动态面板通过特有的“状态”属性，实现对多个元件的包含和管理，可以放置任何元件，包括动态面板本身，设计效果更加丰富。动态面板广泛应用在许多场景中，例如页面内容多一屏显示不完，需要滚动显示、需要切换内容、显示隐藏交互等等。

接下来我们用实例演示一下动态面板的使用方法。

一、滚动列表

拖入动态面板，设置大小

双击进入状态1，添加表格，设置为根据需要滚动

点击演示

为了更好的交互效果，我们可以再进一步优化，将动态面板长度拖到适合列表长度，在动态面板上层复制一个只有一行的表格作为表头，实现表头固定的效果。同样的方法也可以做首列或者尾列固定。

二、tab标签页切换

拖入两个按钮作为tab标签按钮，也可以直接搜索tab标签，使用元件库中封装好的tab标签元件。拖入动态面板，双击进入状态1，更改名称，添加内容，复制状态1为状态2，更改名称，添加内容，点击演示，点击按钮发现并没有切换效果，这时需要为按钮添加点击事件。

给按钮添加鼠标单击时触发事件，事件为设置面板状态。选择动态面板，用户管理按钮选择面板状态为“用户管理”，配置管理按钮选择面板状态为“配置管理”。再次演示，发现已经实现了切换效果。

三、风琴菜单

拖入按钮，文字改为“菜单一”，右键单击按钮，选择转化为动态面板，动态面板状态1改为“收起”，复制“收起”，改名为“展开”，在“展开”的“菜单一”按钮下面添加两个按钮，分别设置名称为子菜单一，子菜单二。

为动态面板添加点击事件，单击改变动态面板状态，选择下一个，勾选从最后一个到第一个自动循环。勾选“展开/收起原件”，勾选“向下”，点击演示，发现可以实现点击展开，再点击收起的效果。

为了展示“展开/收起元件”效果，我们复制“菜单一”为菜单二，放在“菜单一”下方，演示可以看到点击菜单一展开收起时，菜单二跟随移动，实现了手风琴效果的菜单。

四、弹窗

画布添加按钮，文字改为“提交申请”，画布添加动态面板，双击进入状态1，添加文字“确认提交”，添加关闭按钮，添加提示文字“确认要提交申请吗？”，添加两个按钮，文字分别改为“取消”“确认”。

为“确认提交”按钮添加单击事件，选择显示隐藏动态面板，选择动态面板，默认勾选“显示”，勾选“置于顶层”，效果选择“遮罩效果”，设置遮罩背景色为灰色透明。并将动态面板设置为隐藏，样式选择为固定到浏览器横竖都居中。

设置动态面板背景为白色，不透明。为动态面板关闭按钮、确定、取消按钮添加鼠标单击事件，单击时隐藏动态面板。演示可见已经实现了二次确认弹窗效果。

五、联动

以二级地址联动为例，拖入下拉列表，设置选项为“请选择省”、“山东”、“山西”，默认勾选“请选择省”。复制下拉列表，并将其转换为动态面板，状态1改为“山东”，更改选项为“济南”、“青岛”。复制“山东”为“山西”，更改选项为“太原”、“大同”。

为“省”下拉列表添加“所选内容改变时”事件，添加用例1：所选内容为“山东”时，更改动态面板状态为“山东”。用例2：所选内容为“山西”时，更改动态面板状态为“山西”。点击演示，可见，实现简单的二级地址联动效果。

总结：

本文我们通过5个原型设计中常用的实例，深入了解了动态面板的使用方法，除了以上几种用法，动态面板还可以用来实现循环控制、计时控制等更加复杂的交互效果。在产品设计中动态面板的使用频率非常高，掌握了它的使用，能够很好的提高原型质量。