UI設(shè)計(jì)中的色彩使用

夏 夢(mèng) （廣東科學(xué)技術(shù)職業(yè)學(xué)院計(jì)算機(jī)工程技術(shù)學(xué)院 519090）

在設(shè)計(jì)領(lǐng)域，顏色是相當(dāng)主觀的一樣事物。某種顏色會(huì)喚起某人的情緒反應(yīng)，但是同樣的顏色對(duì)于不同的人而言，由于個(gè)人偏好、成長(zhǎng)背景、文化習(xí)俗的不同，喚起的可能就是另一種完全不同的情緒反應(yīng)。有時(shí)，像改變顏色的明度或是飽和度這樣小的調(diào)整都會(huì)給人帶來(lái)完全不同的視覺和心理感受。同一種顏色在不同的國(guó)度，因?yàn)槲幕?xí)俗以及地理環(huán)境的不同，也會(huì)又不一樣的代表意義。

一、認(rèn)知色彩

色彩是通過(guò)眼、腦和我們的生活經(jīng)驗(yàn)所產(chǎn)生的一種對(duì)光的視覺效應(yīng)。人對(duì)顏色的感覺不僅僅由光的物理性質(zhì)所決定，人對(duì)顏色的感覺往往也會(huì)受到環(huán)境顏色的影響。有時(shí)人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。

色相是最最基本的顏色術(shù)語(yǔ)、通常用來(lái)表示物體本身的固有色。當(dāng)我們說(shuō)紅、黃、藍(lán)時(shí)，我們說(shuō)的就是色相。設(shè)計(jì)的色調(diào)可用來(lái)給網(wǎng)站的訪問(wèn)者傳遞重要信息。

飽和度是指某一色相在特定的光照條件下是如何呈現(xiàn)的?？梢园扬柡投瓤闯墒巧{(diào)的鮮亮與灰暗、濁與純。

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

當(dāng)灰色加入到一個(gè)色相中時(shí)，便產(chǎn)生了色值，色值要比純的色相柔和或是灰暗些；當(dāng)黑色加入到一個(gè)色相中時(shí)，便產(chǎn)生了暗色澤，顏色變暗；當(dāng)白色加入到一種色相中時(shí)，就會(huì)形成淺色澤，顏色變亮。

二、賦予色彩的情感

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

暖色包含紅、橙、黃以及這三種顏色的變種。它們分別是火焰、果實(shí)以及日出和夕陽(yáng)的顏色，它們通常象征活力、激情、積極和運(yùn)動(dòng)。紅和黃這兩種顏色都屬于三原色，而橙色則處于兩種顏色之間，這意味著紅色和黃色是真正的暖色，沒(méi)法通過(guò)混和一種暖色和冷色而獲得。我們?cè)谠O(shè)計(jì)中使用紅、橙、黃以體現(xiàn)出激情、快樂(lè)、熱忱和活力的主調(diào)來(lái)。

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

那么在設(shè)計(jì)UI時(shí)，暖色的使用范圍我們就很清楚了，餐飲類、娛樂(lè)類、運(yùn)動(dòng)類等等都可以使用暖色來(lái)作為主色調(diào)。

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

藍(lán)色是冷色系中唯一的原色，這意味著其他顏色是由藍(lán)色混合某種暖色而成（混合黃色得到綠色，混合紅色得到紫色），綠色繼承了黃色的一些屬性，而紫色則繼承了紅色的一些屬性。在設(shè)計(jì)中使用冷色可以營(yíng)造一種冷靜、嚴(yán)謹(jǐn)或?qū)I(yè)的感覺。

一些高科技企業(yè)為了傳達(dá)一種專業(yè)、嚴(yán)謹(jǐn)?shù)男睦砀惺?，通常使用深藍(lán)色作為企業(yè)標(biāo)準(zhǔn)色。跟大自然相關(guān)的一些界面設(shè)計(jì)通常喜歡用綠色作為主色調(diào)，特別是橄欖綠，給人傳達(dá)一種清新自然的感受。

紫色是女性鐘愛的顏色，它傳達(dá)了高貴、性感、誘惑、魅力等感情色彩，高端奢侈品常用紫色來(lái)作為主色調(diào)，服務(wù)于女性的機(jī)構(gòu)，如塑身美顏的美容行業(yè)，很多都用紫色來(lái)作為企業(yè)主色調(diào)。

黃色：青春、樂(lè)觀、豁達(dá)。常被作為點(diǎn)睛之筆。

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

