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

1、    ui設(shè)計(jì)中色彩的應(yīng)用    【摘 要】 如今隨著互聯(lián)網(wǎng)行業(yè)的迅猛、蓬勃的發(fā)展，各類互聯(lián)網(wǎng)站、app爆發(fā)式增多，并以驚人的勢(shì)頭融入我們的生活。色彩設(shè)計(jì)作為各類ui設(shè)計(jì)項(xiàng)目中的重要工序，有著舉足輕重的作用，對(duì)ui界面的訪問量和點(diǎn)擊量有著不可忽視的影響。文章通過對(duì)ui設(shè)計(jì)中色彩的作用、ui設(shè)計(jì)中的色彩調(diào)和、ui設(shè)計(jì)中的色彩情感三個(gè)方面的論述，來(lái)探討色彩在ui設(shè)計(jì)中的應(yīng)用。現(xiàn)在這個(gè)時(shí)代是色彩科學(xué)和色彩應(yīng)用突飛猛進(jìn)的時(shí)代。隨著技術(shù)的改革和進(jìn)步，ui設(shè)計(jì)師的交互思維水平、軟件制作水平差距不大，設(shè)計(jì)審美水平也在伯仲之間，但最后產(chǎn)出的移動(dòng)app、網(wǎng)站的用戶量、訪

2、問量、訪問深度卻千差萬(wàn)別。觀察當(dāng)下熱門的ui設(shè)計(jì)產(chǎn)品，不難發(fā)現(xiàn)成功的色彩設(shè)計(jì)方案是它們必備而有力的武器。一、ui設(shè)計(jì)中色彩的作用色彩設(shè)計(jì)是ui設(shè)計(jì)過程中的重要一環(huán)。合理的界面色彩設(shè)計(jì)能幫助用戶在進(jìn)行人機(jī)交互的過程中完成一定的認(rèn)知任務(wù)、讓用戶有更好的操作體驗(yàn)。色彩在ui設(shè)計(jì)中的重要作用主要體現(xiàn)在以下幾個(gè)方面：（一）營(yíng)造界面的整體風(fēng)格ui界面雖然是個(gè)復(fù)雜的視覺圖形系統(tǒng)，但通過對(duì)頁(yè)面中主色、輔色、點(diǎn)綴色、背景色的對(duì)比調(diào)和會(huì)呈現(xiàn)出明顯的風(fēng)格傾向，不同的配色方案可以營(yíng)造出不同的界面風(fēng)格，從而給用戶以不同的視覺感受，最終影響用戶體驗(yàn)。（二）可以明確界面的整體架構(gòu)用戶接觸的ui界面通常是一個(gè)由頁(yè)面背景色、模

3、塊背景色、圖標(biāo)、按鈕、圖片、文字等元素構(gòu)成的視覺系統(tǒng)。對(duì)色彩的合理使用可以有效的幫助用戶在較短時(shí)間內(nèi)了解界面的整體架構(gòu)，從而快速的捕捉想要的信息。（三）色彩的合理應(yīng)用可以使界面更有層次ui設(shè)計(jì)的內(nèi)容是有層級(jí)之分的，如一級(jí)菜單與二級(jí)菜單的從屬關(guān)系，菜單與內(nèi)容間的從屬關(guān)系、內(nèi)容與內(nèi)容間的同級(jí)關(guān)系等。通過對(duì)界面構(gòu)成元素的合理配色可以明確區(qū)分不同模塊、不同內(nèi)容的層級(jí)關(guān)系，并做到有所側(cè)重，幫助用戶理解原本復(fù)雜的頁(yè)面操作間的內(nèi)在聯(lián)系。（四）滿足用戶的個(gè)性化需求通過對(duì)色彩的合理運(yùn)用可以滿足對(duì)于用戶于不同時(shí)間段、不同場(chǎng)景中或一些特殊用戶群體（如色盲色弱等）的特殊視覺需求。二、ui設(shè)計(jì)中的色彩調(diào)和一個(gè)ui界面的

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

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

6、齡階段、教育文化背景、個(gè)性審美特征等，進(jìn)而結(jié)合色彩心理學(xué)合理運(yùn)用色彩情感進(jìn)行設(shè)計(jì)與配色。四、色彩在ui設(shè)計(jì)中的應(yīng)用（一）主色的選擇用戶打開一個(gè)移動(dòng)app或網(wǎng)站之后，通常首先注意到主色，主色所傳達(dá)出來(lái)的情感意味會(huì)下意識(shí)的感染用戶。它可以說是ui設(shè)計(jì)作品的文化方向，在很大程度上決定著設(shè)計(jì)風(fēng)格及調(diào)性，不同的主色給用戶的體驗(yàn)也不同。因此，ui界面的主色確定要經(jīng)過推敲，需要在充分考慮用戶的心理需求、個(gè)人偏好、地域文化差異以及產(chǎn)品行業(yè)屬性等因素的同時(shí)又兼顧美觀性。合理的主色和統(tǒng)一的主色調(diào)也讓品牌更具識(shí)別性，讓用戶記憶深刻、找到品牌的歸屬感，如阿里品牌的橙色、京東的大紅、唯品會(huì)的玫紅、騰訊的藍(lán)色、美團(tuán)的綠色

