想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

荣超:这个指南中的实践案例和组件可以帮助用户快速直观地了解他们在你的应用中能做些什么,想知道谷歌的设计团队是如何做有效用户引导的,看这个准没错!

相关教程:《想提高可用性?看谷歌MATERIAL DESIGN 的官方教程是怎么做的!》

以下指南旨在:

  1. 通过在相关情景中介绍应用的特性和功能来帮助用户从中获取更多的价值
  2. 改善应用的参与度和留存率

为了确保用户体验、尊重用户意愿,这些建议会涉及到目标、时间、音量和频率。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

前七天

  • 用户引导:自定义模式
  • 用户教育:如何使用应用的基础指导

接下来30天及以后

  • 特性探索:用户未尝试过的特性和功能提示

用户引导

“用户引导”帮助用户了解、使用应用。

“用户引导”的内容应简洁明了,同时需要有效提高用户对应用的使用。

用法

你设定的“用户引导”方案应该考虑到对应用熟悉程度不同的各类用户,从而根据不同用户设立不同目标。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

用户引导模式

用户引导从应用商店开始,结束于用户第一次使用应用

设计引导页时需要考虑好前后页面间的关系。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

图为第一次运行应用的用户引导(只显示给第一次打开应用的用户)

Material design包括以下三种引导模式:

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

自定义

允许用户自定义他们的选择。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

快速入门

直接在应用中开始引导。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

突出用户利益

利用简洁的自动轮播页(或动画)突出使用该应用的三个好处。

适用什么类型的”用户引导“取决于你的应用是否使用通用,可识别的UI风格和设置的方便程度。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

自定义模式

自定义模式允许用户通过一系列简短的操作来自定义他们首次运行应用的体验。

这种模式是暗示引导,它可以给予用户一种控制感和让用户从页面中获取到自己的兴趣。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  登陆页

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  自定义模式

提高正确的选择

你提供给用户的选择将会直接影响你“用户引导”的成效。

选择需要:

  • 有意义且引人关注
  • 提供新信息
  • 简短

有意义且引人关注

提供对用户体验有利且有显著影响的选项。通过暗示教育用户如何与UI交互。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

用户自己选择需要的内容利于后续产品体验。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

了解用户,检查他们stream的频率,但不能对体验造成影响。

问你不知道的事

不要询问可以从正常产品使用中就能获取到的用户行为偏好。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

很难从用户正常使用产品过程中得知用户想要的内容。这时候询问用户偏好是非常有价值的。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

不要要求用户做出选择,因为通常用户选择完后很少会特意返回去修改这些选择。

保持简短

在单屏中限制选项的数量,或者使用多屏来呈现这些选项(这会让用户感觉每屏的内容相互关联)。

每屏应少于十个选项。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

单屏展示自定义选项

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

不可过多屏展示自定义选项

在设计“用户引导”时,请考虑用户引导的过程如何与用户首次运行应用的体验相连接。用户引导过后,保证用户能够按照刚刚的指引进行实际操作。

设计

围绕“你的应用能做什么”来设计“自定义选项”页面。专注于内容消费的应用可能会询问用户感兴趣的主题,而那些需要订阅的应用可能会询问用户要绑定哪些主题。

一些常见的关于“自定义选项”的设计模式:

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  绑定列表

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  宫格视图

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  列表

 快速入门

在快速入门模式中,用户直接到达没有显示任何用户引导模式的界面中(除了登录和设置)。

快速入门模式:

  • 使用户能够快速入门应用的核心功能
  • 提供优先级第一的关键操作
  • 还可以提供可选途径去了解更多信息或帮助请求

最佳案例

  • 让用户动起来

你的界面应该鼓励用户交互,而不是将用户停留在空白屏幕上。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

可提供用户启动的选项:

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

不可不要让用户无所事事。

提供教学

如果大多数用户在引导页之后还不清楚如何使用应用的话,那在界面中提供提示UI供用户选择学习如何使用应用。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

提供机会让用户学习使用应用:

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

不要强迫用户进入学习。

提供优先级第一的关键操作

提供与用户参与度(头七天)最密切相关的操作。或者,使用提示的方式介绍用户未使用过的应用的核心功能。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  推动用户进行优先级第一的关键操作

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  不要让用户无所事事

突出用户利益的引导模式里面包含有简短的轮播页,或者是动画。它突出了用户使用该应用的三大好处。

选择正确的用户利益显示

