原型设计交互实战：手把手教你实现收藏计数与角标联动

本期文章要和大家分享一个原型设计中常见的交互技巧——动态组件状态切换与变量的用法。我们以一个阅读类APP的“收藏计数器交互”为例，手把手带大家实现动态交互效果。学会使用动态组件和变量功能，可以轻松玩出很多复杂的交互逻辑。本文依旧以原型设计工具墨刀为例，大家也可以在Axure、Figma等工具中找到对应功能进行跟练，思路是完全通用的。

下图就是本文要实现的交互效果：点击图片右上角的心形图标，即可自动收藏到书架，同时底部导航栏“书架”处的角标数字会自动更新。

交互目标可以拆解为：

1. 点击空心心形图标后，图标切换为红色实心，表示已收藏；
2. 每点击一次收藏，底部“书架”角标数字+1；取消收藏则数字-1。

第一步：转换动态组件

首先要对收藏按钮的两个不同状态切换进行设置，即空心和实心。操作方法为：

• 右键点击图标，选择“转换为动态组件”，进入动态面板；

• 复制出状态2作为实心状态，图标更换为实心图标；
• 设置交互：
  • 触发方式——单击
  • 行为——切换组件状态（切换至状态2）

同样对状态2设置交互，单击切换至状态1。这样设置完成后，就可以实现点击空心状态切换为实心，再次点击切换为空心的效果啦。

小技巧：这里是为了向大家分享动态组件的用法，除了动态组件，还可以用更简单的方法——显示/隐藏图标。做法是把实心和空心图标叠放在一起，默认隐藏实心图标。单击空心图标时，隐藏它并显示实心图标；同理，再设置实心图标切换回空心即可。

第二步：创建绑定变量

这里只涉及到一个变量，那就是底部导航中书架的收藏数字角标。

• 点击这个数字角标，在属性面板中找到文本，鼠标放置在文本旁会出现一个小“+”，点击即可绑定变量。这时添加一个数字变量，命名为“收藏”，初始值默认为0。

这样就完成了变量的创建与绑定，接下来就可以通过交互事件的设置，来让这里的变量与收藏行为进行联动，产生数字的动态变化。

第三步：设置交互事件

还记得前面已经完成了收藏图标的状态切换，现在要让它与变量产生联动，仍然是以单击图标为触发行为的交互，因此在动态面板中，交互事件中只需要再添加一个交互行为即可：

• 行为——设置变量值
• 目标变量——“收藏”
• 值——“收藏”+1

同样的，对实心图标的交互中也添加好，一键复制到页面中所有收藏按钮的位置，就可以实现点击任意收藏按钮，底部导航的书架处将实时更新显示收藏数量。

小技巧：如果页面中没有收藏任意一本书，那么书架角标数字为0，如果想要当数字为0时，不显示角标，可以利用“监听变量”和“条件判断”的功能，来设置交互：

• 对收藏量数字角标添加交互，触发行为选择“监听”
• 目标变量——“收藏”
• 行为——隐藏（隐藏当前元素）

这样当没有收藏时，角标自动隐藏，有收藏时角标实时显示收藏数量。

结语

以上就是一个完整的收藏计数器交互实现过程。动态组件与变量是原型设计中非常实用的高级功能，不仅能用于收藏，还能结合条件判断、函数、监听等实现更复杂的交互逻辑。学会运用这些交互功能，让你的原型演示更加专业和高级！