Material Design是什么?

http://www.google.com/design/spec/material-design/introduction.html

1、专为跨平台体验的一致性而设计。

2、三维空间,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。默认所有的元素的厚度都是1dp。对元素进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。

Material Design是什么?_第1张图片

3、魔法纸片。纸片可以承载所有信息,文本,图片,视频,音乐等

Material Design是什么?_第2张图片

4、动画。首先考虑现实世界中的运动规律。其次用户所有操作,有动画反馈效果。

Material Design是什么?_第3张图片

Material Design是什么?_第4张图片
Material Design是什么?_第5张图片
Material Design是什么?_第6张图片

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

Material Design是什么?_第7张图片

6、桌面图标。建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。尺寸是48dp X 48dp。优先使用material design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

Material Design是什么?_第8张图片

Material Design是什么?_第9张图片
Material Design是什么?_第10张图片

7、图片。选择突出场景,故事性,有单一的视觉中心。文字放置图片上时,根据需要添加暗纱。图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化

Material Design是什么?_第11张图片

Material Design是什么?_第12张图片

8、英文字体使用Roboto,中文字体使用Noto。

Material Design是什么?_第13张图片

9、布局

所有可操作元素最小点击区域尺寸:48dp X 48dp。

栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:

Material Design是什么?_第14张图片

10、组件规范略

Material Design是什么?_第15张图片

你可能感兴趣的:(Material Design是什么?)