Oh!Coder

Coding Life

UI设计中颜色的运用

| Comments

这是一个图形设计铺天盖地的时代。现如今,每个人的案头都摆放着彩色打印机,专业彩版印刷有史以来从未如此盛行,人们越来越承受得起有关的花费。

色原理论可以非常深入、非常复杂,不过在此,我只打算对色轮做简要的解释,并介绍如何使用色轮。如果你需要经过深思熟虑来决定一个项目使用哪些颜色,色轮会非常有用。

另外,我还会简单地解释CMYK和RGB这两种颜色模型之间的区别,以及各个颜色模型分别适用于哪些场合。

1、色轮

色轮的基础是黄、红和蓝3种颜色。这些颜色称为三原色(primary color),因为这是唯一无法创建的颜色。也就是说,如果有一盒水彩,你知道可以混合蓝色和黄色来得到绿色,但是没有办法通过混合其他颜色来得到纯黄、纯红、纯蓝色。

pic

2、颜色关系

  • 互补

色轮上相对(即完全对立)的颜色为互补色(complement)。由于它们如此对立,所以最佳搭配是一种作为主色,另一种用于强调。

  • 三色组

彼此等距的三种颜色通常会形成一个让人愉悦的三色组(triad)。红色、黄色和蓝色就是一种及其流行的颜色组合,儿童产品通常都采用这种组合。由于这是三基色,所以这种组合也称为基色三色组(primary triad)。

也可以尝试使用绿色、橙色和紫色构成的间色三色组(secondary triad),尽管不那么常用,但出于以上原因,这种组合也让人很舒服。

除了红、黄、蓝构成的基色三色组以外,所有三色组中的三种颜色都有基础色使其相互链接,因此看上去非常协调。

  • 分裂互补三色组

另一种形式的三色组称为分裂互补三色组(split complement)。从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。这样得到的组合会有一种更为细致的颜色边界。

  • 类似色

类似色(analogous)组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色,它们都有相同的基础色,这就形成了一个协调的组合。用不同的亮色和暗色组合一组类似色,效果将相当醒目!

3、亮色和暗色

  • 纯色就是色调(hue)。
  • 向色调增加黑色就构成一个暗色(shade)。
  • 向色调增加白色就构成一个亮色(tint)。

单色

单色组合(monochromatic combination)由一种色调及其相应的多种亮色和暗色组成。你可能对单色主题已经很熟悉了,所有黑白照片都是由黑色(即“色调”,不过实际上黑色并不是一种“颜色”)和多种亮色或者有不同灰度的暗色组成。这种组合能够呈现美丽的图画,所以,我们可以在设计项目里使用一种单色组合,尽享其中的快乐。

4、暖色与冷色

颜色往往要么是暖色(这说明,其中包含红色或黄色),要么是冷色(说明其中包含蓝色)。可以通过增加一些红色或黄色将某些颜色“加热”,如灰色或黄褐色。与之相反,也可以对颜色增加不同程度的蓝色对其“降温”。

不过,我希望你记住更实用的一点,冷色总趋于后退,而暖色是趋进型的。暖色不费多大功夫就能产生效果,红色和黄色能立即映入你的眼帘。所以,如果要组合暖色和冷色,一定要少用些暖色。

由于冷色是后退型的,所以可以使用(有时则必须使用)更多的冷色才能产生效果或形成有效的对比。

不要让冷暖色太过均衡!一定要充分利用这种视觉现象。

5、如何取舍

有时选择颜色看起来易如反掌。先看一种合理的方法。项目有季节性吗?也许可以使用类似色来暗示季节,火热的红色和黄色表示夏季;冰冷的蓝色表示冬季;不同色度的橙色和棕色代表秋天;明亮的绿色象征春天。

公司有没有制定一些官方颜色?也许可以先从这些颜色入手,再使用一些亮色和暗色。是不是在处理一个logo标志,其中包含一些特定的颜色?可以使用这些颜色的一种分裂互补色。

你的项目是否包含一个照片或其他图像?可以选择照片中的一个颜色,再根据这个颜色选择一组其他的颜色。可能希望使用类似色,保持一种沉着冷静的感觉,也可以使用互补色增加视觉活力。

6、CMYK与RGB,印刷与Web

要注意两种重要的颜色模型。尽管这是一个非常复杂的内容,但这里只提供一个最简要的解释。

  • CMYK

CMYK代表Cyan(一种蓝色)、Magenta(一种红/粉红色)、Yellow(黄色)和一个Key色(通常是黑色)。利用这4种墨色,可以打印出成千上万种颜色,正是因为这个原因,这也称为一种“4色处理”。(专业印刷作业可能还会用到其他颜色的油墨)。

CMYK中的颜色就像我们的油画棒或水彩盒,蓝色和黄色能合成绿色,等等。

如果你的项目要由一个印刷机印到某种无力介质上,就可以使用CMYK颜色模型。你所看到的所有印刷品,包括图书、杂志、海报、火柴盒面或饼干箱都是使用CMYK模型印刷的。

  • RGB

RGB表示Red(红色)、Green(绿色)和Blue(蓝色)。我们在计算机显示器、电视、iPhone等等上看到的就是RGB。

在RGB模型中,如果混合红色和绿色,可以得到黄色。不错,确实如此。将最大程度的蓝色和红色混合可以得到鲜粉色。这是因为组成RGB的有色光束并不是从任何物理物体反射来的,这是直接从显示器传入你眼睛的光。如果将所有颜色混合在一起会得到白色,如果去掉所有颜色,则得到黑色。

  • 印刷与Web颜色模型

关于CMYK和RGB需要记住的是:

  1. 需要印刷的项目应当使用CMYK。
  2. 需要在屏幕上看的内容则应使用RGB。

Comments