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

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格，现已成为设计Web AP的重要工具。

免费下载Axure RP  优惠购买Axure RP

本文主要介绍Axure RP动态面板控件及其使用方法、如何通过交互动作引发动态面板的交互、动态面板使用案例等内容。

1、动态面板控件

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

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

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

2. 编辑动态面板的状态

在线框图中，双击动态面板可以打开一个“Dynamic Panel State Manager”对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态。

第一个状态是动态面板的默认状态。在对话框中选中一个状态，然后点击“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月，庆圣诞、迎元旦，上“慧都网”小程序签到兑商城通用抵价券>>>   软件商城专属优惠价，领优惠券再享折上折>>>