UI設(shè)計中色彩的應(yīng)用

【摘 要】 如今隨著互聯(lián)網(wǎng)行業(yè)的迅猛、蓬勃的發(fā)展，各類互聯(lián)網(wǎng)站、APP爆發(fā)式增多，并以驚人的勢頭融入我們的生活。色彩設(shè)計作為各類UI設(shè)計項目中的重要工序，有著舉足輕重的作用，對UI界面的訪問量和點擊量有著不可忽視的影響。文章通過對UI設(shè)計中色彩的作用、UI設(shè)計中的色彩調(diào)和、UI設(shè)計中的色彩情感三個方面的論述，來探討色彩在UI設(shè)計中的應(yīng)用。

現(xiàn)在這個時代是色彩科學(xué)和色彩應(yīng)用突飛猛進的時代。隨著技術(shù)的改革和進步，UI設(shè)計師的交互思維水平、軟件制作水平差距不大，設(shè)計審美水平也在伯仲之間，但最后產(chǎn)出的移動APP、網(wǎng)站的用戶量、訪問量、訪問深度卻千差萬別。觀察當(dāng)下熱門的UI設(shè)計產(chǎn)品，不難發(fā)現(xiàn)成功的色彩設(shè)計方案是它們必備而有力的武器。

一、UI設(shè)計中色彩的作用

色彩設(shè)計是UI設(shè)計過程中的重要一環(huán)。合理的界面色彩設(shè)計能幫助用戶在進行人機交互的過程中完成一定的認(rèn)知任務(wù)、讓用戶有更好的操作體驗。色彩在UI設(shè)計中的重要作用主要體現(xiàn)在以下幾個方面：

（一）營造界面的整體風(fēng)格

UI界面雖然是個復(fù)雜的視覺圖形系統(tǒng)，但通過對頁面中主色、輔色、點綴色、背景色的對比調(diào)和會呈現(xiàn)出明顯的風(fēng)格傾向，不同的配色方案可以營造出不同的界面風(fēng)格，從而給用戶以不同的視覺感受，最終影響用戶體驗。

（二）可以明確界面的整體架構(gòu)

用戶接觸的UI界面通常是一個由頁面背景色、模塊背景色、圖標(biāo)、按鈕、圖片、文字等元素構(gòu)成的視覺系統(tǒng)。對色彩的合理使用可以有效的幫助用戶在較短時間內(nèi)了解界面的整體架構(gòu)，從而快速的捕捉想要的信息。

（三）色彩的合理應(yīng)用可以使界面更有層次

UI設(shè)計的內(nèi)容是有層級之分的，如一級菜單與二級菜單的從屬關(guān)系，菜單與內(nèi)容間的從屬關(guān)系、內(nèi)容與內(nèi)容間的同級關(guān)系等。通過對界面構(gòu)成元素的合理配色可以明確區(qū)分不同模塊、不同內(nèi)容的層級關(guān)系，并做到有所側(cè)重，幫助用戶理解原本復(fù)雜的頁面操作間的內(nèi)在聯(lián)系。

（四）滿足用戶的個性化需求

通過對色彩的合理運用可以滿足對于用戶于不同時間段、不同場景中或一些特殊用戶群體（如色盲色弱等）的特殊視覺需求。

二、UI設(shè)計中的色彩調(diào)和

一個UI界面的色彩一般由主色、輔色、點綴色、背景色等幾部分組成。在一定的用戶研究和競品調(diào)研分析后，為使UI界面達到產(chǎn)品定位要求的或清新簡約、或時尚酷炫、或嚴(yán)謹(jǐn)專業(yè)的視覺效果，對主色、輔色、點綴色、背景色、字體色等進行選擇、調(diào)整、搭配和組合的過程就是UI設(shè)計中的色彩調(diào)和。色彩調(diào)和一般分為以色相為基礎(chǔ)的色彩調(diào)和、以明度為基礎(chǔ)的色彩調(diào)和、以彩度為基礎(chǔ)的色彩調(diào)和三大類。其中以色相為基礎(chǔ)的色彩調(diào)和又可細(xì)分為同類色配色、類似色配色、互補色配色、多色配色等；以明度為基礎(chǔ)的色彩調(diào)和又可細(xì)分為高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度六種搭配方式；以彩度為基礎(chǔ)的色彩調(diào)和則可細(xì)分為同一色調(diào)配色、類似色調(diào)配色、對比色調(diào)配色。

三、UI設(shè)計中的色彩情感

色彩能夠引起人的聯(lián)想，通過聯(lián)想又能給人帶來一系列的情緒感受和心理反應(yīng)。所以說，UI設(shè)計中的色彩除了具備視覺效果外，還能表現(xiàn)一定的性格與表情，給用戶不同的心理感受，最終實現(xiàn)UI產(chǎn)品與用戶之間的情感互動和交流。例如暖色會使人感覺到陽光、熱烈、活潑、開放、積極等，冷色則給人鎮(zhèn)靜、微弱、理智、冷靜、保守等感覺，中性色給人低調(diào)、細(xì)膩、含蓄、素雅等感覺；明度越高的色彩給人感覺越柔軟、越近，明度越低的色彩給人感覺越硬朗、越遠(yuǎn)等。下圖是具體色相給人帶來的聯(lián)想和心理感受：

設(shè)計者在UI設(shè)計前應(yīng)當(dāng)充分研究用戶群體的心理，如目標(biāo)用戶群體的性別、年齡階段、教育文化背景、個性審美特征等，進而結(jié)合色彩心理學(xué)合理運用色彩情感進行設(shè)計與配色。

四、色彩在UI設(shè)計中的應(yīng)用

