第2章　色彩、文字、版式一樣都不能少

色彩搭配　文案策劃　文案布局　排版設計

2.1　色彩搭配

優秀的設計師都對色彩有著比較高的要求，要想成為一名優秀的設計師，必須要了解色彩的基本知識。

下面具體介紹一下基本的色彩原理，先看圖2-1所示的色相環。

色彩搭配師是經過了一系列的色彩培訓，擁有著豐富的色彩知識的人。他們運用這些色彩知識和專業的技能進行色彩搭配與設計、色彩策劃與營銷、色彩調查與管理、色彩研究與咨詢等工作。

色彩搭配師通過色彩測量、色彩咨詢、色彩調查、色彩研究與培訓等工作為社會提供專業化的色彩服務，提升各領域所需的色彩設計與應用的能力。

2.1.1　色彩的基本屬性

顏色反映了設計的整體感覺，有時候單憑顏色就可以調動起一個人的情緒、情感甚至回憶。如果沒有掌握色彩理論的基礎知識，你會發現在日常工作和生活中忽略掉了很多細節。

1.原色

紅、黃、藍之所以被稱為原色，是因為其他的顏色都可以通過這3種顏色混合而成。以不同比例將原色混合，可以產生出其他的新顏色。以數學的向量空間來解釋色彩系統，則原色在空間內可作為一組基底向量，并且能組合出一個“色彩空間”。

肉眼所見的色彩空間通常由3種基本色組成，即“三原色”。一般來說，疊加型的三原色是紅色、綠色和藍色，而消減型的三原色是品紅色、黃色和青色。在傳統的顏料著色技術上，紅、黃、藍會被視為原色，如圖2-2所示。

2.間色

間色亦稱“第二次色”，是紅、黃、藍三原色中的某兩種原色相互混合出的顏色。把三原色中的紅色與黃色等量調配就可以得到橙色，把紅色與藍色等量調配就得到紫色，而將黃色與藍色等量調配可以得到綠色。從專業的角度來講，由三原色等量調配而成的顏色，叫作間色（Secondary Color）。當然，3種原色相加就接近黑色了。在調配時，由于原色在分量的多少上有所不同，所以能產生豐富的間色變化，如圖2-3所示。

3.互補色

互補色是指色輪上那些呈180°夾角的顏色，如藍色和橙色、紅色和綠色、黃色和紫色等就稱為互補色。互補色有非常強烈的對比度，在顏色飽和度很高的情況下，可以創建出很多震撼的視覺效果。互補色對比是色相對比中最強的一種對比，使色彩對比達到最大的鮮明度。從三原色來看，補色關系是一種原色與其他兩種原色產生的間色對比關系，一般來說只有3對，即紅與綠、黃與紫、藍與橙。互補色相配，能產生強烈的刺激作用，對人的視覺具有最強的吸引力，如圖2-4所示。

4.相似色

相似色是指在色輪上相鄰的3種顏色。相似色搭配可以在同一個色調中制造出豐富的質感和層次。有一些很好的色彩組合，如藍綠色+藍色+藍紫色的搭配，以及黃綠色+黃色+橘黃色的搭配。做界面設計的時候，使用相似色搭配會讓整體大色調的層次更加豐富，使圖片效果看起來更多樣，如圖2-5所示。

5.色彩三要素

色相，用于區別各種顏色，如紅、綠、藍等。明度，表示彩色的明暗。飽和度，呈現色彩的鮮艷程度。

色相：色相也稱色別，是指色與色的區別，色別是顏色最基本的特征，它是由光的光譜成分決定的。由于不同波長的色光給人以不同的色覺，因此可以用單色光的波長來表示光的色別。

明度：明度是指顏色的明暗、深淺，通常用反光率表示明度大小。同一色相會因受光強弱的不同而產生不同的明度，同一色相之間也存在明度的差異。人眼對不同顏色的視覺靈敏度不同，不同的色相在反光率相同時，也會產生不同的明度感受。當不同的色彩搭配在一起時，色相、明度和飽和度的作用會使色彩的效果產生變化。兩種或者多種淺顏色配在一起時，不會產生色環（色輪）對比的效果。同樣，多種深顏色組合在一起效果也不吸引人。但是，當一種淺顏色和一種深顏色混合在一起時，就會使淺色顯得更淺，深色顯得更深。

