ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie 学校

9

阅读时间

第4课:语音交互

通过文本转语音、语音转文本以及 ProtoPie 提供的 40 多种语言支持,让你的交互“开口说话”。

杰夫·克拉克, 用户体验设计师与 ProtoPie 培训师

如果你曾想过要为语音体验做原型,比如数字助理或车载免提语音系统,那么你很幸运!ProtoPie 的一项突出功能就是能够创建语音交互。语音已经在我们与技术的日常互动中无处不在,并且在无障碍方面极其重要。在本教程中,你将学习如何在几分钟内创建你自己的精彩语音交互。你会惊讶于这件事竟然如此简单又快速!

你需要准备的内容

要跟着本教程一起操作,请下载这个示例 Pie:

[语音交互 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 panel


将这段文本粘贴到 Speak Response 属性面板中的 “Content” 框里。

  • 你应该会听到语音文本效果的预览。你可以在 Voiced By 下拉菜单中选择男性或女性声音。更改语音属性以试听新声音下的文本效果。


voiced by female or male

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


languages


……还有更多!

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


voice preview

步骤 2:开始监听

现在让 ProtoPie 开始监听你的回应。我们将设置为:点击麦克风图标时,ProtoPie 开始 Listening。

  • mic_on 图层上添加一个 Tap trigger。

  • 为 Tap Trigger 添加一个 Listen Response。


start listening


我们希望 ProtoPie 开始监听,因此请确保在属性面板中选择了 Start。

  • 默认情况下,ProtoPie 会在你说完后停止监听。不过,如果你希望 ProtoPie 在你暂停说话后仍继续监听,可以勾选 Continuous 旁边的复选框。我们的语音命令会比较简短,所以这里先不勾选。


listen response

如果你现在进行预览,会发现变化不大。只是当你点击麦克风图标时会看到一点小区别。

Preview 状态栏左下角会出现一个小的闪烁麦克风图标。这表示 ProtoPie 正在监听你的语音输入。


mic on


随便说点什么,当你停止说话时,这个图标应当会停止闪烁。

步骤 3:添加你的语音命令

有趣的部分来了!让我们创建一个语音命令。我们想向 ProtoPie 询问语音原型能力,比如“你能创建带有语音和讲话的交互吗?”这样的问题。

  • 添加一个 Voice Command Trigger。

  • Trigger Point 标题下,你会看到两个选项:

  • While Speaking 指示 ProtoPie 在识别到某个词或短语时立即响应,即使你仍在说话

  • After Speaking 指示 ProtoPie 在你说完之后再响应。

  • 在我们的场景中,我们希望 ProtoPie 礼貌地等你问完问题,因此选择 After Speaking


trigger point

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


command box


将你希望 Trigger 响应的每个词或短语分别单独占一行输入。

我还在这个 Trigger 可识别的词组列表中加入了 talk 和短语 spoken command。这样就能兼容诸如“你能响应口语命令吗?”或“你能听到我说话吗?”之类的问题。

现在 Trigger 已设置好,接下来添加一些 Responses,在 ProtoPie 识别你的命令时触发。

  • 让 ProtoPie 说出一段回应。添加一个 Speak Response,并配置以下文本:

  • 当然可以!我可以基于读取你输入的文本,或对传入语音作出响应,来创建逼真的语音交互。还需要我多说吗?我可是原型设计天才!哈哈哈!

  • 请务必选择与步骤 1 相同的声音,这样整体听起来才一致。

  • 我们还可以在 ProtoPie 说话时把回复显示在屏幕上。添加一个 Text response。选择 pieText 1 图层,并将其更新为与上面相同的文本。

来预览一下。你的交互将从 ProtoPie 的问候语开始。点击麦克风图标并提出你的问题。尝试任何与 speechvoice. 相关的问题变体。只要你的问题包含在 Voice Command Trigger 中指定的至少一个词或短语,ProtoPie 就会响应。

步骤 4:添加反馈

我们的交互现在已经能工作了,但如果能把你说的话准确地回显到屏幕上会更好。ProtoPie 提供了一个预定义变量 $voiceTranscript,会记录 ProtoPie 监听期间你说出的每一个词。我们可以用它把你的口述问题写到屏幕上。

  • 再添加一个 Voice Command Trigger。同时启用多个 Voice Command 是可以的。事实上,这是打造健壮语音交互的关键。针对不同场景分别创建 Voice Command Triggers。

  • 由于我们希望你的问题在你说话时就显示在屏幕上,这次将 Trigger Point 选择为 While Speaking


trigger point while speaking

另外,这里不会监听特定命令。我们希望无论说了什么,这个 Trigger 都会触发。因此,取消勾选 Command 旁边的复选框。

  • 现在添加一个 Text Response。将 userTest 1 设为目标图层。

  • Content 下选择 Formula,并在下方输入框中键入 $voiceTranscript


voicetranscript function

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


final preview

像 Pie 一样简单!

使用 ProtoPie 创建语音交互真的就这么简单。只需几个简单步骤,你就学会了如何使用 SpeakListen Responses 让 ProtoPie 说话并监听你的语音输入。接着你使用 Voice Command Trigger 对特定口语词汇和短语作出响应。最后你使用预定义变量 $voiceTranscript 将你说的话原样显示在屏幕上。而且总共也没花太久!

结束前的简短说明

ProtoPie 的语音功能目前仍处于测试版。因此,某些功能可能不会如你预期那样工作。比如,如果你把 Pie 发布到云端,Speak triggers 在网页浏览器预览中将无法使用。因此你需要使用 ProtoPie Studio 或设备上的 ProtoPie Player 应用来使用 Speak Triggers。另外,语音识别功能需要网络连接保持可用。阅读更多详情请点击 这里

资源

[需要更多技巧?告诉我们!]