软硬件交互
如何实现语音唤醒智能洗衣机
使用语音交互功能和跨设备交互功能，来设计令人惊叹的原型！
Kay van den Aker, Prototyper
August 15, 2023
介绍
在语音唤醒和跨设备体验的时代，掌握语音和跨设备交互的原型设计技巧已成为设计师的必备技能。
在本文中，我们将通过创建一个连接到 Google Home 应用的 Google 洗衣机，来进行语音和跨设备交互原型设计，而这些强大的功能都将使用 ProtoPie Connect 来实现。
您可以通过下面的演示视频查看最终的原型。
您将学到什么
在这个教程程中你将学到：
- 如何创建一个能够通过语音识别工作的原型
- 如何使用「发送」和「接收」创建跨设备交互
让我们开始吧！
1. 开始设置
我们将为洗衣机和 Google Home 应用程序分别创建独立的原型。因此，首先在 ProtoPie 中创建两个原型，并将它们保存在本地或云端。
接下来，将它们添加到 ProtoPie Connect 并在该平台中打开。这将允许我们在两个原型之间使用「发送」和「接收」。
2. 使用「自动加载」触发开始动画
我们从在洗衣机上添加一个简单的动画，该动画会在启动原型时开始演示。
使用一个「自动加载」触发来立刻移动和旋转圆点，并将圆点回到其原始位置和比例。这样可以更轻松地探索不同的旋转角度和缩放效果。此外，为每个圆点图层设置一个容器层可以更容易地对其进行单独的旋转，而最终使其结束在相同的位置上。
3. 添加「语音听取」反应
点击语音助手开始在应用程序中的旅程。点击后，语音助手菜单放大，原型将说出“嗨，我能帮您做什么？”并开始「语音听取」 。
这里还将赋值给变量，开始将 state 变量的表达式设置为“idle”，然后在讲话完成后的2.4秒钟后，将变量切换为“listening”。
4. 在循环动画之间使用 state 变量进行动画处理
使用 state 变量在 Google 助手的各种循环动画之间进行动画处理。
例如，在“idle”状态下，圆点会缓慢上下移动；而在“listening”状态下，圆点会水平对齐并对声音提示做出反应。
为了确保动画的平滑过渡，在开始新动画之前，首先必须停止任何正在进行的动画。这样可以防止一切干扰，并确保所需的动画能够迅速开始。
5. 堆叠多个「语音识别」
现在，Pie 正在等待用户说些什么。我们可以将多个「语音识别」堆叠在一起，以便在接收到口令时更改文本。
在示例中，已经设置了根据以下内容替换文本：
- 当听到“start”时，替换为“Start”。
- 当听到“start my”时，替换为“Start my”。
- 当听到“start my laundry”这句话时，替换为“Start my laundry”。
这样可以在使用「语音识别」时提供更多的反馈。对于用户来说，在说完整个句子之后才获得反馈会感到奇怪，所以最好在句子完成之前就显示文本。
接下来，当说出“Start my laundry”时，原型将停止听取并将 state 变量更改为“loading”。这将开始一个动画，其中四个圆点会“思考”一会儿。
5秒钟后，state 变量将返回到“idle”，并说出*“Small colored wash detected. I recommend the 30 eco program, shall I start it?”*。
在说完这句话之后，它将重新开始听取，并将 state 变量重新改为“listening”。这样，您就获得了叠加的多个语音识别了。
如果在本教程之外，您还想学习语音原型设计，可以参考 ProtoPie 语音助手原型设计的进阶课程 。
6. 创建响应声音的动画
在「声音」 触发下，创建一个「条件」，检查 state 变量是否等于“listening”，以及蓝点的宽度是否等于20，这表示它已经完成了缩放和位置移动的动画。
如果条件成立，则开始缩放点的高度，以创建响应用户声音的动画。
可以尝试不同的分贝范围，在这个示例中，圆点使用了不同的范围，所以产生了不同的反应效果，并显得更加生动。
7. 向 ProtoPie Connect 发送消息
当用户回答“Yes”时，原型将停止听取，并且调整语音助手图层的大小，同时向 ProtoPie Connect 发送消息“start laundry”。
8. 使用「接收」触发接收消息
在洗衣机原型中，使用「接收」触发来接收“start laundry”消息。这将使语音助手淡出，进度条淡入，并开始旋转进度条。
为了使环形进度条在 ProtoPie 中正常工作，需要使用一些巧妙的遮罩技巧，您可以在「联动」触发中确认。
可以使用「监听」来触发进度条旋转时的操作。使用
75 - round(progress.rotation / 360 * 75) 更新计时器的文本，并向 ProtoPie Connect 发送带有值 progress.rotation / 360 的“laundry progress”消息。这个从0到1的变量可以用来在应用程序中显示进度。最后，通过使用「条件」检查进度条的旋转是否大于359，这表示它做了一次完整的旋转。如果条件成立，助手将淡入，并播放一个简单的庆祝
音。
在应用程序中，可以使用「接收」触发，通过 ProtoPie Studio 渠道来接收“laundry progress”消息，并将其分配给名为“progress”的变量。
然后，可以使用「文本」反应来更新洗衣机中剩余时间
75 - round(progress * 75) + " minutes left"。
完成了！ 🥧
打开 ProtoPie Connect 中的 Pie 文件，看看原型是如何实现的。当然，您也可以在手机、平板电脑甚至智能手表上运行它们！
创建您自己的语音交互和跨设备原型
在本文中，我们介绍了许多不同的 ProtoPie 和 ProtoPie Connect 功能，以创建一个沉浸式的原型体验，可用于探索、迭代和验证我们的设计。
想要亲自尝试一下吗？立即开始免费试用ProtoPie ！
如果您想了解更多关于语音原型设计的知识，请查看这个语音助手原型设计的进阶课程！
祝您原型设计愉快！