UI設計中的色彩運用

　　色彩的美是一種形式美，色彩的情感表達不僅僅只限于某一種色彩的特定內涵及社會屬性上，也大量體現于色彩之間的關系。也就是說以色彩關系為基礎表現出來的整體感覺就是色彩的美感。下面小編為您帶來UI設計中的色彩運用！

　　UI設計中的色彩運用

　　1 UI設計中色彩的功能

　　色彩作為視覺傳達中非常重要的要素在UI設計中具有非常重要的作用，可以歸納為以下幾個方面。

　　1）顯示界面的整體架構

　　一個UI界面總是借助圖形化的外觀直接作用于客戶的視覺系統。用戶接觸一個UI界面，看到的往往是一個由底色、其他幾何色塊、圖標、按鈕等元素構成的圖形符號系統。用色彩可以非常直觀的凸顯出背景、導航欄、狀態欄，按鈕等構成元素，并顯示出UI界面的邏輯架構。

　　2）明確視覺層級關系

　　UI設計中不同的內容屬于不同的層級關系，如菜單于菜單間的同級關系、內容間的從屬關系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區分內容的層級關系，還可以通過色彩間的強對比突出關鍵內容。

　　3）營造界面整體風格

　　UI界面雖然是個復雜的視覺圖形系統，但通過主色調、輔助色、裝飾色之間的對比調和關系會呈現出明顯的風格傾向。用不同的色系或者同色系色彩之間的對比與調和關系，可以塑造出不同的界面風格。如適合男生的金屬質感的黑色、灰色、藍色系，女生喜歡的夢幻甜美色系、糖果色系。界面風格定位于品質已經成為用戶體驗中最重要的部分之一。

　　4）基于人體工程學的色彩運用。

　　由于色溫會影響到光源顯示的顏色，大于 6500K 就會偏冷（白藍），小于 6500K 就會偏暖（黃紅）。而藍光大量存在于電腦顯示器、熒光燈、手機、數碼產品、顯示屏、LED等光線中，由于藍光是一種高能量的短波光線，因而會較為嚴重的傷害視力。基于人體工程學保護視力考慮，蘋果手機Iphone7和iphone7plus手機背光顯示設計了Night Shift 的屏幕去藍光保護功能，開啟后會在晚間自動將屏幕顯示調成暖黃色調，減少視覺疲勞。

　　此外，UI界面中，考慮到電子設備的顯示特點。背景色要與圖標色彩之間至少有5.38以上的對比差，才能夠易于區分。而在此差值范圍內的配色則會因為過于接近而在顯示環境中對辨認造成困擾。

　　還有一些特殊人群，如紅綠色盲人群，由于特殊視覺需求而需要進行特別的配色設計。

　　2 UI色彩設計方案

　　在進行UI設計時，要通過對產品及用戶體驗的分析確定明確的色彩搭配反感，形成“標準色彩規范”，在這個基礎上再進行具體界面、線框、圖標等細節設計。標準色彩規范中要規定出最主要主色、輔助色、裝飾色的色號，方便設計師的設計稿的色彩統一。

　　1）主色調

　　主色用量基本占據全部用色的75%，基本決定了整個界面的視覺風格。主色選擇要符合產品本身的氣質、訴求和色彩心理學規律，可在主色的基礎上通過明度與純度的變化衍生出同色系色調作為主色調范圍。

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

　　2）輔助色

　　輔助色起到輔助主色的作用，在全部用色中約占據20%。用與主色同色系色彩作為輔助色可以呈現柔和、整體、統一的視覺效果；而用主色鄰近色作為輔助色可以讓界面有豐富的變化，產生活潑感；用主色調對比色作為輔助色可以讓主色更為突出。

　　3）裝飾色

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

　　3 UI設計中對色彩三要素的運用

　　色相、明度、飽和度是色彩的三要素，對這三個色彩要素的理解和運用體現在UI設計中整個色彩方案中。

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

　　色彩的明度是色彩的明亮程度，是對色彩進行調和的主要因素。同色相色彩的明度變化可以在同色系中呈現一種調和統一的變化關系，協調而具有層次感。常常用于配合主色進行圖標、菜單、導航等設計。明度變和也會帶來色彩性格上的差異，明度升高會讓色彩變得明亮、呈現清涼感；而明度降低則會讓色彩變得暗淡，呈現溫暖感。

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

　　4 UI設計中的色彩心理學運用

　　色彩具有非常強的聯想性。不同的色彩會在味覺、空間、冷暖、情緒等不同方面引發人們不同的綜合感受。UI界面在主色調的選擇中往往會利用人們對于色彩的聯想習慣突出產品的定位。仍以ios系統手機APP為例；以介紹美食菜譜的“香哈”APP，主色采用最容易誘發食欲的紅、橙色系；而具有豐富中國民俗傳統的萬年歷APP則采用了充滿中國傳統文化涵義的中國紅作為主色并配合這一氣質采用篆書字體作為文字標識。

　　綜上所述，由于色彩的重要性，對色彩的理解和駕馭對整個UI界面的設計產生著巨大的影響。

　　UI設計中的色彩知識

　　色彩的美是一種形式美，色彩的情感表達不僅僅只限于某一種色彩的特定內涵及社會屬性上，也大量體現于色彩之間的關系。也就是說以色彩關系為基礎表現出來的整體感覺就是色彩的美感。

　　色彩平面設計即將不同的基本圖形，按照一定的規則在平面上組合成圖案的圖形。主要在二度空間范圍之內以輪廓線劃分圖和地之間的界限，描繪形象。現如今我們看到不管是現在的戶外廣告、雜志廣告、還是我們比較常見的廣告海報等，都是由這些要素通過巧妙的安排、配置、組合而成的。

　　色彩擁有深淺濃淡不同的色階和色相。這些色階和色相互相調和與對比，就可以形成各種不同的色彩情感，使人們享受到色彩所帶來的美感享受。所以色彩搭配的和諧，決定著色彩的美感。那么色彩的和諧表現最主要是通過對比與調和產生的。對比與調和是一對相互依存的對立統一體，凡是對這種“對立統一”的破壞都不會產生畫面色彩的和諧。

　　在藝術作品中，豐富的素材和色彩、表現手法的多樣化可豐富作品的藝術形象，但這些變化必須達到高度統一，使其產生一個和諧的視覺形象，這樣才能構成一種有機整體的形式。對比與調和是任何設計作品中都具有的組成部分，它們的區別是藝術的對比與變化，而它們兩者之間的聯系，又有機地組合一個整體，這就是所謂的藝術統一與色彩和諧的表現。在平面設計中巧妙運用色彩的對比與調和，使其產生和諧的畫面，這將會使作品更具表現力和生命力、這樣才能創造成功的作品。