這一期是版式三部曲的最后一篇內容了，這次打算跟大家簡單聊一聊配色的問題。

往期回顧：

如果說構圖相當于骨架，文字相當于五官，那配色就相當于是在臉上畫一個精致的妝容。因為配色是整個編排流程中的最后一步，通常我們都是在搭建完骨架，刻畫好文字后，才會考慮配色的問題。一個好的配色，會讓版面的視覺效果更上一層樓，最終成品的完整度也會更高，那下面我們就開始今天的內容。

一個版面是由背景、文字、圖片或圖形組成的，它們都是色彩的載體，對于它們中的任何一個我們都可以做上色處理。

今天主要來講講背景與文字之間的配色問題。為什么只講前兩個，而不講圖片或圖形呢？因為我們訂閱號出的大部分色彩教程，都涵蓋了這三者，對色彩感興趣的可以去看一看。

首先我們來說說文字，色彩作用在文字上的方式就是 “ 換色 ”，對于這種操作門檻幾乎為零的手法，很多人往往都會忽略它的重要性。我們不妨問自己一個問題，我真的掌握了換色的技巧么？還是說我只是會在軟件上操作這個步驟而已。真正的難點在于如何去運用它，而不僅僅是我會操作就可以了。

我們都知道，信息需要被劃分出層次才能更好的傳播。從重要程度來分可以劃分出主要內容、次要內容與說明性的文字，這些信息應用到畫面中最常見的表現形式就是主標題、副標題與段落文字。

而文字的這三種表現形式都在換色的應用范圍內。

所以，千萬不要因為簡單就小瞧了換色這個技巧，它是使用頻率最高的一個手法，可以說是基本中的基本。

我們看上方的這幾個版面，都是處在無彩色狀態下，給人的感覺略顯沉悶。當給部分文字換上色彩后，版面給人的感覺立馬就不一樣了，這也是換色的一個功能之一，它能提升版面整體的視覺效果。

給文字換色除了能夠豐富版面的視覺效果以外，還具有創造視覺焦點的作用。

這個原理也很簡單，我們拿一張白紙來舉例，當我們看到這張不包含任何元素的畫面時，因為視線找不到落腳點，自然就會四處亂看。

當我們在畫面中心添加一個紅色的圓點后，情況就變得不一樣了。版面中心的紅色圓點展現出了極強的吸引目光的作用。

即使這個紅點的位置跑到視覺優先級沒那么高的角落，我們的視線也依然會被牢牢鎖定在那里。

換成文字也是一樣的，畫面中眾多的文字共同組成了一個很大的視覺面積，在這個面積中所有的文字都非常和諧的拼湊在一起。我們的視覺路徑會首先發現版面中的這塊偏灰黑的視覺面積。

然后從文本的左上角向右下角逐字閱讀。如果字數再多一點的話，可能就沒有興趣看下去了，這就讓傳播的效率大打折扣。那么我們該怎樣提升這個畫面的傳播效率呢？

當我們將關鍵詞替換成另一種顏色之后，情況就變得不一樣了，因為色彩與面積的關系，人們首先會看到最醒目的紅色文字。

接著心里就會產生“這很有趣”或者“這是什么意思”的疑問。當視線被焦點所吸引之后，受眾自然會在文字中尋找答案，順便就看完了所有的信息。

△ Design by 27AGE

我們來看這個畫面，相信你一定知道視覺焦點在哪里了吧。左下角黑色的英文無論從面積還是色彩上判斷，它都是最特殊的一個。

這個版面，相對于文字來說人們第一眼看到的一定是圖像元素，而在右側的文字組中，這個最大的數字9就是視覺的第二個落腳點。對于這種圖像做為主體的版面來說，視線被圖像吸引后還是要落到需要傳播的文字信息上的，所以為文字信息創造視覺焦點是非常有必要的。

這個畫面與上一個的不同之處在于，它的文字呈現出了主導地位，而圖像元素的視覺面積被弱化了，因此受眾有很大概率會先看文字再看圖片。那么從內容上來說這個畫面的視覺焦點在什么位置呢？下面我們來分析一下。

