Dynamic Panel(动态面板),是Axure的使用范围特别广泛的一个高阶容器类元件, 通过特有的 状态(State) 属性,实现对多个元件的包含和管理,同时通过多个状态,实现不同业务场景下的元件管理以及切换。
Dynamic Panel(动态面板) 的这种容器和多状态特性,使同一页面内,可容纳的元件更多,可进行设计效果也更丰富。因此广泛应用于一些需要切换内容、显示隐藏的交互原型设计中。比如常见的弹窗、跑马灯等设计。

下面,就让我们继续结合前面的原型案例,来学习一下 Dynamic Panel(动态面板) 常见用法。
正式开始我们样式设置前,先让我们把准备工作做好。
双击 “博客.rp” 文件,打开Axure以及原型文件。
双击 “登录” 页面,画布上打开页面。
点击 Preview(预览),浏览器上打开原型。
准备工作做好了,继续我们的原型设计。
要学习 Dynamic Panel(动态面板),首先要先创建动态面板。Axure提供了两种动态面板的创建方法,一种是直接通过 Libraries(元件库) 面板 Default(默认) > Common(通用) 元件库中拖动 Dynamic Panel(动态面板) 到画布上;另一种是通过选中画布上的选择来创建。
第一方式和其它元件的添加方式一样,这里小哥就不赘述了,而且第一种方式使用的频率也不高。实际场景中,第二种方式用的比较多,我们这里重点讲讲第二种创建 Dynamic Panel(动态面板) 的方式。

原型设计中,“登录”和“注册”页面的设计,大部分是大同小异的,这里我们使用 Dynamic Panel(动态面板) 对登录页面进行一下改造,同时支持“登录”和“注册”两个功能。
CTRLA(CMDA)或鼠标在画布上拖动,选中登录页面中全部元件;
鼠标右键选中元件,选择 Create Dynamic Panel(创建动态面板)。
通过上面两个步骤,我们就成功通过画布上已有的元件,成功创建了 Dynamic Panel(动态面板)。在画布上,Dynamic Panel(动态面板) 是通过浅蓝色遮罩和其它元件进行区分的。而 Dynamic Panel(动态面板) 中的元件,都显示在透明浅蓝色遮罩所区域内。
上面我们讲过,动态面板是通过 State(状态) 对元件进行管理的。同时通过多个状态,对不同原型设计进行管理。
下面,我们就来对 Dynamic Panel(动态面板) 的状态进行编辑和管理。
要对 Dynamic Panel(动态面板) 的状态进行编辑和管理,首先,我们需要进入 Dynamic Panel(动态面板) 的状态中。
操作很简单,只需要选中 Dynamic Panel(动态面板) 并双击,就会进入到动态面板的第一个状态中。
在画布顶部,我们可以看到当前状态的名称,通过点击状态名称,就可以查看 Dynamic Panel(动态面板) 全部状态,以及对状态进行添加、复制、删除等操作。
默认情况下,新创建的 Dynamic Panel(动态面板) 只有一个状态。

下面,我们来给 动态面板新增一个状态。
点击 动态面板(Dynamic Panel) 顶部工具栏正中位置的状态名称,打开状态管理列表;
点击状态列表底部的 添加状态(Add State),就会在 状态1(State1) 下方添加新的状态 状态2(State2),同时打开 状态2(State2);此时的 状态2(State2) 中没有任何元件,是一个空白状态。
默认情况下,Axure会按 状态1(State1)、状态2(State2)、状态3(State3)……的顺序补足添加状态;通过选中连续点击状态名称,可以修改状态的名称。我们把 状态1(State1) 名称改为 “登录”, 状态2(State2) 名称改为 “注册”。
下面我们,我就可以给 “注册” 状态添加元件了。
一般情况下,“登录”和“注册”页面,样式是大同小异的,重新设计一套 “注册” 的样式,明显有些麻烦,有没有什么快捷方式直接生成一套和 “登录” 同样的状态呢?
Axure提供了克隆状态的功能,让先把上面步骤添加的“注册”状态删除了,然后通过克隆重新添加一个“注册状态”。
鼠标移入“注册”状态,状态名称右侧会显示两个图标,分别是 克隆(Duplicate State) 和 删除(Delete State),我们点击 删除(Delete State) 图标删除当前状态。
鼠标再移入“登录”状态,此时我们点击 克隆(Duplicate State) 图标,就克隆出了一个,和“登录”状态完全一样的状态,包括状态中包含的元件和元件交互,我把状态名称改为“注册”。
这样就添加了一个和 “登录” 状态样式完全相同的 “注册” 状态。
实际业务中,注册和登录还是有些区别的。注册是需要二次确认密码的。下面,我们就来编辑一下“注册”状态中的元件。
动态面板(Dynamic Panel) 状态中编辑元件,是和在页面上完全一样。只是一个是页面中,一个是打开的 动态面板(Dynamic Panel) 状态中而已。

下面,让我们在 “注册” 状态中,再添加一个标签和一个文本框。
双击打开 动态面板(Dynamic Panel),并通过顶部的状态名称,切换状态到“注册”。
从 Libraries(元件库) 面板中,拖一个 Label(标签) 和 Text Field(文本框) 元件到画布“注册”文本框下方,并设置 Label(标签) 文本为“确认密码”。
修改标题文本为“注册”,按钮上的文本为“注册”,同时参考前面元件的样式章节,调整确认密码标签和文本框的样式。
对于类似的元件,我们除了从 Libraries(元件库) 面板中添加,也可以直接 CTRL C → CTRLV(CMD C → CMD V)复制一个 Button(按钮) 到 “注册” 按钮下方,并设置按钮文本为 “取消”,调整填充颜色样式为:#AAAAAA。
这样,就成功将元件添加到动态面板状态中。
点击面板右上角的 Close(关闭) 按钮,关闭面板状态,显示桌面。此时我们看到画布上只显示了“登录”状态的内容,并没有显示“注册”面板的内容。
让我们切换到浏览器,然后刷新页面,发现页面似乎并没有什么变化。而且并没有显示出动态面板来。

动态面板的遮罩在浏览器上是不显示的,这里需要说明下。
掌握了以上动态面板的知识,就可以在原型设计中应用动态面板了。