如果你曾想过要为语音体验做原型,比如数字助理或车载免提语音系统,那么你很幸运!ProtoPie 的一项突出功能就是能够创建语音交互。语音已经在我们与技术的日常互动中无处不在,并且在无障碍方面极其重要。在本教程中,你将学习如何在几分钟内创建你自己的精彩语音交互。你会惊讶于这件事竟然如此简单又快速!
你需要准备的内容
要跟着本教程一起操作,请下载这个示例 Pie:
你将学到什么
在本教程结束时,你将知道如何执行以下操作:
使用 Speak response 让 ProtoPie 说出你想要的任何文本
使用 Listen response 让 ProtoPie 监听你的语音输入
使用 Voice Command Trigger 让 ProtoPie 对特定的口语词汇和短语作出响应
完成时间:≤15 分钟
步骤 1:让 ProtoPie 开口说话!
在 Studio 中打开你在上方下载的示例 Pie。让 ProtoPie 在交互开始时向你问候。
添加一个 Start Trigger
为你的 Start Trigger 添加一个 Speak response。
让 ProtoPie 说出屏幕上已有的文本。复制名为
pieText 1.的文本图层内容。

将这段文本粘贴到 Speak Response 属性面板中的 “Content” 框里。
你应该会听到语音文本效果的预览。你可以在 Voiced By 下拉菜单中选择男性或女性声音。更改语音属性以试听新声音下的文本效果。

顺便说一句,ProtoPie 非常重视包容性和无障碍。因此,你可以让 ProtoPie 说出40 种不同语言中的任意一种——这非常适合创建本地化体验,也更有助于为视障用户定制交互。可在 Language 下拉菜单中查看可用语言。

……还有更多!
预览你的 Pie。你应该会听到 ProtoPie 说:“嗨,我是 ProtoPie。今天我能为你做些什么?”

步骤 2:开始监听
现在让 ProtoPie 开始监听你的回应。我们将设置为:点击麦克风图标时,ProtoPie 开始 Listening。
在
mic_on图层上添加一个 Tap trigger。为 Tap Trigger 添加一个 Listen Response。

我们希望 ProtoPie 开始监听,因此请确保在属性面板中选择了 Start。
默认情况下,ProtoPie 会在你说完后停止监听。不过,如果你希望 ProtoPie 在你暂停说话后仍继续监听,可以勾选 Continuous 旁边的复选框。我们的语音命令会比较简短,所以这里先不勾选。

如果你现在进行预览,会发现变化不大。只是当你点击麦克风图标时会看到一点小区别。
在 Preview 状态栏左下角会出现一个小的闪烁麦克风图标。这表示 ProtoPie 正在监听你的语音输入。

随便说点什么,当你停止说话时,这个图标应当会停止闪烁。
步骤 3:添加你的语音命令
有趣的部分来了!让我们创建一个语音命令。我们想向 ProtoPie 询问语音原型能力,比如“你能创建带有语音和讲话的交互吗?”这样的问题。
添加一个 Voice Command Trigger。
在 Trigger Point 标题下,你会看到两个选项:
While Speaking 指示 ProtoPie 在识别到某个词或短语时立即响应,即使你仍在说话
After Speaking 指示 ProtoPie 在你说完之后再响应。
在我们的场景中,我们希望 ProtoPie 礼貌地等你问完问题,因此选择 After Speaking。

在 Command 输入框中,你可以输入要识别的文本。你可以输入上面描述的完整问题,但并不必须。ProtoPie 足够灵活,能适配问题的多种问法。在我们的场景中,真正关心的是像 voice 和 speech. 这样的词。因此我们可以将此 Trigger 配置为对这两个词之一作出响应。

将你希望 Trigger 响应的每个词或短语分别单独占一行输入。
我还在这个 Trigger 可识别的词组列表中加入了 talk 和短语 spoken command。这样就能兼容诸如“你能响应口语命令吗?”或“你能听到我说话吗?”之类的问题。
现在 Trigger 已设置好,接下来添加一些 Responses,在 ProtoPie 识别你的命令时触发。
让 ProtoPie 说出一段回应。添加一个 Speak Response,并配置以下文本:
当然可以!我可以基于读取你输入的文本,或对传入语音作出响应,来创建逼真的语音交互。还需要我多说吗?我可是原型设计天才!哈哈哈!
请务必选择与步骤 1 相同的声音,这样整体听起来才一致。
我们还可以在 ProtoPie 说话时把回复显示在屏幕上。添加一个 Text response。选择
pieText 1图层,并将其更新为与上面相同的文本。
来预览一下。你的交互将从 ProtoPie 的问候语开始。点击麦克风图标并提出你的问题。尝试任何与 speech 或 voice. 相关的问题变体。只要你的问题包含在 Voice Command Trigger 中指定的至少一个词或短语,ProtoPie 就会响应。
步骤 4:添加反馈
我们的交互现在已经能工作了,但如果能把你说的话准确地回显到屏幕上会更好。ProtoPie 提供了一个预定义变量 $voiceTranscript,会记录 ProtoPie 监听期间你说出的每一个词。我们可以用它把你的口述问题写到屏幕上。
再添加一个 Voice Command Trigger。同时启用多个 Voice Command 是可以的。事实上,这是打造健壮语音交互的关键。针对不同场景分别创建 Voice Command Triggers。
由于我们希望你的问题在你说话时就显示在屏幕上,这次将 Trigger Point 选择为 While Speaking。

另外,这里不会监听特定命令。我们希望无论说了什么,这个 Trigger 都会触发。因此,取消勾选 Command 旁边的复选框。
现在添加一个 Text Response。将
userTest 1设为目标图层。在 Content 下选择 Formula,并在下方输入框中键入 $voiceTranscript。

预览一下。点击麦克风图标时,你应当会看到你说的话在说出的同时显示到屏幕上。

像 Pie 一样简单!
使用 ProtoPie 创建语音交互真的就这么简单。只需几个简单步骤,你就学会了如何使用 Speak 和 Listen Responses 让 ProtoPie 说话并监听你的语音输入。接着你使用 Voice Command Trigger 对特定口语词汇和短语作出响应。最后你使用预定义变量 $voiceTranscript 将你说的话原样显示在屏幕上。而且总共也没花太久!
结束前的简短说明
ProtoPie 的语音功能目前仍处于测试版。因此,某些功能可能不会如你预期那样工作。比如,如果你把 Pie 发布到云端,Speak triggers 在网页浏览器预览中将无法使用。因此你需要使用 ProtoPie Studio 或设备上的 ProtoPie Player 应用来使用 Speak Triggers。另外,语音识别功能需要网络连接保持可用。阅读更多详情请点击 这里。
资源
语音原型示例:一篇关于语音原型设计的博客文章,包含多个可运行示例
如何创建车载语音控制原型**:**了解如何使用我们的语音原型与硬件集成功能来设计车载语音控制体验。





