颜色的运用
Material Design
采用的是扁平化的设计,可以看到一大块一大块区域的颜色。这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内。
“没有错误的颜色的,只有错误的搭配”。颜色是没有对错的,我们要用经验和直觉来搭配它们,所以要先来认识认识颜色。
颜色理论
颜色是有语言的,红色代表这热情奔放,蓝色代表的沉着安静,绿色代表着生机活力。搭配一组颜色,就是表达作品要传递的含义。
我们大部分人都知道RGB颜色,它的理论依据是:任何颜色都是通过不同强度的红色R
、绿色G
、蓝色B
组合而成的,改变它们的组合就能得到任何颜色。在计算机领域,这三种颜色分别具有0~255个不同的数值。
对于设计师配色来讲,还会使用另外一个体系的颜色理论-HSB:色调H,饱和度S,亮度B。
我们人在谈论颜色的时候,总是说这个颜色很红、有点绿、偏蓝。
当我们说很红
的时候,就是给颜色设定了一个基调-红色。这种基调称为色调。色调成圆环形状的分布,依次渐变的呈现出赤橙黄绿青蓝紫各种颜色。
色环具有360度,因此色调的数值就是0~359度。色调数值从0到359变化,也代表着颜色从暖色
逐步过渡到冷色
。你是不是看到红色就觉得温暖,而看到深蓝色就觉得冷飕飕的呢?
很红
的很
字,就要通过饱和度和亮度来体现了,
饱和度:可以理解成把一种纯粹的颜色溶解到水里面,如果水很多,颜色就很淡;如果水很少,颜色就很纯。因此它具有0%~100%的数值。
- 亮度:我们能看到物体是因为光线照在物体上面的缘故。如果一点光没有,不管什么样的颜色,看起来都是黑的,只有充足的光线才能反映出物体本来的颜色。因此它具有0%~100%的数值。
0%
说明没有光照,那么就会是黑色。
如果你的本行并不是设计师或者刚入行不久,在给安卓应用配色的时候一定会犯迷糊,不知如何选择。幸好Google已经考虑到了这点。它从360度的色环当中,为大家选择出了非常适合做界面设计的色调,并通过调整这些色调的饱和度和亮度,得到了一系列可以与主色调搭配和谐的颜色(实际上,这些色调与主色调可能有细微的偏差,比如说3度)。这些颜色放在一起,被形象的叫做调色板。
例如,
这些颜色都给出了对应的RGB数值,也给出了它们自己的名字,例如500,100,200,……,A700,数值越高,颜色越深。其中带A
的,表示这个颜色推荐用来作为Accent Color
(Accent color
接下来会马上介绍到。)。
通过数字给颜色编号,这是为了方便设计师与开发者之间的沟通,给这些颜色取的名字。当他们谈论某个颜色的时候,只需要说出颜色的名字,大家脑中就会产生一个直观的印象。如果他们讲RGB值,大家都会觉得很难想象。
选择颜色
通常来讲,一个应用界面当中,不要超过三种不同的色调,否则色调的差异就会过多的吸引使用者的注意,把关注点从内容上分散到各个不同的颜色上去了。
为了简化设计师的工作,Google的Material Design
只需要选择Primary Color
Primary Dark Color
Accent Color
三种颜色,就能确定整个应用的整体配色方案。
当设计师要给一个应用选择颜色的时候,
可以会从色环当中选择一个设计师认为合适的颜色。
也可以从Google提供的调色板中选取。这些颜色都是Google千挑万选后的结果,如果大家没有特别的原因,就使用这种表现稳健的颜色吧。
Primary Color
Primary Color
是一个应用使用最为广泛的颜色,它决定了一个应用整体的基调。界面中很多的元素都会使用到这个颜色。
比如,主颜色选取Indigo 500。
Primary Dark Color
选定主颜色之后,通常还会在主颜色的附近,选择一个暗色作为搭配,例如Indigo 600~900作为深色。这个颜色通常只是体现在状态栏的颜色上。
除了暗色,有时还需要使用与主颜色相配合的亮色,例如Indigo 500作为主色之后,Indigo 50~400,都是亮色可选的对象。
Accent Color
Accent Color
是与Primary Color
完全不同的一个色调,用来吸引用户的注意力,比如用在按钮、进度条等等需要用户关注的、有交互功能的组件上面。如果Primary Color
与Accent Color
是不同色调,设计师可以自由的选择;如果Primary Color
与Accent Color
都是同一种色调,那么确定Accent Color
的时候,通常使用Google调色板中名字里带A
的颜色,例如A100~A700
.
常用工具
使用Google提供的调色板进行配色的时候,如果能够快速的查看配色完成后的效果就好了。
Material Palette
为我们提供了这样的方便。当选中期望的Primary Color
和Accent Color
以后,右边的预览界面就会立刻看到搭配的效果。确认搭配方案之后,还可以下载配色的方案到本地,便于将调色板导入界面设计的软件当中直接使用。