藍(lán)色：信任、安全、有底蘊(yùn)、神秘，常用于企業(yè)、銀行、安全中心等行業(yè)機(jī)構(gòu)。

綠色：生命力、輕松、天然、無(wú)污染，常用于跟自然相關(guān)的行業(yè)。

橙色：積極、進(jìn)取、活力，耐克專賣店使用的也是橙，代表活力與運(yùn)動(dòng)。

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

黑色：影響力、時(shí)髦、嚴(yán)肅，常用于奢侈品營(yíng)銷等。

紫色：高貴、冷艷、誘惑，常用于美妝或美顏塑形的女性產(chǎn)品設(shè)計(jì)中等。

當(dāng)然每一種顏色的感情色彩不是一定的，飽和度和明度的不同，色彩傳達(dá)出來(lái)的感受也會(huì)完全不同；顏色之間的搭配的不同，也會(huì)讓色彩又不一樣的感覺；顏色搭配時(shí)，每種顏色的比例不同，也會(huì)出現(xiàn)不同的視覺效果。

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

三、色彩的搭配

1.黑白灰

如果沒(méi)有更好的配色方案，可以選擇黑白灰進(jìn)行搭配，正如我們穿衣搭配一樣，有可能不出彩，但是至少不會(huì)錯(cuò)。當(dāng)然，黑白灰也需要有豐富的層次，否則整個(gè)界面就會(huì)感覺很單調(diào)無(wú)趣了。

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

如果你覺得黑白灰過(guò)于單調(diào)，那么可以試著在黑白灰的基礎(chǔ)上加入一種或者兩種顏色，會(huì)使得整個(gè)畫面鮮亮活躍起來(lái)。

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

使用同一色相的顏色進(jìn)行搭配，整個(gè)畫面色調(diào)非常的統(tǒng)一整體，不會(huì)亂，又不乏豐富的細(xì)節(jié)，不失為一種好的色彩搭配方式。

4.鄰近色搭配

鄰近色都互相含有彼此的顏色，所以鄰近色的搭配一般來(lái)說(shuō)都是比較協(xié)調(diào)的，比起同意色相內(nèi)的顏色搭配，鄰近色的搭配會(huì)使界面色彩看上去更加豐富，更加活躍。

5.使用互補(bǔ)色進(jìn)行搭配

互補(bǔ)色的搭配對(duì)于新手來(lái)說(shuō)是比較有挑戰(zhàn)性的，比例或者飽和度選擇不好的話都會(huì)使效果大打折扣，所以，使用互補(bǔ)色要注意顏色之間比例的搭配。

6.使用自然風(fēng)景照片進(jìn)行主色調(diào)設(shè)計(jì)

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

當(dāng)兩種及兩種以上的顏色放在一起時(shí)，任何一個(gè)色彩都會(huì)被當(dāng)作其他色彩的參照物，他們之間出現(xiàn)色彩對(duì)比關(guān)系。色彩的對(duì)比是絕對(duì)的，因?yàn)閮煞N以上色彩在配置中，總會(huì)在色相、飽和度、明度和大小比例方面或多或少地有所差別，這種差別必然會(huì)導(dǎo)致不同程度的對(duì)比效果。對(duì)比強(qiáng)烈的顏色需要加強(qiáng)共性來(lái)進(jìn)行調(diào)和，對(duì)比較弱的配色需要加強(qiáng)對(duì)比來(lái)進(jìn)行調(diào)和。說(shuō)得簡(jiǎn)單點(diǎn)，當(dāng)你明顯感覺到一種顏色的力量過(guò)弱或者過(guò)強(qiáng)時(shí)都需要調(diào)整。為了某一目的，應(yīng)調(diào)整色彩的色相、純度、明度和面積等方面，以達(dá)到色彩集合的和諧、統(tǒng)一。如果我們使用兩種很難調(diào)和在一起的顏色進(jìn)行搭配，這時(shí)就需要介于兩種顏色之間的輔助色。

四、總結(jié)

把色彩當(dāng)人看，當(dāng)你確定一個(gè)界面的主色調(diào)時(shí)，其他的顏色要不就和“她”和平共處，要不就和“她”打架，誰(shuí)實(shí)力堅(jiān)挺，誰(shuí)就住在整個(gè)畫面。而設(shè)計(jì)師就是那個(gè)調(diào)停安排的人，幫助“他們”解決問(wèn)題。

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

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