设计指南 (Dialogflow)

Interactive Canvas 设计有两个主要方面:

  • 设计对话
  • 设计界面 (UI)

用户可以通过向 Google 助理说出语音指令或轻触界面来与使用 Interactive Canvas 的 Action 互动。您应该确保语音对话和界面相辅相成,让用户能够轻松和激动人心地推进您的 Action。在本部分中,我们将介绍如何设计对话和界面以提供最佳用户体验。

Interactive Canvas 适合我的 Action 吗?

在开始设计之前,请考虑您的 Action 能否与 Interactive Canvas 配合使用。在以下情况下,您应考虑使用 Interactive Canvas:

  • 您的 Action 将受益于具有丰富视觉效果的全屏体验。 Interactive Canvas 非常适合受益于丰富视觉元素的全屏体验,例如沉浸式语音驱动游戏。
  • 您的 Action 具有直观的对话流程。用户执行 Action 的关键路径应该仅能通过语音导航。需要空间精确度的 Action(例如绘图应用)可能会提供难以体验,从而无法设计出直观的对话流。
  • 现有的组件和自定义是不够的(例如,如果您想超越现有的 Google 助理视觉组件和自定义设置)。Interactive Canvas 非常适合展示您独特的视觉品牌属性、动态元素和动画。此外,Interactive Canvas 可用于在用户进行对话时为单个视觉界面提供更新。

要求

虽然 Interactive Canvas 是一种熟悉的 Web 开发环境,但在设计 Action 之前需要考虑一些要求。

每个画布 Web 应用的顶部都有一个包含您品牌名称的标题。此预留区域的高度为 56 dp(移动设备)、96 dp(主屏幕)和 120 dp(智能显示屏)。请务必遵循以下标头要求:

  • 确保标题后面没有隐藏任何重要信息或互动元素。getHeaderHeightPx() 方法可确定标头的高度。
图 1.标题在各种 Action 中的显示方式示例。

约束条件

在使用 Interactive Canvas 设计 Action 之前,请考虑以下限制:

  • 不在本地存储数据。我们阻止该 Action 存储 Cookie 和访问 Web Storage API。鉴于这些限制,我们建议您的 Action 管理网络钩子中的状态,并使用 AppRequest 的 userStorage 字段来保存用户数据
  • 无弹出式窗口或模态窗口。我们阻止 Action 显示任何弹出式窗口或模态窗口。我们还强烈建议不要使用您在 Web 应用中经常会看到的其他标准导航界面元素,例如键盘和分页。

设计对话

您首先需要设计 Action 的对话。Interactive Canvas 体验仍采用语音控制方式,因此请务必确保您的对话能有效地引导用户完成 Action。您可以将使用 Interactive Canvas 的 Action 视为具有实用视觉效果的对话。如需详细了解如何设计对话,请参阅对话设计网站的使用入门页面。

指南

为了提供最佳用户体验,您应该:

  • 遵循 对话设计网站上列出的对话设计流程和最佳做法。这意味着,您需要完成以下任务:

    • 确保您的 Action 体验适合对话
    • 建立品牌角色
    • 处理对话中的错误
    • 不妨先试试纯语音体验,然后再弄清楚它在屏幕上的呈现效果
  • 尝试通过轻触和语音方式提供相同的功能。 请尽可能确保所有操作都可以通过触摸屏幕完成,并且您也可以通过语音完成。

  • 确保通过操作执行 Action 的关键路径可通过语音操控。 您的用户应该能够仅使用语音浏览 Action 的主要路径。

  • 确保用户可以在没有音频的情况下使用您的 Action。在移动设备上,用户可能没有开启音频。因此,请考虑向您的 Action 添加转录内容来引导用户。

  • 考虑认知负荷。避免过长的语音响应,以减少用户的认知伤害。

设计界面

设计完对话后,您可以设计与其相辅相成的界面。 在设计时,请考虑自然的来回对话如何驱动您呈现给用户的视觉界面。如果您是为智能显示屏设计,请参阅为智能显示屏设计中的具体注意事项。

指南

为了提供最佳用户体验,您应该:

  • 创建自适应设计。请确保您的设计同时支持横屏模式和竖屏模式,并且能够承受从小屏幕到大屏幕的屏幕。您的用户应能够轻松阅读每种 surface 的界面。
  • 考虑认知负荷。为了避免用户应接不暇,请保证屏幕上显示的信息和内容条理清晰、简明扼要。
  • 根据屏幕调整语音输出。发挥创意,使用视觉元素与音频相辅相成 - 不要只是大声读出来。有可用屏幕时,我们的语音输出可能比没有屏幕时更简洁。
  • 避免将任何关键信息或组件放置在屏幕底部。在移动设备上,用户转录内容显示在麦克风板上方,可以增加到几行。虽然此转写内容是暂时性的,但请避免将重要内容写到屏幕底部。与建议内容信息卡类似的按钮也可以在屏幕底部显示,因为用户输入是建议内容信息卡的替代方案。
  • 直观地处理对话中的错误。如果用户没有响应、您不理解这些错误或者没有针对用户所说的话提供执行方式,就可能会发生错误。弄清楚这些错误提示出现在界面中的什么位置。这可以是放置显示提示的位置(例如,在标题中),也可以是其他元素(例如,根据需要显示的特殊内容区域)。如需了解有关错误处理的更多提示,请参阅对话设计网站

专为智能显示屏设计

虽然上述准则仍然适用,但在为智能显示屏设计时,您应牢记其他设计注意事项。在为智能显示屏设计时,人们很容易将智能显示屏当作平板电脑来对待。不过,智能显示屏是一种完全不同的新设备类别,原因有两个:

  • 智能显示屏支持语音,并且 Google 助理是操作系统
  • 智能显示屏是静止的,与移动设备不同,智能显示屏在家中使用时通常放在厨房或卧室

由于这些特征,用户有时并不在设备附近,而只通过语音与智能显示屏互动。用户在使用智能显示屏时,也可能会同时处理多任务。在为智能显示屏设计时,务必要牢记这些用法。

指南

为了让智能显示屏获得最佳用户体验,你应该:

  • 设计时秉承语音优先的理念。对智能显示屏而言,将 Interactive Canvas Action 设计为语音优先尤为重要。与移动设备不同,用户可能站在房间对面,并且只通过语音与智能显示屏通信。因此,您不能总是依靠用户触摸设备来完成您的 Action,并且需要确保用户可以使用语音在您的 Action 中继续操作。
  • 设计时考虑具体的观看距离。在智能显示屏上设计内容,以便从远处查看。根据房间大小,智能显示屏的典型观看距离介于 3 到 10 英尺之间。
    • 主要文本(如标题)的字体大小不能小于 32 pt。辅助文本(例如说明或文本段落)必须至少为 24 pt。
  • 一次专注于一个接触点。一次显示一种类型的主要信息或任务,以减少认知工作量并使内容在远处清晰可辨。例如,当用户询问“我的一天是什么样的?”时,Google 助理会返回天气、日历、通勤信息和新闻内容。每种类型的内容都会占据整个屏幕,并依序呈现,而不是一次性全部显示在屏幕上。

资源

如需详细了解如何设计使用 Interactive Canvas 的 Action,请查看以下资源: