在语音激活设备和无缝跨设备体验的时代，掌握语音与跨设备交互原型设计的技巧已成为设计师的必备能力。
在本文中，我们将向你展示如何借助 ProtoPie Connect 的强大能力，通过创建一台连接到 Google Home 应用的 Google 洗衣机，来制作语音和跨设备交互原型。
你可以在下方的演示视频中查看完成后的原型。
你将学到什么
在这个分步教程中，你将学习：
如何创建可通过语音命令运行的原型
如何使用 Send 和 Receive 触发器创建跨设备交互
让我们开始吧！
1. 完成准备工作
我们为洗衣机和 Google Home 应用分别使用两个独立原型，因此请先在 ProtoPie 中创建两个原型（Pie），并将它们保存到本地或云端。
接下来，将它们导入 ProtoPie Connect 并在其中打开。这样我们就可以在两个 Pie 之间使用 Send 和 Receive 触发器。
如果你想复现该演示，可以从 Figma 导入设计，或下载已完成的 ProtoPie 文件：洗衣机 和 手机。
2. 使用 Start 触发器启动动画
我们以洗衣机上的一个简单动画开始演示，该动画会在你启动 Pie 时开始。
我们使用 Start 触发器 立即移动并旋转圆点，然后将其动画回原始位置和缩放。这样可以更轻松地探索不同的旋转和缩放幅度。此外，为每个圆点使用容器可以更方便地进行单独旋转，同时最终回到同一位置。
3. 创建 Listen 响应
在应用中，我们先通过点击助手开始流程。这会放大卡片，原型会说 “你好，我能帮你什么？”，并开始聆听响应。
它会先将变量 "state" 设为 "idle"，然后在 2.4 秒后（即语音播报结束时）将变量切换为 "listening"。
4. 使用状态变量在循环动画之间切换
我们使用 state 变量在 Google 助手可执行的各种循环动画之间进行切换。
例如，在 "idle" 状态下，圆点会缓慢上下移动；而在 "listening" 状态下，它们会水平对齐并对声音提示作出响应。
为确保动画过渡平滑，关键是在启动新动画之前先停止任何正在进行的动画。这可以避免相互干扰，并确保目标动画及时开始。
5. 叠加多个语音命令
现在，Pie 已经在监听用户发言，我们可以将多个语音命令叠加在一起，以便在接收到 Command 的不同片段时更新文本。
在我们的示例中，它会将文本依次替换为：
当听到 “start” 时显示 “Start”，
当听到 “start my” 时显示 “Start my”，
当然，当听到完整句子时显示 “Start my laundry”。
这样可以在语音命令使用过程中提供更多反馈。用户只有在说完整句话后才收到反馈会感觉不自然，所以最好在句子结束前就先显示文本。
接下来，当说出 “Start my laundry” 时，原型将停止监听并将 state 改为 “loading”。这会启动一个动画，让四个圆点先“思考”一会儿。
5 秒后，它会把 state 设回 “idle”，并说 “检测到小件彩色衣物。我建议使用 30 度节能程序，要开始吗？”。
说完后，它会再次开始监听，并将 state 重新设为 “listening”。这样你就完成了多个语音命令的叠加。
如果你想在本教程之外进一步精通语音原型设计，可以查看 ProtoPie 的语音助手原型设计大师课。
6. 创建声音响应动画
在 Sound 触发器中，我们创建了一个 Condition，用于检查 state 变量是否等于 “listening”，以及蓝色圆点的 width 是否等于 20，这意味着它已完成缩放和位置动画。
如果条件为真，我们就开始缩放圆点的 height，从而创建监听动画，让圆点对用户语音作出响应。
你可以尝试不同的 dB 范围；在这个示例中，我们为各个圆点使用了不同范围，使其响应不同并显得更有活力。
7. 向 ProtoPie Connect 发送消息
当用户回答 “Yes” 时，原型会停止监听、调整卡片大小，并向 ProtoPie Connect 发送 “start laundry” 消息。
8. 使用 receive 触发器接收消息
在我们的洗衣机 Pie 中，可以为 “start laundry” 消息使用 Receive 触发器。这会淡出助手、淡入进度条，并开始进度条旋转。
要在 ProtoPie 中实现环形进度条，你需要结合遮罩做一些巧妙处理，你可以在 Chain 触发器 中看到。
我们可以使用 Detect 在进度条旋转时触发。它会用 75 - round(progress.rotation / 360 * 75) 更新计时文本，并向 ProtoPie Connect 发送值为 progress.rotation / 360 的 “laundry progress”。这个从 0 到 1 的变量可用于在应用中显示进度。
最后，通过 **Condition **我们可以检查 progress 的旋转是否大于 359，这意味着它已完成整圈旋转。如果条件为真，我们会淡入助手并播放一个简单的庆祝音效。
在我们的应用中，我们可以在 ProtoPie Studio 里为 “laundry progress” 使用 Receive 触发器，并将其赋值给一个名为 “progress” 的变量。
然后我们可以使用 Text 响应来更新洗衣机卡片中的剩余时间：75 - round(progress * 75) + " minutes left"。
就是这样！🥧
从 ProtoPie Connect 打开这些 Pie，看看你的原型如何鲜活起来。当然，你也可以在手机、平板，甚至智能手表上运行它们！
创建你自己的语音与跨设备原型
在本教程中，我们快速介绍了多种 ProtoPie 和 ProtoPie Connect 功能，以创建可用于探索、迭代和验证设计的沉浸式原型体验。
为什么不亲自试试看？立即开始并免费试用 ProtoPie！
如果你想进一步了解语音原型设计，欢迎查看这个语音助手原型设计免费大师课！
祝你原型设计愉快！