飽和度：飽和度是指顏色的純度，也稱色彩的鮮艷程度。飽和度取決于某種顏色中含色成分與消色成分的比例，含色成分越大，飽和度就越大；消色成分越大，飽和度就越小。物體的表面結構和照明光線性質也會影響飽和度，相對來說，光滑面的飽和度大于粗糙面的飽和度；直射光照明的飽和度大于散射光照明的飽和度。色彩的明度改變，飽和度也會隨之變化，明度適中時，飽和度最大。明度增大時，顏色中的白光增加，色純度減小，飽和度也就會降低。明度減小時，顏色很暗，說明顏色中的灰色增加，色純度也減小，飽和度也就會降低。當明度太大或太小時，顏色會接近白色或黑色，飽和度也就極小了，如圖2-6所示。

2.1.2　色彩構成

色彩構成，即色彩的相互作用，是從人對色彩的知覺和心理效果出發的，是用科學分析的方法，把復雜的色彩現象還原為基本的要素，利用色彩在空間、量與質上的可變換性，按照一定的規律去組合各構成之間的相互關系，再創造出新的色彩效果的過程。色彩構成是藝術設計的基礎理論之一，它與平面構成及立體構成有著不可分割的關系，色彩不能脫離形體、空間、位置、面積、肌理等而獨立存在，如圖2-7所示。

成熟的界面設計在色彩運用上都會遵循一定的規律，色彩有主有次，富有層次感，才會讓人很舒適，如圖2-8所示。我們做界面設計的時候，可以多收集一些優秀的作品，分析它們的配色，適當臨摹一些優秀作品，以便積累自己的配色經驗。

主色：在店鋪中第一眼看上去感受到的色彩就是主色，主色決定著首頁的風格。例如，整個界面是米黃色，是暖色調的設計，就會給人舒適自然的視覺體驗，色彩飽和度低，長時間地瀏覽，眼睛也不會疲勞。

輔助色：輔助色是補充主色的顏色，起到平衡畫面色彩和緩解主色給人帶來的顏色沖擊的作用。例如，黃色主界面上用綠色豐富一下，使界面不呆板。相對來說，黃色和綠色的顏色對比不強烈，綠色在一定程度上豐富了界面顏色。

點綴色：點綴色在店鋪界面中占的空間最小，但是功能卻很大，它能起到畫龍點睛的作用。點綴色一般色彩艷麗，常在突出賣點或展示價格時使用。

2.1.3　配色技巧

1.同一色調配色

同一色調配色是將相同色調的不同顏色搭配在一起形成的一種配色關系。同一色調，其色相、純度和明度具有共同性，明度按照色相略有變化。不同色調會產生不同的色彩印象，將純色調全部放在一起時，會產生活潑感。在對比色相和中差色相配色中，一般采用同一色調的配色手法，這樣更容易進行色彩的調和。圖2-9所示是同一色調的配色效果。

2.類似色調配色

類似色調配色，即將色環中相鄰的兩種或兩種以上的顏色搭配在一起。類似色調配色的特征在于色調與色調之間有微妙的差異，較同一色調有變化，不會產生呆滯感。將深色調和暗色調搭配在一起，能產生一種既深又暗的昏暗感。而鮮艷色調和強烈色調再加明亮色調組合，則可以產生鮮艷活潑的色彩印象。圖2-10所示是類似色調的配色效果。

3.對比色調配色

對比色調配色是相隔較遠的兩種或兩種以上的顏色搭配在一起。對比色調因色彩的特征差異，能造成鮮明的視覺對比，有一種“相映”或“相拒”的力量使之平衡，因而能產生對比調和感。對比色調在配色選擇時，會因橫向或縱向而有明度和純度上的差異。例如，淺色調與深色調搭配，即為深與淺的明暗對比。而鮮艷色調與混濁色調搭配，會形成純度上的差異。圖2-11所示是對比色調的配色效果。

2.1.4　店鋪風格與色調

確立店鋪的風格與色調，能使產品的市場定位更加清晰、明朗。店鋪首頁風格的確立，能使客戶群更加穩定。首頁風格大致分為3類：高端時尚的、普通的和卡通風格的。

高端時尚的：一般界面簡潔精練，色彩純度低，經久耐看。走高端風格的界面設計，一定要簡單大氣，用色慎重，用詞考究。設計圈有句俗語：“越簡單越難設計。”沒有多余的文案和產品，用最少的文案體現最豐富的內容，非常考驗設計師的能力，如圖2-12所示。

普通的：普通的界面設計一般面對的客戶是普通消費者，他們對界面設計要求不高，合適的價格才是吸引他們的重點。在設計界面的時候可以讓色彩艷麗一些，排版方式豐富多樣一些，價格展示得明顯一些，讓人有購買的沖動，如圖2-13所示。

卡通風格的：主要針對兒童等客戶群，在界面設計的時候，可以多用一些卡通素材，排版可以隨意一些，色彩豐富多樣一些。兒童的世界五顏六色，可以多一些想象空間，讓畫面充滿童趣，如圖2-14所示。