UI設(shè)計(jì)中的色彩運(yùn)用

　　20世紀(jì)90年代，由日本SONY公司推出的智能化移動(dòng)手持設(shè)備T86通^色彩絢麗的屏幕，漂亮的圖形按鈕以及流暢的操作刷新了用戶對(duì)人機(jī)交互界面的體驗(yàn)。并在行業(yè)內(nèi)引發(fā)了設(shè)計(jì)者對(duì)UI設(shè)計(jì)中風(fēng)格、圖形、色彩、操作體驗(yàn)等等方面的全新思索。經(jīng)過(guò)二十多年的 發(fā)展。

　　UI設(shè)計(jì)已經(jīng)成為一門專門性交叉學(xué)科，通過(guò)對(duì)視覺(jué)思維、心理學(xué)、人體工程學(xué)等不同學(xué)科的研究，設(shè)計(jì)者從各個(gè)方面不斷的改善用戶的操作體驗(yàn)。早期的軟件界面曾經(jīng)通過(guò)“擬物化”設(shè)計(jì)（skeuomorphism）試圖通過(guò)模擬真實(shí)物體的質(zhì)感來(lái)讓人機(jī)交互更趨向于人與現(xiàn)實(shí)世界的交互方式而“去虛擬化”；而21世紀(jì)以來(lái)，隨著UI設(shè)計(jì)中對(duì)視覺(jué)傳達(dá)規(guī)律的運(yùn)用，“扁平化”設(shè)計(jì)（flat）成為更為主流的設(shè)計(jì)趨勢(shì)。扁平化設(shè)計(jì)更為現(xiàn)代主義，通過(guò)簡(jiǎn)潔、單純的色塊的組合與運(yùn)用幫助用戶更好地理解與使用產(chǎn)品本身。

　　1 UI設(shè)計(jì)中色彩的功能

　　色彩作為視覺(jué)傳達(dá)中非常重要的要素在UI設(shè)計(jì)中具有非常重要的作用，可以歸納為以下幾個(gè)方面。

　　1）顯示界面的整體架構(gòu)

　　一個(gè)UI界面總是借助圖形化的外觀直接作用于客戶的視覺(jué)系統(tǒng)。用戶接觸一個(gè)UI界面，看到的往往是一個(gè)由底色、其他幾何色塊、圖標(biāo)、按鈕等元素構(gòu)成的圖形符號(hào)系統(tǒng)。用色彩可以非常直觀的凸顯出背景、導(dǎo)航欄、狀態(tài)欄，按鈕等構(gòu)成元素，并顯示出UI界面的邏輯架構(gòu)。

　　2）明確視覺(jué)層級(jí)關(guān)系

　　UI設(shè)計(jì)中不同的內(nèi)容屬于不同的層級(jí)關(guān)系，如菜單于菜單間的同級(jí)關(guān)系、內(nèi)容間的從屬關(guān)系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區(qū)分內(nèi)容的層級(jí)關(guān)系，還可以通過(guò)色彩間的強(qiáng)對(duì)比突出關(guān)鍵內(nèi)容。

　　3）營(yíng)造界面整體風(fēng)格

　　UI界面雖然是個(gè)復(fù)雜的視覺(jué)圖形系統(tǒng)，但通過(guò)主色調(diào)、輔助色、裝飾色之間的對(duì)比調(diào)和關(guān)系會(huì)呈現(xiàn)出明顯的風(fēng)格傾向。用不同的色系或者同色系色彩之間的對(duì)比與調(diào)和關(guān)系，可以塑造出不同的界面風(fēng)格。如適合男生的金屬質(zhì)感的黑色、灰色、藍(lán)色系，女生喜歡的夢(mèng)幻甜美色系、糖果色系。界面風(fēng)格定位于品質(zhì)已經(jīng)成為用戶體驗(yàn)中最重要的部分之一。

　　4）基于人體工程學(xué)的色彩運(yùn)用。

