成长 & 沟通 附加手势

附加手势

附加手势帮助第一次使用应用的用户了解如何和特定元素交互,例如卡片。

设计模式 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)
  • 之后的会话中,前提是用户没有执行过手势
  • 对 UI 做了大的更改之后

如果某个手势是用户体验的核心,则在用户首次体验应用时,在和用户所处情境相关的时刻,显示附加手势。

如果某个手势对用户体验不重要,则可以在稍后的会话中,在和用户所处情境相关的时刻显示它。例如,在 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.

示例 UI

设计

示例 UI 应该模拟其所代表的真实 UI 的移动。

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

书写

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

这种类型的交互可以用于只影响屏幕中的一部分的手势,例如滑动卡片。

示例手势

设计

全屏手势应该用 snackbar 来说明手势会做什么。

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

书写

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

这种类型的交互可以用于影响整个屏幕的手势,例如缩放。