成长 & 沟通 用户指引

用户指引

用户指引是一种虚拟的开箱体验,以帮助用户理解应用的 UI。它应该简短,并能促进用户使用应用。

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

用户指引的目标应当根据用户对应用熟悉程度来制定。

用户情境

热烈欢迎的目标

  • 用户已经安装了应用,不再需要看到更多推广信息了
  • 用户可能渴望尝试应用,但还没有看过说明手册
  • 用户尚不熟悉应用或正准备去了解
  • 欢迎用户,并提前激发用户体验应用的兴趣
  • 帮助用户了解在生活中可以怎么使用应用
  • 鼓励用户进行操作,增加用户互动,提高前七天的留存率

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

用户指引是漫长旅程中的一个点,这段旅程始于应用商店,结束于:

  • 首次运行体验(FRE),或者
  • 用户的首次使用体验

在设计用户指引时,需要考虑用户指引之前的界面和用户指引之后的界面。

只为首次使用的用户显示用户指引,不要向老用户显示。

Material Design 包含三种用户指引模式:

1、自选

允许用户自定义他们的体验。

2、快速开始

直接从应用中开始。

3. 用户利益

显示一个简短的自动轮播(或动画),突出使用应用能带来的三大好处。

应用是否通用,UI 样式的可识别性以及设置的难易度,都会决定用户指引是否适合。

自选

快速开始

用户利益

何时使用

  • 可以定制 UI
  • 你的应用需要设置和批准

你已经确定了此行为可以提升用户的兴趣(第一次会话中)或增加留存率(在前七天)

  • 你的应用正在处理了新的挑战,或提供了一种全新的体验
  • 发布新功能或重大的 UI 更新

何时不要使用

  • 你的应用正在处理新的挑战,或提供了全新的体验
  • 发布新功能或重大的 UI 更新

你的应用正在处理新的挑战,或提供了全新的体验

  • 应用的 UI 和利益对大多数用户来说都已经非常熟悉了
  • 你的应用没有重大更新

组合

不要将自选和用户利益结合在一起

可以在首次运行前进行设置

  • 不要把用户利益和自选结合使用
  • 你的应用可以在用户指引结束后显示设置、或把设置作为用户指引的一部分

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

自选模式允许用户通过做出一系列简短的选择来自定义他们的首次体验。

这种体验提供了隐性教育,让用户对即将到来的界面拥有控制感并产生浓厚的兴趣。

登录界面

自选模式

展示正确的选择

你给用户的选择会影响到你的用户指引是否成功。

选择可以是:

  • 富有意义且有显著影响的
  • 提供新信息的
  • 保持简短

富有意义且有显著影响的

提供对用户体验有意义和有显著影响的选择。这些选择隐式地教导了用户如何与你的 UI 交互。

选择绑定能够提升用户体验的内容

了解用户检查数据流的频率对提高用户体验没有帮助

询问你无法得知的数据

不要询问可以从正常使用中获取的偏好设置。

向用户询问无法从正常使用中得知的内容才会有价值

不要让用户选择能从正常使用中获得的数据,那不会改进用户的首次体验

保持简短

把选项限制在一个屏幕内,或使多个看起来相关的屏幕。

每个屏幕内的选项应少于十个。 Each screen should have fewer than ten choices.

单个自选屏幕

很多个自选屏幕

在设计用户指引时,考虑如何将用户指引过程与用户首次体验相接。用户指引后,用户应当可以在着陆页进行刚刚学到的操作。

设计

自选屏幕的设计应该和应用的用途相关。专注于内容消费的应用可以询问用户感兴趣的话题,而新闻订阅类应用可以询问训用需要订阅哪些话题。

一些常见的自选设计模式包括:

绑定列表

网格视图

列表

快速开始 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

在快速开始模式中,用户将直接进入 UI 界面,不会显示任何其他的用户指引模式(登录和设置除外)。

快速开始模式:

  1. 使用户能快速上手应用的核心功能
  2. 通常优先处理最关键的操作
  3. 也可以提供可选的了解更多或寻求帮助的途径

最佳范例

让用户做些什么

你的 UI 应该鼓励用户进行交互,而不是将用户留在空白屏幕上。

提供一些选项来让用户开始

不要让用户没事可做

提供教育

