1.5　UI界面設計的色彩搭配

UI界面設計的色彩搭配也是頁面設計中的關鍵，恰當地運用色彩搭配，不但能夠美化UI界面，還能夠提高用戶對頁面的興趣，同時引導用戶順利完成頁面操作。

1.5.1　色彩基礎

在設計制作UI界面前，先來了解一下色彩的基礎知識，方便之后在設計制作過程中進行合理配色。

●三原色

原色，是指不能通過其他顏色的混合調配而得到的“基本色”。將原色進行不同比例混合，可以產生出其他的新顏色。肉眼所見的色彩空間通常由三種基本色所組成，稱為“三原色”。一般來說，疊加型的三原色是紅色（R）、綠色（G）和藍色（B），如圖1-26所示。

用戶看到印刷的顏色，實際上都是看到的紙張反射的光線，因此印刷的三原色就是能夠吸收R、G、B的顏色，為青色、品紅、黃色，它們是R、G、B的補色，如圖1-27所示。

提示

三原色可以混合出多種多樣的顏色，不過不能調配出黑色，只能混合出深灰色。因此在彩色印刷中，除了使用的三原色還要增加一版黑色.這樣才能得到深重的顏色。

●色彩視覺

色彩視覺是人對色彩的視覺反應，既受到生理、大腦視覺神經的限制，又受色彩的屬性、特點、情感，以及不同的色與色、色與光對視覺的影響。

光與色

光是以波動的形式進行直線傳播的，具有波長和振幅兩個因素。不同的波長長短產生色相的差別，不同的振幅強弱產生同一色相的明暗差別。光在傳播時有直射、反射、透射、漫射和折射等多種形式。

光直射時直接傳入人眼，視覺感受到的是光源色。當光源照射物體時，光從物體表面反射出來，人眼感受到的是物體表面色。

當光照射過程中遇到玻璃之類的透明物體時，人眼看到的是透過物體的穿透色。光在傳播過程中，受到物體的干涉時則產生漫射，對物體的表面色有一定影響。例如：通過不同物體時光產生方向變化，稱為“折射”，反映至人眼的色光與物體色相同，如圖1-28所示。

物體色

自然界中的物體五花八門、變化萬千，它們本身雖然大都不會發光，但都會選擇性地吸收、反射、透射光。當然，任何物體對色光不可能全部吸收或反射，因此，不存在絕對的黑色或白色。

所謂的物體“固有色”，實際上不過是常光下人們對其的習慣而已。例如：在閃爍、強烈的各色霓虹燈光下，所有建筑及人物的膚色幾乎都失去了原有本色而顯得變幻莫測。另外，光照的強度及角度對物體色也有影響，如圖1-29所示。

提示

物體對色光的吸收與反射能力雖是固定不變的，但物體的表面色卻會隨著光源色的不同而改變，有時甚至失去其原有的色相感覺。

計算機色彩顯示

顯示器產生色彩的方式類似于大自然中的發光體。在顯示器內部有一個與電視機一樣的顯像管，當顯像管內的電子槍發射出的電子流打在熒光屏內側的磷光片上時，磷光片就產生“發光效應”。

三種不同性質的磷光片分別發出紅、綠、藍三種光波，計算機程序量化地控制電子束強度，由此精確控制各個磷光片的光波的波長，再經過合成疊加，就模擬出自然界中的各種色光，如圖1-30所示。

●色彩三要素

色彩三要素是指色相、飽和度和明度。其中色相與光波的波長有直接關系，亮度、飽和度與光波的幅度有關。明度高的顏色有“向前”的感覺，明度低的顏色有“后退”的感覺。

色相

色彩是由于物體上的物理性的光反射到人眼視神經上所產生的感覺。色的不同是由光的波長長短差別所決定的。色相，指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。

把紅、橙、黃、綠、藍、紫、紅橙、黃橙、黃綠、藍綠、藍紫和紅紫這十二種顏色作為色相環。在色相環上排列的色是純度高的色，被稱為“純色”。這些色在環上的位置是根據視覺和感覺的相等間隔來進行安排的。用類似的方法還可以再分出差別細微的多種顏色。在色相環上，與環中心對稱，并在180°的位置兩端的色被稱為“互補色”，如圖1-31所示。

提示