從這個版面中的色彩來看，紅色顯然是最吸引眼球的，這里最主要的原因是大面積的綠色與紅色之間是對比關系。

在這種前提下元素的位置又靠近版面的中心，這就更增強了它的醒目程度。所以這個版面中的視覺焦點妥妥的就是那個紅色的大英文了。

既然已經分析到了這一步，那么接下來我們來討論一下，該怎樣判斷色彩間的主次關系。

在只有黑白的色彩搭配中，與背景反差大的色彩就是被強調的那個。比如在黑色的背景下色彩明度越高越顯眼。

當黑白與彩色搭配時，一般情況下是帶有顏色的會更突出，當然前提是色彩面積更小的那個是被強調的元素。但也有例外，我們回到之前的那個案例上。

可能你會問“不是說畫面中面積最小的色彩才是被強調的那個嗎？” 遇到這種版面我們就需要綜合判斷了，白色雖然是這個版面中面積最小的色彩，但由于它在明度上與背景色比較接近，所以真正被強調的信息應該是與背景反差很大的紅色文字。這和剛剛說的只有黑白的色彩搭配中，明度與背景反差大的才是被強調的是一樣的道理。

回過頭來，我們再看當兩種色彩在視覺面積上差不多時，又應該如何判斷呢？這種情況下我們只要找在觀感上最顯眼的那個就對啦。

看到這相信大家對于換色的功能與作用都已經有了一些了解，使用換色這個技巧，既能提升版面整體的視覺效果，也能標記一些你想要強調的信息，從而為版面創造視覺焦點。那接下來我就通過案例演示的方式，給大家實際操作一下。

在一個橫版的尺寸上進行編排時，左右結構無疑是最舒適與最穩定的，確定好構圖后，在排版時將文字排在左邊，把圖片放置在右邊能夠貼合正常的閱讀順序，先看文字在看圖片，當然也可以把圖片放在左邊，只是說文字在左邊比較常用而已。

接著刻畫主體，在產品圖片的后方疊加文字，做一個圖疊字的效果。一般來說被疊壓的文字都是與圖片有關系的，比如在這個案例中，我疊的就是這個產品的型號。

說到疊壓，被壓住的文字識別性肯定是會受到影響的，這時有一個判斷的標準就是，如果被壓住的文字還能識別的話，那就沒問題，如果不能識別，我們可以在產品的上方覆蓋一層被疊壓文字的描邊。

接著修改一下被疊壓文字的色彩，之前的黑色看著偏重，會影響到版面的平衡，完成這一步后，在下方填充一個與疊壓文字一樣色彩的色塊，進一步強化版面的平衡感。

挑選重要信息換上色彩，在這里我選擇了將標題信息進行換色處理，在只有黑白灰的版面中加入有彩色，那么它無疑就是最吸引眼球的。

除了標題以外，我們還可以選擇強調賣點，著重突出一下它。

或者是同時強調標題與活動價格，這樣受眾在觀看版面時，就能以最快的速度獲取版面中最重要的信息了。

反之，也可以強調賣點與產品參數。

在換色時最忌諱這種情況，什么都想強調，這導致的結果就是那些沒換色的文字反客為主了。

值得一提的是，所有文字都換色的例子也是有的，比如這種海報，它換色的目的就不在是為了突出某一個信息了，而是為了節奏感考慮的，通常以雙色或多色出現。

除了之前給大家舉的那些例子以外，換色在標識中也是較為常用的手法，它與版面編排中的應用邏輯基本是一致的。設想一下如果我們把色彩去掉會是什么樣呢？

采用單色的處理形式雖然并不會破壞標志本身的形式美感，但也缺少了變化性與視覺表現力。

比如對于優酷這種已經形成了固定印象的標志來說，突然變成單色甚至會影響到你對這個標志的識別。所以，對于標志設計而言，換色不僅起到了裝飾與突出強調的作用，同時也是我們對標志的一個記憶點。

本期內容的前半部分講了文字換色的應用場景與其背后的邏輯，那么接下來我們來講講與色彩有關的部分，以及背景色與文字色之間的關系，看一看它們在色彩搭配上都有哪些需要注意的地方。

