ProtoPie 在头部手机厂商的原型实践

在最近的一场网络研讨会中，设计师 Yushi Xiang 分享了如何将 ProtoPie 融入设计工作流的宝贵见解，以提升效率并创建强大、可交互的原型。以下是关于如何在从概念到完成的全过程中使用 ProtoPie、构建更智能的原型，甚至与硬件集成的关键要点。

第 1 部分：将 ProtoPie 融入你的设计工作流

ProtoPie 不仅仅用于构建高保真模型；它可以支持从开始到结束的整个设计流程。

设计前：概念验证 💡

在你真正开始设计之前，可使用 ProtoPie 创建低保真或准高保真模型，以测试你的概念是否可行。如果想法不可行，这一步快速验证可以节省大量时间和资源。

设计中期：高保真模型 ✨

一旦概念得到确认，就将静态设计转换为高保真原型。这能让你轻松与同事分享设计，并感受整体交互逻辑与美学表现。它也是向利益相关者展示设计并快速获得批准的关键工具。

设计后期：可用性测试 🔬

创建最终打磨完成的高保真模型来进行可用性测试。这使你能够收集用户对新功能的反馈，并在开发前据此优化方案。在进行这些测试时，应关注诸如一致性、体验连续性和可用性等关键指标，以确保新设计直观且有效。

第 2 部分：构建标准化且高效的原型

为了更快地创建原型并保持一致性，Yushi 建议采用标准化的方法来构建设计组件。

原型制作前的准备

在开始一个新原型之前，先完成以下三个步骤，至少可将你的效率提升 30%：

1. 标准化图层命名：为图层使用清晰、准确的名称，这样你在 ProtoPie 中创建交互时就能轻松找到它们。

2. 整理并导出可复用元素：整理图层，并提前将常用元素（如图标）导出为图片。如果你使用 Figma 的自动布局（Auto Layout），请记得在导入文件后清理容器图层，让 ProtoPie 工作区更易于导航。

3. 识别高频组件：找出你经常使用的组件，以便后续将其封装为原子组件。这可确保设计一致性、提升效率，并让协作更轻松。

组件封装

封装可让你创建可复用组件，避免重复劳动，并确保一致的设计系统。

• 原子组件：先封装一个原子组件，例如单向滑块。定义其交互行为、动画以及输出值。你还可以为组件添加可调变量，以便轻松复用。

• 组件实例：创建原子组件后，你可以进行二次封装，将其变为组件实例。这对于一组相似组件尤其有用，例如一组筛选卡片。通过为每个实例分配唯一 ID，你可以确保选中一个时自动取消选中其他项。

• 分组封装：随后你可以将多个组件实例封装为一个功能组。这能简化 ProtoPie 主场景，并让后续维护更轻松。例如，当你需要新增一个筛选项时，只需将其添加到对应分组中。

为了让这些组件正常工作，你需要使用发送（Send）和接收（Receive）功能，它们允许你从组件中发送数值，并在主场景中利用这些数值创建交互逻辑。

第 3 部分：使用变量与硬件集成

Yushi 通过制作一个可远程控制的羽毛球记分牌，展示了 ProtoPie 变量与硬件集成的强大能力。

• 变量：使用变量跟踪比分，例如 score_green 和 score_blue。可以设置一个简单手势（如上滑）来给分数加一。

• 取余表达式：要判断分数是奇数还是偶数，可使用表达式 % 2。当分数除以 2 时，余数为 1 表示奇数，余数为 0 表示偶数。这使你能够基于比分自动改变屏幕上的球员位置。

• 条件：定义一个条件来判断谁赢得比赛。例如，你可以设置当某位选手得分大于 21 且领先对手 2 分时获胜。

• 硬件集成：为了让记分牌更实用，你可以使用辅助触控（AssistiveTouch）功能，将蓝牙按钮连接到手机。然后可为按钮定义自定义操作（如单击），从而无需在手机上手动滑动即可加分。

这种创新方法表明，无需编写任何代码，ProtoPie 也能用于创建可落地的现实世界产品。

准备好改变你的设计流程了吗？

观看 Yushi Xiang 的完整演讲，了解交互原型如何革新你团队的工作流。立即行动！

加入数百个设计团队，借助原型设计更快打造更好的产品。