色相環是以黃、紅和藍三色為基礎，由此三原色配置組合而成。一般色相環有十二色相環、二十四色相環、四十八色相環和九十六色相環等。

飽和度

飽和度是指色彩的鮮艷程度，也稱“色彩的純度”。飽和度取決于該色彩中含顏色成分和消色成分的比例。含顏色成分越大，飽和度越大；消色成分越大，飽和度越小。

飽和度可定義為“彩度除以明度”，與彩度同樣表示彩色偏離同亮度灰色的程度，其實與彩度是不同的概念。但由于其代表的意義與彩度相同，所以才會出現混淆的情況，如圖1-32所示。

明度

表示色彩所具有的亮度和暗度被稱為“明度”。計算明度的基準是灰度測試卡，如圖1-33所示。黑色為0，白色為10，在0～10之間等間隔地排列為9個階段。色彩分為有彩色和無彩色，但后者仍然存在著明度。

作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應的位置值。彩度高的色彩對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易，在暗的地方就難以鑒別，如圖1-34所示。

●色系

配色的一般規律是，任何顏色都可以以主色的身份存在，并與其他色相搭配，組合成對比色、互補色、鄰近色或其他同類色關系的色彩組合。

原色

原色是最基本的色彩，主要包括光的三原色——紅、綠、藍，以及色的三原色——青、洋紅、黃。這幾種顏色以不同的比例混合可以生成其他顏色，但本身無法由其他顏色合成。

次生色

將任意兩種相鄰的原色進行混合得到的顏色就叫作“次生色”。由此可知，光學混合模式中的次生色就是色彩混合中的原色，因此加法混合與減法混合之間存在相互關系。

三次色

三次色是指由原色和次生色混合生成的顏色，在色環中處于原色與次生色之間。由于紅、綠、藍和青、洋紅、黃互為次生色，因此在十二色環中，除原色之外的其余顏色都是三次色。

鄰近色

鄰近色中往往都包含一中共有的顏色，例如：紅色、玫紅色和洋紅色，它們都含有大量的紅色。在色相環上任選一色，與此色相距90°，或者彼此相隔五六個數位的兩色，即為“鄰近色”。鄰近色一般有兩個范圍，綠、藍、紫的鄰近色大部分在冷色范圍內，紅、橙、黃的鄰近色大部分在暖色范圍內。

互補色

互補色與鄰近色正相反，兩種顏色相互混合產生白色或灰色，則稱其中一種顏色為另一種顏色的“互補色”。互補色在色環上總是處在一條直線的兩端。如果將互補色并列在一起，這兩種顏色對比最強烈、醒目、鮮明。

對比色

在色相環中相距120°或者120°以上的顏色被稱為“對比色”。顧名思義，互為對比色的顏色從視覺上給人一種對立的感覺。事實上，對比色的視覺對立感僅次于互補色。

1.5.2　色彩搭配原則

在電子地圖上可以使用不同的顏色區分不同的省、不同的國家；也可以使用同一種顏色的不同明度來區分海洋的深度或地形的高度；在游戲中還可以使用顏色來表示游戲的進程等。

如果在UI界面中錯誤地使用顏色，有可能會誤導用戶放棄操作。例如：有的打印程序使用紅色表示激光打印機預熱就緒，可以打印，但有的用戶卻誤解為機器出現故障而放棄操作。因此，UI界面的色彩搭配直接關系到用戶對界面操作的認知。

●色調的一致性

色調的一致性是指在整個UI界面系統中要采用統一的色調，要有主色調。例如：使用綠色表示運行正常，那么UI界面的色彩編碼就要始終使用綠色表示運行正常，如果色彩編碼改變了，用戶就會認為信息的意義變了。

在開始進行UI界面設計之前，設計師應該統一軟件界面中的色彩應用方式，并且在軟件系統的整體界面設計過程中遵循這種方式。如圖1-35所示，每個UI界面的配色都是統一的，整體使用了藍色、黃色和紅色三種色調。

●保守地使用色彩

所謂保守地使用色彩，主要是從大多數用戶的接受程度出發，根據UI界面所針對的不同用戶，在UI界面的設計過程中使用不同的色彩搭配。

有些軟件界面使用較大的字體，并且每個文字還使用了不同的顏色顯示，遠距離看來屏幕耀眼奪目，可是這樣的軟件界面并不利于用戶使用和操作。如圖1-36所示為使用柔和的中性色彩搭配的軟件界面。

