行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

发布

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 上防火墙窗口反复出现的问题