Material Design安卓规范总结

Material  Design核心思想

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

特点：运用比喻，大胆、形象目的明确，动效表意

材质与空间

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

但同时也拥有真实纸片所不具备的能力：

纸片可以伸缩、改变形状

纸片变形时可以裁剪内容

多张纸片可以拼接成一张

一张纸片可以分裂成多张

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

且一些效果是禁止产生的：

一项操作不能同时触发两张纸片的反馈层叠的纸片，高度不能相同

纸片不能互相穿透

纸片不能弯折

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

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

动画效果

Material design对动效的强调:

动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

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

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

特点：

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

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

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

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

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

色彩规范

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

2.Appbar背景使用主色（色值卡500），状态栏背景使用深一级的主色或20％透明度的纯黑。（色值卡700）

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

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

图标

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

2.小图标尺寸是24dpX24dp。图形限制在中央20dpX20dp区域内。小图标同样有栅格系统。线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。

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

黑色［54％正常状态］ ［26％禁用状态］

白色［100％正常状态］［30％禁用状态］

图片

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

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

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

文字

1.英文字体使用 Roboto Roboto有6种字重：Thin、Light、 Regular、 Medium、Bold和 Black

2.中文字体使用 Noto Noto？有7种重：Thin、Light、Demilight、 Regular、Medium、Bolo和Black。

常用字号

①12sp小字提示

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

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

④20 sp Appbar文字

⑤24sp大标题

⑥34sp／45p／56sp／1125p超大号文宇

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

布局

所有可操作元素最小点击区域：48dpX48dp

栅格系统的最小单位是8p，一切距离、尺寸都应该是8dp的整数倍。

Thanks！