有一天，Darren Bennett 决定把他为客户创建的设计中的通用组件提取出来，并将其放入一个可公开访问的交互库中。
他将其命名为 Skeleton UI，这是首个在 ProtoPie 中创建的交互库。
Darren 是 ProtoPie 大使和培训师，同时也是一位经验丰富的 UX/UI 设计师。在最近的一场网络研讨会中，他分享了如何在交互库中使用条件和变量，以及它们如何与交互设计系统相连接的技巧。
在本文中，我们将拆解条件、变量和交互库的基础知识。最后，我们会详细讲解如何在交互库中使用条件和变量。
ProtoPie 大使兼培训师 Darren Bennett。
ProtoPie 中的“条件”是什么？
顾名思义，条件触发器会基于特定条件激活交互，例如当原型运行时、接收到特定文本字符串时，或图层移动到特定位置时。条件会根据具体要求来激活响应：
Chain
Range
Start
Detect
条件会根据具体要求激活响应。
ProtoPie 中的“变量”是什么？
可以把变量看作存放数值的“篮子”。将你之后可能会用到的任何数据存进去，例如姓名、密码或账户余额。你可以修改变量中的值，并检测变量的任何变化，从而实现动态交互。凡是可以使用公式的地方，都可以使用变量。
变量就像用于存放数值的“篮子”。
什么是“交互库”？
交互库本质上是存放在 ProtoPie Cloud 中的组件集合，你和团队成员可以非常轻松、快速地在原型中使用这些组件实例。
交互库。
如何在交互库中使用 ProtoPie 的条件和变量
如何控制组件状态
我们从按钮组件开始——这是最简单的 UI 组件之一，也是一个拥有多种状态的组件。
先创建一个可覆盖项（override）——不仅用于禁用状态，也用于颜色状态。
在右侧将“disabled”的值设置为“1”。如果你有编程背景，会熟悉 0 和 1 分别对应 true 和 false。
先为禁用状态和颜色状态创建 override。
让它可被覆盖。勾选复选框，使其对外部使用你组件的人可用。使用“detect”触发器来监听变量何时发生变化。
这样就会检测到状态并触发条件块。
在变量即将变化时使用 Detect 触发器。
创建唯一的组件实例
当你开始使用组件和实例时，你会希望能够直接且单独地与它们通信。方法如下。
我们从单选按钮开始，这是一个需要作为组的一部分来运作的单个组件。
使用右侧 overrides 面板中的两个变量：“name”变量——为每个单选按钮提供唯一名称；以及“radio group”变量——让组件更智能，能够感知其他实例。
设置“Name”和“Radio Group”变量。
组件内部有不少变量。注意“name”和“radio group”变量——这两个是 override 变量。
当你点击单选按钮时，它会向场景发送一条消息，表示该单选按钮已被点击。
一旦消息到达场景，你会在组件内部收到另一条返回消息。也就是说，它在监听这个消息。
当消息返回后，它们会被赋值给其他变量——“ReceivedGroup”和“SelectedName”。
当消息传入时，使用一个条件来比较这两个变量。这个单选按钮的名称是否与被选中的名称匹配？这两个值是否相同？如果相同，是否意味着这个特定实例被选中了？
使用条件来比较这两个变量。
这看起来可能有点复杂，但很快就会变得得心应手。
在变量中使用公式
为了说明这一点，我们来创建一个计时器——这是社区里很多人都在尝试解决的问题。
它很简单。通常情况下，它会在一段时间后出现在屏幕上，停留一段特定时间，然后消失。不过，你可以控制该组件以及它在屏幕上停留的时间。
这里有一个简单的 override 功能，就是“duration”——它在屏幕上停留的时间。
设置它在屏幕上停留的时长。
无论计时器当前的值是多少，都给它加上“+1”。通过启用“repeat”功能让它持续递增计数。
达到 duration 后，使用 Detect 来检测计时器何时完成。当该条件触发时，它会将“snap bar”移回到底部，并将变量时间重置为零。
使用 Detect 触发器来检测计时器何时完成。
想了解更多，请查看本教程：使用公式和变量创建秒表计时器。
用 ProtoPie 让创意无边界
Google、BMW 和 GoPro 的设计团队都在使用 ProtoPie 释放他们的创造力。你为什么不试试呢？
查看由 ProtoPie 大使 Darren Bennett 在 ProtoPie 中创建的首个交互库 SkeletonUI。