7、等。（二）合理配色然而，主色雖然是決定了界面及產(chǎn)品氣質(zhì)格調(diào)的色彩，但多數(shù)情況下不會(huì)大面積的出現(xiàn)。一般來(lái)說，首頁(yè)使用主色相對(duì)較多，二級(jí)頁(yè)面、三級(jí)頁(yè)面等子頁(yè)面中則使用的較少，主色會(huì)以點(diǎn)綴色的角色出現(xiàn)在界面中。這樣一來(lái)，輔色、點(diǎn)綴色的搭配也尤為重要。常見的ui界面的配色方法有：同色系配色法，即主色、輔色、點(diǎn)綴色都在相同的色相上，只是飽和度不同，這種配色方法會(huì)給人統(tǒng)一、穩(wěn)定的感受；鄰近色配色法，即選取色相環(huán)上與主色鄰近的（60°范圍內(nèi)）幾種顏色來(lái)進(jìn)行搭配設(shè)計(jì)，這種配色方法和諧又富于變化，比同色系配色更具多樣性；對(duì)比色配色法，即與主色有色相對(duì)比、明度對(duì)比、飽和度對(duì)比、冷暖對(duì)比、補(bǔ)色對(duì)比等關(guān)系的

8、配色方法，這種配色方法有強(qiáng)烈的視覺沖擊力，易給人留下鮮明的、深刻的印象，但使用不當(dāng)容易讓人眼花繚亂、分不清主次，造成用戶的視覺疲勞；中性色配色法，即用無(wú)彩色黑、白、灰與主色進(jìn)行搭配，常應(yīng)用在信息量大的網(wǎng)站，旨在突出內(nèi)容，避免不必要的色彩干擾用戶提取信息；漸變色配色法，這種配色方法是近兩年來(lái)一個(gè)新的設(shè)計(jì)趨勢(shì)，時(shí)尚而富有層次感；圖片選擇法，即通過一些自然和人文社會(huì)的照片來(lái)提取合適的色彩，從而獲得符合產(chǎn)品需求的配色方案；問卷調(diào)查法，即設(shè)計(jì)師根據(jù)其它配色方法先提供出多個(gè)配色方案，由用戶研究人員進(jìn)行問卷、訪談等形式進(jìn)行數(shù)據(jù)搜集，根據(jù)收集的數(shù)據(jù)進(jìn)行用戶需求分析，最終選擇出最適合的配色方案。（三）色彩的比重

9、色彩也有輕重之分，photoshop、ai等制圖軟件都有去色功能，把顏色去掉之后，會(huì)看到ui界面的灰度圖。一般比較深的顏色會(huì)給人感覺比較重，較淺的顏色給人感覺則比較輕。用色的時(shí)候，還要注意輕重的平衡。通常亮色較多的界面看起來(lái)輕盈、透氣、明快；深色比較多的界面看起來(lái)穩(wěn)重、內(nèi)斂、神秘；灰色較多的界面看起來(lái)素雅、低調(diào)、壓抑。一個(gè)成功的ui界面設(shè)計(jì)還要平衡好黑白灰三個(gè)層次的關(guān)系，使界面更有層次感、節(jié)奏感。（四）色彩的情感映射ui界面設(shè)計(jì)的色彩情感是通過界面中的色彩來(lái)激發(fā)用戶的內(nèi)心情感從而創(chuàng)造出的心理體驗(yàn)。因此，為了更好的用戶體驗(yàn)，設(shè)計(jì)師需要研究和理解哪些刺激因素能夠激發(fā)哪些用戶特定的情感和意愿，以吸引目標(biāo)用戶在自己的ui設(shè)計(jì)產(chǎn)品中多做停留、引導(dǎo)用戶做出對(duì)界面更深入的點(diǎn)擊。綜上，在ui設(shè)計(jì)中，色彩是最能引起用戶情緒共鳴的元素。 ui設(shè)計(jì)中如何合理的運(yùn)用色彩，從而更好的傳達(dá)產(chǎn)品所要傳達(dá)的信息并成功吸引用戶的注意力是每個(gè)ui設(shè)計(jì)師在設(shè)計(jì)過程中都應(yīng)該重視的關(guān)鍵一環(huán)?！緟⒖嘉墨I(xiàn)】1 李時(shí)穎 .ui設(shè)計(jì)中的色彩運(yùn)用研究j.電腦知識(shí)與技術(shù). 2016 .（12）：193-194.2 南云治嘉（日）， 黃文娟譯 . 色彩戰(zhàn)略-色彩設(shè)計(jì)的商業(yè)應(yīng)用m. 北京 .中國(guó)青年出版社 . 2006 . 44-46.3 金容淑 . 設(shè)計(jì)中的色彩心理學(xué)m . 北京 . 人民郵電出