設計師如何學色彩搭配？新手必看
很多人在設計完成後，總是對配色不滿意，卻又無從下手。如何分析設計中的配色問題？如何通過系統的方法，提升配色能力？
配色並沒有所謂的固定方程式，生搬硬套配色理論並不能真正解決問題。本文帶你從配色的策略性角度出發，深入分析配色的正確開啟方式，讓你從本質上解決不同場景的配色問題，並通過配色提升整體的設計品質。
文章目錄
明確配色目標
確定主色，精簡層級
選擇正確的色系
提升品質感
明確配色目標
1. 色彩規律≠配色規律
我們都學習過非常多的色彩知識，也看過很多的配色書籍或文章。然而當我們嘗試在設計中運用這些理論時，就會發現：配色的理論往往在實際運用中並不好使，使用後的效果也不是特別明顯。為什麼會出現這種現象呢？
配色是否就是色彩某種的規律？當我們學習並掌握這種規律以後，就能掌控雷電，呼風喚雨，成為配色大魔王了呢？
答案並非如此。
配色並非單獨存在，而是依附於不同的設計載體中。不同的設計載體，所要達到的目標不一樣，就決定了配色理論也會存在差別。
我們會發現，雖然有很多書本、文章都在寫配色的理論，每個人講的配色理論有很多相同的地方，但是最核心的理論往往都不是相同的。
因為大家講的相同部分，大多都是色彩的理論部分，這部分僅僅只是色彩本身的規律；而大家所講的不同部分，則通常是作者在自己所在領域總結的一套配色規律。
因此，並非每一篇文章的配色理論都適合你，這也是當你學習並使用配色理論後，效果依然不好的原因了。
因此在學習配色時，僅僅學習配色理論是不夠的。首先要思考配色的使用場景，以及整個設計所要達到的目標，然後再學習相應領域的配色知識，才能讓配色理論發揮最大的作用。
2. 不同的行業，不同的配色目標
雖然設計是相通的，但是在不同的設計領域進行配色時，依然會存在巨大的區別。
比如廣告設計的配色理論，放在室內設計上，往往是行不通的。因為廣告設計的目標在於傳遞資訊，需要吸引你，而室內設計的目標則是要營造舒適理想的生活氛圍。同樣的道理，推廣設計的配色理論，往往在介面設計時也是行不通的。
不同行業間設計目標的差異，決定了配色目標和理論的差異。
△ 廣告設計：準確地傳遞商品、廣告等資訊
△ 品牌設計：創造品牌概念，留下品牌印象
△ 工業設計：營造產品氛圍，引導產品使用
△ 室內設計：傳遞生活理念，創造理想的生活氛圍
△ 數字產品設計：傳遞產品資訊，引導使用者閱讀和操作
職業鑑定【測試你是否適合學設計】
3. 明確配色目標
對於大部分網際網路行業的視覺設計師來說，平時的工作內容大體會分為產品介面設計和推廣設計兩個大的方向。很多設計師需要同時負責這兩塊內容，於是就可能會出現將同一個配色理論用在不同地方的情況，導致一些配色問題的出現。比如：推廣設計的配色太素，無法吸引使用者的注意；而產品頁面的配色又過於雜亂刺眼，影響使用者閱讀和操作體驗等。
所以，配色的第一步，首先要明確配色目標。
產品介面設計的配色目標：
資訊傳遞：產品的首要目的是傳遞使用者所需要的資訊，這就需要介面有清晰的層級關係，明確、舒適的閱讀體驗。
引導操作：清晰合理的操作引導，讓使用者能夠準確地根據引導進行下一步操作。
品牌價值：很多同學會忽略這一點，導致產品的介面與品牌關聯性差，整體介面沒有品牌感。
推廣設計的配色目標：
吸引流量：強有力的吸引力，快速抓住眼球，留下深刻印象。
營造氛圍：需要營造氛圍，讓使用者通過氛圍快速理解和融入到推廣內容中，加深印象。
快速傳遞：在短時間內快速傳遞資訊。這就需要設計時資訊表達明確，使內容能夠精準快速地傳遞給使用者。
我們將這兩種配色目標做一下關鍵詞提煉，產品介面設計的配色關鍵詞：清晰、舒適、引導、品牌感。而推廣設計的配色關鍵詞為：吸引力、氛圍、快速傳遞。
我們可以將這些關鍵詞作為衡量目標，以此來尋找正確的配色方向，或者用於檢驗設計作品的配色問題。
所以當我們接到專案需求後，可以先與需求方一同確定好設計的目標，以此來確定正確的配色方向，提升配色與設計方向的準確性。而這樣做的另一個好處是，我們可以在專案之初就與需求方之間取得溝通和信任，達成共識，為後續溝通打好基礎。
職業鑑定【測試你是否適合學設計】
確定主色，精簡層級
當我們確定好配色的目標以後，如何開始配色工作呢？通常情況下，我們首先來確定整個設計的主色，然後再開始進行後續的設計。
1. 主色與副色的定義
什麼是主色和副色？
主色是整個色調的核心顏色，通常也是相對佔比最多的顏色，它決定了整體的風格和基調。而副色則是畫面中佔比相對較少的顏色，它通常起到輔助主色、豐富畫面的作用。
假如把一個畫面看成一部電影，那麼主色就是整個電影的主角，而副色則是除了主角以外的其他配角。
2. 確定主色，精簡色彩層級
一部好的電影，通常情況下需要有一個明確的主角，它主導了整個電影的走向，對於設計作品來說，也是相同的道理。所以在配色過程中，首要的任務是確定配色的主色，並在整個作品中明確它的地位，讓它來主導整個畫面。
在產品介面的設計中，主色是傳達品牌感的重要元素。明確的主色能夠讓整個介面產生強烈的品牌感。反之，整體的配色會顯的十分混亂，影響品牌感的傳達。
我們可以來看兩個案例：
這兩個案例在配色上有什麼問題嗎？為什麼？
如何更準確地分析配色的問題？ 我們可以使用前面講的目標分析法，從產品介面的配色目標入手，逐一尋找和發現問題。
我們通過三個維度去分析問題：
資訊傳遞的維度：這兩個介面的顏色過於繁雜，導致資訊層級混亂，沒有視覺中心，使用者也不知道從何開始閱讀。而兩個介面中的卡片設計上，也都存在同一個問題：底色的明度過高，導致卡片上的文字閱讀性非常差。
引導操作維度：整體核心操作路徑不明確，使用者進入後無明確的操作引導；按鈕的視覺效果也很弱，導致使用者無法識別。
品牌價值維度：品牌主色不明確，導致整體品牌感弱。
如何去解決以上的問題？可以用八個字概括：明確主色，精簡層級。
我們可以來看一下 Keep 的產品介面設計。同樣是健身App，Keep 的配色方式則完全符合了產品介面的配色目標。相比前面案例的兩個介面，Keep 的產品介面呈現出優秀的整體品牌感和品質感。
在 Keep 的整體配色中，最核心的思想就是簡化色彩層級——明確主色，減少不必要的顏色。從配色的角度來分析，作為品牌的主色，「Keep綠」貫穿了所有的產品介面，使整個產品顯得非常統一和整體，凸顯了整體的品牌感和品質感。
其次，Keep 的整體介面將除了主色以外的其他顏色精簡到了極致，並將主要的輔助灰以外的所有中性色都控制在三個層級以內；首頁的插畫運用了同色系來精簡色彩層級；視訊的封面圖風格也經過處理，使色調與整體介面統一。
整個介面的閱讀體驗非常舒適，字型顏色層級清晰，重點明確。而在操作引導上，Keep 將大量的品牌色用於核心操作路徑和按鈕上，這使得整個產品的引導邏輯清晰明確。
3. 精簡色彩層級的意義
色彩層級越精簡，就越容易達到整體色彩平衡，從而提升設計的整體品質感。當我們去看很多大廠的頁面設計時，可以感受到很多的相同點：整體而強烈的品牌感，簡約而高階的配色，豐富細膩的細節等。
使用者在閱讀頁面時，配色是我們大腦最先接收到的畫面資訊。所以精簡配色對於產品介面的設計來說至關重要。以品牌色為主色，精簡色彩層級，可以讓整個頁面富有品牌感。
△ 網易雲官網
△ 阿里雲官網
△ 騰訊雲官網
職業鑑定【測試你是否適合學設計】
4. 品牌升級時的色彩簡化趨勢
在品牌Logo 的升級中，簡化色彩層級同樣是一個大的趨勢。簡化層級，可以讓品牌更加簡約和高階，提升品牌的品質感和包容性，使品牌擁有更大延展性和更多的可能性。
星巴克的品牌升級中，除了去掉 Logo 字母和咖啡字母外，更簡化了 Logo 的圖形和色彩。從而強化了星巴克標誌性的人魚形象和星巴克綠，讓品牌更加簡潔有力，易於傳播。
大麥網在去年也經歷了戰略性的品牌升級。全新的品牌形象包括新 LOGO 以及新的 Slogan，配色上則重新定義了更具年輕活力的紅色作為主色，同時精簡了整體的色彩層級。
而寶馬在最近官方宣傳圖中，將藍白色相間的 Logo 簡化為黑白單色，而新 Logo 專為品牌旗下即將推出的高階豪華車型使用。
選擇正確的色系
明確配色目標，確定主色以及色彩層級後，如何進行下一步的配色？
這時候我們可以根據不同的配色目標來選擇合適的色系，豐富整個畫面的配色。需要注意的是，在豐富配色的同時，仍然要嚴格控制色彩層級，以保證整體色彩層級的精簡。
1. 巧用同色系，統一不單調
同色系是指在色環上相距不超過45°的兩種顏色，我們可以選擇主色的同色系範圍內的顏色來豐富整體配色。那麼如何選擇同色系的顏色呢？
首先在色環中確定顏色的位置，通過色環兩邊45°延展出我們所需要的同色系。
在主色的同色系範圍內，我們可以選出同色系顏色作為延展色，單獨使用或者組合成漸變色進行使用。
下面的案例就是運用同色系原理來進行配色的。可以看到，整個頁面在保持色彩統一的前提下，增強了畫面的層次和豐富性，從而提升了整個頁面的層次感和品質感。
同色系的配色特點是整體頁面統一而富有層次，從而傳遞出一種穩定、專業的形象，適合絕大多數的場景使用，是最為簡單和有效的配色方式。
我們可以總結一下同色系的配色方法。首先確定主色，主色兩邊45°以內的同色系色彩範圍，在範圍中選取合適的單色作為輔助色，或者選取一段漸變色單獨使用。
2. 不同場景的對比色用法
對比色是指在色環上相距120°~180°之間的兩種顏色（180°時則互為互補色）。處於對比色關係的兩種顏色，通常色相差異較大，能夠相互產生強烈的對比效果，我們可以利用這種原理來增強畫面的吸引力。
在不同的場景中，對比色同樣有著不一樣的使用方式。在產品設計中，通過小面積的顏色對比，可以加強主色的活力與整體豐富性；而在推廣設計中，通常會使用大面積的對比色增強頁面的吸引力。
產品介面中的對比色應用
產品介面的配色對於產品來說至關重要，好的配色不僅能夠準確地反映產品的調性，還能正確地引導使用者閱讀並理解產品。
我們可以結合網易七魚的官網改版案例，來了解如何通過配色來提升官網的設計品質。
下圖是七魚的舊版官網頁面，在配色上，產品方認為原來的配色過於單調和沉悶，希望可以讓整體更活潑一些。且網站的整體跳出率過高，希望我們能夠找到原因並通過改版解決這個問題。
首先第一步，需要找出舊版官網存在的問題。這時候，我們就需要再次運用前面所講的目標分析法。通過不同維度的目標分析，尋找頁面中存在的問題。
我們還是通過三個維度去分析問題：
資訊傳遞維度：整體的配色過於單調，使頁面和資訊缺少吸引力，導致使用者不想閱讀；其次插圖和 icon 在配色和表現形式上都過於單調，表現力弱。
引導操作維度：核心功能模組邏輯展示混亂且繁雜，導致使用者無法正確理解內容。
品牌價值維度：品牌主色沉悶，整體品牌的品質感弱；而且漸變色與品牌色差異過大，不夠統一。
由於七魚首頁的修改涉及到整體官網的配色修改，單純從每個頁面入手並不能從根本解決問題，容易造成整體官網配色不統一的情況。這個時候，我們就要從品牌配色入手，通過修改配色並制定新的設計規範，在整體上解決問題。
首先從品牌主色入手。經過嚴格的討論，我們重新制定了七魚的品牌主色。為了解決顏色沉悶的問題，我們選擇了接近原有主色，但更鮮亮且富有活力的藍色作為主色。而輔助色上，為了讓七魚品牌更有溫度，我們選擇主色的對比色——橙色。
藍色與橙色在小面積上的互相對比，可以互相襯托，讓兩種顏色更顯活力。
我們以新的配色規範為基礎，重新制定了全新的七魚設計規範。規範中包含了配色的使用比例、不同的icon樣式與配色的結合方式等一系列的頁面細節，以保證規範可以完整、統一地落實到每個頁面和元素中