色彩可以用三種屬性進行描述，也就是我們常說的色相、純度（也稱飽和度、彩度）和明度。

色相大家都知道，指的就是色彩的相貌，通常情況下，色相以色彩的名稱來體現，如基本色相：紅、橙、黃、綠、青、藍、紫。

純度指的是色彩的鮮艷程度，也叫彩度、飽和度、鮮艷度。純度最高的色彩就是原色。以這個純度變化的色相環為例，純度最高是這個紅色，以它為起點順時針旋轉代表的就是這個色彩的一個純度變化，純度越低色彩越淡，直至失去色相變為無彩色。

明度指的是色彩的明亮程度，通常用高低來表示。以這個明度變化的色相環為例，從最下方的白色起，逆時針旋轉模擬的就是明度從高到低的一個變化過程。

不同色相之間也存在著明度的變化，在有彩色中明度最高的是黃色，僅次于白色，明度最低的是紫色，與黑色接近。此外，紅色、橙色、藍色、綠色，它們的明度值是相近的。

色彩的三個要素我們已經大概了解了。雖然色彩的搭配通常需要針對不同項目做出變化，但也有一些組合到一起效果不好的情況需要注意。

在開始演示前，先跟大家說明一下，當涉及到色彩參數的修改時，我用的是HSB模式，其中“H”對應的是色相，“S”對應的是純度，“B”對應的是明度。在接下來的調整當中，每一個顏色的色相我基本不會改動，所以在標注色彩的色相、純度與明度時，我只會給出純度與明度的數值。下面我們就來說一下色彩搭配時要注意的問題。

第一點要注意的是：在有彩色背景上為文字添加色彩，切記不要選擇那些與背景過于接近的顏色，因為這樣會嚴重影響到文字的識別，看起來非常累。

第二點要注意的是：在有彩色背景上為文字添加色彩時，不要選擇與背景色明度差異較小的色彩。在這幾個例子中，所搭配的色彩在色相明度上相差不大，文字雖然可以被識別，但是閱讀起來還是很費力的。

針對這個問題，第一個解決方案就是：在當前配色的基礎上去修改背景或文字的色彩明度。

這是修改后的效果，可以看出相較于之前文字的識別性有了很大的提高。用黑色標注過的地方，是被修改過后的色彩數值，其中有些色彩修改的并不是明度而是純度，因為如紅藍兩色它們在明度數值為100時看上去就是偏暗的，如果降低它們的明度數值只會讓這個色彩越來越暗，所以這時要去修改它們的純度數值，讓純度再低一些。

第二個解決方案是：在不改變背景色與文字色明度或純度的基礎上，選擇色相差異較大的色彩重新組合，總之要想保證良好的識別度，要么背景偏亮文字偏暗，要么背景偏暗文字偏亮。

我們來看這張海報，它的文字和圖形填充的就是一個偏暗的藍色，而背景色則是較亮粉色。

這張海報與上一個不同，它是文字用的較亮的黃色，背景使用較暗的藍色。

第三點需要注意的是：在有彩色背景上為文字添加色彩時，不易選擇與背景色對比過于強烈的色彩，特別是在運用對比色與互補色時要尤為注意，因為這種搭配過于刺眼。而且，文字邊緣會出現黑色的暈影，這時就需要修改背景色與文字色雙方或其中一方的明度與飽和度。

這是修改文字色的純度和明度后的效果，相較于之前會發現文字邊緣的黑色光暈消失了。不過，因為還存在純色，所以某些色彩看起來還是會有不適感。

跟單獨修改一方的色調相比，一起修改后的效果會更好一些。所以在使用色彩時，我也建議大家適當的壓一壓色彩的純度，這樣給人的感覺會更加的柔和不刺激。

我們來看這張海報，提取它的文字色與背景色后會發現，文字色雖然使用了純色，但是背景色有稍微降低明度。海報右側的兩個小方形表示的是，文字色與背景色都使用純色時的樣子。

這張海報跟上一個不同的是，它的文字色與背景色都有調整明度與純度。之前也講過了在運用對比色或互補色時，想要搭配起來柔和一些的話最好是一起調整。

