高保真交互原型设计中“动态组件”的使用教程（含案例）

引言

产品经理在制作产品原型时，要考虑什么样的原型图类型。如果想要在评审中更直观地还原产品的真实体验，就离不开高保真交互设计。很多专业的原型设计工具都有丰富的交互功能，尤其是高级交互功能，例如：动态组件、条件判断、变量设置、数据联动、页面监听等，能够模拟真实操作体验。

而“动态组件”（或动态面板）就是其中比较容易上手的一类交互功能，通过多状态切换让原型图呈现出动态演示效果。本文就带你了解一下动态组件的概念、典型使用场景，并通过一个APP个人主页的实战案例，手把手讲解使用教程。

一、动态组件是什么

动态组件通俗的来讲，就是支持组件动态变化的一个单独的容器，保障组件在一定范围内不影响其他布局，可以储存多个状态，每个状态可以是不同的界面但都在一定的范围内，通过不同的交互触发不同的状态切换。

举个直观的例子：

• 播放器的“播放/暂停”按钮切换，其实就是一个动态组件，有两个状态。
• 社交APP中点击“收藏/已收藏”，同样可以用动态组件来实现。

动态组件的优势在于避免重复堆叠页面，在单独的面板中设置多个状态，节省原型制作空间和时间；通过多状态切换来真实模拟业务逻辑，并且可以与变量结合使用，实现更多数值、文案的动态联动。

二、动态组件的使用场景

动态组件的应用场景非常广泛，覆盖了很多需要“切换展示”的交互设计。常见的使用场景有：

1. 按钮切换类

例如关注/取消关注、收藏/已收藏、点赞/取消点赞，在同一个组件内两种不同的图标切换展现；

2. 内容展示类

例如Tab页切换（如首页、消息、我的）、Banner轮播图、展开/收起更多内容，这些都是有一定的隐藏与触发。

3. 状态反馈类

例如表单提交成功/失败的图标提示、任务完成进度，这类状态反馈的形式也可以通过动态组件的形式来实现。

这些场景的共同点是同一个位置下需要承载多个状态形式，而动态组件正好提供了这种“状态承载”的能力，通过一个单独的面板来独立设置不同状态与交互事件。

三、动态组件的实战案例

下面我们通过一个宠物类APP的个人主页“关注/粉丝数联动”案例，演示动态组件的使用步骤。目标效果是：点击“关注”按钮后，按钮状态切换为“已关注”，同时粉丝数增加1；再次点击取消关注时，状态恢复，粉丝数减少1。

声明：本文以普及“动态组件”这一通用概念为目的，为便于讲解，实战案例部分将使用【墨刀】进行演示，其功能在其他主流原型工具（如Axure, Figma, ProtoPie等）中均有类似实现。案例素材灵感来源于墨刀素材广场，仅作教学参考，无商业推广意图。

1. 转换动态组件

首先对页面中的关注按钮，点击右键转换为动态组件，进入动态面板中复制出状态2改变样式：

• 状态1：关注（紫色按钮）
• 状态2：取消关注（灰色按钮）

2. 设置交互逻辑

先为状态1按钮设置交互：

• 触发方式：单击
• 行为：切换状态至状态2

为了满足粉丝量随着关注增加的交互效果，这里的关键是提前为粉丝数创建数字变量，绑定粉丝数的文本属性，命名为“粉丝”。那么需要在此处的交互中，增加一个：

• 行为：设置变量值
• 值：将“粉丝”设为“粉丝”+1

同样的操作对状态2设置单击触发的交互事件，点击“取消按钮”切换至状态1，并且“粉丝”-1。完成上述操作后，预览原型即可看到：第一次点击按钮 → 关注状态切换 → 粉丝数+1；再次点击按钮 → 取消关注 → 粉丝数-1。

整个交互不仅还原了真实产品体验，还可以帮助客户或者团队快速理解交互逻辑，减少沟通成本。

总结

动态组件作为高保真交互设计中比较常见的功能之一，从简单的按钮切换，到与变量结合实现的数值联动，可以通过简单的方式大大提升原型交互表现力。 对于产品经理来说，学会动态组件的用法可以实现更多交互逻辑的高级效果，建议从关注/收藏/点赞这类小功能来练手，逐渐过渡到表单、数据联动等复杂交互逻辑哦。