Android:Material Design - Style - Color

色彩

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

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值