原型设计工具Axure RP参考（十三）：动态面板小部件（上）

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

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

动态面板是一个容器，用于将其他小部件保存在称为“状态”的集合中。动态面板可以具有一个或多个状态，并且一次只能显示其中一种状态。可以使用“设置面板状态”操作来动态设置可见状态，这使动态面板非常适合创建轮播和幻灯片显示。

动态面板是唯一的，因为它们是唯一可以在Web浏览器中拖动或滑动的窗口小部件类型。 它们也是唯一可以固定在浏览器窗口中固定位置的窗口小部件类型，使其成为始终可见的导航标题和侧边栏的理想选择。（此为动态小部件的上部分，点击此处查看下部分）

创建动态面板

从库窗格中拖动

默认窗口小部件库中有一个空的动态面板窗口小部件。 从“库”窗格拖到画布上的动态面板将以一个可以添加小部件的空状态开始。

注意：该动态面板的尺寸默认情况下是固定的，因此，如果要自动调整其大小以适合其包含的小部件，请确保在其上启用“适合内容”。

使用现有小部件创建

您可以使用画布上已有的小部件创建新的动态面板。 选择一个或多个窗口小部件，单击鼠标右键，然后在上下文菜单中选择“创建动态面板”。 这将创建一个新的适合内容的动态面板，其单个状态包含所选小部件。

动态面板蒙版

动态面板默认情况下覆盖有蓝色蒙版，以使它们更容易在画布上发现。 您可以在应用程序菜单的“视图”→“蒙版”中切换蒙版。

注意：Web浏览器中未应用窗口小部件掩码，包括动态面板掩码。

管理状态

在画布上

双击画布上的动态面板以进入状态编辑模式，该状态由蓝绿色边框和画布周围的工具栏指示。

在此模式下，您可以在动态面板的状态下添加，删除和编辑窗口小部件。 您还可以通过单击画布右上方的“隔离”来切换动态面板外部小部件的可见性。

要编辑动态面板状态本身，请单击画布顶部的当前状态名称。 在显示的下拉菜单中，您可以执行以下操作：

• 单击州名以在画布上查看其小部件
• 单击州名称右侧的Duplicate State图标，以复制该州名称
• 单击州名称右侧的Delete State图标将其删除
• 单击下拉列表底部的添加状态以创建新状态
• 上下拖动状态名称以对其进行重新排序（最上面的状态是默认情况下可见的状态）

在大纲窗格中

在“概述”窗格中选择一个动态面板状态或其包含的小部件之一，以打开状态以在画布上进行编辑。要快速将现有窗口小部件移入或移出动态面板状态，请将其拖动到“轮廓”窗格中。

要将新状态添加到动态面板，请将鼠标悬停在其名称上，然后单击右侧的“添加状态”图标。同样，您可以通过将鼠标悬停在名称上并单击右侧的“复制状态”图标来复制状态。选择一个状态，然后按DELETE将其删除，或者右键单击并在上下文菜单中选择“删除”。

要重新排列动态面板的状态，请上下拖动它们或右键单击它们，然后使用上下文菜单中的选项。最高状态是默认情况下可见的状态。

提示：如果动态面板妨碍您与画布上的其他小部件进行交互，则可以通过在“轮廓”窗格中单击其名称右侧的“从视图隐藏”图标来暂时将其隐藏。这将在画布上隐藏面板，但在Web浏览器中仍将可见。要再次显示面板，请再次单击该图标。

第一个脱离

Break Away First State选项允许您删除动态面板的第一个状态，并将其包含的所有小部件放置在面板外部的画布上。要访问此选项，请在动态面板上单击鼠标右键，然后在上下文菜单中选择“第一个脱离”。

注意：如果动态面板只有一个状态，则中断该状态也会删除该面板。

本文是动态面板小部件的上部分，后面会持续更新下部分，希望持续关注本教程。

推荐阅读：

原型设计工具Axure RP入门教程

原型设计工具Axure RP新手教程

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。