UI設計中的色彩使用

夏 夢 （廣東科學技術職業學院計算機工程技術學院 519090）

在設計領域，顏色是相當主觀的一樣事物。某種顏色會喚起某人的情緒反應，但是同樣的顏色對于不同的人而言，由于個人偏好、成長背景、文化習俗的不同，喚起的可能就是另一種完全不同的情緒反應。有時，像改變顏色的明度或是飽和度這樣小的調整都會給人帶來完全不同的視覺和心理感受。同一種顏色在不同的國度，因為文化習俗以及地理環境的不同，也會又不一樣的代表意義。

一、認知色彩

色彩是通過眼、腦和我們的生活經驗所產生的一種對光的視覺效應。人對顏色的感覺不僅僅由光的物理性質所決定，人對顏色的感覺往往也會受到環境顏色的影響。有時人們也將物質產生不同顏色的物理特性直接稱為顏色。

色相是最最基本的顏色術語、通常用來表示物體本身的固有色。當我們說紅、黃、藍時，我們說的就是色相。設計的色調可用來給網站的訪問者傳遞重要信息。

飽和度是指某一色相在特定的光照條件下是如何呈現的。可以把飽和度看成是色調的鮮亮與灰暗、濁與純。

明度也被稱作亮度，它是指顏色的亮與暗。

當灰色加入到一個色相中時，便產生了色值，色值要比純的色相柔和或是灰暗些；當黑色加入到一個色相中時，便產生了暗色澤，顏色變暗；當白色加入到一種色相中時，就會形成淺色澤，顏色變亮。

二、賦予色彩的情感

我們把顏色分為冷色和暖色。

暖色包含紅、橙、黃以及這三種顏色的變種。它們分別是火焰、果實以及日出和夕陽的顏色，它們通常象征活力、激情、積極和運動。紅和黃這兩種顏色都屬于三原色，而橙色則處于兩種顏色之間，這意味著紅色和黃色是真正的暖色，沒法通過混和一種暖色和冷色而獲得。我們在設計中使用紅、橙、黃以體現出激情、快樂、熱忱和活力的主調來。

研究發現暖色有勾起食欲的作用，所以很多是餐飲品牌都喜歡用暖色，如三大快餐巨頭：肯德基、麥當勞、必勝客都是用紅色和黃色來作為自己的標準色或者是輔助色。暖色也是有活力的象征，所以運動品牌也鐘愛暖色，像耐克。當然暖色也有消極的一面，暖色使人心跳加快、血壓升高，視覺停留在暖色時間過長，會使人產生焦躁不安的情緒。所以在醫院這樣的需要冷靜的場所，是幾乎不會出現暖色的，特別是紅色。

那么在設計UI時，暖色的使用范圍我們就很清楚了，餐飲類、娛樂類、運動類等等都可以使用暖色來作為主色調。

冷色系包含藍色、綠色和紫色，相對暖色，視覺強度要弱。它們是夜、水和自然的代表顏色，通常給人感覺是舒緩，放松，甚至有一點冷淡。

藍色是冷色系中唯一的原色，這意味著其他顏色是由藍色混合某種暖色而成（混合黃色得到綠色，混合紅色得到紫色），綠色繼承了黃色的一些屬性，而紫色則繼承了紅色的一些屬性。在設計中使用冷色可以營造一種冷靜、嚴謹或專業的感覺。

一些高科技企業為了傳達一種專業、嚴謹的心理感受，通常使用深藍色作為企業標準色。跟大自然相關的一些界面設計通常喜歡用綠色作為主色調，特別是橄欖綠，給人傳達一種清新自然的感受。

紫色是女性鐘愛的顏色，它傳達了高貴、性感、誘惑、魅力等感情色彩，高端奢侈品常用紫色來作為主色調，服務于女性的機構，如塑身美顏的美容行業，很多都用紫色來作為企業主色調。

黃色：青春、樂觀、豁達。常被作為點睛之筆。

紅色：活力、速度、緊迫感，常用用于節慶。

藍色：信任、安全、有底蘊、神秘，常用于企業、銀行、安全中心等行業機構。

綠色：生命力、輕松、天然、無污染，常用于跟自然相關的行業。

橙色：積極、進取、活力，耐克專賣店使用的也是橙，代表活力與運動。

粉色：浪漫、女人、可愛，常用于女性消費行業或者是兒童用品等。

黑色：影響力、時髦、嚴肅，常用于奢侈品營銷等。

紫色：高貴、冷艷、誘惑，常用于美妝或美顏塑形的女性產品設計中等。

當然每一種顏色的感情色彩不是一定的，飽和度和明度的不同，色彩傳達出來的感受也會完全不同；顏色之間的搭配的不同，也會讓色彩又不一樣的感覺；顏色搭配時，每種顏色的比例不同，也會出現不同的視覺效果。

所以要使用好色彩，除了了解各種色彩的感情色彩，更重要的是通過正確的色彩搭配，向用戶傳達不同的情感。

三、色彩的搭配

1.黑白灰

如果沒有更好的配色方案，可以選擇黑白灰進行搭配，正如我們穿衣搭配一樣，有可能不出彩，但是至少不會錯。當然，黑白灰也需要有豐富的層次，否則整個界面就會感覺很單調無趣了。

2.黑白灰基礎上加入一種或者兩種顏色

如果你覺得黑白灰過于單調，那么可以試著在黑白灰的基礎上加入一種或者兩種顏色，會使得整個畫面鮮亮活躍起來。

3.使用同一色相的不同飽和度或者明度的顏色進行搭配

使用同一色相的顏色進行搭配，整個畫面色調非常的統一整體，不會亂，又不乏豐富的細節，不失為一種好的色彩搭配方式。

4.鄰近色搭配

鄰近色都互相含有彼此的顏色，所以鄰近色的搭配一般來說都是比較協調的，比起同意色相內的顏色搭配，鄰近色的搭配會使界面色彩看上去更加豐富，更加活躍。

5.使用互補色進行搭配

互補色的搭配對于新手來說是比較有挑戰性的，比例或者飽和度選擇不好的話都會使效果大打折扣，所以，使用互補色要注意顏色之間比例的搭配。

6.使用自然風景照片進行主色調設計

大自然的色彩搭配是最美的，選擇一張色彩明快豐富的風景照片作為背景色，用模糊的方式對其進行處理，在上面呈現文字和畫面是很好的選擇。

當兩種及兩種以上的顏色放在一起時，任何一個色彩都會被當作其他色彩的參照物，他們之間出現色彩對比關系。色彩的對比是絕對的，因為兩種以上色彩在配置中，總會在色相、飽和度、明度和大小比例方面或多或少地有所差別，這種差別必然會導致不同程度的對比效果。對比強烈的顏色需要加強共性來進行調和，對比較弱的配色需要加強對比來進行調和。說得簡單點，當你明顯感覺到一種顏色的力量過弱或者過強時都需要調整。為了某一目的，應調整色彩的色相、純度、明度和面積等方面，以達到色彩集合的和諧、統一。如果我們使用兩種很難調和在一起的顏色進行搭配，這時就需要介于兩種顏色之間的輔助色。

四、總結

把色彩當人看，當你確定一個界面的主色調時，其他的顏色要不就和“她”和平共處，要不就和“她”打架，誰實力堅挺，誰就住在整個畫面。而設計師就是那個調停安排的人，幫助“他們”解決問題。

[1][日]伊達千代著.悅之文化譯.色彩設計的原理.北京：中信出版社，2011.10 ：33-39.

[2]梁景紅.寫給大家看的色彩書①——配色基礎.北京：人民郵電出版社，2011.1 ：96-128.