行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

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。另外,语音识别功能需要网络连接保持可用。阅读更多详情请点击 这里

资源

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