Material Design 设计规范

4年前发布

翻译文章 / UI / 资讯
李洋 翻译,如需商业用途或转载请与李洋联系,谢谢配合。

google Material Design ,原文写的非常细,有小伙伴觉得岑长难以消化,团队内部做UI和交互规范特地简化浓缩了下,精要居然还有100张ppt,现在整理一份网页版大家一起分享学习!个人理解不同异议详见原著。


一、核心思想


原质化设计(Material Design)核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。


07a856a7446b6ac7256cb02c32c6.jpg


实体感就是(通过设计方式来表达)隐喻,通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。



实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。


光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。


目标:在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。


二、材质与空间


1、材质


a4c656a744e632f875520ff26372.jpg

Material design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。


(此处有示意视频,要加视频链暂不加)

3e6f56a7476632f875520f5fd4b3.jpg


纸片的魔法特性,真实纸片所不具备的能力:


  • 纸片可以伸缩、改变形状

  • 纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分

  • 多张纸片可以拼接成一张

  • 一张纸片可以分裂成多张

  • 纸片可以在任何位置凭空出现


魔法纸片有些效果是禁止的:


  • 一项操作不能同时触发两张纸片的反馈

  • 层叠的纸片,海报高度不能相同

  • 纸片不能互相穿透

  • 纸片不能弯折

  • 纸片不能产生透视,必须平行于屏幕


通过动效demo去理解纸片的魔法特性:

53f656a745f36ac7256cb0a76ee8.jpg


2、空间


Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

1ae356a7478932f875520fc8f58b.jpg



所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。



(平面demo图)

(空间示意图)


注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。


三、动画


Material design重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。


动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。


1、表层响应


点击浮动


水波反馈


2、元素响应


b0ee56a7652b32f875520f5424d7.jpg


3、转场响应


806456a7656132f875520f5e12ef.jpg


新入元素(Incoming elements): 


完全新的元素需要有新手引导,从已有场景中转变而来的元素需要重新被识别


淡出元素(Outgoing elements):


与当前场景不相关的元素应当以恰当的方式被移除


通用元素(Shared elements):


指那些从转场开始到结束都没有发生变化的元素。可以是细微至单个图标,也可以是显著到占据屏幕的图片展示


3e6f56a7476632f875520f5fd4b3.jpg

从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。


用时序递次的动画引导用户注意力。


连贯的编排,相似元素的运动,要符合统一的规律。


通过图标的变化和一些细节来达到令人愉悦的效果。


5bac56a766596ac7256cb0208855.jpg


四、颜色


 

颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。


 

Appbar背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑。


 

小面积需要高亮显示的地方使用强调色(辅助色)。


 

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分隔线)


五、字体


8f4356a81ecb32f875520fa50375.jpg

英文字体使用Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black。


3f8f56a81ee232f875520fe19e92.jpg

Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。


常用字号:


12sp -------------------- 小字提示

14sp--------------------(桌面端13sp) 正文/按钮文字

16sp--------------------(桌面端15sp) 小标题

20sp-------------------- Appbar文字

24sp-------------------- 大标题

34sp/45sp/56sp/112sp-------------------超大号文字



长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

------------------------------------------------------------------------------

篇外补充:苹果6  1334*750像素,像素密度是326ppi,基于iPhone 6尺寸设计的px单位比


1sp=1px /( 326ppi/160) = 2.0375px。


1dp=1px /( 326ppi/160) = 2.0375px。


px = dp*ppi/160

dp = px / (ppi / 160)

px = sp*ppi/160

sp = px / (ppi / 160)

dp = sp?

------------------------------------------------------------------------------


六、图标


f93656a820066ac7256cb0b22547.jpg

网格参考


36c956a820516ac7256cb0979db8.jpg

               内容区域                                      修饰区域



995b56a820a432f875520f12c517.jpg

-不要给彩色元素加投影


-层叠不要超过两层


-折角不要放在左上角


-带投影的元素要完整展现,不能被图标边缘裁剪


-如果有折痕,放在图片中央,并且最多只有一条


-带折叠效果的图标,表面不要有图案


-不能透视、弯曲



454856a8216e6ac7256cb0e3c6b3.jpg

f4a156a83b4632f875520f96fc43.jpg

 

小图标的颜色使用纯黑与纯白,通过透明度调整:


黑色:[54% 正常状态] [26% 禁用状态]

白色:[100% 正常状态] [30% 禁用状态]


七、图片


 

描述具体事物,优先使用照片。然后可以考虑使用插画。



 

图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。  对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。


142d56a83c4432f875520fd5048c.jpg