提示

在UI 界面設計中提倡使用一些柔和的、中性的顏色，以便大多數用戶能夠接受。

●色彩的選擇盡可能符合人們的視覺習慣

對于一些針對性很強的UI界面，在進行配色設計時，需要充分地考慮用戶對顏色的喜好。例如：明亮的紅色、綠色和黃色適用于為兒童設計的UI界面。一般來說，紅色表示錯誤，黃色表示警告，綠色表示運行正常等。如圖1-37所示為使用鮮艷色彩設計的兒童UI界面。

●使用色彩作為功能分界的識別元素

不同的色彩可以加快用戶對各種數據的識別，明亮的色彩可以有效地突出或者吸引用戶對重要區域的注意力。

在UI界面設計中，應該充分利用色彩的這一特征，通過在UI界面中使用色彩的對比突出顯示重要的信息區域或功能。如圖1-38所示為使用色彩區分軟件界面中不同的功能區域。

●能夠讓用戶調整界面的配色方案

許多軟件圖形界面都可以讓用戶自行選擇配色方案，這樣可以滿足用戶個性化的需求和個人對色彩的喜好習慣，如Windows操作系統界面、瀏覽器界面、QQ聊天界面等。

設計師在設計UI界面的過程中，可以考慮為軟件界面設計多種配色方案，以便用戶在使用過程中自由選擇，這樣能夠更好地滿足不同用戶的需求。UI界面的不同配色方案效果如圖1-39所示。

●色彩搭配要便于閱讀

要確保軟件界面的可讀性，就需要注意軟件界面設計中色彩的搭配，最好就是遵循色彩對比的法則。

在淺色背景上使用深色文字，在深色背景上使用淺色文字等。通常情況下，在軟件界面設計中動態對象應該使用比較鮮艷的色彩，而靜態對象則應該使用較暗淡的色彩，這樣能夠重點突出、層次清晰，如圖1-40所示。

●控制色彩的使用數量

在軟件界面設計中不宜使用過多的色彩，建議在單個軟件界面中最多使用不超過四種色彩，而在整個軟件系統中色彩的使用數量也應該控制在七種左右，如圖1-41所示。

1.5.3　色彩搭配方案

在UI界面設計中經常能夠看到華麗、有著強烈色彩感的設計。大多數設計師都希望能夠擺脫各種限制，展示出好的色彩搭配效果。但是，想要把色彩搭配得非常合適并沒有那么簡單。

配色就是挑選幾種色彩進行合理搭配，配色方法不同，搭配出來的色彩感覺也會不同。色彩搭配可以分為單色、類似色、補色、鄰近補色和無彩色等配色方案。下面向大家介紹一些配色的基本方法。

●單色配色

單色配色是指選取單一的色彩，通過在單一色彩中加入白色或黑色，從而改變該色彩明度進行配色的方法，如圖1-42所示。

●類似色配色

類似色又稱為“臨近色”，是指色相環中鄰近的色彩，色相差別較小，在十二色相環中，凡夾角在60°之內的顏色為類似色，類似色配色是比較容易掌握的一種色彩搭配方法，如圖1-43所示。

●補色配色

補色與相似色正好相反，色相環中相對的色彩就是“補色”。補色配色可以表現出強烈、醒目、鮮明的效果。例如：黃色是藍紫色的補色，它可以使藍紫色更藍，而藍紫色也能增加黃色的紅色氛圍，如圖1-44所示。

●鄰近色配色

鄰近補色可有兩種或三種顏色構成，選擇一種顏色，在色相環的另一邊找到它的補色，然后使用與該補色相鄰的一種或兩種顏色，便構成了鄰近補色，如圖1-45所示。

●無彩色配色

無彩色系是指黑色和白色，以及由黑白兩色混合而成的各種深淺不同的灰色系列。其中，黑色和白色是單純的色彩，而由黑色、白色混合形成的灰色，卻深淺不同。無彩色系的顏色只有一種基本屬性，那就是“明度”。

無彩色系雖然沒有彩色那樣鮮艷奪目，卻有著彩色無法替代和比擬的重要作用。在生活中，肉眼看到的顏色或多或少地包含了黑、白、灰的成分，也因此，色彩的設計變得豐富多彩，如圖1-46所示。