在设计过程中，制作用户界面原型至关重要，它能让设计师测试想法并了解用户行为。ProtoPie通过让你使用键盘输入、摄像头输入、语音交互、条件、多点触控手势以及Lottie动画来创建高保真 UI 动画和体验（且无需编写代码），从而简化了这一流程。
在本教程中，我们将向你展示如何在一个宠物护理应用模型中使用 Lottie 和 ProtoPie 创建一个简单的 UI 动画，为雇佣宠物看护人提供有趣的体验。
概览
1. 创建 UI 动画
2. 创建 UI 设计并导出到 ProtoPie
3. 开始制作原型
4. 最终原型
1. 创建 UI 动画
首先，你需要准备一些可在 ProtoPie 中使用的 UI 动画。你可以从 LottieFiles 下载免费动画，甚至可以从其市场购买。你也可以在 Adobe After Effects 中自行制作。如果你不确定如何开始，这个教程可能会对你有所帮助。
在这个原型中，我将为一只狗角色绑定骨骼并为它的行走循环制作关键帧。你也可以使用流行的 After Effects 插件（如 Duik 或 RubberHose）来加快工作流程。
After Effects 中的行走循环动画。
当你对动画满意后，使用 LottieFiles 插件将其导出为 .json 文件。请确保在导出设置中将所有表达式转换为关键帧。
2. 创建 UI 设计并导出到 ProtoPie
接下来，我们需要一些 UI 来承载这些可爱的动画。你可以直接在 ProtoPie 中进行设计。如果你之前没有使用过它，建议先查看这份快速入门指南：如何使用 Figma 和 ProtoPie 制作交互式输入。
设计也可以从 Figma、Sketch 或 Adobe XD 导入。只要记得正确命名图层，就能为你省去后续不少麻烦。
在 Figma 中设计的用户界面。
3. 开始制作原型
创建按钮组件
我们的设计中有两个按钮用于选择狗的体型。创建组件可以更轻松地为元素设置自定义行为。为此，选择按钮图层并点击顶部工具栏中的组件图标。
在 ProtoPie Studio 中创建组件。
在这一组按钮中选择其中一个时，另一个会被取消选择。要实现这一点，你可以在组件内使用 Send response 和 Receive 触发器。
给按钮添加一个Tap触发器，并添加一个用于检查背景颜色的条件。当它是灰色时，表示该按钮正在被选中。将背景改为绿色、字体颜色改为白色，并显示投影。向当前场景发送消息以取消另一个按钮的选中状态。
向组件添加条件和 Send response。
接下来，添加带有“deselect”消息的Receive触发器。当组件接收到该消息时，按钮将不再处于选中状态。然后，将样式改为未选中的灰色按钮样式。
你会注意到这里的逻辑目前有一点问题。这是因为两个动作是同时发生的。要让它正常工作，请在条件中的样式响应里添加 0.01 秒延迟。
设置 Receive 触发器。
导入 Lottie 文件
按钮设置好后，你就可以添加 Lottie 动画了。前往 Media/Lottie 并选择你的 .json 文件。请确保在右侧面板底部勾选“Play automatically”和“Looping”选项。
将 Lottie 文件导入 ProtoPie。
设置 Tap 触发器
最后，将按钮与你的动画角色连接起来。通过 Tap 触发器，你可以将一个动画移出视口，并将另一个带入视图。根据你的喜好调整微交互的缓动和持续时间。
为按钮添加 Tap 触发器。
4. 最终原型
完成的微交互。
ProtoPie 可帮助设计师将创意以高保真交互原型的形式变为现实。现在就开始构建你自己的超高保真原型，无需编写任何一行代码。
