增长与沟通– 手势引导

手势引导

手势引导旨在帮助新用户学会如何与特定界面元素（例如卡片）进行交互。

设计模式 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

屏幕局部

提示用户执行仅影响屏幕部分区域的手势，例如滑动卡片。

“手势预览”展示了执行手势指示器标记的操作时示例卡片的移动预览。

整个界面

提示用户执行影响整个界面的手势，例如双指缩放。

Snackbar 使用文本描述触发选项卡间切换的滑动手势。手势指示器将动作可视化，同时通过背景中的“手势预览”部分演示该手势。

定位和触发 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

手势引导应在用户需要时出现，无需集中在首次使用应用的最初时刻。它应当足够智能，并与用户当前的使用情境紧密相关，帮助用户以未曾尝试过的方式与元素或界面交互。

无论手势仅影响屏幕局部还是整个界面，均可采用类似的定位和触发指南。

定位

触发

仅向尚未执行过手势的用户显示手势引导。

手势引导出现在以下情况：

  • 用户首次体验应用（FRE）
  • 后续会话中（前提是用户未执行该手势）
  • 界面发生重大更改后

若某手势是用户体验的核心，则在首次体验应用时，在相关情境时刻展示。

若手势对体验不关键，可在后续会话的相关情境时刻展示。例如，在 Chrome 中滑动工具栏切换标签页。

数量和频率 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

数量

限制应用和界面中显示的手势引导提示数量。

若手势对用户体验至关重要，首次体验应用时可最多显示两个提示。

频率

大多数手势引导提示应仅显示一次。

若手势对用户体验至关重要，可在不同会话中最多显示两次。

设计与书写 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

示例界面

设计

示例界面应模拟其所代表真实界面的移动。

当检测到用户点击时，手势指示器应暂停动画，随后消失。所演示的手势应是关闭示例界面的唯一方式。例如，仅向左或向右滑动才能关闭描述滑动手势的卡片。

书写

使用简洁、准确的文本来描述手势的作用或结果。

此类交互可用于影响屏幕局部的手势，例如滑动卡片。

示例手势

设计

全屏手势应使用 Snackbar 说明手势将执行的操作。

当用户轻触界面时，页面内容应返回默认状态，同时移除手势指示器。继续显示底部面板，直到用户与元素交互（例如点击按钮）。

书写

使用简洁、准确的文本来描述手势的作用或结果。

此类交互可用于影响整个界面的手势，例如缩放。