增长与沟通– 功能发现

功能发现

通过在相关时刻向用户介绍新特性和功能，提供价值并提升互动。

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

单步操作

提示用户尝试可通过单次点击完成的功能，例如在地图应用中保存位置。

点击目标

Material Design 中的功能发现提示文本

提示文本

多步操作

提示用户尝试需多次点击才能完成的功能，例如在照片应用中启用自动备份。

引导流程

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

在贴合用户使用场景的时刻，向有潜在需求的用户展示功能发现提示，效果最佳。若在错误时刻向错误用户展示，反而会干扰用户，令人反感。

定位

显示与特定用户相关的功能。

定位适合的用户

优先呈现合适的特性

向尚未尝试过这些特性的用户显示特性提示。

避免向初级用户展示高级特性。

向所有用户展示常规特性，例如在 Gmail 中撤销已发送邮件。

功能发现应随时间持续进行。

优先考虑与用户情境相关的特性，而不仅仅是新特性。

触发

在合适时机展示功能发现提示。

勿在打开应用时显示

与用户情境相关的时刻

自然停顿

若用户打开应用是为了执行特定操作，打开时出现的特性提示可能帮助不大。

避免在干扰用户时显示功能发现提示。

在功能发现提示有助于用户更好完成当前操作时展示。

例如，让用户知道只有在添加图片后才能裁剪。

若无法将功能发现提示设置为仅由特定操作触发，请在用户体验的自然停顿期间展示。

例如，在邮件应用中，待用户阅读或发送消息后再显示功能发现提示。

数量与频率 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.

功能发现场景

功能发现场景和应用界面有特定的 Material Design 组件。

功能发现场景

设计组件

提示可通过单次点击完成的操作

点击目标、提示文本

提示需多次交互才能完成的操作

引导流程

点击目标

功能发现提示将用户注意力集中在特定界面元素上。它包含一个圆形点击目标，周围环绕着具有不同背景色的较大区域。

提示仅包含单一操作，无附加操作。

用户可通过滑动屏幕或点击提示区域之外的任意位置来关闭提示。

Material Design 中带有点击目标和背景的提示

功能发现提示包含一个点击目标，周围环绕着使用应用主色的大背景区域。

移动端

提示的样式可灵活调整，以适应不同的屏幕位置和尺寸。

在移动端，点击目标的海拔高度高于其他界面元素，并可超出屏幕宽度。

Material Design 功能发现：将点击目标置于距边缘 88dp 内

当提示操作的点击目标位于屏幕顶部或底部 88dp 内时（不包括状态栏和导航栏），将点击目标直接置于提示操作上方。

Material Design 提示背景定位指南

当提示操作位于屏幕中心附近时，应按以下方式调整提示背景：

  • 点击目标位于屏幕中心右侧：提示背景应向左偏移 20dp
  • 点击目标位于屏幕中心左侧：提示背景应向右偏移 20dp
  • 点击目标位于屏幕中心：提示背景将根据语言自动向左或向右偏移

桌面端和平板端

在较大屏幕上，功能发现提示通常限于点击目标所在的表面（如卡片）。点击目标大小应为可点击表面的大小。

对于不在屏幕中心的点击目标，将提示背景从表面中心偏移。

若点击目标出现在高度小于 280dp、宽度小于 360dp 的表面上，允许点击目标和提示背景超出该表面边缘（处于更高海拔高度）。

Material Design：以点击目标为中心环绕提示背景

点击目标位于表面边缘 88dp 内时，提示背景应以目标为中心环绕。

点击目标位于屏幕中心时，将提示背景区域偏移 20dp。

对于其他所有点击目标，将提示背景放置在适合其他屏幕元素的位置。

Material Design 中靠近屏幕边缘的点击目标提示

当点击目标位于屏幕顶部或底部（144dp）或左侧或右侧（200dp）边缘内时，将提示背景以点击目标为中心环绕，并置于其他元素上方。

Material Design 中针对小点击目标的提示位置

位于较小表面上、且在屏幕顶部或底部（144dp）或左侧或右侧（200dp）边缘外的功能发现点击目标，其提示可不限于任何表面。

  • 点击目标位于屏幕中心右侧：提示背景应向左偏移 20dp
  • 点击目标位于屏幕中心左侧：提示背景应向右偏移 20dp
  • 点击目标位于屏幕中心：提示背景将根据语言自动向右或向左偏移

颜色

点击目标可使用应用或工具栏的主色。

点击目标背景的不透明度为 96%。

Material Design：点击目标背景使用主色

点击目标背景使用了主色。

Material Design 中点击目标背景使用强调色

点击目标背景使用了强调色。

动效

动效有助于向用户揭示点击目标的来源。

出现

点击目标使用标准 Material 动效曲线从高亮图标上生成。

静止状态

静止时，高亮操作按钮会在一秒内放大 10% 再缩小。达到最大尺寸时，会从该操作向外产生触摸涟漪。

交互

点击高亮操作按钮会使点击目标扩展，然后以缓出方式淡出。

关闭

点击点击目标外区域会使其收缩，并以缓出方式淡出。

出现、静止和交互的动效

出现、静止和关闭的动效

引导流程

引导流程会引导用户完成需多步操作的任务。

引导流程

引导流程最多可包含三个设计组件。选择最适合界面中特定任务的组件。

1. 点击目标

点击目标通过高亮用户收益来提前介绍任务。

2. 涟漪

涟漪引导用户完成后续步骤。

涟漪颜色应与点击目标颜色匹配。

3. 完成 Toast

引导流程完成后，提供 Toast 确认用户已完成任务。

包含一项操作，可让用户返回点击目标出现的位置。

点击目标用于引出引导流程。

涟漪用于后续步骤。

Toast 用于确认任务已完成。

提示文本

对于更小、更简单且需用户输入的提示，使用提示文本而非点击目标。

Material Design 功能发现提示文本示例

提示文本示例