昨天我們在《聽說Office的新圖標長這樣，你見過了嗎？》
這篇文章裡談到Office新圖標的漸變色。
事實上，
在更新之後，能讓人認出原來的模樣
基本只靠配色了。
那麼，配色要怎麼配，
才能產生效果？
一起來看
可能是最實用的配色乾貨
在平面設計中，色彩的重要性自然不用我多說，我曾多次被網友催要寫一篇關於配色的文章，然鵝我遲遲沒有動筆，不是蔥爺我不聽話，而因為我一直在想該以怎樣的方式寫出來才是最有效的，而且還要跟別人寫的角度不一樣，最近終於有些頭緒了，於是我花了幾天的時間整理了一下，希望能對得起這個很唬人的標題。
配色不是單純為了好看，要考慮的問題還有很多，如：是否符合品牌屬性、是否有助於品牌傳播、是否能體現主題、是否能增強吸引力、是否能保證信息的易閱讀性， 接下來我將從這五個方面舉例分析。
1.符合品牌屬性
建立品牌色最典型的例子就是LOGO設計，一般情況下LOGO的標準色就是品牌的主色，所以給品牌搭配LOGO標準色非常重要。關於LOGO的配色，主要依據是產品類別（行業屬性）、識別性、LOGO的寓意等，當然在配色之前先要保證LOGO的圖形儘量美觀一點，假設我們要為一個年輕人的運動俱樂部設計LOGO，圖形如下：
依據它風騷的造型我可以給它取一個洋氣的名字——舞動的青春，洋氣吧！當確定了LOGO的造型以後，我們就要開始分析它的品牌調性：由於是專屬於年輕人的運動俱樂部，顏色當然要比較時尚、富有熱情，所以冷色調和低飽和度的顏色就不合適了，大紅色是普遍被認為不夠時尚的顏色，所以也要被淘汰，我覺得可以從玫紅、橙色、黃色、紫色這四個色相中進行選擇搭配。
根據以上四類顏色我們可以給標誌進行配色，具體分為單色、組合色、漸變色，由於黃色的識別性比較差，所以不能把它作為文字的顏色，再去掉類似玫紅與橙色、紫色與橙色這種土裡土氣的顏色組合，我們就得到了以下的這幾組配色：
▲從上圖當中可以看出，單色LOGO顯得太單調，差一點青春的活力，而摻雜了黃顏色的LOGO都會有識別性不足的問題，所以玫紅色到紫色的漸變色相對來說是一個不錯的選擇。
2.有助於品牌傳播
很多品牌都會建立自己的品牌色，然後在該品牌之後的很多設計中都會延續使用此顏色，以便讓受眾對該品牌的顏色形成記憶。比如我們一看到紅色的可樂就知道是可口可樂，一看到黃色的自行車就知道是OfO，一看到臉很黑的人就想到包大人。所以在為此類品牌做設計時，最好是以品牌色作為主色調，剩下的就是選擇合適的輔助色了。
以上面的“動起來俱樂部”為例，如果我們要為該品牌設計一個網站，設計如下：
構圖與排版都做好了，接下來就是搭配顏色，主色調的最佳選擇自然就是該俱樂部的品牌色——玫紅到紫色的漸變。
▲填充了品牌色以後，畫面立馬生動了很多，大面積的紫紅色讓人一下子就能聯想到該品牌，接下來還要搭一個背景色，雖然白色看上去也還不錯，但是視覺衝擊力似乎差了一點，所以我們可以嘗試用一個深顏色，來凸顯出這個漸變色：
▲於是我搭配了一個黑色，品牌色確實被襯托了出來，但是大面積的黑色顯得太壓抑，與“舞動的青春”這麼洋氣的調性不符。其實我們可以從品牌色中吸取一個顏色，然後把明度調低，如下圖：
接下來我們可以把這幾個顏色一一做為背景色來PK一下：
通過對比可以看出來方案三相對來說要更好看，所以關於該網頁設計的配色工作就已經完成了，整體看上去既延續了品牌色，也很美觀。
三.表達主題
在設計海報或者廣告時，一般都有一個主題，諸如：青春、美味、促銷、科技、時尚、走心、可愛等等類型，這些主題就是畫面的調性，而我們選擇的顏色也要符合這些調性，使其準確表達我們的設計主題。下面我以一則兒童食品的上市預熱海報來舉例：
既然是兒童食品，所以該海報的調性自然是可愛、鮮豔、溫暖、快樂的，“瘦瘦伴我行，兒童酵素暖心上市”，這文案也是暖暖的很貼心，所以我找了一些（個別是自己畫的）和兒童有關的元素，與產品搭配在一起，由於本人是個吃貨，所以找了比較多吃的東西，這些元素本身都是有自己的固有色，而且適合我們要表達的調性，所以幾乎不需要再考慮它們的配色：
元素的顏色已經有了，剩下的就是搭配背景顏色，由於圖片中的色彩比較豐富，採用純顏色很難保證所有元素的識別性，所以使用漸變色是一個不錯的選擇。當然這個顏色我們也不能隨便選擇，我們最好是使用畫面中已有的顏色，這麼做可以使畫面整體看上去比較和諧，以下我嘗試了三種顏色：
▲黃色到橙色的漸變是小孩最喜歡的顏色之一、溫暖且具有食慾，能準確的表達主題。
▲玫紅到紫色的漸變很歡樂，而且有一種夢幻的感覺，各元素和文字被清晰的襯托出來，也是一個不錯的選擇。
▲藍色到綠色的漸變背景雖然也很漂亮，視覺也清晰，但是由於整體看上去比較冷，不符合主題，所以就不太合適了。
四.吸引目標受眾
人的眼睛天生是“好色”的，相比沒有色彩的東西，人們會更容易注意到有色彩的，所以色彩就成了設計吸引受眾的重要元素，下面我模仿霓虹燈廣告牌的形式做了一張京東618的爸呢？(banner)：
如果設計到位，在黑白稿的情況下，主次關係也會很明顯，但是缺少促銷氛圍和吸引力，很明顯我們不會這麼做。
既然是霓虹燈的形式，自然要搭配出霓虹燈的顏色效果，霓虹燈的色彩都是比較鮮豔的(飽和度比較高)，顏色對比很強烈。
按照這種感覺我們把前面的設計稿填上了顏色：
視覺衝擊力瞬間加強了很多是不是，也很有促銷的氛圍，但是你們有沒有覺得有什麼問題？是不是感覺背景太跳了、信息太多了、顏色太亂了、主題被削弱了很多。因為這裡面顏色種類太多、主次也不夠鮮明，而且所有的顏色飽和度都很高(這個設計師未免也太好色了吧)：
雖然現實中的霓虹燈照片確實是這樣的，但那是因為不同的商家都希望把自己的品牌以耀眼的方式展現出來，而我們在設計的時候只是借用它的表現形式，事實上只要突出最重要的信息就好，而其他元素則應該作為裝飾元素呈現，所以我調整了一下：
調整後，除了京東“618”和“五折"這幾個字眼，其他的文字都弱化了，廣告牌也只是突出了中間這塊最主要的廣告牌，其他廣告牌顏色的飽和度與明度都調低了，顏色的種類也減少了很多（我還偷偷刪掉了幾個廣告牌，嘿嘿），咋一看只有藍色和黃色：
5.保證信息的易閱讀性
每一件設計作品的目的都是為了傳遞信息，所以我們在搭配顏色時一定要保證文字信息的識別性，而要用顏色突出文字的最直接手法就是運用色彩對比，例如:補色對比、明暗對比、飽和度對比、黑白對比、對比色等等。
下面是我臨時做的一張大字報廣告，主體就是文字（絕對不是我的真實水平哈），我們來看看怎麼利用色彩關係把它凸顯出來。
當然直接像上圖一樣，使用黑白對比也能使文字非常清晰，但是視覺效果不太好，所以我們嘗試一下其他顏色吧。
加入藍色和黃色以後，畫面比之前豐富了一些，文字也依然很清晰，這裡運用到了補色對比與明度對比，不過大面積的藍色使得整個畫面顯得有點單調、冷清，所以我們可以嘗試使用暖色：
上圖同樣使用了補色對比與明度對比，所以文字同樣很清晰，不過大面積的純黃色作為背景會顯得有點刺眼，“反正我就是要繼續調”。
上圖的背景顏色很豐富，所以視覺衝擊非常強，但是由於文字與背景的顏色都過多，所以顯得很花，干擾了文字信息的閱讀性，所以這是一個錯誤的示範，大家不要學。
繼續調整後的方案就舒服多了，以三塊面積相仿的色塊作為背景，顏色比較豐富，同時這三個顏色的明度都比較低，不至於太搶眼，且與白色的文字形成鮮明的明暗對比，玫紅、藍色、紫色與黃色都是對比色關係，所以文字的閱讀性很強，基本上達到了我們的配色目的。
結 語
大家從上面的例子中應該可以看出來，其實我說的：符合品牌屬性、有助於品牌傳播、體現主題、增強吸引力、保證信息的閱讀性這幾個點，經常會同時出現在一件作品的配色中。色彩的搭配我們要考慮的因素還有很多，需要我們在實踐中不斷的嘗試、多觀察，以後有機會再跟大家分享其他的配色知識與技巧。
記得關注小編哦~~後期有更多設計技巧會一一分享給大家！喜歡的多多轉發給需要的朋友！
閱讀更多 愛集網 的文章
