成长 & 沟通 手势教育

手势教育

手势教育帮助用户在首次使用时,了解如何与特殊的元素进行交互,例如卡片。

设计模式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

部分界面

提示用户使用手势来操作界面中的某一部分,例如轻扫某张卡片。

「提示动作」展示了当执行提示中的操作后,示例卡片如何移动

整个屏幕

提示用户使用手势来操作整个屏幕,例如双指缩放。

Snackbar 中的文本描述了轻扫可以切换选项卡。手势指示器使手势动作可视化,提示动作本身会直接执行一部分动作。

定向 & 触发 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

手势教育应该在用户需要的时候触发。不要集中在用户首次使用应用时触发。手势教育应当智能且符合用户情境相,帮助用户对目标元素执行从未有过的交互方式。

无论手势是只影响部分界面,还是影响整个屏幕,都会使用类似的定位和触发指南。

定向

触发

仅向未使用过手势的用户显示手势教育。

手势教育出现在:

  • 用户的首次使用体验(FRE)
  • 如果用户没有使用过手势,可以在之后的会话中展示
  • 对 UI 做了重大的修改后

如果某个手势是用户体验的核心,在用户首次使用时,以及相应的用户情境中,显示手势教育。

如果某个手势对用户体验不重要,则可以在稍后的会话中,在相应的用户情境中显示。例如,在 Chrome 中滑动工具栏可切换标签页。

次数 & 频率 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

次数

限制应用中出现的手势教育的数量。

如果某个手势对用户体验至关重要,在用户首次使用时,最多可以显示两个手势教育。

频率

大部分手势教育应当只显示一次。

如果某个手势对用户体验至关重要,在不同会话中,最多可以显示两次。

设计 & 书面用语 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

示例 UI

设计

示例 UI 应当模仿真实 UI 的移动。

当监测到轻点手势时,手势指示器应暂停然后消失。示例中的手势应该是关闭示例 UI 的唯一方法。例如,只有向左或向右滑动才会关闭描述滑动手势的卡片。

书面用语

用简短明确的文本描述手势的结果。

只影响部分屏幕的手势可以使用此类交互方式,例如轻扫一张卡片。

示例手势

设计

全屏手势应当使用 Snackbar 来说明作用。

当用户点击屏幕时,页面内容应该返回到其默认状态,同时移除手势指示器。继续显示底部列表,直到用户和元素进行了交互,例如轻点按钮。

书面用语

用简单明确的文本描述手势的结果。

影响整个屏幕的手势可以使用此类交互方式,例如缩放。