数字显示中的色彩使用

英文原文：http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-i.php

翻译：Cathy

 

色彩对比

我们对颜色色相、明度和饱和度的感知区别于它们与邻近色相、明度和饱和度之间的关系。不同的颜色之间可能会产生色相对比、明度对比和饱和度对比的作用。

利用色相对比、明度对比和饱和度对比可以设计出好的作品，但是色彩对比有可能产生分散注意力、降低用户界面或者网页文字的可读性等不好的影响。

色彩对比作用

不同色相之间的互动可以产生颜色对比效果，这些小伙会影响我们对色相、深度以及透明度的感知：

同时对比——补色放在一起时会在视觉上影响彼此，造成饱和度的急剧升高，如图22

连续对比——当饱和度低的颜色被饱和度高的颜色包围时，饱和度低的颜色会在视觉上会向饱和度高的颜色上轻微转变。如图23——25

与背景色的互动——色彩元素会与背景色发生互动。互动的程度取决于该色彩元素的大小，如图26
与周围颜色的互动——色彩元素会与周围颜色发生互动。同样互动的程度取决于元素的相对大小，如图27

贝措尔德效应——强烈的颜色放在一起时会变模糊，如图28和29

颜色的大小和视觉影响——一大片深色或者鲜艳的颜色会让同样大小的淡色明度降低，如图30

深度错觉——明度及饱和度高的暖色会有凸出之感，而明度低的中性暖色会有凹进之感。因此，饱和度和明度低的冷色会产生立体之感，如图31和32

透明作用——如果一个颜色是由其他两种颜色叠合而来，那叠合的部分看起来会有透明之感。如图33

图22——同时对比作用

   

可以通过用黑色、白色和灰色的线条将互补色分开来减少同时对比作用。

图23——第一个连续对比作用的例子

   

图24——第二个连续对比的例子

     

 

图25——第三个连续对比的例子

    

 

 

图26——与背景色的互动

  

图27——与周围颜色的互动

  

图28——贝措尔德效应  

   

图29——第二个贝措尔德效应的例子

   

图30——色区大小与颜色的视觉冲击

   

 

图31——色相的运用产生了立体效果

  

图32——又一个立体效果例子

   

图33——透明效果

  

明度对比效果

不同的明度互动会产生明度对比效果，这会影响我们对明度，深度以及大小的感知。

与背景色明度的互动——背景色的明度会影响我们对某颜色的感知。 深色背景上的颜色看起来要亮一些，而浅色背景上的颜色看起来要深一些，如图34-36所示。

立体感——高明度的浅颜色，如白色，会有凸出之感，而低明度的深色，如黑色，会有凹进之感。因此运用低明度的颜色会让空间看起来更大。

大小的感知——随着明度与背景色的对比，色块的大小看起来会发生变化，如图38-39所示

 

图34——与背景色明度上互动产生的效果

  

图35——与背景色明度互动的例子

 

图36——与背景色明度互动的例子

  

图37——明度与立体感

  

图38——明度及色块大小的感知

 

图39——另一个明度与色块大小感知的例子

  

饱和度的对比

相邻色彩的饱和度不同会产生饱和度对比效果，这会想想我们对色调和饱和度的感知：

与背景色饱和度的互动——在不同的高饱和度背景上，同一种颜色看起来会有所不同，如图40所示。

与背景色明度和饱和度的互动——背景色的明度和饱和度会形象我们对明度和饱和度的感知。在中性色背景上的颜色比在亮色背景上要亮一些。

图40——与背景色饱和度的互动

 

图41——与背景色明度和饱和度的互动

  

色彩优势

在任意的视觉作品中，最显眼的色区通常是通过色相、明度或饱和度与周围色区的强烈对比，运用较大色块或突出色块的位置来实现的。

色相的强烈对比——不管色块大小和位置如何，差别较大的色相对比都会很产生强烈的视觉效果。

明度的强烈对比——不管色块大小和位置如何，差别较大的明度对比都会很产生强烈的视觉效果。

饱和度的强烈对比——不管色块大小和位置如何，差别较大的饱和度对比都会很产生强烈的视觉效果。

最大的色块——色块越大就越鲜艳，如图45所示。

最突出的位置——色块的位置越突出，视觉效果就会越明显。将色块放在图的中央或者接近中央的位置最显眼，在西方，左上角的位置最显眼，因为西方人通常会先看那个地方，如图46所示。

以上因素会相互影响。

图42——通过色相对比实现颜色优势

 

图43——通过明度对比实现颜色优势

 

图44——通过饱和度对比实现的颜色优势

  

图45——通过运用大色块实现色彩优势

  

图46——通过突出色块位置实现的颜色优势

  

色彩平衡

可以通过调整色块之间色相、明度和饱和度的对比来实现色彩平衡，也可以通过调整色块的大小及其位置达到这个目的。如下：

图形与背景的对比——高对比度的视觉元素在背景色上很显眼，低对比度的视觉元素就会变得不明显。你可以通过强烈的对比来强调重要的内容，对于那些不重要的东西，可以使用低对比度的颜色。如图47。

色相对比——互补色可以很好地实现图形与背景的强烈对比，而单色和邻近色则不行。在运用了冷色和暖色的作品中，暖色会给人凸出之感因而很适合图形，而冷色则相反因而可以作为背景色。如图48

明度对比——这是图形与背景色对比中最重要的一个属性。淡色色相与黑色或暗色背景以及暗色色相与白色或浅色背景可以很好地实现色彩对比。而中等明度的色相则不行。在同时采用了淡色或深色的作品中，淡色会有凸出之感，而深色则有凹进之感。但是，深色——无论彩色还是非彩色——通常比较适合文字和图形，淡色较适合用作背景，如图49

饱和度对比——高饱和度对比能够很好地实现图形与背景之间的对比，而中等饱和度的颜色效果就不好。在同时采用了高饱和度和低饱和度颜色的图中，鲜艳的颜色有凸出之感因而适合用作图形色，而中性色或非彩色则有凹进之感，比较适合用作背景色，如图50.

明度和小图形——由于图形的明度属性，在采用小图形是可能需要轻微调整图形的大小以便图形能够轻易地被人们看见或者识别。相同大小的浅色图形比深色图形看起来要大，如图51

明度和大色块——深颜色的大色块比浅色色块更鲜艳。浅色色块在视觉上附属于深色色块，如图52和53显示了明度如何影响着色彩优势。

对比影响和比例——相邻对比色的比例影响了颜色间的互动进而决定了对比效果。如图54

 

图47——图形与背景色的对比

 

图48——色相对比

 

图49——明度对比

 

图50——饱和度对比

 

图51——明度和小图形

 

图52——明度和大色块

  

图53——另一个明度与大色块的例子

 

图54——比例与对比效果