在有彩色的背景上為文字添加色彩時，不要選擇與背景色過于接近的顏色，也不要選擇與背景色明度差異太小的顏色。更要記住的一點是，所選的文字色不要與背景色出現太過強烈的對比，只要記住這三點，我們在處理背景色與文字色時就會更加的游刃有余。最后，就通過案例演示的方式來為大家總結一下前面所講到的所有知識點。

首先，將標題信息置入到版面的上方，然后在版面的下方置入活動時間與活動地點等信息。

整個版面的構圖方式為：上中下型，其中有一個重要的知識點就是，留白也是面積。在這個版面中留白的區域就是我用紅色的色塊標注出來的區域

因為這是一個純文字的版面，在沒有圖片或是圖形的介入下，視覺表現力難免會有些不盡人意。為了打破現有的呆板印象，就需要在此基礎上去作出些節奏變化，比如改變文字的位置，做一個左右左右的穿插。

這樣受眾在觀看海報時，視線的來回移動也會比單純的重復一個視覺動勢要好的多。

滿足了閱讀上的節奏感后，在只有大字號與中等字號的版面中，置入些小字號的文字與裝飾元素，用于進一步的豐富版面的視覺效果。

接著，將活動內容置入到版面中，大家可以發現我在活動內容的下方疊加了一個色塊，因為活動內容本身的字號并不大，通過在其下方疊加色塊的手法，可以進一步增加活動內容本身在版面上的面積，以達到醒目的作用。

這些是運用了相似手法的海報例子。

最后，為做一個對角上的呼應，分別在這幾個位置放置運用相同手法的元素，到此這張海報的編排部分就完成了。接下來要做的就是給背景與文字搭配顏色。

在考慮配色時，我曾試過隨機抽取兩個色彩，以聽天由命的方式碰碰運氣，這是隨機抽取后的色彩，下面以這組配色為例來看看效果。

在給文字與背景上色前，需要注意的是從色相環中選取的色彩都是純色，按照之前給大家講的，不建議用太純的色彩，所以針對這兩個顏色我都做了些處理，分別調整了它們的明度與純度。

調整完純度與明度后，在上色時建議大家將偏暗的色彩填充在背景上，偏亮的色彩填充在文字上。因為背景的面積較大，填充亮色看久了會有些刺眼，當然這只是從單一角度考慮所提出的建議，當然給背景填充亮色的優秀案例也有很多。

先將背景色給填充上，然后根據之前講過的，為了識別性考慮要拉開文字色與背景色的明度差，所以文字需要反白處理，完成這一步后接下來要做的就是，挑選重要的信息換上綠色。

在這里，我挑選了標題與折扣信息進行換色，這樣受眾在看到海報的第一眼就會明白，我要說的是什么事了。

最后，為了讓整個版面看上去再和諧一些，需要把黑色塊換成綠色，色塊上的文字信息填充紫色，到此上色的工作就完成了。對于我個人而言，紫綠的搭配還不錯，不過這種隨機選擇色相的配色方式還是不可取的，效果的好壞難以把控。

為了避免配色時陷入迷茫的狀態，在配色前針對設計項目的類型，我們可以做一下分析，看看別人的色彩都是怎么搭配的。

先來看促銷中會用到的第一種配色方式：紅配藍。紅藍大家都知道，是一組對比色。

在色相環中相距120°左右的兩個顏色都是對比色，如果有把控不好角度的，可以在色相環的中間畫一個三角形，這個三角形的角對應的就是對比色的色相，想要更換不同的對比色時，只需旋轉這個三角形即可。

左側的一組紅藍是從之前的那個例子中提取出來的，右側的是將它們的明度與純度恢復原樣后的樣子，我們會發現其中的藍色跟色相環中的藍色還不一樣。

這個色彩偏淡與色相環中的靛色很像。之所以要講這個，是因為要跟大家說明一個觀點，就是除了某些特殊情況外，我們在選色時都不用那么死板。

以藍色為例，位于這個區間的色相與紅色都可以算做是對比色，因為這個區間的顏色基本都是屬于同一類的色彩。

