作為一枚交互設(shè)計(jì)師，最近在幫朋友做國(guó)際物流的項(xiàng)目，客串了一把視覺設(shè)計(jì)，對(duì)色彩設(shè)計(jì)做了一些研究，現(xiàn)在把研究心得做一個(gè)總結(jié)，想要和大家共同探討。

1. 色彩是怎么形成的？

色彩是我們生活中最具有表現(xiàn)力的要素之一，正是因?yàn)橛辛松�彩，我們才有了碧海藍(lán)天、綠水青山這樣美麗的大自然景觀，才有了“白毛浮綠水，紅掌撥清波�！边@樣優(yōu)美的詩詞，才有了七色彩虹這樣有意義的現(xiàn)實(shí)童話。

那么，色彩是怎么形成的呢？其實(shí)，色彩的形成是一個(gè)復(fù)雜的物理和人的心理相互作用的結(jié)果，它涉及到光的傳播特性、人眼結(jié)構(gòu)和人的心理感知等知識(shí)。

2. 人是怎么觀察到色彩的？

2.1 色彩本質(zhì)上是一種物理光線的傳播

首先，光在物理學(xué)上是用波長(zhǎng)來表示的，也就是兩個(gè)相鄰波峰之間的距離，單位是納米（10億分之1米）；然后，大部分的光，人眼是不可見的，例如X光、紅外線、紫外線，只有很小范圍的光才可以被人眼所見；最后，可見光的波長(zhǎng)大概在400-700納米之間，也就是我們?nèi)搜勰芸吹降牟ㄩL(zhǎng)范圍。

不同顏色的波長(zhǎng)也不盡相同，例如紫藍(lán)色的波長(zhǎng)大約在400納米左右，而黃紅色的波長(zhǎng)在700納米左右，如下圖所示：

2.2 人主要靠人眼+大腦識(shí)別色彩

人眼是人體中非常復(fù)雜的器官之一，人眼會(huì)識(shí)別出不同波長(zhǎng)的光波信號(hào)。人眼主要由瞳孔和視網(wǎng)膜構(gòu)成，其中光線會(huì)通過瞳孔進(jìn)入人眼中，這時(shí)會(huì)采集光信號(hào)；然后再由視網(wǎng)膜來進(jìn)一步加工，將不同波長(zhǎng)的光波信號(hào)轉(zhuǎn)變成大腦可以理解的神經(jīng)信號(hào)。

例如，人眼通過瞳孔接收了500波長(zhǎng)的光波信號(hào)，然后通過視網(wǎng)膜加工成了神經(jīng)信號(hào)，再傳遞給了大腦識(shí)別顏色，最終大腦就可以實(shí)現(xiàn)通過人眼來識(shí)別光源的顏色。

2.3 人的心理感知對(duì)色彩進(jìn)一步加工

心理學(xué)家認(rèn)為，人的第一感覺就是視覺，而色彩是對(duì)視覺影響最大的因素。不同的色彩，會(huì)對(duì)人的心理造成不同的影響，這是因?yàn)槿四X的心理感知，會(huì)對(duì)色彩進(jìn)一步加工，潛意識(shí)地聯(lián)想到不同的含義。

例如，看到藍(lán)色，會(huì)聯(lián)想到明亮的天空、壯闊的海洋，人的心理會(huì)趨于冷靜；看到粉色，就會(huì)聯(lián)想到桃花、愛心，人的心理會(huì)感到溫暖和有呵護(hù)的感覺；看到綠色，就會(huì)想起大自然，人的心理就會(huì)覺得舒適、放松。

2.4 色盲群體

對(duì)于天生有顏色缺陷，或者說部分或者完全不能通過人眼分辨顏色（通常是紅色和綠色）的人來說，我們稱之為“色盲群體”。因?yàn)樯�盲是X染色體伴生性遺傳缺陷，且男性只有一條X染色體，所以男性會(huì)比女性更有可能遺傳這種缺陷。

另外，據(jù)統(tǒng)計(jì)，我國(guó)男性色盲發(fā)生率約為5%~8%，女性約為0.5~1%，其中， 紅綠色盲人口占全球男性人口約8%，女性人口約0.5%，這是一個(gè)不少的群體數(shù)量。

所以，在設(shè)計(jì)上，我們要具有同理心，考慮這一部分群體，如何更好地使用我們的產(chǎn)品。

3. 色彩的重要概念和特征

3.1 三原色和RGB色彩模式

三原色：

在大自然中有三種不能再分解的基本顏色，即三原色，分別為紅色（Red）、綠色（Green）和藍(lán)色（Blue）。基于三原色原理，把這三種顏色按照不同強(qiáng)度、不同比例進(jìn)行混合，就可以得到其他各種各樣的色彩。

RGB色彩模式：

RGB色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是運(yùn)用最廣的顏色系統(tǒng)之一。（來自百度百科的定義）

通過RGB色彩模式給顏色賦值，可以讓電腦顯示相應(yīng)的顏色。例如紅色就表示為RGB（255，0，0），括號(hào)中的數(shù)值其實(shí)就是分別代表紅色、綠色、藍(lán)色的值，其中（255,0,0）表示紅色的發(fā)光強(qiáng)度最大，綠色、藍(lán)色不發(fā)光（0），所以就顯示為紅色，其他同理。

通過RGB值運(yùn)算，就可以得到混合色，例如紅RGB（255,0,0）和綠RGB（0,255,0），通過“變亮”模式混合，就得到了黃色RGB（255,255,0）。

3.2 色彩的三個(gè)維度

所有的色彩，都可以用三個(gè)維度來描述，分別是：色調(diào)、飽和度和明度。

• 色調(diào)：是指人對(duì)色彩的定性感知，或者說顏色的類別，例如紅、綠、藍(lán)、黃、青、紫等。

• 飽和度：是指顏色感覺的純度和鮮艷度，或者說顏色中的灰色量含量的高低，純色擁有最大的飽和度，柔和、混合的顏色飽和度居中，灰色的飽和度為0。

• 明度：是指色彩中光的強(qiáng)度，或者說混合了多少白色或黑色，白色的明度最大，黑色的明度最小。

3.3 互補(bǔ)色、對(duì)比色、臨近色和類似色

• 互補(bǔ)色：在12種顏色組成的色相環(huán)中，相隔180°的顏色，或者說處于直線相對(duì)位置上的顏色，我們稱之為互補(bǔ)色。例如紅色和綠色互補(bǔ)、黃色和紫色互補(bǔ)、藍(lán)色和橙色互補(bǔ)。

• 對(duì)比色：指在色相環(huán)中相隔120°-180°的顏色，任意選擇兩個(gè)顏色，我們稱之為對(duì)比色。例如紅色和藍(lán)紫色為對(duì)比色，紅色和黃色為對(duì)比色，藍(lán)紫色和黃色為對(duì)比色。

• 臨近色：指在色相環(huán)中相隔60-90°的顏色，或者相隔三個(gè)位置的顏色，我們稱之為臨近色。例如紅色和橙色。

• 類似色：也稱之為相似色，指在色相環(huán)中，相隔30°的顏色。例如紅色和紅橙色。

3.4 冷暖色

在上面，我們有提到，不同的色彩，會(huì)對(duì)人的心理造成不同的影響�；�于此，我們就形成了色彩心理上的冷暖感覺。

例如，看到紅色，我們就會(huì)聯(lián)想到火焰，心理上會(huì)感到溫暖，所以，我們把紅、橙、黃這些顏色歸為暖色調(diào)；同理，看到藍(lán)色，我們可能會(huì)想到海水藍(lán)，心理上會(huì)感到冷意，所以，我們把藍(lán)、綠、紫這些顏色，稱之為冷色調(diào)。

當(dāng)然，除了冷暖色，還有一些中性的色調(diào)，例如黑色、白色或者灰色。

3.5 漸變色

大家對(duì)漸變色肯定不陌生，趨于成熟的香蕉、秋天泛黃的葉子、絢麗多彩的晚霞，這些從明到暗、從深到淺或者從一個(gè)色彩到另一個(gè)色彩過渡，充滿浪漫氣息的顏色，就是大自然中最為常見的美麗的漸變色。

和純色相比，漸變色顯得更年輕、活潑和多變，會(huì)被廣泛應(yīng)用在產(chǎn)品設(shè)計(jì)上，特別是一些年輕化的產(chǎn)品。

3.6 色彩的顏色代碼和不透明度

在計(jì)算機(jī)上，色彩可以用RGB的值來表示，例如上面我們所講的紅色，其值為RGB（255,0,0），也可以轉(zhuǎn)換為十六進(jìn)制代碼來展示，也就是#ff0000。一般地，設(shè)計(jì)師都會(huì)標(biāo)注顏色代碼給到前端開發(fā)工程師。

