设计指南 (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() 方法可确定标头的高度。

约束条件

在使用 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，请查看以下资源：

• 对话设计网站
• 多模态设计指南
• 下载我们的 Sketch 模板，以便设计界面。