Material Design 设计规范总结(1)

本文是Material Design设计规范总结的第一部分，是进行UI设计与前端开发的极端重要的必备参考资料。

一、核心思想

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

二、材质与空间

1.材质

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

2.空间

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

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

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

三、动画

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

1.缓动（easing）

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

2.水波反馈（wave）

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了Material design动画的功能性。

3.转场效果（transitions）

(1)通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。

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

(3)多个相似元素，动画的设计要有先后次序，起到引导视线的作用。

(4)相似元素的运动，要符合统一的规律。

4.细节动画（detail）

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

四、颜色

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

(2)App bar背景使用主色，状态栏背景使用深一级的主色或20%透明度的纯黑。

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

(4)其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]

白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

五、图标

1.桌面图标

桌面图标尺寸是48dp X 48dp。桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。

2.小图标

(1)小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。优先使用material design默认图标。设计小图标时，使用最简练的图形来表达，图形不要带空间感。

(2)小图标同样有栅格系统。线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。

(3)小图标的颜色使用纯黑与纯白，通过透明度调整：

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

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

六、图片

1.选用图片

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

2.图片上的文字

(1)图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。

(2)对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。

(3)可以使用半透明的主色盖住图片。

3.提取颜色

Android L可以从图片中提取主色，运用在其他UI元素上。

4.图片加载过程

图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。

七、文字

1.字体

(1)英文字体使用Roboto，中文字体使用Noto。

(2)Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。

(3)Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

2.文字排版

常用字号：

12sp 小字提示

14sp（桌面端13sp） 正文/按钮文字

16sp（桌面端15sp） 小标题

20sp Appbar文字

24sp 大标题

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

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

原文链接：https://www.jianshu.com/p/b42fe05ccaae