动态面板

动态面板是原型设计中常用的容器，能够集合一个或多个元素，每个集合被称为一个“状态”，支持通过交互更改不同状态的可见性。在原型设计中，动态面板常用于创建导航标题、实现轮播图效果等。

创建动态面板

快捷键：

Mac：Option+command+D

Windows：Alt+Control+D

• 在“资源库-基础资源-基础”中，选择“动态面板”拖拽到画布。

• 或右键点击画布上的一个或多个元素，选择「创建动态面板」。

复制动态面板

动态面板在文件内复制时会自动形成关联，修改其中一处内容时，所有关联动态面板将自动同步更新，达到“一处改、处改改”的效果。如不需同步更新，取消不需要同步的动态面板关联即可。

如何复制动态面板

快捷键：

Mac：Command+C/Command+V

Windows：Ctrl+C/Ctrl+V

• 右键点击动态面板，选择“复制”/“粘贴”。

• 选中动态面板，按住 Shift 键拖出复制的动态面板。

如何取消动态面板的关联

• 选中需要取消关联的动态面板，点击属性栏的「取消动态面板关联」按钮。

取消关联后，所选动态面板的更新将不再与其他面板同步，但不会影响其他面板之间的关联关系。

编辑动态面板

进入编辑页

• 双击画布上的动态面板，进入编辑页。

画布左上角会出现“编辑浮动栏”，用于新增和编辑当前动态面板的状态。

编辑页中，画布将同时展示所有状态，并支持调整状态布局。

注意：在编辑页中，默认仅有一个“状态”处于激活态，创作的所有内容、格式和数据都属于此“状态”。

状态可视范围

动态面板各状态的默认可视范围尺寸一致。当状态中的元素超出当前可视范围时，系统会显示可见范围的紫色虚线作为提示。可视范围可在编辑页内或退出编辑页后进行调整。

动态面板支持设置为“适应内容大小”，使各状态的宽度和高度自动调整，以适应其子图层的尺寸，常用于构建手风琴菜单等场景。

• 退出动态面板编辑页，在右侧属性栏中，点击「适应内容大小」按钮。

注意：

“适应内容大小”是一次性效果，在调整子图层后需要重新触发。如果手动调整动态面板的大小（无论是通过修改宽度和高度，还是通过拖拽画布缩放），所有状态的可视范围将恢复为统一尺寸。

添加状态

• 点击画布左上角的浮动栏中的「 + 」按钮，添加的状态默认排列在底层。

复制状态

• 单击动态面板，在上方的浮动窗格中点击「复制」按钮，复制的状态默认排列在底层。

调整状态顺序

方式一：单击动态面板，在上方的浮动窗格中，点击「 ⬆️ 」或「 ⬇️ 」按钮，可将状态上移或下移一层。

方式二：在图层栏中右键点击状态，选择「上移」或「下移」。

方式三：在图层栏中拖动状态位置，调整其顺序。 [图片]

调整状态布局

在动态面板编辑页中，所有状态会在画布中按照层级顺序排列展示。

点击画布左上角浮动栏中的「布局」按钮，可更换以下布局方式：换行布局、垂直布局、水平布局。

删除状态

方式一：单击动态面板，在上方的浮动窗格中，点击「删除」按钮。

方式二：在图层栏中右键点击需要删除的状态，选择「删除」。

方式三：选择需要删除的状态，按「 Delete 」键。

退出编辑状态

• 点击画布左上角浮动栏中的「 ⬅️ 」按钮，即可退出动态面板的编辑界面。

• 退出后，动态面板将默认仅展示“状态 1”的内容，其余状态将隐藏。

注意：退出编辑界面后，点击动态面板，可通过上方浮动栏切换需展示的状态。

动态面板内图层的交互设置

添加交互

• 选中触发图层，在交互设置栏，点击“交互”旁的「 + 」按钮。

• 选择动作和动画效果，设置完成后可查看预览效果。

交互设置选项：

触发条件：单击、双击、右键、悬停时、按下时、拖拽、按下鼠标、抬起鼠标、光标移入、光标移出

动作：无、前往、返回上一级、显示/隐藏、打开链接、切换动态面板状态、关闭浮层

动画：即时、溶解、划入、移入、移出、推入、智能动画（支持设置渐变效果和时长）

注意：动作面板内的交互，仅支持选择本动态面板内图层作为目标图层。

查看动态面板预览

• 点击画布左上角浮动栏中的「⬅️」按钮，退出编辑界面。

• 点击流程或界面右上角的「▶️」按钮，进入预览页面查看效果。

切换动态面板状态

原型文件支持交互动作设置为切换动态面板状态，需触发图层与目标动态面板位于同一外部容器内。

• 选中触发图层，在交互设置栏，点击“交互”旁的「 + 」按钮。

• 选择「切换动态面板状态」动作，支持选择同个一级容器内的动态面板作为目标图层。

注意：上一个状态/下一个状态，是循环轮播效果。

• 退出编辑页面，点击预览按钮查看交互效果。

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。