03 迷人的色彩

3.1 色彩基礎知識

色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩。所謂色是指人對進入眼睛的光傳至大腦時所產生的感覺，彩則指多色的意思，是人對光變化的理解。豐富多樣的顏色可以分成兩個大類，即有彩色系和無彩色系。有彩色系的顏色具有三個基本特性：色相、純度和明度，在色彩學上被稱為色彩三大要素或色彩三屬性；無彩色系是指白色、黑色以及由它們調和形成的各種深淺不同的灰色，其飽和度為0。配色在設計中發揮著重要的作用，是建立應用的產品氣質的關鍵，在學習UI配色之前我們先來了解色彩的基礎知識。

原色

所有的色彩都源自“紅黃藍”三種原色，很多人常常認為三原色是“紅綠藍”，但其實不是。紅綠藍是顯示上的三原色，即RGB，與美術上的三原色不一樣。

間色

由三原色兩兩混合后得到三個二級色，即間色，黃色與紅色混合得到橙色，紅色與藍色混合得到紫色，藍色與黃色混合得到綠色。

復色

原色與間色混合或間色與間色混合而形成越來越多的顏色，即復色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。

冷暖色

最后由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色、黃色至紫紅為暖色。冷色令人聯想到天空、冰雪、海洋等，產生寒冷、理智、平靜等感覺；暖色則令人聯想到太陽、火焰、熱血等，產生溫暖、熱烈、危險等感覺。

色相（Hue）

色相是指色彩的相貌，它是不同波長的色彩被肉眼感知的結果。所有的色相都可以用色環來展示，并能夠確切地表示某種顏色的名稱，例如紅、橙、黃、綠、青、藍、紫就是七種不同的基本色相。

純度（Saturation）

純度即飽和度，是指色彩的純凈程度，它表示顏色中所含有色成分的比例。飽和度越高，顏色越純，色彩越鮮明；飽和度越低，顏色中灰色成分越大，色彩越黯淡。當一種顏色摻入黑、白或其他彩色時，純度就產生了變化；當摻入的顏色達到很大的比例時，人的眼睛就無法感知出來了。

明度（Brightness）

明度是指色彩的明暗程度，反映的是色彩的深淺變化。在顏色中加入白色，明度提高；加入黑色，明度降低。最大值時，顏色都變成白色；最小值時，所有顏色都變成黑色。每一種純色都有與其相應的明度，黃色明度最高，藍、紫色明度最低，紅、綠色為中間明度。色彩的明度變化往往會影響到純度，例如紅色加入黑色以后明度降低了，同時純度也降低了；如果紅色加入白色則明度提高了，純度卻降低了。

HSB模式

在Photoshop拾色器上可以看到每個顏色都有一組HSB值，H表示色相、S表示純度、B表示明度。色相值為0～360度，即圓；純度和明度值為0～100，即百分比。因此，了解了HSB模式的原理，就能了解色彩的本質。

當我們需要調配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的3種同色系青色，它們的色相（H158）都一致，僅在純度和明度上有所變化。

當色相和純度都為0時，色彩成為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。

灰度色多用于文字，通常一個應用中的文字不應超過3種灰度色。深黑用于標題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態文字；純白用于深色按鈕文字。

此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對內容的視覺干擾，因此常用于界面背景色，例如VUE的引導頁設計。

中性色調

中性色調是指由黑色、白色及由黑白調和的各種深淺不同的灰色系列，它既不屬于冷色調也不屬于暖色調。中性色調主要用于調和色彩搭配，突出其他顏色，能與任何色彩起諧和、緩解作用，給人輕松、沉穩、得體的感覺。

iOS系統應用的界面背景色為H240 S2 B96，它并不是純灰，而是加入了一點點藍色，在一定程度上緩解了單調的灰色帶來的枯燥。

下圖左圓為iOS系統應用的界面背景色，右圓為同樣明度的純灰，通過對比可以發現左圓的色彩更豐富一些。

對比度

對比度對視覺效果的影響非常關鍵，一般來說對比度越大，圖像越清晰醒目，色彩也越鮮明艷麗；而對比度小，則會讓整個畫面呈現灰蒙蒙的效果。通過有效地使用對比度可以使界面內容清晰可見，從而提升良好的閱讀體驗。清晰的對比度，一般會采用色彩的兩極，例如黑與白、高亮與低亮。

淺色背景

大多數移動應用的界面通常是淺灰色背景，色值為B95（#f2f2f2），接近于純白。在淺色背景上搭配低明度的灰色文字，當B值低于40%，內容清晰可見；高于60%，則難以閱讀。搭配高純度的彩色文字，當S值高于60%，內容清晰可見；低于40%，則難以閱讀。

深色背景

也有一些移動應用的界面是深色背景，例如iOS系統時鐘，通常不會選用純黑，色值為B5（#0d0d0d），接近于純黑。在深色背景上搭配高明度的文字，當B值高于80%，內容清晰可見；低于60%，則難以閱讀。高純度的色彩也有明暗之分，例如S值100的藍色文字在深色背景上難以閱讀。

彩色背景

彩色背景通常出現在注冊登錄頁、引導頁或營銷專題頁等。在彩色背景上搭配純白或高明度的文字，內容清晰可見；搭配灰色字，則難以閱讀。避免在彩色背景上搭配互補色的彩色文字、避免兩種色彩明度接近，這兩種搭配方式都會產生一種“震顫效應”，即覺得兩種色彩之間會產生模糊、震顫或者發出光暈的視覺效果。

亮色背景

其實，這是一個偽命題，我們在設計之初就應避免使用高明度、高純度色彩。如果不可避免地要與此進行搭配，可以選擇低純度的彩色文字，以此來減少因純度接近而造成的辨識度問題。避免搭配低明度的灰色文字，深黑色的文字搭配亮色背景顯臟，使用純白是比較安全的做法。