如果大部分用户在首次体验后,仍然不太清楚如何使用你的应用(90% 的用户第一次使用都会这样),给出一些 UI 上的提示,来帮助用户学习使用你的应用。

给用户提供学习和使用应用的机会

不要强迫用户

优先处理最关键的操作

在前 7 天,向用户提示与他最密切的操作,或用户尚未尝试过的核心功能。

鼓励用户去进行最关键的操作

不要让用户没事可做

用户利益 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

用户利益模式包含了简短的自动轮播图或动画,突显使用应用能带来的三个好处。

选择正确的利益

用户利益模式应当展示使用应用能带来的三个好处。这些好处应当是有价值的,并且是人性化的,而不是仅对应用的功能做描述。

在要确定使用哪些优势时,请考虑:

  • 应用解决的问题
  • 应用带来的最大利益
  • 应用的「牙刷特性」(你每天使用一两次的功能)

集成选项

自动轮播

最多三个插图,每隔 2 到 3 秒自动转换一次,并显示分页导航。第一张插图应自动提前轮播,以便用户知道这不是单个插图。当用户轻触轮播图时,应禁用自动提前轮播的特性。

在动画中显示开始按钮,并连续循环播放动画,直到点击了「开始」按钮。

屏幕应支持通过轻扫来向前或向后翻页。

按钮和分页导航是固定显示的。文字排版是动态的,并且在一个单独的区域,不和插图混在一起,但是和插图有相同的海拔高度。

视频

最复杂的用户利益模式是含有精心制作的视频的。

这时应该包含一个「开始」按钮,但没有分页导航。

视频的实施

最佳范例

保持视觉的连续性

通过符号、环境、样式、排版和按钮颜色等方面来保证视觉连续性。

在过程中使用一致的视觉效果和颜色来为按钮和圆形创造统一的画布,以此来讲述一个完整故事。

简化

仅保留视觉元素的核心部分,以此来传达概念。

将保存文件到云端的隐喻通过插图视觉化

图片中没有重点

不要按字面意思来理解

如果用户没有使用过应用,应当显示用户利益,而不是应用界面。

稍后可以在相关场景中向用户展示特定 UI 的使用指南。

插图有助于表达直接利益

直接展示应用 UI,会让用户不清楚图片是插画还是可交互的元素

在设计用户引导时,应当结合用户的首次使用体验。用户在指引后所看到的 UI 应当能让用户快速联系刚刚所学的操作。

设计

在设计用户利益时,应当使用称赞之词。如果文字的表达更贴合你想表达的意思,就不要使用图片。

以下的布局是为了使 1:1 的插画能够跨平台适配。为了可访问性,背景色与文本要有充足的对比度。

手机和平板竖屏

将文本和交互元素放置在插画的下方,并居中对齐

手机竖屏

平板竖屏

手机和平板横屏

将文本和交互元素放置在插画的右侧,元素水平左对齐,垂直居中对齐

手机横屏

平板横屏

桌面端

将插图、文本和交互元素放置在居中的卡片中。在卡片两边显示「下一页」和「上一页」按钮,并在其下方显示分页指示符。

桌面端

可穿戴设备和电视的欢迎方式使用不同的交互方法,应该被区别对待。

设计元素标注

手机和平板竖屏

文本和交互元素在屏幕中水平居中,并从屏幕底部向上构建,距离屏幕底部有 24dp 的边距。

  1. 标题:字号 24sp,行高 32sp
  2. 组标题 1:字号 15sp,行高 24sp
  3. 32sp 行高
  4. 在按钮顶部和文本中心有 56dp 的间距(可以放置 1-3 行文本)
  5. 24dp 的垂直间距

手机和平板横屏

文本和交互元素与插画的左边缘对齐,并垂直居中。

  1. 标题:字号 24sp,行高 32sp
  2. 组标题 1:字号 15sp,行高 24sp
  3. 32sp 行高
  4. 在按钮顶部和文本中心有 56dp 的间距(可以放置 1-3 行文本)
  5. 24dp 的垂直间距

桌面端

  1. 标题:字号 24sp,行高 32sp
  2. 组标题:字号 16sp,行高 24sp
  3. 行高:32sp
  4. 在按钮顶部和文本中心有 56dp 的间距(允许放置 1-3 行文本)
  5. 图片和分页指示符之间的垂直间距:24dp
  6. 图片和箭头之间的水平间距:48dp