1.4 UI設計中的色彩搭配

配色是一項非常重要的美術素養，需要通過系統的學習和大量的觀察練習才能慢慢提升。總體來說，手機UI界面設計應遵循以下4條配色原則：整體色調要協調統一、配色要有重點色、注意色彩平衡，以及對立色的調和。

1.4.1 色彩的意象

人們看到不同的顏色會產生不同的心理反應，例如看到紅色會下意識地心跳加快、血液流速加快，進而從心理上感受到一種興奮、刺激、熱情的感覺，這就是色彩的作用和意象。下面是一些常見顏色的色彩意象。

在著手創建自己的APP界面時，可以先考慮APP的性質、內容和目標受眾，考慮自己究竟要表現出怎樣的視覺效果，營造出怎樣的操作氛圍，以此制定出科學合理的配色方案，并嚴格地按照配色方案來塑造UI界面中的每個元素。

1.4.2 色彩的搭配原則

盡管人們可以從網上搜索到大量的所謂配色寶典、配色原理和配色方案之類的資料，然而配色本身無法被量化，也無法在短時間內快速提高，但還是應該遵循一些約定俗成的配色原則。

·整體色調協調統一

在著手設計界面之前，應該先確定主色調。主色將會占據頁面中很大的面積，其他的輔助性顏色都應該以主色為基準進行搭配。這可以保證整體色調的協調統一，重點突出，使作品更加專業和美觀，如圖1-6所示。

·有重點色

配色時，可以選取一種顏色作為整個界面的重點色，這個顏色可以被運用到焦點圖、按鈕、圖標，或者其他相對重要的元素，使之成為整個頁面的焦點。

重點色不應用于主色和背景色等面積較大的色塊，應用于強調界面中重要元素的小面積零散色塊。

·注意色彩的平衡

配色的平衡主要是指顏色的強弱、輕重和濃淡的關系。一般來說，同類色彩的搭配方案往往能夠很好地實現平衡性和協調性，而高純度的互補色或對比色，例如紅色和綠色很容易帶來過度強烈的視覺刺激，使人產生不適的感覺。

另一方面是關于明度的平衡關系。高明度的顏色顯得更明亮，可以強化空間感和活躍感；低明度的顏色則會更多的強化穩重低調的感覺，如圖1-7所示。

·調和對立色

當包含兩個或兩個以上的對立色時，頁面的整體色調就會失衡，這時就需要對對立色進行調和。通常可以使用以下3種方法對對立色進行調和。

■ 調整對立色的面積，使一種顏色成為主色，其他顏色成為輔助色。為了降低輔助色的色感，可能需要適當調整它們的純度和明度。

■ 添加兩種對立色之間的顏色，引導顏色在色相上逐漸過渡。例如要調和紅色和黃色，可加入橙色。

■ 加入大量的中性色。黑、白、灰被稱為中性色，它們不帶有任何正面或負面的感情色彩，用來調和其他有彩色是非常不錯的方法。

1.4.3 常見的色彩搭配方法

每種色彩在印象空間中都有其獨特的位置，因此色彩搭配得到的印象可以用加減法來近似估算。如果每種色彩都是高亮度的，將其疊加就會達到柔和、明亮的效果；如果每種色彩都是濃烈的，疊加得到的效果就是濃烈的，如圖1-8所示。

界面色彩搭配分析如下。

·色彩分析

以黑色作為整個界面主色，表現出高端、精致、穩重的感覺，同時以不同明度的變化，突出界面層次感和主次效果。

紅色是最具視覺沖擊力的顏色，也是容易使人的興奮的顏色，將其與黑色搭配能夠減弱對人的大腦的刺激，同時彌補黑色帶給人的衰弱、恐懼等消極情緒。

將綠色置于黑色的背景中，即使是很小的色塊也會顯得很引人注目，綠色能夠減弱黑色和紅色對人大腦的刺激，給人生機勃勃的感覺和安全感。

白色的文本色與黑色的背景色形成鮮明的明度對比，整個頁面變得明快、輕盈，突出主要內容，便于人瀏覽時將內容一目了然。

當不同的色彩搭配在一起時，色相彩度明度作用會使色彩的效果產生變化。兩種或者多種淺色搭配在一起不會產生對比效果，同樣的，多種深色搭配在一起也不吸引人。但是，當一種淺色和一種深色混合在一起時，淺色就顯得更淺，深色顯得更深。明度和色相也會產生同樣的對比效果，如圖1-9所示。

當然在實際設計過程中，設計師還要考慮到乘除法，例如同樣亮度和對比度的色彩，在色環上的角度不同，搭配起來就會得到千變萬化的感覺。

圖1-10所示為一些比較常見的配色方案。

1.4.4 使用Kuler配色

Kuler是Adobe公司開發的一款配色軟件，既可以下載安裝后作為獨立的軟件運行使用，也可以作為Photoshop、Illustrator和Flash等其他Adobe系列軟件的插件使用。圖1-11所示為在Photoshop中打開Kuler的效果。

Kuler界面中包含3個面板，“關于”面板主要提供Kuler的簡介和使用方法；“瀏覽”面板提供受歡迎的在線配色方案；“創建”面板允許用戶通過多種配色規則自定義配色方案。

在“瀏覽”面板中選擇喜歡的配色方案，或在“創建”面板中自定義配色方案后，可以單擊底部的按鈕，將這些顏色加入到Photoshop的“色板”面板中。