這是我調整后的紅藍搭配，藍色用在背景上，紅色用在文字上，其中藍色降低了明度，紅色降低了純度。大家仔細看圖中的綠色小三角形，所有調整參數的地方，我都會用它標明。

這是應用后的效果。

這是紅色與藍色在其它海報中的應用例子，講完了促銷中會用到的第一種配色后，下面我們來看看第二種。

黃配綠，不知道大家對這組配色有沒有什么印象，我個人是看到黃色配綠色就會聯想到雪碧。

在色相環中黃色與綠色是一組鄰近色，而鄰近色指的就是在色相環上相距60°左右的兩個顏色，想要定位其他的鄰近色可以在色相環中畫一個六邊形，這個六邊形的每兩個頂點對應的都是一組鄰近色。

這是我調整后的黃綠搭配，沿用的還是我個人的一個配色習慣，偏暗的色彩填充背景、偏亮的色彩填充文字，其中偏暗的綠色降低了純度與明度，偏亮的黃色純度明度不變。

應用后的效果是這樣的。

這是黃色與綠色在其它海報中應用的例子。下面我們來看看第三種促銷中會用到的配色是什么。

看到這兩個色彩，我相信大多數人的第一反應是紅配綠，然而真的是這樣么？

從上面的圖片中，選取一個綠色。左側的是提純前，右側的是提純后，提純后的這個色彩與色相環中的青色非常接近，也就是說這并不是紅配綠，而是紅配青。

在色相環中，紅色與青色是一組相距180°的色彩，它們是一組互補色，而與紅色順時針相距120°的色彩才是綠色。

這是我調整后的紅青搭配，因為青色本來就非常亮，所以我在調整時更多的是選擇去降低它的明度，而紅色的明度不變只改純度，這樣就能夠拉開明度差。

應用效果是這樣的。

這是紅色與青色在其它的海報中應用的例子，下面我們來看看第四種促銷中會用到的配色。

紅配黃，一組非常搶眼的配色，因為都是暖色的關系，給人的感覺會偏熱鬧一些。

它們在色相環中也是相距60°左右的一組鄰近色，至于判斷的方式也是建議大家用六邊形，哪兩組色彩是鄰近關系一目了然。

這是我調整后的紅黃搭配，大家會發現針對純度與明度，我幾乎沒有做太大的調整，這樣做的目的也是為了保證紅色與黃色的搶眼特性。

應用后的效果是這樣的，果然兩個純色搭配在一起絕對是刺激的，但是看起來并沒有特別難受。如果有些人覺得刺激性太強的話，再降低一些純度與明度也是可以的。

這是紅色與黃色在其它的海報中應用的例子。下面我們來看最后一種促銷中會用到什么配色。

黃配藍，給我的感覺是一組非常清涼的配色。

在色相環中它們相距了180°，也就是說黃藍也是一組互補色，而且上面那個例子中的“藍”也是更偏向靛色的。

這是我調整后的黃藍搭配，黃色依舊是沒有進行調整，而藍色則是降低了些明度，因為我個人覺得這樣搭配后的效果比較好。其次就是如果你不降低這個藍色的明度也行，因為藍色的色相明度本身就比黃色低，在明度差已經拉開的基礎上，再調整色彩參數無非就是個人喜好的問題了。

應用后的效果是這樣的。

這是黃色與藍色在別的海報中應用的例子。

以上這些是我今天為大家演示的所有配色。關于促銷中會用到的配色選擇還不只這些，今天為大家展示的只是我挑選的一部分而已，如果有需要的可以用來參考。

版式三部曲的最后一篇到這就正式完結了，這篇文章的目的并不是為了讓大家去記憶某些色彩的樣式或參數，而是學會為文字與背景配色，并根據自己的喜好或項目的類型，自由調整明度與純度。因為每個人喜歡的色彩都不同，對色彩的鮮艷程度的接受范圍也不一樣，喜歡淡雅的可以降低純度，喜歡深沉的可以降低明度，重要的是記住今天所講的配色規則。這一期要說的就是這么多，我們下期再見。

歡迎關注研習設的微信公眾號：「Yanxishe2017」