Android:Material Design - Style - Color

色彩

Material设计语言中,所使用的色彩鲜活,能够完美搭配柔和的背景环境。取色灵感来自当代减除、路标、道路的减速带、操场。通过浓厚的阴影和强烈地高光强调视觉元素。带来一种惊喜和缤纷的色彩。

UI色板(UI Color Palette)

这份色板每一张均从基本颜色开始,然后逐渐扩充,创建出一套完整、可复用的配色体系,可用于网页设计、安卓设计和iOS设计。500种选择

Android:Material Design - Style - Color_第1张图片

Android:Material Design - Style - Color_第2张图片
Android:Material Design - Style - Color_第3张图片

Android:Material Design - Style - Color_第4张图片

Android:Material Design - Style - Color_第5张图片
Android:Material Design - Style - Color_第6张图片

Android:Material Design - Style - Color_第7张图片
Android:Material Design - Style - Color_第8张图片

Android:Material Design - Style - Color_第9张图片
Android:Material Design - Style - Color_第10张图片

Android:Material Design - Style - Color_第11张图片

UI 中的色彩应用(UI Color Application)

UI Color Palette

先选主色,色调限制在3种之内。在第二张色板中再选择强调色。强调色在后面的使用中可能会发生改变。
Android:Material Design - Style - Color_第12张图片

Android:Material Design - Style - Color_第13张图片

Use alpha values for grey text, icons, and dividers

为了打造更高效的信息层级,文本要使用不同色调。白色背景中,标准的文本透明度是87%(#000000)。而次级文本/图标,不透明度应该是48% (#000000)。提示文本,处于还要更低的视觉层级,那么不透明度是24% (#000000).

其他元素,比如说图标和分割线,也应该设置透明度,效果要比纯色好,这样的透明度设置(下图),能适应任何背景色。

而有色背景上的黑白色文本,请参考上图的配色表,来设置透明度,提高对比感。
Android:Material Design - Style - Color_第14张图片

推荐在界面设计中,在较为大块的区域大胆拥塞。界面中的不同元素采用不同的色彩主题。如下图,工具栏,以及较为大块的区域,采用了500蓝这种主色。这是应用的主色,而状态栏采用了700蓝,比主色稍深。

Android:Material Design - Style - Color_第15张图片

Accent color

靓丽的强调色可被用来当做按钮和控件,例如开关和滑块。左对齐的选项(或是图标,或是标题)也可以采用强调色。

Android:Material Design - Style - Color_第16张图片

Fallback accent colors

如果你的强调色过暗或过淡,那么可以调整强调色的明暗。如果你的强调色不起作用,那么干脆在白色背景上使用主色500蓝,如果背景色是主色500蓝,那么可以尝试使用透明度100%的白色,或者54%的黑色。
Android:Material Design - Style - Color_第17张图片

色彩主题(Themes)

确定色彩主题能让应用的视觉保持一致。色彩样式风格决定了物体表面墨水效果的明暗度,阴影的强度。这里建议两种风格的色彩主题

  • 明亮
  • 深邃

Android:Material Design - Style - Color_第18张图片

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

你可能感兴趣的:(android,color)