色彩
Material设计语言中,所使用的色彩鲜活,能够完美搭配柔和的背景环境。取色灵感来自当代减除、路标、道路的减速带、操场。通过浓厚的阴影和强烈地高光强调视觉元素。带来一种惊喜和缤纷的色彩。
UI色板(UI Color Palette)
这份色板每一张均从基本颜色开始,然后逐渐扩充,创建出一套完整、可复用的配色体系,可用于网页设计、安卓设计和iOS设计。500种选择
UI 中的色彩应用(UI Color Application)
UI Color Palette
先选主色,色调限制在3种之内。在第二张色板中再选择强调色。强调色在后面的使用中可能会发生改变。
Use alpha values for grey text, icons, and dividers
为了打造更高效的信息层级,文本要使用不同色调。白色背景中,标准的文本透明度是87%(#000000)。而次级文本/图标,不透明度应该是48% (#000000)。提示文本,处于还要更低的视觉层级,那么不透明度是24% (#000000).
其他元素,比如说图标和分割线,也应该设置透明度,效果要比纯色好,这样的透明度设置(下图),能适应任何背景色。
而有色背景上的黑白色文本,请参考上图的配色表,来设置透明度,提高对比感。
推荐在界面设计中,在较为大块的区域大胆拥塞。界面中的不同元素采用不同的色彩主题。如下图,工具栏,以及较为大块的区域,采用了500蓝这种主色。这是应用的主色,而状态栏采用了700蓝,比主色稍深。
Accent color
靓丽的强调色可被用来当做按钮和控件,例如开关和滑块。左对齐的选项(或是图标,或是标题)也可以采用强调色。
Fallback accent colors
如果你的强调色过暗或过淡,那么可以调整强调色的明暗。如果你的强调色不起作用,那么干脆在白色背景上使用主色500蓝,如果背景色是主色500蓝,那么可以尝试使用透明度100%的白色,或者54%的黑色。
色彩主题(Themes)
确定色彩主题能让应用的视觉保持一致。色彩样式风格决定了物体表面墨水效果的明暗度,阴影的强度。这里建议两种风格的色彩主题
- 明亮
- 深邃
http://blog.chengyunfeng.com/design/spec/style/color.html#
http://www.ui.cn/detail/18875.html
https://www.google.com/design/spec/style/color.html#color-color-palette