主角图像通常被固定在很明显的位置,大小比普通大小略大,比如屏幕顶部的横幅。主角图像能够吸引用户,提供了内容相关的背景,或加强品牌。


70bb56a83c6232f875520fa93c06.jpg

图集图片(gallery images)通常风格醒目,且他们的布局基本相同,比如网格(grid)布局或是单一的图像。


八、布局

ddba56a83dfb32f875520f728b06.jpg


布局指南通过使用相同的视觉元素,结构网格,和通用的行距规则,让 app 在不同平台与屏幕尺寸上拥有一致的外观和感觉。结构和视觉上的一致创造了一个可识别的跨平台产品的用户环境,它给用户提供高度的熟悉感和舒适性,让产品更便于使用。


604356a83e5232f875520ffebf77.jpg

注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。


1.app规范


 

所有可操作元素最小点击区域尺寸:48dp X 48dp。栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。


以下是一些常见的尺寸与距离:


顶部状态栏高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

悬浮按钮尺寸:56x56dp/40x40dp

用户头像尺寸:64x64dp/40x40dp

小图标点击区域:48x48dp

侧边抽屉到屏幕右边的距离:56dp

卡片间距:8dp

分隔线上下留白:8dp

大多元素的留白距离:16dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp


2.平板规范


c88456a83ef86ac7256cb00a021a.jpg


ab8756a83f056ac7256cb0be6584.jpg1、24dp         2、64dp       3、8dp       4、72dp


3.像素密度


51ec56a83fab6ac7256cb026042f.jpg

 *DP =(宽度像素 160)/ DPI像素密度


例如,在 320 dpi 的分辨率一个 32×32 px 的图标为 16 x 16 DP


c55056a840fb6ac7256cb04ede84.jpg

顺便附上链接DPI Calculator


619556a853626ac7256cb0740078.jpg


4.触摸目标尺寸


728956a854236ac7256cb056b91e.jpg

最小的触摸目标尺寸是 48dp。在布局中,当为图标(24dp)或者头像(40dp)设置边距时,要时刻记得。触摸目标不能重叠。


5.自适应UI

b29f56a854ed32f875520f100cdb.jpg为了最优的用户体验,Material 用户界面应该适应如下断点宽度的布局:480、600、840、960、1280、1440 以及 1600 dp。


f85a56a855d432f875520fc2ea8a.jpg

适应性栏栅指的是具有恒定的外边距和间隔宽度,而不是列宽度。 Material design 中的外边距和列符合某一 8 dp 的方形基线栏栅。外边距和间隔可以是 8,16,24 或 40 dp 宽。


九、组件



1.底部动作条 Bottom sheets

180556a8568e32f875520f970e1b.jpg

列表样式


4ea756a856cf6ac7256cb092ad44.jpg

标准宫格样式


2.按钮 button


d96956a857cf32f875520f5b660f.jpg

悬浮按钮、浮动按钮、扁平按钮的重要次序


使用悬浮按钮要遵循以下规则:

  • 建议只用一个悬浮按钮

  • 悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘

  • 悬浮按钮不能被其他元素盖住,也不能挡住其他按钮

  • 列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项

  • 悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线


b2b756a8584c6ac7256cb027cf26.jpg

悬浮按钮通常触发正向的操作,添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作,也不应该有数字角标。



悬浮按钮有两种尺寸:56x56dp/40x40dp


3.卡片 card



在以下情况考虑使用卡片:

  • 同时展现多种不同内容数据类型(例如,卡片集包含照片,电影,文本,图像)

  • 卡片内容之间不需要进行比较

  • 包含了长度不确定的内容,比如评论

  • 包含丰富的内容与操作项,比如赞、滚动条、评论

  • 本该是列表,但文字超过3行

  • 本该是网格,但显示更多文本来补充图像


 

卡片布局准则


字体设计


正文:14 sp 或 16 sp


标题:24 sp 或更大


扁平按钮:Roboto Medium, 14 sp, 10 sp 字间距



移动设备上的卡片间距


屏幕边界与卡片间留白:8 dp


卡片间留白:8 dp


内容留白:16 dp


卡片统一带有2dp的圆角


d46356a859d032f875520fb62a05.jpg

卡片最多有两块操作区域,辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单,其余部分都是主操作区。



4.瓷砖 



这是瓷砖,不是卡片。

  1. 瓷砖带直角。

  2. 瓷砖少于两种操作。

可快速扫描的列表,用来代替卡片,是表现没有许多操作的同类内容的合适方法。


上图为错误案例


这里卡片的使用分散了用户注意力,不能快速扫描。这些列表项也不能忽略,所以把它们放在不同的卡片上是难以理解的。


5.纸片 CHIPS


 


