UI設計中色彩的應用

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

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

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

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

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

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

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

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

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