add资源贴UI设计

Material Design是什么?

2016-01-25  本文已影响38人  Pixel32

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

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

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

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

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


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


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


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


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


9、布局

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

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

10、组件规范略

上一篇下一篇

猜你喜欢

热点阅读