快速原型设计工具Axure RP高级交互设计教程（一）：动态面板控件的使用

1、动态面板控件

动态面板控件可以让你的原型实现高级的动态交互功能。

动态面板包含有多个状态（states），每个状态可包含一系列控件。任何时候都只有一个状态是可见的，或这整个动态面板可以被隐藏。

结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像其它控件一样，你可以在控件面板中拖拉动态面板控件，将动态面板控件添加到线框图中。

第一个状态是动态面板的默认状态。在对话框中选中一个状态，然后点击“Edit State”按钮，就可以打开一个状态线框图进行状态设计。状态设计和线框图设计是一样的，状态线框图中的蓝色虚线外框表示动态面板的范围边界。

3. 隐藏动态面板

只要选择动态面板，右键菜单选择“Edit Dynamic Panel->Set Hidden”即设置动态面板在默认时隐藏。这将会隐藏面板内容，动态面板的遮罩会由蓝色变为黄色。

4. 交互动作和动态面板

交互动作可以引发动态面板的交互。在“Interaction Case Properties”对话框中包含了以下可以引发动态面板交互的动作：

•  Set Panel state(s) to State(s)

• Show Panel(s)

• Hide Panel(s)

• Toggle Visibility for Panel(s)

• Move Panel(s)

选择其中一个动作就可以和动态面板进行交互，并且可以在对话框下部的“Actions descriptions”选择一个要链接的状态。

在控件注释和交互面板中，可以在Label输入框中对动态面板进行标识，以后就可以引用这个动态面板。如果没有为动态面板指定 label，动态面板会被标识为“Unlabeled”。

5、动态面板使用案例

Tab页签

动态面板可用于创建一个Tab页签控件。如Tab页签控件有3个tab，则该tab控件被包含在拥有3个状态的动态面板中，每个状态代表一个tab。对每个tab都有一个交互动作，当点击某个tab时，就会切换到动态面板的对应状态。

弹出菜单 

动态面板可以用于在原型中自定义弹出菜单，或根据鼠标移动动态的显示和隐藏菜单，但需要结合OnMouseEnter事件和动作来实现。

页面动态初始化 

动态面板和OnPageLoad事件结合，可实现根据变量值进行页面初始化。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

12月，庆圣诞、迎元旦，上“ ”小程序签到兑商城通用抵价券>>>   软件商城专属优惠价，领优惠券再享折上折>>>

标签：