Material UI Colors:为Material Design而生的配色模板

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

UI色板

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

20151012224219

UI 中的色彩应用

1.选择配色合理的配色板

先选主色,色调限制在3种之内。在第二张色板中再选择强调色。强调色在后面的使用中可能会发生改变。

68478

68479

2.文本、图标、分割线要设置透明度

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

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

而有色背景上的黑白色文本,请参考上图的配色表,来设置透明度,提高对比感。

68480

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

68481

68482

3.强调色

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

68483

68484

4.调整强调色

如果你的强调色过暗或过淡,那么可以调整强调色的明暗。如果你的强调色不起作用,那么干脆在白色背景上使用主色500蓝,如果背景色是主色500蓝,那么可以尝试使用透明度100%的白色,或者54%的黑色。

68485

 

新增 Material Design 图标下载

20151012224402

官方网站:http://www.materialui.co/colors

1 收藏

资源整理者简介:卢伟

设计师、极客爱好者 个人主页 · 贡献了320个资源 · 5 ·    


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer