成长 & 沟通 探索特性

探索特性

向用户介绍与情境相关的新特性和功能,为用户提供价值,激励用户再次使用。

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

一步操作

提示用户去尝试那些通过一次点击就能完成的操作,例如在地图应用中保存一个位置。

轻点目标

提示文本

多步操作

提示用户去尝试那些需要多次点击才能完成的操作,例如在照片应用中启用自动备份功能。

指引流程

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

特性探索的提示越贴近用户情境,所呈现的效果就越好。在错误的时间将特性提示给错误的用户,反而会惹恼用户。

定向

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

找出正确的用户

优先呈现正确的特性

将功能提示展示给尚未使用过这个功能的用户。

不要把高级功能显示给初级用户。

把常规功能显示给所有用户,例如在 Gmail 中撤回已发送的邮件。

特性探索应该随着时间的推移持续进行。

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

触发

特性探索提示出现次数要适当。

不要在每次打开应用时显示

在与用户情境相关的时刻

自然停顿

如果用户打开应用是为了完成特定的任务,那么在打开应用时出现的特性提示可能对用户没什么帮助。

避免在打扰用户的情况下提示特性探索。

当特性探索的出现有助于用户完成当前的任务时,就应当向用户提示。

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

如果无法做到只在触发特定操作时显示特性探索提示,请在用户体验过程的自然暂停期间显示。

例如,在邮件应用中,在用户读完或发送完消息后才显示特性探索提示。

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

次数和频率

当用户和消息进行了交互,就表示用户对消息感到满意。应用可以依此决定什么时候显示下一条消息。

次数

频率

限制 UI 中的特性探索提示的次数。例如,不要在一个会话中使用多个特性探索提示。

如果用户忽略了一条消息,在之后很长一段时间内不要再显示这条消息、或者和这条消息相关的消息。

如果用户接受了一条消息,说明用户觉得这条消息对他有用。可以在较短的时间内再次显示类似的消息。

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

特性探索场景

特性探索场景和应用 UI 都有特定的 Material Design 组件。

特性探索场景

设计组件

提示一次点击就可以完成的操作

点击目标,提示文本

提示多次点击才能完成的操作

指引流程

轻点目标

特性探索提示把用户的注意力集中到特定的 UI 元素上。包括一个圆形的点击目标,以及周围不同背景色的大型区域。

提示只有一个操作,没有附加操作。

用户可以通过轻扫手势、或轻点提示背景之外的区域来关闭提示。

特性探索提示有一个点击目标,周围的大面积背景使用应用的主色调。

手机

可以修改提示来适应不同的屏幕位置和显示尺寸。

在手机上,点击目标拥有比其他 UI 元素更高的海拔高度,并且可以超过屏幕的宽度。

当提示操作的点击目标位于屏幕顶部或底部的 88dp 时(不包括状态栏和导航栏),将点击目标直接放在提示操作上面。

当提示操作位于屏幕中心时,提示背景应做如下调整:

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

桌面和平板

在较大的屏幕上,特性探索提示通常限定在点击目标所在的表面,例如卡片。点击目标的大小应该是可点击表面的大小。

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

如果点击目标出现在高度小于 280dp 且宽度小于 360dp 的界面上,则允许点击目标和提示背景超过屏幕的边缘(在更高的海拔高度上)。

点击目标位于距离表面边缘 88dp 以内时,提示背景应该以点击目标为中心进行环绕。

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

对于所有其他点击目标,将提示背景放在适合屏幕上其他元素的地方。

当点击目标位于距离屏幕边缘上下(144dp)或左右(200dp)以内时,将背景环绕在点击目标周围,并在其他元素的前面。

在较小的表面上,点击目标可以不受所在表面的限制,可以展示在表面之外上下(144dp)或左右(200dp)的区域。

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

颜色

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

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

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

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

运动

运动可以告诉用户点击目标的位置。

出现

点击目标使用标准的材料运动曲线从一个高亮的图标上生成。

出现后

生成后,高亮的操作按钮会在一秒后放大 10%,然后再缩小。涟漪效果会从操作按钮出发,放大到其最大尺寸。

交互

点击高亮的操作按钮会展开点击目标,然后缓动淡出。

忽视

触摸点击目标外面的区域,点击目标会收缩,并缓动淡出。

出现、出现后和交互的动效

出现、出现后和忽视的动效

指引流程

指引流程会在需要多个步骤的任务中指引用户。

指引流程

指引流程可以最多包含 3 个设计组件。选择最合适的组件来指引特定的任务。

1、点击目标

点击目标突出显示用户利益,在任务开始前先介绍任务。

2、涟漪

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

涟漪的颜色应该和点击目标的颜色相匹配。

3、完成 Toast

完成指引流程后,提供一个 Toast 来确认用户已完成任务。

显示一个操作,点击后可以带用户回到点击目标最初出现的地方。

点击目标用于引出指引流程

涟漪用于紧接着的步骤

Toast 用于确认任务已完成

提示文本

对于需要用户输入的更小、更轻的提示,使用提示文本代替点击目标。

提示文本示例