很(hěn)多人(rén)在設計完成後，總是對配色不滿意，卻又無從(cóng)下(xià)手。如(rú)何分析設計中的配色問(wèn)題？如(rú)何通(tōng)過系統的方法，提升配色能(néng)力？
配色并沒有所謂的固定方程式，生搬硬套配色理論并不能(néng)真正解決問(wèn)題。本文帶你從(cóng)配色的策略性角度出發，深入分析配色的正确打開(kāi)方式，讓你從(cóng)本質上(shàng)解決不同場景的配色問(wèn)題，并通(tōng)過配色提升整體的設計品質。
1. 色彩規律≠配色規律
我們都(dōu)學習過非常多的色彩知識，也看(kàn)過很(hěn)多的配色書(shū)籍或文章(zhāng)。然而當我們嘗試在設計中運用這(zhè)些理論時(shí)，就會發現：配色的理論往往在實際運用中并不好使，使用後的效果也不是特别明(míng)顯。為(wèi)什麽會出現這(zhè)種現象呢？
配色是否就是色彩某種的規律？當我們學習并掌握這(zhè)種規律以後，就能(néng)掌控雷電，呼風(fēng)喚雨，成為(wèi)配色大魔王了(le)呢？
答(dá)案并非如(rú)此。
配色并非單獨存在，而是依附于不同的設計載體中。不同的設計載體，所要(yào)達到的目标不一(yī)樣，就決定了(le)配色理論也會存在差别。
我們會發現，雖然有很(hěn)多書(shū)本、文章(zhāng)都(dōu)在寫配色的理論，每個人(rén)講的配色理論有很(hěn)多相同的地(dì)方，但(dàn)是最核心的理論往往都(dōu)不是相同的。
因為(wèi)大家講的相同部分，大多都(dōu)是色彩的理論部分，這(zhè)部分僅僅隻是色彩本身的規律；而大家所講的不同部分，則通(tōng)常是作(zuò)者在自(zì)己所在領域總結的一(yī)套配色規律。
因此，并非每一(yī)篇文章(zhāng)的配色理論都(dōu)适合你，這(zhè)也是當你學習并使用配色理論後，效果依然不好的原因了(le)。
因此在學習配色時(shí)，僅僅學習配色理論是不夠的。首先要(yào)思考配色的使用場景，以及整個設計所要(yào)達到的目标，然後再學習相應領域的配色知識，才能(néng)讓配色理論發揮最大的作(zuò)用。
2. 不同的行(xíng)業，不同的配色目标
雖然設計是相通(tōng)的，但(dàn)是在不同的設計領域進行(xíng)配色時(shí)，依然會存在巨大的區(qū)别。
比如(rú)廣告設計的配色理論，放在室內(nèi)設計上(shàng)，往往是行(xíng)不通(tōng)的。因為(wèi)廣告設計的目标在于傳遞信息，需要(yào)吸引你，而室內(nèi)設計的目标則是要(yào)營造舒适理想的生活氛圍。同樣的道(dào)理，推廣設計的配色理論，往往在界面設計時(shí)也是行(xíng)不通(tōng)的。
不同行(xíng)業間(jiān)設計目标的差異，決定了(le)配色目标和(hé)理論的差異。
△ 廣告設計：準确地(dì)傳遞商品、廣告等信息
△ 品牌設計：創造品牌概念，留下(xià)品牌印象
△ 工(gōng)業設計：營造産品氛圍，引導産品使用
△ 室內(nèi)設計：傳遞生活理念，創造理想的生活氛圍
△ 數(shù)字産品設計：傳遞産品信息，引導用戶閱讀和(hé)操作(zuò)
3. 明(míng)确配色目标
對于大部分互聯網行(xíng)業的視(shì)覺設計師(shī)來說，平時(shí)的工(gōng)作(zuò)內(nèi)容大體會分為(wèi)産品界面設計和(hé)推廣設計兩個大的方向。很(hěn)多設計師(shī)需要(yào)同時(shí)負責這(zhè)兩塊內(nèi)容，于是就可(kě)能(néng)會出現将同一(yī)個配色理論用在不同地(dì)方的情況，導緻一(yī)些配色問(wèn)題的出現。比如(rú)：推廣設計的配色太素，無法吸引用戶的注意；而産品頁面的配色又過于雜(zá)亂刺眼，影響用戶閱讀和(hé)操作(zuò)體驗等。
所以，配色的第一(yī)步，首先要(yào)明(míng)确配色目标。
産品界面設計的配色目标：
推廣設計的配色目标：
我們将這(zhè)兩種配色目标做(zuò)一(yī)下(xià)關鍵詞提煉，産品界面設計的配色關鍵詞：清晰、舒适、引導、品牌感。而推廣設計的配色關鍵詞為(wèi)：吸引力、氛圍、快(kuài)速傳遞。
我們可(kě)以将這(zhè)些關鍵詞作(zuò)為(wèi)衡量目标，以此來尋找正确的配色方向，或者用于檢驗設計作(zuò)品的配色問(wèn)題。
所以當我們接到項目需求後，可(kě)以先與需求方一(yī)同确定好設計的目标，以此來确定正确的配色方向，提升配色與設計方向的準确性。而這(zhè)樣做(zuò)的另一(yī)個好處是，我們可(kě)以在項目之初就與需求方之間(jiān)取得溝通(tōng)和(hé)信任，達成共識，為(wèi)後續溝通(tōng)打好基礎。
當我們确定好配色的目标以後，如(rú)何開(kāi)始配色工(gōng)作(zuò)呢？通(tōng)常情況下(xià)，我們首先來确定整個設計的主色，然後再開(kāi)始進行(xíng)後續的設計。
1. 主色與副色的定義
什麽是主色和(hé)副色？
主色是整個色調的核心顔色，通(tōng)常也是相對占比最多的顔色，它決定了(le)整體的風(fēng)格和(hé)基調。而副色則是畫(huà)面中占比相對較少(shǎo)的顔色，它通(tōng)常起到輔助主色、豐富畫(huà)面的作(zuò)用。
假如(rú)把一(yī)個畫(huà)面看(kàn)成一(yī)部電影，那(nà)麽主色就是整個電影的主角，而副色則是除了(le)主角以外(wài)的其他(tā)配角。
2. 确定主色，精簡色彩層級
一(yī)部好的電影，通(tōng)常情況下(xià)需要(yào)有一(yī)個明(míng)确的主角，它主導了(le)整個電影的走向，對于設計作(zuò)品來說，也是相同的道(dào)理。所以在配色過程中，首要(yào)的任務是确定配色的主色，并在整個作(zuò)品中明(míng)确它的地(dì)位，讓它來主導整個畫(huà)面。
在産品界面的設計中，主色是傳達品牌感的重要(yào)元素。明(míng)确的主色能(néng)夠讓整個界面産生強烈的品牌感。反之，整體的配色會顯的十分混亂，影響品牌感的傳達。
我們可(kě)以來看(kàn)兩個案例：
這(zhè)兩個案例在配色上(shàng)有什麽問(wèn)題嗎？為(wèi)什麽？
如(rú)何更準确地(dì)分析配色的問(wèn)題？ 我們可(kě)以使用前面講的目标分析法，從(cóng)産品界面的配色目标入手，逐一(yī)尋找和(hé)發現問(wèn)題。
我們通(tōng)過三個維度去分析問(wèn)題：
如(rú)何去解決以上(shàng)的問(wèn)題？可(kě)以用八個字概括：明(míng)确主色，精簡層級。
我們可(kě)以來看(kàn)一(yī)下(xià) Keep 的産品界面設計。同樣是健身App，Keep 的配色方式則完全符合了(le)産品界面的配色目标。相比前面案例的兩個界面，Keep 的産品界面呈現出優秀的整體品牌感和(hé)品質感。
在 Keep 的整體配色中，最核心的思想就是簡化色彩層級——明(míng)确主色，減少(shǎo)不必要(yào)的顔色。從(cóng)配色的角度來分析，作(zuò)為(wèi)品牌的主色，「Keep綠(lǜ)」貫穿了(le)所有的産品界面，使整個産品顯得非常統一(yī)和(hé)整體，凸顯了(le)整體的品牌感和(hé)品質感。
其次，Keep 的整體界面将除了(le)主色以外(wài)的其他(tā)顔色精簡到了(le)極緻，并将主要(yào)的輔助灰以外(wài)的所有中性色都(dōu)控制在三個層級以內(nèi)；首頁的插畫(huà)運用了(le)同色系來精簡色彩層級；視(shì)頻(pín)的封面圖風(fēng)格也經過處理，使色調與整體界面統一(yī)。
整個界面的閱讀體驗非常舒适，字體顔色層級清晰，重點明(míng)确。而在操作(zuò)引導上(shàng)，Keep 将大量的品牌色用于核心操作(zuò)路徑和(hé)按鈕上(shàng)，這(zhè)使得整個産品的引導邏輯清晰明(míng)确。
3. 精簡色彩層級的意義
色彩層級越精簡，就越容易達到整體色彩平衡，從(cóng)而提升設計的整體品質感。當我們去看(kàn)很(hěn)多大廠的頁面設計時(shí)，可(kě)以感受到很(hěn)多的相同點：整體而強烈的品牌感，簡約而高級的配色，豐富細膩的細節等。
用戶在閱讀頁面時(shí)，配色是我們大腦最先接收到的畫(huà)面信息。所以精簡配色對于産品界面的設計來說至關重要(yào)。以品牌色為(wèi)主色，精簡色彩層級，可(kě)以讓整個頁面富有品牌感。
△ 網易雲官網
△ 阿裏雲官網
△ 騰訊雲官網
4. 品牌升級時(shí)的色彩簡化趨勢
在品牌Logo 的升級中，簡化色彩層級同樣是一(yī)個大的趨勢。簡化層級，可(kě)以讓品牌更加簡約和(hé)高級，提升品牌的品質感和(hé)包容性，使品牌擁有更大延展性和(hé)更多的可(kě)能(néng)性。
星巴克的品牌升級中，除了(le)去掉 Logo 字母和(hé)咖啡字母外(wài)，更簡化了(le) Logo 的圖形和(hé)色彩。從(cóng)而強化了(le)星巴克标志性的人(rén)魚形象和(hé)星巴克綠(lǜ)，讓品牌更加簡潔有力，易于傳播。
大麥網在去年(nián)也經曆了(le)戰略性的品牌升級。全新的品牌形象包括新 LOGO 以及新的 Slogan，配色上(shàng)則重新定義了(le)更具年(nián)輕活力的紅(hóng)色作(zuò)為(wèi)主色，同時(shí)精簡了(le)整體的色彩層級。
而寶馬在最近官方宣傳圖中，将藍(lán)白色相間(jiān)的 Logo 簡化為(wèi)黑(hēi)白單色，而新 Logo 專為(wèi)品牌旗下(xià)即将推出的高端豪華車型使用。
明(míng)确配色目标，确定主色以及色彩層級後，如(rú)何進行(xíng)下(xià)一(yī)步的配色？
這(zhè)時(shí)候我們可(kě)以根據不同的配色目标來選擇合适的色系，豐富整個畫(huà)面的配色。需要(yào)注意的是，在豐富配色的同時(shí)，仍然要(yào)嚴格控制色彩層級，以保證整體色彩層級的精簡。
1. 巧用同色系，統一(yī)不單調
同色系是指在色環上(shàng)相距不超過45°的兩種顔色，我們可(kě)以選擇主色的同色系範圍內(nèi)的顔色來豐富整體配色。那(nà)麽如(rú)何選擇同色系的顔色呢？
首先在色環中确定顔色的位置，通(tōng)過色環兩邊45°延展出我們所需要(yào)的同色系。
在主色的同色系範圍內(nèi)，我們可(kě)以選出同色系顔色作(zuò)為(wèi)延展色，單獨使用或者組合成漸變色進行(xíng)使用。
下(xià)面的案例就是運用同色系原理來進行(xíng)配色的。可(kě)以看(kàn)到，整個頁面在保持色彩統一(yī)的前提下(xià)，增強了(le)畫(huà)面的層次和(hé)豐富性，從(cóng)而提升了(le)整個頁面的層次感和(hé)品質感。
同色系的配色特點是整體頁面統一(yī)而富有層次，從(cóng)而傳遞出一(yī)種穩定、專業的形象，适合絕大多數(shù)的場景使用，是最為(wèi)簡單和(hé)有效的配色方式。
我們可(kě)以總結一(yī)下(xià)同色系的配色方法。首先确定主色，主色兩邊45°以內(nèi)的同色系色彩範圍，在範圍中選取合适的單色作(zuò)為(wèi)輔助色，或者選取一(yī)段漸變色單獨使用。
2. 不同場景的對比色用法
對比色是指在色環上(shàng)相距120°~180°之間(jiān)的兩種顔色（180°時(shí)則互為(wèi)互補色）。處于對比色關系的兩種顔色，通(tōng)常色相差異較大，能(néng)夠相互産生強烈的對比效果，我們可(kě)以利用這(zhè)種原理來增強畫(huà)面的吸引力。
在不同的場景中，對比色同樣有着不一(yī)樣的使用方式。在産品設計中，通(tōng)過小面積的顔色對比，可(kě)以加強主色的活力與整體豐富性；而在推廣設計中，通(tōng)常會使用大面積的對比色增強頁面的吸引力。
産品界面中的對比色應用
産品界面的配色對于産品來說至關重要(yào)，好的配色不僅能(néng)夠準确地(dì)反映産品的調性，還能(néng)正确地(dì)引導用戶閱讀并理解産品。
我們可(kě)以結合網易七魚的官網改版案例，來了(le)解如(rú)何通(tōng)過配色來提升官網的設計品質。
下(xià)圖是七魚的舊(jiù)版官網頁面，在配色上(shàng)，産品方認為(wèi)原來的配色過于單調和(hé)沉悶，希望可(kě)以讓整體更活潑一(yī)些。且網站的整體跳(tiào)出率過高，希望我們能(néng)夠找到原因并通(tōng)過改版解決這(zhè)個問(wèn)題。
首先第一(yī)步，需要(yào)找出舊(jiù)版官網存在的問(wèn)題。這(zhè)時(shí)候，我們就需要(yào)再次運用前面所講的目标分析法。通(tōng)過不同維度的目标分析，尋找頁面中存在的問(wèn)題。
我們還是通(tōng)過三個維度去分析問(wèn)題：
由于七魚首頁的修改涉及到整體官網的配色修改，單純從(cóng)每個頁面入手并不能(néng)從(cóng)根本解決問(wèn)題，容易造成整體官網配色不統一(yī)的情況。這(zhè)個時(shí)候，我們就要(yào)從(cóng)品牌配色入手，通(tōng)過修改配色并制定新的設計規範，在整體上(shàng)解決問(wèn)題。
首先從(cóng)品牌主色入手。經過嚴格的讨論，我們重新制定了(le)七魚的品牌主色。為(wèi)了(le)解決顔色沉悶的問(wèn)題，我們選擇了(le)接近原有主色，但(dàn)更鮮亮且富有活力的藍(lán)色作(zuò)為(wèi)主色。而輔助色上(shàng)，為(wèi)了(le)讓七魚品牌更有溫度，我們選擇主色的對比色——橙色。
藍(lán)色與橙色在小面積上(shàng)的互相對比，可(kě)以互相襯托，讓兩種顔色更顯活力。
我們以新的配色規範為(wèi)基礎，重新制定了(le)全新的七魚設計規範。規範中包含了(le)配色的使用比例、不同的icon樣式與配色的結合方式等一(yī)系列的頁面細節，以保證規範可(kě)以完整、統一(yī)地(dì)落實到每個頁面和(hé)元素中。
運用新的配色規範進行(xíng)頁面設計時(shí)，要(yào)靈活地(dì)将配色與産品內(nèi)容相結合，讓配色更好的融于頁面中，而不是生搬硬套地(dì)将配色裝到頁面裏。
比如(rú)我們在優化首頁的主要(yào)功能(néng)模塊時(shí)，首先做(zuò)的便是重新梳理産品功能(néng)的展示構架，然後再結合新的設計形式和(hé)配色規範，讓新的規範發揮最大的作(zuò)用。
在不同頁面的功能(néng)icon 上(shàng)，我們豐富了(le) icon 的表現形式，同時(shí)将新的對比色配色加入到每個 icon 元素中，增強了(le) icon 的活力和(hé)吸引力，讓每個 icon 看(kàn)起來更精緻。
而在功能(néng)插圖中上(shàng)，我們采用了(le)與 icon 統一(yī)的配色和(hé)表現形式，讓頁面中的所有元素具有統一(yī)的品牌感。
最終，我們将新的配色規範逐步落實到網易七魚所有的 Web端和(hé) Mob端頁面中，使七魚的整體官網設計煥然一(yī)新。在新的官網頁面中，不僅提升了(le)整體的設計品質，同時(shí)也解決了(le)前面分析的問(wèn)題，整體提升了(le)15%的客戶留存率。
通(tōng)過這(zhè)個案例我們可(kě)以發現，整體配色的改變，可(kě)以極大的提升官網對于用戶的第一(yī)印象。用戶往往在進來的一(yī)瞬間(jiān)就決定了(le)對官網的印象，并最終影響用戶是否進一(yī)步閱讀，而配色則是其中非常重要(yào)的一(yī)部分，正确的配色能(néng)夠讓用戶更願意停留并閱讀內(nèi)容。
推廣活動頁面中的對比色應用
在推廣頁面的設計中，通(tōng)常需要(yào)用營造強烈的視(shì)覺沖擊，以達到快(kuài)速吸引用戶并傳遞信息的目标。這(zhè)就需要(yào)大面積的對比色，來達到強烈的對比效果。而在較大面積使用對比色時(shí)，整體色彩的主次和(hé)整體平衡至關重要(yào)。
我們可(kě)以來看(kàn)一(yī)個案例：
可(kě)以看(kàn)到，整個頁面主要(yào)由橙色和(hé)深藍(lán)紫色兩個主要(yào)對比色構成。大面積的對比色産生了(le)強烈的視(shì)覺沖擊，讓整個頁面充滿了(le)吸引力。整個畫(huà)面用最強烈的對比色重點突出了(le)兩個主要(yào)的人(rén)物(wù)角色，從(cóng)而吸引用戶注意并進行(xíng)閱讀，最終将用戶引導至購買入口。至此，整個頁面的任務也算是完成了(le)。
在推廣頁面中，我們需要(yào)注意的是，重點信息并非隻能(néng)是文字內(nèi)容，也可(kě)以是最吸引用戶的畫(huà)面核心元素。
3. 嘗試更多的創新配色
除了(le)掌握以上(shàng)的幾種基本色系的配色方法外(wài)，大家可(kě)以在此基礎上(shàng)嘗試更多的配色風(fēng)格。比如(rú)在同色系、對比色系的基礎上(shàng)，有目的地(dì)加入色彩元素豐富色調，在保持整體色彩層級的同時(shí)，加入更豐富的變化，從(cóng)而達到配色目标。
△ 更清新的「同色系」配色
△ 更豐富的「同色系」配色
△ 更多彩的「對比色」配色
△ 複古的平面風(fēng)配色
而對于很(hěn)多初學者來說，我建議(yì)大家能(néng)夠首先明(míng)确配色的目标，在配色時(shí)保持色彩層級的精簡明(míng)确。在此基礎上(shàng)，循序漸進，逐步去嘗試更多地(dì)配色風(fēng)格。隻有這(zhè)樣，才能(néng)養成良好的配色習慣。
我們按照之前的方法，正确的确定了(le)配色的目标，選擇了(le)合适的配色方向，并逐步完成了(le)整體的設計排版。很(hěn)多同學到這(zhè)一(yī)步之後，就覺得作(zuò)品已經完成，便停止不繼續深入了(le)，而這(zhè)也是初級設計師(shī)經常容易出現的問(wèn)題。這(zhè)個時(shí)候的作(zuò)品，從(cóng)整體上(shàng)看(kàn)并沒有太多問(wèn)題。但(dàn)是當用戶被頁面吸引，開(kāi)始仔細欣賞作(zuò)品時(shí)，往往會發現作(zuò)品沒什麽看(kàn)點。
出現這(zhè)種問(wèn)題的原因，就是作(zuò)品缺乏足夠的細節和(hé)品質，導緻作(zuò)品不夠耐看(kàn)。就像一(yī)本書(shū)有着精美的封面，但(dàn)是打開(kāi)以後卻平淡無奇，最終對整本書(shū)都(dōu)非常失望。
想要(yào)讓作(zuò)品更優秀，除了(le)基本的版式和(hé)配色之外(wài)，往往還需要(yào)更深入地(dì)去雕刻作(zuò)品，讓作(zuò)品帶有一(yī)種更高級的「氣質」，而這(zhè)種「氣質」就是我們所說的品質感。
1. 什麽是品質感？
品質感對于設計作(zuò)品來說，是一(yī)個綜合性的評價。我們可(kě)以将這(zhè)個詞分為(wèi)「品」和(hé)「質」，「品」代表物(wù)體本身的品相和(hé)細節，而「質」則代表質感。
怎樣的設計才算是有品質感的？如(rú)何提升設計的品質感？我們可(kě)以先來研究一(yī)些優秀的設計案例，尋找其中的共同點。蘋果的産品和(hé)頁面設計，是公認的具有較高品質感的，我們可(kě)以來看(kàn)一(yī)下(xià)蘋果的部分官網頁面。
蘋果的所有産品和(hé)頁面，從(cóng)産品圖到頁面的設計都(dōu)非常有質感。為(wèi)什麽這(zhè)種質感會如(rú)此吸引我們，令我們覺得非常舒适？如(rú)何才能(néng)讓設計産生質感？
要(yào)了(le)解如(rú)何産生質感，首先要(yào)了(le)解一(yī)下(xià)物(wù)體産生質感的原理。
當光(guāng)線照射在富有質感的物(wù)體表面時(shí)，會産生不同程度的漫反射，最終反射進入我們的眼球後，就會顯現出一(yī)層富有質感的漸變色。所以想讓物(wù)體獲得質感，漸變是一(yī)個關鍵要(yào)素。
我們可(kě)以利用這(zhè)一(yī)原理來提升質感。下(xià)面的案例，是 FishDesign 組件庫官網的一(yī)個局部頁面。其中就運用了(le)大量的漸變色質感原理，将漸變色融入到 icon 和(hé)頁面元素中，從(cóng)而提升了(le)整個頁面的質感。
2. 獲得品質感的關鍵要(yào)素
漸變隻是獲得品質感的關鍵因素之一(yī)，蘋果官網将漸變這(zhè)種原理加入到頁面和(hé)元素中，配合精美的産品圖片，讓頁面保持了(le)非常高的品質感。
那(nà)麽是否還有其他(tā)要(yào)素的存在，能(néng)夠提升質感呢？
仔細觀察蘋果的所有元素設計，在漸變的同時(shí)，還加入了(le)微(wēi)量的投影和(hé)豐富的細節，使所有的元素在簡潔中充滿了(le)細膩的質感。
我們可(kě)以總結一(yī)下(xià)，讓設計獲得品質感的幾個要(yào)點：細膩的漸變+輕微(wēi)的光(guāng)影+細節/紋理。
發現這(zhè)些原理以後，我們可(kě)以嘗試将這(zhè)些原理運用到設計中，從(cóng)而提升設計的品質感。下(xià)面的幾個案例，就是我在研究時(shí)所做(zuò)的一(yī)些練習，在不同的頁面細節中都(dōu)可(kě)以看(kàn)到以上(shàng)原理的運用效果。
看(kàn)完前面的內(nèi)容，大家會發現，其實配色并沒有想象中那(nà)麽複雜(zá)。
隻要(yào)掌握正确的配色策略，并逐漸适應這(zhè)種方法，就可(kě)以應付各種不同的設計類型。最後，我們将前面講的配色法則做(zuò)一(yī)個簡要(yào)的總結：明(míng)确目标 – 确定主色 – 精簡層級 – 選擇色系豐富配色 – 提升品質感。
希望大家讀完這(zhè)篇文章(zhāng)以後，能(néng)夠真正理解和(hé)掌握策略性配色法則，在不同的項目中靈活運用，并最終形成自(zì)己的優秀配色習慣。
歡迎關注作(zuò)者「網易UEDC」的微(wēi)信公衆号：
在線客服1号
微(wēi)信公衆賬号