另外，顏色還有不透明度的概念，用百分比來表示，例如60%的紅色，設(shè)計(jì)師采用不透明度色值來做設(shè)計(jì)，同樣也需要用百分比標(biāo)注出來。

4. 色彩的設(shè)計(jì)案例

4.1 設(shè)計(jì)與生理：不宜使用明度、飽和度過高的顏色

本文上面有提到，我們主要通過人眼（瞳孔+視網(wǎng)膜）來識(shí)別色彩的信號(hào)，據(jù)研究表明，色彩的明度和飽和度過高，會(huì)對(duì)人的視網(wǎng)膜過渡刺激，導(dǎo)致眼睛疲勞，例如純黃色、純綠色或者飽和度過高的紅藍(lán)搭配。所以，我們?cè)谏��?a href=http://www.hweehall.com/ target=_blank class=infotextkey>設(shè)計(jì)時(shí)，要盡量避免使用明度、飽和度過高的顏色。

具體的常見應(yīng)用場(chǎng)景，小到日常警方的通告，大到整個(gè)網(wǎng)站或者App的配色，都可以用得到。

4.2 設(shè)計(jì)與心理：粉色的護(hù)士服

人對(duì)色彩的心理加工，必然會(huì)對(duì)設(shè)計(jì)造成影響，例如，兒科的護(hù)士服通常被設(shè)計(jì)成粉色，在視覺上具有柔和、溫暖和呵護(hù)的效果，可以減輕孩子對(duì)醫(yī)院的恐懼心理。

4.3 互補(bǔ)色：經(jīng)典的互補(bǔ)色logo設(shè)計(jì)

互補(bǔ)色通常有紅綠互補(bǔ)、藍(lán)橙互補(bǔ)和紫黃互補(bǔ)等，由于互補(bǔ)色有很強(qiáng)的分離性，可以有效提高整體配色的分離度，所以經(jīng)常會(huì)用在logo設(shè)計(jì)中。例如7-11、visa、湖人球隊(duì)這些知名的logo設(shè)計(jì)，就是運(yùn)用了互補(bǔ)色來做設(shè)計(jì)。

4.4 對(duì)比色：圖表對(duì)比

在產(chǎn)品設(shè)計(jì)中，特別是后臺(tái)的產(chǎn)品，通常會(huì)有很多的圖表，例如柱狀圖、折線圖、餅圖等，而且圖表中通常會(huì)有兩組以上的數(shù)據(jù)作為對(duì)比，這個(gè)時(shí)候，我們就可以運(yùn)用對(duì)比色，來區(qū)分不同組別的數(shù)據(jù)。

4.5 臨近/類似色：漸變過渡更自然

臨近色，或者類似色，都是在十二色環(huán)中相隔不遠(yuǎn)的顏色，且它們的色調(diào)具有漸進(jìn)過渡的特點(diǎn)。所以，在使用漸變色設(shè)計(jì)時(shí)，我們可以采用臨近/類似色進(jìn)行漸變，讓漸變過渡更自然。

4.6 一致性：整體網(wǎng)站配色

網(wǎng)站的整體色調(diào)，至少在主色調(diào)的使用上，都會(huì)跟它的logo保持一致，這樣整體看起來就會(huì)非常協(xié)調(diào)，另外，主色調(diào)最好不要超過2種，不然色調(diào)越多，越難保持一致，還容易引起視覺噪點(diǎn)。

4.7 同理心：站在色盲群體的角度來做設(shè)計(jì)

同理心，又稱換位思考，是指能設(shè)身處地體會(huì)對(duì)方的情緒、想法，并站在對(duì)方的角度去思考和處理問題。對(duì)于普通人而言，很難體會(huì)得到色盲群體的感受，這個(gè)時(shí)候，就需要設(shè)計(jì)師具備同理心，站在色盲群體的角度來做設(shè)計(jì)。

例如，高德地圖就針對(duì)色盲群體，推出了色盲模式設(shè)置，方便這一部分人群的日常使用，這是非常具有同理心的設(shè)計(jì)。

作者夜雨，微信公眾號(hào)：iueuxd，人人都是產(chǎn)品經(jīng)理專欄作家。圖書《Sketch交互設(shè)計(jì)之美：從零基礎(chǔ)從完整項(xiàng)目實(shí)現(xiàn)》作者，高級(jí)交互設(shè)計(jì)師。