　　由于色溫會(huì)影響到光源顯示的顏色，大于 6500K 就會(huì)偏冷（白藍(lán)），小于 6500K 就會(huì)偏暖（黃紅）。而藍(lán)光大量存在于電腦顯示器、熒光燈、手機(jī)、數(shù)碼產(chǎn)品、顯示屏、LED等光線中，由于藍(lán)光是一種高能量的短波光線，因而會(huì)較為嚴(yán)重的傷害視力�；�于人體工程學(xué)保護(hù)視力考慮，蘋果手機(jī)Iphone7和iphone7plus手機(jī)背光顯示設(shè)計(jì)了Night Shift 的屏幕去藍(lán)光保護(hù)功能，開啟后會(huì)在晚間自動(dòng)將屏幕顯示調(diào)成暖黃色調(diào)，減少視覺(jué)疲勞。

　　此外，UI界面中，考慮到電子設(shè)備的顯示特點(diǎn)。背景色要與圖標(biāo)色彩之間至少有5.38以上的對(duì)比差，才能夠易于區(qū)分。而在此差值范圍內(nèi)的配色則會(huì)因?yàn)檫^(guò)于接近而在顯示環(huán)境中對(duì)辨認(rèn)造成困擾。

　　還有一些特殊人群，如紅綠色盲人群，由于特殊視覺(jué)需求而需要進(jìn)行特別的配色設(shè)計(jì)。

　　2 UI色彩設(shè)計(jì)方案

　　在進(jìn)行UI設(shè)計(jì)時(shí)，要通過(guò)對(duì)產(chǎn)品及用戶體驗(yàn)的分析確定明確的色彩搭配反感，形成“標(biāo)準(zhǔn)色彩規(guī)范”，在這個(gè)基礎(chǔ)上再進(jìn)行具體界面、線框、圖標(biāo)等細(xì)節(jié)設(shè)計(jì)。標(biāo)準(zhǔn)色彩規(guī)范中要規(guī)定出最主要主色、輔助色、裝飾色的色號(hào)，方便設(shè)計(jì)師的設(shè)計(jì)稿的色彩統(tǒng)一。

　　1）主色調(diào)

　　主色用量基本占據(jù)全部用色的75%，基本決定了整個(gè)界面的視覺(jué)風(fēng)格。主色選擇要符合產(chǎn)品本身的氣質(zhì)、訴求和色彩心理學(xué)規(guī)律，可在主色的基礎(chǔ)上通過(guò)明度與純度的變化衍生出同色系色調(diào)作為主色調(diào)范圍。

　　根據(jù)色彩在視覺(jué)中的能量值，一般主色傾向于選擇飽和度高、明度低的色彩，往往會(huì)在在同一界面中占據(jù)較大的面積或明顯的凸現(xiàn)于背景。

　　2）輔助色

　　輔助色起到輔助主色的作用，在全部用色中約占據(jù)20%。用與主色同色系色彩作為輔助色可以呈現(xiàn)柔和、整體、統(tǒng)一的視覺(jué)效果；而用主色鄰近色作為輔助色可以讓界面有豐富的變化，產(chǎn)生活潑感；用主色調(diào)對(duì)比色作為輔助色可以讓主色更為突出。

　　3）裝飾色

　　占全部色彩方案的5%的裝飾色起到點(diǎn)綴、提醒的作用。并界面增加個(gè)性化、富于趣味的視覺(jué)元素。裝飾色要與界面整體色調(diào)相區(qū)別，一般在明度、飽和度上要有明顯差異，一般會(huì)用明度或飽和度高的顏色。

　　3 UI設(shè)計(jì)中對(duì)色彩三要素的運(yùn)用

　　色相、明度、飽和度是色彩的三要素，對(duì)這三個(gè)色彩要素的理解和運(yùn)用體現(xiàn)在UI設(shè)計(jì)中整個(gè)色彩方案中。

