Material Design Onboarding 导览

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

导览是一种虚拟的开箱体验,可帮助用户开始使用应用程序。

目录

用法

自选模式

快速开始模式

最大优势模式

细则

用法

应该针对用户对应用程序的熟悉程度,给出更适合用户的导览。

使用者情境导览目标用户已经安装了应用程序,不需要再看到更多推广信息了用户可能渴望在不看说明书的情况下尝试该应用程序用户尚不熟悉应用程序的界面或正准备去了解欢迎用户,并提前激发用户体验应用的兴趣帮助用户含蓄或明确地了解在生活中如何使用该应用程序鼓励用户进行操作,增加用户互动,提高前七天的参与度和留存率

导览是漫长旅程中的一个点,起始于应用商店,终止于用户第一次在你的应用中执行相关的密码保存操作。

当你在设计导览时,要考虑到导览出现之前和之后的界面。

针对第一次使用的用户展示导览。但不要针对使用过的用户。

类型

有三种导览的类型:自选,快速开始,用户最大优势。

eeypkfudiy3.png插图

n1a0uju4tqu.png插图(1)

最适合你的应用的导览模式,取决于你的应用程序是否使用通用的、易于识别的用户界面样式,以及设置是否容易。

自选模式快速开始模式用户最大优势模式何时使用UI 可以定制你的应用程序可以设置并有同意请求你已经确定了此行为可以增加用户的交互(第一次会话中)或增加留存率(在前七天)何时不要使用你的应用正在处理一个新的任务,或提供了一种新的优势发布新功能或重要的 UI 更新你的应用正在处理一个新的任务,或提供了一种新的优势组合不要将自选模式和用户最大优势模式结合在一起确定在首次体验前包含了设置

自选模式

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

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

5xnmlt2jid3.png插图(2)

呈现正确的选择

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

提供的选择可以是:

有意义的和有显著影响的提供新信息的简短的

有意义的和有显著影响的

提供对用户体验有意义和有显著影响的选择。这些选择无形中指导了用户如何与你的用户界面交互。

nwn5ei2urws.png插图(3)

询问你无法得知的数据

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

hj4emolxsan.png插图(4)

保持简短

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

每个屏幕内的选项应少于十个。

0igsq5sihgu.png插图(5)

在设计导览时,请考虑导览过程如何与用户首次体验相衔接。导览结束后,用户登陆到的界面上可以操作刚刚学到的东西。

设计

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

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

1m5rbffludw.png插图(6)

绑定列表

5qay0gopkht.png插图(7)

快速开始模式

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

快速开始模式:

使用户能快速使用应用的核心功能通常优先处理最关键的操作也可以提供一个可选的方式了解更多信息或寻求帮助的途径

最佳实践

让用户有事可做

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

s4yohus2yfs.png插图(8)

提供指导

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

1vgejgzfye4.png插图(9)

优先处理最关键的操作

在前7天,选择与用户参与度最密切的操作。或者引入核心功能,给用户那些还未尝试过的功能做出提示。

xop2lp005wf.png插图(10)

最大用户优势模式

最大用户优势导览模型包含一个简短的自动轮播图或动画故事板,突显使用该应用程序的三个主要优势。

选择正确的优势

最大用户优势模型应该展示使用该应用程序最多三个主要优势。这些优势应该在重要的时刻把应用程序定位成有价值的和人性化的,给出说明和描述,而不是仅呈现应用程序的功能。

在要确定呈现哪些优势时,请考虑:

该应用程序能解决什么问题应用程序创造的主要优势是什么应用程序的“牙刷特性”(意思是,你每天会使用一次或两次的功能)

集成选项

自动轮播

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

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

屏幕应支持向前或向后滑动功能。

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

视频

最大用户优势模式的另一种选择是视频。

这时应该包含一个“开始”按钮,但不包含分页导航。

视频的实现

最佳实践

保持视觉的连续性

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

jsrgtazpf5h.png插图(11)

a2wvpoi4sxc.png插图(12)

在整个过程中使用一致的视觉效果和颜色,通过为按钮和分页导航创造统一的背景图来统一故事。

简化

简化视觉效果去传达概念所需的基本要素。

fjws13i03c0.png插图(13)

不要用照搬用户界面

如果用户没有使用过该应用程序,那么导览不要显示应用程序的用户界面,应该先显示最大用户优势。

你可以在稍后的相关场景中显示有关特定用户界面的使用指导。

jbsqsxc3g0b.png插图(14)

设计导览与首次使用体验相关。在导览指导后看到的用户界面,应该使用户能更轻松的根据他们刚刚学到的东西进行操作。

设计

最大用户优势的设计应该与文字描述相配合。如果有一个想法通过词语可以更好的表达出来,那么应该使用文本而不是图片。

这种布局是为了使具有1:1的宽高比的插画能始终适配所有平台的屏幕。确保背景色和文本颜色满足最低对比度要求,增加可访问性。

移动设备和平板电脑的垂直排版

在插画下方放置中心对齐的文本和交互元素。

41batyrdfs3.png插图(15)

移动设备纵向排版

zcyomldw0lc.png插图(16)

平板电脑纵向排版

移动设备和平板电脑的横向排版

将文本和交互元素左对齐,沿着插图的右边缘放置,并垂直居中。

rnkaqtpi3cx.png插图(17)

移动端横向排版

hnamusm44yd.png插图(18)

平板电脑横向排版

桌面端

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

vg13bchjprr.png插图(19)

桌面端

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

细则

竖屏的手机端和平板端

4bvtcizbd4y.png插图(20)

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

标题:字号24sp,行距32sp副标题:字号15sp,行距24sp32sp的行高在按钮顶部和副文本中心之间有56dp的间距(可以放置1-3行文本)24dp的垂直内边距

横屏的手机端和平板端

3kct2fmmucv.png插图(21)

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

标题:字号24sp,行距32sp副标题:字号15sp,行距24sp32sp的行高在按钮顶部和文本的中间有56dp 的间距(可以放置1-3行文本)24dp的垂直内边距

桌面端

vagaamqwqbh.png插图(22)

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

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

花了半年时间,我们做了一套通用型移动设计规范给大家

2020-10-11 18:05:20

UI设计

数据可视化设计师如何建立灵感库?

2020-10-11 20:09:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索