在突出用户利益模式中只显示不超过三个关于用户的利益说明。这三个页面应将应用和用户个人利益联系在一起进行描述,而不是命令用户做什么或者只在阐述应用有什么功能。

在确定要呈现哪些好处时,请先考虑:

  • 应用能够解决的问题
  • 应用能为用户带来最大的好处
  • 应用的"牙刷功能" (意思是一项用户每天都会使用一或两次的功能)

集成选项

  • 轮播页

轮播页最多展示三幅插图,并每隔2-3秒自动切换插图。第一屏需要比其他两屏页面的停留时间更短,这样做是为了让用户清楚当前屏幕是个轮播页而不是一个单一的页面。如果用户触碰到页面,那轮播功能应该被禁用。

显示 "Get Started" 按钮并循环播放动画,直至用户点击 "Get Started" 按钮进入应用。

轮播页允许用户使用滑动手势,使用滑动手势可以向前或向后滑动查看页面。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  轮播图自动播放。按钮和分页导航的位置是固定的。

最佳案例

  • 保持视觉的连续性

通过调整字符、环境、样式、排版和按钮颜色来保持视觉的连续性。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

在整个体验中使用一致的视觉效果和颜色,并通过固定的按钮和分页导航来统一构图,进而创建一个统一的用户引导(叙事)。

简化

简化传达一个概念所需要素的视觉效果。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△ 隐喻:插图非常直观的描述了文件保存到云端

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△ 不可整幅图没有焦点

不要显示UI

如果用户从没有使用过该应用,则不要显示应用相关的UI。首先你需要显示应用提供给用户好处。

你可以在稍后的页面中显示特定UI的教学。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△ 这幅插图向用户传达了应用提供给用户的好处

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△ 显示实际应用的UI会让用户疑惑图像是插图还是可交互的元素。

设计用户引导的时候需要考虑到用户“第一次”的应用体验。引导页过后正式进入应用后,用户所看见的界面操作应该跟之前引导学习的内容相关联,让用户能够快速上手。

设计

突出用户利益模式的设计应该以一种称赞的情感进行描述。其中的描述最好使用文字表达,而不是图像。

1:1宽高比的插图适用于不同平台上的屏幕。确保背景色和文本颜色满足可访问性(无障碍)的最小对比度标准。

移动和平板端竖向显示

居中对齐的文本和交互元素放置在插图之下。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  移动端:竖向显示

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  平板端:竖向显示

移动和平板端横向显示

左对齐的文本和交互元素放置在插图的右侧,并垂直居中。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  移动端:横向显示

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  平板端:横向显示

桌面端

将插图、文本和交互元素放在一个居中对齐的卡片中。在卡片旁边显示“上一页”和“下一页”按钮,并在它的下方放置分页指示器。

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

△  桌面端

可穿戴和TV设备上的启动页使用的是不同的交互方法,所以需要以不同的方式进行设计。

各平台尺寸标准

  • 移动和平板端上竖向显示

文本和UI在页面中居中对齐。屏幕底部的上方生成24dp内边距(padding)。

1.大标题:24sp,行距32sp

2.副标题:15sp,行距24dp

3.32sp行高

4.按钮顶部到文本中心的距离:56dp(空间只允许存在1-3行文本)

5.垂直方向上24dp内边距

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

移动和平板端上横向显示

文本和UI对齐至插画的左边缘,并垂直居中

1. 大标题:24sp,行距32sp

2. 副标题:15sp,行距24dp

3. 32sp行高

4. 按钮顶部到文本中心的距离:56dp(空间只允许存在1-3行文本)

5. 垂直方向上24dp内边距

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

想做用户引导?看谷歌Material Design 的官方教程是怎么做的!

桌面端

1. 大标题:24sp,行距32sp

2. 副标题:16sp,行距24dp

3. 32sp行高

4. 按钮顶部到文本中心的距离:56dp(空间只允许存在1-3行文本)

5. 图像距离页码圆点:24dp

6. 图像距离箭头:48dp

本小节结束。想继续学习的同学记得转微博哟。

Material Design 好文合集」

官方译文:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

学习笔记:

  1. 《学霸的自学笔记!Material Design设计规范学习心得》
  2. 《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记》

素材篇:

  1. 《新鲜热辣!一组实用的MATERIAL DESIGN风格素材!》

实战教程:

  1. 《重磅改版!网易新闻安卓客户端MATERIAL DESIGN实战》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 10
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。