19cc56a85ba532f875520f8f52b7.jpg


b6b156a85bbc32f875520ff29993.jpg


6.对话框 Dialog


 


·  点击对话框外的区域,不会关闭对话框。

·  通常情况,避免出现滚动条。空间不足时允许滚动,滚动条建议默认显示。

·  取消类操作项放在左边,引起变化的操作项放在右边。

·  在对话框中改变内容,不会提交数据,点击确定后,才会发生变化。

·  对话框上方不能再层叠对话框。

·  简易对话框,不带操作项。点击列表内容触发相应操作,并关闭对话框。点击简易对话框外面,对话框会关闭,操作取消。



对话框内容边距为24dp


 

对话框可以是全屏式的,全屏对话框上方可以再层叠对话框。全屏对话框右上角的操作项,可以是诸如保存、发送、添加、分享、更新、创建之类的操作,不要使用完成、OK、关闭这样的含糊措辞。


7.分割线 Dividers


列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。


没有头像、图标等元素时,需要用通栏分隔线。


图片本身就起到划定区域的作用,相册列表不需要分隔线。


没有头像谨慎使用分隔线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分隔线的层级高于留白、图标等元素时,需要用通栏分隔线。


通栏分隔线的层级高于内嵌分隔线。


8.网格 Grids

ebc356a85ed532f875520fb3c9eb.jpg

网格由单元格和瓦片组成




·  网格由单元格构成,单元格中的瓦片用来承载内容。

·  瓦片可以横跨多个单元格。

·  瓦片包含主操作区和副操作区,副操作区的位置可以在上下左右4个角落。

·  在同一个网格中,主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效,不能触发菜单。

·  网格只能垂直滚动。单个瓦片不支持滑动手势,也不鼓励使用拖放操作。

·  网格中的单元格间距是4dp

·  带有图标的文本   列表高: 68dp

·  每行的默认字体大小: 16sp/12sp或14sp/14sp

·  文本内边距: 16dp


9.列表 Lists

ff9f56a8646f32f875520f2fc6e6.jpg

列表由行构成,行内包含瓦片。如果列表项内容文字超过3行,请改用卡片。

如果列表项的主要区别在于图片,请改用网格。


db5356a864e532f875520f9acee5.jpg

列表包含主操作区与副操作区。副操作区位于列表右侧,其余都是主操作区。

在同一个列表中,主、副操作区的内容与位置要保持一致。


f96756a865246ac7256cb05c6888.jpg

在同一个列表中,滑动手势操作保持一致。


cd7c56a8656332f875520f968830.jpg

主操作区与副操作区的图标或图形元素是列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作,也可以包含快捷键提示、二级菜单等提示信息。


10.菜单 Menus


130d56a8657f6ac7256cb054eb91.jpg

顺序固定的菜单,操作频繁的选项放在上面。顺序可变的菜单,可以把之前用过的选项排在前面,动态排序。菜单尽量不要超过2级。


77a056a865cd6ac7256cb033f7c4.jpg

当前不可用的选项要显示出来,让用户知道在特定条件可以触发这些操作。


95be56a865ef6ac7256cb0547605.jpg

菜单原地展开,盖住当前选项,当前选项应该成为菜单的第一项。



菜单的当前选项,始终与当前选项水平对齐。


6b6056a8665e32f875520f12c751.jpg

菜单过长时,需要显示滚动条。


4d0056a8668732f875520ff92678.jpg

菜单从当前选项固定位置展开,不要跟随点击位置改变。


f04156a866a16ac7256cb084b53a.jpg

菜单到上下留出8dp距离。


11.选择器 Pickers

 

日期和时间选择器是固定组件,在小屏幕设备中,通常以对话框形式展现。


12.进度和动态 Progress & activity


250556a8671e6ac7256cb0372d3f.jpg

线形进度条只出现在纸片的边缘。


be5e56a8673b6ac7256cb06af77c.jpg

环形进度条也分时间已知和时间未知两种。


d79c56a8677e32f875520fd325e9.jpg

环形进度条可以用在悬浮按钮上。


ffc456a8679f6ac7256cb0ad119d.jpg

加载详细信息时,也可以使用进度条。


bb0b56a867b332f875520f56ef55.jpg

下拉刷新的动画比较特殊,列表不动,出现一张带有环形进度条的纸片。


13.选择控制器

单选按钮在悬停、聚焦、按动、失效以及失效聚焦的状态


复选框在悬停、聚焦、按动、失效以及失效聚焦的状态。


5b9f56a8688032f875520fe7f69a.jpg

开关选择器在悬停、聚焦、按动、失效以及失效聚焦的状态