　　色相是色彩的首要特征，是不同色彩相區(qū)分的重要因素。色相也是色彩搭配中進(jìn)行色彩對(duì)比的主要因素。對(duì)主色色相的選擇往往決定了一個(gè)UI界面的整體風(fēng)格與氣質(zhì)，或奔放活潑，或冷靜深沉，或淡雅清新，或濃郁艷麗。其他輔助色則起到對(duì)比或調(diào)和的作用。因而一個(gè)UI界面的主色選擇要符合產(chǎn)品本身的特質(zhì)。以手機(jī)APP為例，淘寶、百度外賣、大眾點(diǎn)評(píng)等許多電商類APP常常用容易讓人興奮、熱烈的紅色、橙色作為主色調(diào)；而主打探索與求知的“知乎”APP則使用理性、冷靜的藍(lán)色作為主色。

　　色彩的明度是色彩的明亮程度，是對(duì)色彩進(jìn)行調(diào)和的主要因素。同色相色彩的明度變化可以在同色系中呈現(xiàn)一種調(diào)和統(tǒng)一的變化關(guān)系，協(xié)調(diào)而具有層次感。常常用于配合主色進(jìn)行圖標(biāo)、菜單、導(dǎo)航等設(shè)計(jì)。明度變和也會(huì)帶來(lái)色彩性格上的差異，明度升高會(huì)讓色彩變得明亮、呈現(xiàn)清涼感；而明度降低則會(huì)讓色彩變得暗淡，呈現(xiàn)溫暖感。

　　飽和度是指色彩的鮮艷程度，也是色彩進(jìn)行調(diào)和的主要因素。飽和度的改變同樣會(huì)讓色彩呈現(xiàn)從濃烈活潑到安靜深沉等不同的“色彩性格”。此外飽和度的改變還會(huì)讓色彩呈現(xiàn)不同的質(zhì)感，如金屬的不透明、堅(jiān)硬、光澤感；糖果色的清新甜美感等等。

　　4 UI設(shè)計(jì)中的色彩心理學(xué)運(yùn)用

　　色彩具有非常強(qiáng)的聯(lián)想性。不同的色彩會(huì)在味覺(jué)、空間、冷暖、情緒等不同方面引發(fā)人們不同的綜合感受。UI界面在主色調(diào)的選擇中往往會(huì)利用人們對(duì)于色彩的聯(lián)想習(xí)慣突出產(chǎn)品的定位。仍以ios系統(tǒng)手機(jī)APP為例；以介紹美食菜譜的“香哈”APP，主色采用最容易誘發(fā)食欲的紅、橙色系；而具有豐富中國(guó)民俗傳統(tǒng)的萬(wàn)年歷APP則采用了充滿中國(guó)傳統(tǒng)文化涵義的中國(guó)紅作為主色并配合這一氣質(zhì)采用篆書字體作為文字標(biāo)識(shí)。

　　綜上所述，由于色彩的重要性，對(duì)色彩的理解和駕馭對(duì)整個(gè)UI界面的設(shè)計(jì)產(chǎn)生著巨大的影響。

【UI設(shè)計(jì)中的色彩運(yùn)用】相關(guān)文章：

廣告設(shè)計(jì)中色彩的運(yùn)用08-29

色彩在動(dòng)畫設(shè)計(jì)中的運(yùn)用10-28

標(biāo)識(shí)設(shè)計(jì)中色彩運(yùn)用分析10-13

動(dòng)畫設(shè)計(jì)中的色彩運(yùn)用08-25

動(dòng)畫設(shè)計(jì)中色彩的運(yùn)用10-11

版面設(shè)計(jì)中色彩運(yùn)用的誤區(qū)08-19

色彩對(duì)比在廣告設(shè)計(jì)中的運(yùn)用09-27

關(guān)于動(dòng)畫設(shè)計(jì)中色彩的運(yùn)用07-04

怎樣在鞋店設(shè)計(jì)中運(yùn)用色彩？08-27

色彩在景觀中的運(yùn)用10-10