-
从三类颜色说起------Primary color,Secondary color,Accent color
先打开AndroidStudio,新建一个项目,在res/values/color中有如下代码
谷歌在MD官方提到了在设计中的三类颜色Primary color,Secondary color,和Accent color:
Primary color其实就是App的主色调,参考谷歌官方贴出的调试板,推荐饱和度为500,也就是下图中最上面的色彩
对比第一幅图中的colorPrimary值正是#3F51B5,Primary color作为主色调,应该在屏幕和组件中最广泛的使用。
colorPrimary了解了,colorPrimaryDark又是干什么的呢?这也就是接下来说的Second color(第二颜色???),应该翻译成辅助颜色才正确,作为辅助颜色,颜色应该与主色调保持相似,即在主色调的基础上加深或者变浅,官方并未明确具体使用多少饱和度的颜色(调色板给出了九种(除开500)为开发者提选择),下图是官方的介绍Secondary color时的一个插图
值得注意的是这里的Second color有两种颜色,除了饱和度为700的#303F9F还有一个饱和度为100的浅蓝色,中间是Primary color。Second color起过度的作用,体现层次感。比如在状态栏(谷歌推荐饱和度为700)中的使用。当然你也可以在你的App中想其过度的地方使用辅助颜色。比如下面这幅图:
最后一个也就是colorAccent ,翻译叫做强调色,其实在谷歌官方的调色版中有这样一排颜色
饱和度从50上升到900然后就突然变成了A100,中间似乎还有点隔断,故意区分开来,其实这个A也就是colorAccent中Accent的缩写,没错,这就是强调色,验证这个的是初始项目中的粉色#FF4081正是粉色的强调色
强调色的作用故名思义就是起强调作用(一般颜色都比较艳丽,比如这里的粉色),在Progressbar,一些重要链接 ,光标,选中文字颜色等中使用。
有时会遇到上图右图中的问题,这时候就需要用亮色的强调色代替。
掌握了上面三类颜色,就能写出符合MD设计的主题了,以此来达到规范的目的
- 不可不提的不透明度
在App开发中会接触到不同的数据,在展示这些数据过程中,有个优先级的问题,即哪些数据是最主要的,应该强调展示,哪些次之。那么谷歌是怎么做的呢?
可以看到文字的不透明度被分成了3个层次,有点两点需要注意
- 在暗色和亮色背景下各层成的透明度是不同的
- 主色调与强调色的不透明度都是100%
参考Material Design官方写的一篇文章,个人非常喜欢MD设计,刚开始写博客,不知道写什么好,于是从MD设计写了。
嗯,2017.2.24,第一篇博客。