14.滑块控件 Sliders



 

     滑块左右两边可以放置图标。    


 

或是可编辑文本框。


9c5056a869076ac7256cb0ca66ed.jpg

非连续的滑块,需要标出具体数值。


366056a8692432f875520f6741a9.jpg

个性创意的数值滑块


15.Snackbars 与 Toasts


snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。



 


·  Snackbars至多包含一个操作项,不能包含图标。不能出现一个以上的Snackbars。

·  Snackbars在移动设备上,出现在底部。在PC上,应该悬浮在屏幕左下角。

·  不一定要用户响应的提示,可以使用Snackbars。非常重要的提示,必须用户来决定的,应该用对话框。

·  Snackbars不能遮挡住悬浮按钮,悬浮按钮要上移让出位置。


65fe56a86b0932f875520f1b988f.jpg

Snackbars的留白比较大,24dp。


816a56a86bc332f875520f463378.jpg

Toasts类似Snackbars的留白24dp,


它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。


Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能从屏幕上滑动关闭。


16.副标题 Subheaders


054a56a86d0f32f875520faff78f.jpg

小标题是列表或网格中的特殊瓦片,描述列表内容的分类、排序等信息。


338656a86d4932f875520fab08f1.jpg

滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。


926f56a86d766ac7256cb0127bc0.jpg

存在浮动按钮时,小标题要让出位置,与文字对齐。


17.Tabs


37e756a86db432f875520fd113b1.jpg

tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项。


548b56a86ddd6ac7256cb0d0d65a.jpg

超出6项,tab需要变为滚动式,左右翻页。


973556a86df632f875520f491e30.jpg

tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。


tab选中项的下划线高度是2dp。


18.文本框 Text fields


358856a86e426ac7256cb0093f6a.jpg

简单一根横线就能代表输入框,可以带图标,文本Roboto Regular  16 sp,横线的宽度变为2dp,


5d0c56a86e8b32f875520f6317eb.jpg

激活状态和错误状态,颜色改变。


181556a86e616ac7256cb0070c55.jpg


输入框点击区域高度至少48dp,但横线并不在点击区域的底部,还有8dp距离。


9fa056a86f6d32f875520fb5bb91.jpg

输入框提示文字,可以在输入内容后,缩小停留在输入框左上角。

6e0b56a86f916ac7256cb0ce76bb.jpg

整个点击区域增高,提示文字也是点击区域的一部分。


423f56a86eac32f875520f715c41.jpg

整个点击区域增高,提示文字也是点击区域的一部分。


 

通栏输入框是没有横线的,这种情况下通常有分隔线将输入框隔开,右下角可以加入字数统计。


字数统计不要默认显示,单行的字数统计显示在同一行右侧,字数接近上限时再显示出来。


 

错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。同时多个输入框错误,顶部要有一个全局的错误提示。


fb2656a8708d32f875520f3e75bc.jpg

字数限制与错误提示都会使点击区域增高。


 

输入框尽量带有自动补全功能。


19.工具提示 Navigation drawer


3f9556a871266ac7256cb03743ad.jpg

提示只用在小图标上,文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。


215156a8715e32f875520fa32722.jpg


379056a8717932f875520fdcf091.jpg

上图是错误例子。提示不能包含富文本,不需要三角箭头。


20.导航抽屉 Tooltips


a45956a871ce6ac7256cb0855f47.jpg

侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。


be7e56a8721232f875520f78bd9a.jpg


· 设置界面只能包含设置项,诸如关于、反馈之类的界面,入口应该放在其他地方。

· 设置项使用通栏分隔线来分组。7项以下不必分组。

· 如果某项独立一组,考虑把它放在顶部(重要)或放在底部的“其他”一栏中(不重要)。

· 设置项较多时尝试合并,比如把两个相关的勾选项合并成一个多选项。

· 设置项非常多时,使用子界面。


21.可用性无障碍设计


 

material design很重视用户的广度,应该尽量照顾到残障人士的体验。

设计时考虑以下使用场景:


→  没有声音

→  没有色彩

→  手机开启了高对比度模式

→  手机画面放大

→  没有视觉信息,使用屏幕阅读器

→  只能通过语音控制

→  以上多项结合


并注意以下问题:


→  无鼠标、纯键盘操作。鼠标悬停显示信息,也要通过其他方式展现。

→  考虑大字号情况下的使用体验。

→  不要只通过颜色表达某些信息。

→  音频信息也要提供文字或其他视觉呈现。

→  为图片和视频提供备用的文字信息。



--------------------------------附件资源 Android_5.0_L_Psd提供学习参考--------------------------


你很耐心的读到这里了,恭喜,你绝对是人才!...

147
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息