发布

6

阅读时间

ProtoPie 5.1:让你的交互会说话

通过将交互设计与对话设计相结合,设计师为以语音为核心的产品制作原型的方式实现了飞跃。

弗雷多·谭, 增长负责人

人们仅通过触摸、按压和手势与数字产品交互的时代早已过去。触觉反馈、传感器、音频与视频、文本输入、摄像头等技术,已经让与产品交互的体验更加丰富且更具沉浸感。

另一项正在走进我们日常生活的技术是语音技术——Google Assistant 已经可用于超过 10 亿台设备,而 Facebook 也在开发自己的语音助手。随着语音在各类数字产品中的重要性不断提升,我们将继续坚持从第一天起就走在的道路:以最高的表达力赋能设计师,让他们自由释放创意。

直到今天,如果不写代码或不停麻烦工程师,你都无法轻松地为已经非常逼真的原型添加语音功能。借助 全新的 ProtoPie 5.1,你终于可以将交互设计与对话设计结合起来。

语音原型设计


ProtoPie voice feature visualization gif


用 ProtoPie 5.1 让你的交互“开口说话”。

让你的交互拥有声音。

这非常简单。你可以像以往制作交互一样,为原型添加语音功能。因此,我们为你引入了 1 个新触发器和 2 个新响应供你使用。

原型可以听你说话,将其转换为文本,并触发响应。这就是我们所说的语音转文本(speech-to-text)。与之相对的是文本转语音(text-to-speech)。原型可以通过朗读文本作为响应来“说话”。

了解更多 关于语音原型设计。

语音转文本

语音转文本包含 2 个交互组件。

  • Listen 响应

  • Voice Command 触发器

默认情况下,原型不会接收任何语音。使用 Listen 响应可让原型开始监听语音。要让原型停止监听语音,只需使用同一个响应即可。


Screenshot of speak feature in ProtoPie Studio


使用 Listen 响应让你的原型开始监听。

使用 Voice Command 触发器,你可以创建基于实际输入语音来触发响应的交互。

你可以将 Voice Command 触发器设置为在说话过程中触发,或在说话结束后触发。还可以——真正有趣的地方来了——将包含或排除的短语设为命令。


Screenshot of voice command feature in ProtoPie Studio


使用 Voice Command 触发器根据输入语音触发响应。

在上面的示例中,点击椭圆后,原型开始监听。当有人在说话时说出“ProtoPie”或“Prototyping Tool”,ProtoPie 标志的不透明度就会改变。

语音转文本交互可在以下环境中运行:

  • ProtoPie Studio 的预览窗口

  • ProtoPie Player

  • ProtoPie Cloud(桌面端与 Android 上的 Google Chrome)

了解更多 关于 ProtoPie 中的语音转文本。

文本转语音

这是我们在 ProtoPie 5.1 中引入的另一项交互组件。

  • Speak 响应

你可以让原型通过朗读文本来“说话”。

在下面的示例中,点击 ProtoPie 标志后,原型会通过朗读“ProtoPie is the most intuitive tool to make prototypes and perfect them.”这段文字来“说话”。


Screenshot of speak feature in ProtoPie Studio


使用文本转语音响应将文本转换为语音,让原型“说话”。

文本转语音交互可在以下环境中运行:

  • ProtoPie Studio 的预览窗口

  • ProtoPie Player

了解更多 关于 ProtoPie 中的文本转语音。

示例

查看一些示例原型,感受全新语音原型能力能带来的惊艳效果。

制作你自己的语音助手原型,并立即进行测试。

试用这个示例原型 (在 ProtoPie Player 中)。

或者再进一步。在使用真实遥控器时,为智能电视应用进行语音搜索原型设计是否可行?答案是可以。请看下方。

我和 Tony Kim 在 Prototyping for Voice–Blending Interaction & Conversation Design.中展示了更多精彩的语音原型示例。

工作坊

ProtoPie 讲师 Leah 在这个工作坊中演示了如何开始制作你的第一个语音交互。

多行文本输入

你此前已经可以在 ProtoPie 中使用输入图层输入单行文本。从现在起,你两者都可以实现:单行以及多行文本输入。

和往常一样,输入图层仍可搭配实体键盘或 iOS、iPadOS 与 Android 的原生键盘使用。


Simple text writer prototype

一个简洁的文本编辑器原型,灵感来自 Writty,使用了多行输入图层。 试用这个示例原型。

自动调整文本图层大小

到目前为止,文本图层始终只能使用固定尺寸。在 ProtoPie 5.1 中,文本图层可以根据宽度或高度自动调整大小,或保持固定尺寸。

告别费时费力的手动调整文本图层大小吧 :)

在文本图层的属性面板中找到 3 种文本尺寸调整选项。

使用 Option/Alt + 拖拽复制图层

无论你使用什么设计工具,你一定熟悉这个提升效率的 Option/Alt + 拖拽快捷键来复制图层。现在你也可以在 ProtoPie 中以你习惯的方式快速复制图层。


Screenshot of quick duplicate layer feature in ProtoPie-Studio


也是时候让在 ProtoPie 中复制图层变得更快了。

其他功能与改进

  • 组件与场景多选

  • 粘贴 SVG 图层时支持密度调整

  • 修复了 macOS 上防火墙窗口反复出现的问题