颜色的运用

Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色。这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内。

 pallete_classic_ui

“没有错误的颜色的,只有错误的搭配”。颜色是没有对错的,我们要用经验和直觉来搭配它们,所以要先来认识认识颜色。

颜色理论

颜色是有语言的,红色代表这热情奔放,蓝色代表的沉着安静,绿色代表着生机活力。搭配一组颜色,就是表达作品要传递的含义。

我们大部分人都知道RGB颜色,它的理论依据是:任何颜色都是通过不同强度的红色R绿色G蓝色B组合而成的,改变它们的组合就能得到任何颜色。在计算机领域,这三种颜色分别具有0~255个不同的数值。

 RGB_color

对于设计师配色来讲,还会使用另外一个体系的颜色理论-HSB:色调H,饱和度S,亮度B。

我们人在谈论颜色的时候,总是说这个颜色很红、有点绿、偏蓝。

当我们说很红的时候,就是给颜色设定了一个基调-红色。这种基调称为色调。色调成圆环形状的分布,依次渐变的呈现出赤橙黄绿青蓝紫各种颜色。

 color_ring

色环具有360度,因此色调的数值就是0~359度。色调数值从0到359变化,也代表着颜色从暖色逐步过渡到冷色。你是不是看到红色就觉得温暖,而看到深蓝色就觉得冷飕飕的呢?

很红字,就要通过饱和度和亮度来体现了,

  • 饱和度:可以理解成把一种纯粹的颜色溶解到水里面,如果水很多,颜色就很淡;如果水很少,颜色就很纯。因此它具有0%~100%的数值。

     s_value_adjust
  • 亮度:我们能看到物体是因为光线照在物体上面的缘故。如果一点光没有,不管什么样的颜色,看起来都是黑的,只有充足的光线才能反映出物体本来的颜色。因此它具有0%~100%的数值。0%说明没有光照,那么就会是黑色。

如果你的本行并不是设计师或者刚入行不久,在给安卓应用配色的时候一定会犯迷糊,不知如何选择。幸好Google已经考虑到了这点。它从360度的色环当中,为大家选择出了非常适合做界面设计的色调,并通过调整这些色调的饱和度和亮度,得到了一系列可以与主色调搭配和谐的颜色(实际上,这些色调与主色调可能有细微的偏差,比如说3度)。这些颜色放在一起,被形象的叫做调色板。

例如,

 color_palette1
 color_palette2
 color_palette3
 color_palette4

这些颜色都给出了对应的RGB数值,也给出了它们自己的名字,例如500,100,200,……,A700,数值越高,颜色越深。其中带A的,表示这个颜色推荐用来作为Accent ColorAccent color接下来会马上介绍到。)。

通过数字给颜色编号,这是为了方便设计师与开发者之间的沟通,给这些颜色取的名字。当他们谈论某个颜色的时候,只需要说出颜色的名字,大家脑中就会产生一个直观的印象。如果他们讲RGB值,大家都会觉得很难想象。

选择颜色

通常来讲,一个应用界面当中,不要超过三种不同的色调,否则色调的差异就会过多的吸引使用者的注意,把关注点从内容上分散到各个不同的颜色上去了。

为了简化设计师的工作,Google的Material Design只需要选择Primary Color Primary Dark Color Accent Color三种颜色,就能确定整个应用的整体配色方案。

当设计师要给一个应用选择颜色的时候,

  1. 可以会从色环当中选择一个设计师认为合适的颜色。

  2. 也可以从Google提供的调色板中选取。这些颜色都是Google千挑万选后的结果,如果大家没有特别的原因,就使用这种表现稳健的颜色吧。

Primary Color

Primary Color是一个应用使用最为广泛的颜色,它决定了一个应用整体的基调。界面中很多的元素都会使用到这个颜色。

比如,主颜色选取Indigo 500。

 color_palette_choose1

Primary Dark Color

选定主颜色之后,通常还会在主颜色的附近,选择一个暗色作为搭配,例如Indigo 600~900作为深色。这个颜色通常只是体现在状态栏的颜色上。

 color_palette_choose2

除了暗色,有时还需要使用与主颜色相配合的亮色,例如Indigo 500作为主色之后,Indigo 50~400,都是亮色可选的对象。

 color_palette_choose3

Accent Color

Accent Color是与Primary Color完全不同的一个色调,用来吸引用户的注意力,比如用在按钮、进度条等等需要用户关注的、有交互功能的组件上面。如果Primary ColorAccent Color是不同色调,设计师可以自由的选择;如果Primary ColorAccent Color都是同一种色调,那么确定Accent Color的时候,通常使用Google调色板中名字里带A的颜色,例如A100~A700.

 color_palette_choose4

常用工具

使用Google提供的调色板进行配色的时候,如果能够快速的查看配色完成后的效果就好了。

Material Palette为我们提供了这样的方便。当选中期望的Primary ColorAccent Color以后,右边的预览界面就会立刻看到搭配的效果。确认搭配方案之后,还可以下载配色的方案到本地,便于将调色板导入界面设计的软件当中直接使用。

 material_palette_too