（一）主色的選擇

用戶打開一個移動APP或網(wǎng)站之后，通常首先注意到主色，主色所傳達出來的情感意味會下意識的感染用戶。它可以說是UI設(shè)計作品的文化方向，在很大程度上決定著設(shè)計風(fēng)格及調(diào)性，不同的主色給用戶的體驗也不同。因此，UI界面的主色確定要經(jīng)過推敲，需要在充分考慮用戶的心理需求、個人偏好、地域文化差異以及產(chǎn)品行業(yè)屬性等因素的同時又兼顧美觀性。合理的主色和統(tǒng)一的主色調(diào)也讓品牌更具識別性，讓用戶記憶深刻、找到品牌的歸屬感，如阿里品牌的橙色、京東的大紅、唯品會的玫紅、騰訊的藍色、美團的綠色等。

（二）合理配色

然而，主色雖然是決定了界面及產(chǎn)品氣質(zhì)格調(diào)的色彩，但多數(shù)情況下不會大面積的出現(xiàn)。一般來說，首頁使用主色相對較多，二級頁面、三級頁面等子頁面中則使用的較少，主色會以點綴色的角色出現(xiàn)在界面中。這樣一來，輔色、點綴色的搭配也尤為重要。常見的UI界面的配色方法有：①同色系配色法，即主色、輔色、點綴色都在相同的色相上，只是飽和度不同，這種配色方法會給人統(tǒng)一、穩(wěn)定的感受；②鄰近色配色法，即選取色相環(huán)上與主色鄰近的（60°范圍內(nèi)）幾種顏色來進行搭配設(shè)計，這種配色方法和諧又富于變化，比同色系配色更具多樣性；③對比色配色法，即與主色有色相對比、明度對比、飽和度對比、冷暖對比、補色對比等關(guān)系的配色方法，這種配色方法有強烈的視覺沖擊力，易給人留下鮮明的、深刻的印象，但使用不當(dāng)容易讓人眼花繚亂、分不清主次，造成用戶的視覺疲勞；④中性色配色法，即用無彩色黑、白、灰與主色進行搭配，常應(yīng)用在信息量大的網(wǎng)站，旨在突出內(nèi)容，避免不必要的色彩干擾用戶提取信息；⑤漸變色配色法，這種配色方法是近兩年來一個新的設(shè)計趨勢，時尚而富有層次感；⑥圖片選擇法，即通過一些自然和人文社會的照片來提取合適的色彩，從而獲得符合產(chǎn)品需求的配色方案；⑦問卷調(diào)查法，即設(shè)計師根據(jù)其它配色方法先提供出多個配色方案，由用戶研究人員進行問卷、訪談等形式進行數(shù)據(jù)搜集，根據(jù)收集的數(shù)據(jù)進行用戶需求分析，最終選擇出最適合的配色方案。

（三）色彩的比重

色彩也有輕重之分，PHOTOSHOP、AI等制圖軟件都有去色功能，把顏色去掉之后，會看到UI界面的灰度圖。一般比較深的顏色會給人感覺比較重，較淺的顏色給人感覺則比較輕。用色的時候，還要注意輕重的平衡。通常亮色較多的界面看起來輕盈、透氣、明快；深色比較多的界面看起來穩(wěn)重、內(nèi)斂、神秘；灰色較多的界面看起來素雅、低調(diào)、壓抑。一個成功的UI界面設(shè)計還要平衡好黑白灰三個層次的關(guān)系，使界面更有層次感、節(jié)奏感。

（四）色彩的情感映射

UI界面設(shè)計的色彩情感是通過界面中的色彩來激發(fā)用戶的內(nèi)心情感從而創(chuàng)造出的心理體驗。因此，為了更好的用戶體驗，設(shè)計師需要研究和理解哪些刺激因素能夠激發(fā)哪些用戶特定的情感和意愿，以吸引目標(biāo)用戶在自己的UI設(shè)計產(chǎn)品中多做停留、引導(dǎo)用戶做出對界面更深入的點擊。

綜上，在UI設(shè)計中，色彩是最能引起用戶情緒共鳴的元素。 UI設(shè)計中如何合理的運用色彩，從而更好的傳達產(chǎn)品所要傳達的信息并成功吸引用戶的注意力是每個UI設(shè)計師在設(shè)計過程中都應(yīng)該重視的關(guān)鍵一環(huán)。

【參考文獻】

[1] 李時穎 .UI設(shè)計中的色彩運用研究[J].電腦知識與技術(shù). 2016 .（12）：193-194.

[2] 南云治嘉（日）， 黃文娟譯 . 色彩戰(zhàn)略----色彩設(shè)計的商業(yè)應(yīng)用[M]. 北京 .中國青年出版社 . 2006 . 44-46.

[3] 金容淑 . 設(shè)計中的色彩心理學(xué)[M] . 北京 . 人民郵電出版社 . 2011.36-50.

[4] 張美珍. 淺析色彩在UI設(shè)計中的應(yīng)用[J].設(shè)計 . 2014 . 97-98.

[5] 顧文佳. UI設(shè)計中用戶交互體驗的視覺思維[D].中國美術(shù)學(xué)院 . 2012 . 24.

[6] 吳賽，王欣怡等. 多媒體交互數(shù)據(jù)可視化研究[J].設(shè)計 . 2013 .102-103.

作者簡介：作者簡介：李夢（1991--），女，漢族，河南信陽人，美術(shù)碩士，學(xué)習(xí)單位：浙江理工大學(xué)藝術(shù)與設(shè)計學(xué)院美術(shù)專業(yè)，研究方向：繪畫藝術(shù)，色彩藝術(shù)。endprint