前言：關於設計配色的乾貨，大大君之前分享過很多，大家的反響也都比較熱烈。配色是每個設計師都必須具備和學習的技巧，也是最體現設計師功底的方面之一。很多人在設計完成後，總是對配色不滿意，卻又無從下手。如何分析設計中的配色問題？如何通過系統的方法，提升配色能力？

所以，今天大大君想給大家分享的，是來自網易UEDC用戶體驗設計中心的資深視覺設計師，所整理出來的配色技巧。

由於文章篇幅較長，乾貨細節較多

大大君先做了一個小目錄

介紹一下整體主要分為這幾個部分

▼

《策略性配色法則》

一、明確配色目標

二、確定主色，精簡層級

三、選擇正確的色系

四、提升品質感

接下來，大廠出來的乾貨

敲黑板、劃重點、記筆記了！

一

明確配色目標

1.色彩規律≠配色規律

我們都學習過非常多色彩的知識，也看過很多的配色書籍或文章。然而當我們嘗試在設計中運用這些理論時，就會發現：配色的理論往往在實際運用中並不好使，使用後的效果也不是特別明顯。為什麼會出現這種現象呢？

配色是否就是色彩某種的規律？當我們學習並掌握這種規律以後，就能掌控雷電，呼風喚雨，成為配色大魔王了呢？

當然並非如此。

配色並非單獨存在，而是依附於不同的設計載體中。不同的設計載體，所要達到的目標不一樣，就決定了配色理論也會存在差別。

我們會發現，雖然有很多書本、文章都在寫配色的理論，每個人講的配色理論有很多相同的地方，但是最核心的理論往往都不是相同的。

因為大家講的相同部分，大多都是色彩的理論部分，這部分僅僅只是色彩本身的規律；而大家所講的不同部分，則通常是作者在自己所在領域總結的一套配色規律。

因此，並非每一篇文章的配色理論都適合你，這也是當你學習並使用配色理論後，效果依然不好的原因了。

因此在學習配色時，僅僅學習配色理論是不夠的。首先要思考配色的使用場景

，以及整個設計所要達到的目標，然後再學習相應領域的配色知識，才能讓配色理論發揮最大的作用。

LOGO大師LOGO大師LOGO大師LOGO大師

2.不同的行業，不同的配色目標

雖然設計是相通的，但是在不同的設計領域進行配色時，依然會存在巨大的區別：

比如廣告設計的配色理論，放在室內設計上，往往是行不通的。因為廣告設計的目標在於傳遞信息，需要吸引你，而室內設計的目標則是要營造舒適理想的生活氛圍。同樣的道理，推廣設計的配色理論，往往在界面設計時也是行不通的。

不同行業間設計目標的差異，決定了配色目標和理論的差異。

廣告設計：準確地傳遞商品、廣告等信息

品牌設計：創造品牌概念，留下品牌印象

工業設計：營造產品氛圍，引導產品使用

室內設計：傳遞生活理念，創造理想的生活氛圍

數字產品設計：傳遞產品信息，引導用戶閱讀和操作

3.明確配色目標

對於大部分互聯網行業的視覺設計師來說，平時的工作內容大體會分為產品界面設計和推廣設計兩個大的方向。很多設計師需要同時負責這兩塊內容，於是就可能會出現將同一個配色理論用在不同地方的情況，導致一些配色問題的出現。比如：推廣設計的配色太素，無法吸引用戶的注意；而產品頁面的配色又過於雜亂刺眼，影響用戶閱讀和操作體驗等。

所以，配色的第一步，首先要明配色目標：

我們將這兩種配色目標做一下關鍵詞提煉，產品界面設計的配色關鍵詞：清晰、舒適、引導、品牌感。而推廣設計的配色關鍵詞為：吸引力、氛圍、快速傳遞。

我們可以將這些關鍵詞作為衡量目標，以此來尋找正確的配色方向，或者用於檢驗設計作品的配色問題。

所以當我們接到項目需求後，可以先與需求方一同確定好設計的目標，然後以此來確定正確的配色方向，提升配色與設計方向的準確性。而這樣做的另一個好處是，我們可以在項目之初就與需求方之間取得溝通和信任，達成共識，為後續溝通打好基礎。

二

確定主色，精簡層級

當我們確定好配色的目標以後，如何開始配色工作呢？通常情況下，我們會首先來確定整個設計的主色，然後再開始進行後續的設計。

1.主色與副色的定義

什麼是主色和副色？

主色是整個色調的核心顏色，通常也是相對佔比最多的顏色，它決定了整體的風格和基調。而副色則是畫面中佔比相對較小的顏色，它通常起到輔助主色、豐富畫面的作用。

假如把一個畫面看成一部電影，那麼主色就是整個電影的主角，而副色則是除了主角以外的其他配角。

2.確定主色，精簡色彩層級

一部好的電影，通常情況下需要有一個明確的主角，它主導了整個電影的走向，對於設計作品來說，也是相同的道理。所以在配色過程中，首要的任務是確定配色的主色，並在整個作品中明確它的地位，讓它來主導整個畫面。

在產品界面的設計中，主色是傳達品牌感的重要元素。明確的主色能夠讓整個界面產生強烈的品牌感。反之，整體的配色會顯的十分混亂，影響品牌感的傳達。

我們可以來看兩個案例：

這兩個案例在配色上有什麼問題嗎？為什麼？

如何更準確地分析配色的問題？ 我們可以使用前面講的目標分析法，從產品界面的配色目標入手，逐一尋找和發現問題。

LOGO大師LOGO大師LOGO大師LOGO大師

如何去解決以上的問題？可以用八個字概括：明確主色，精簡層級。

我們可以來看一下Keep的產品界面設計。同樣是健身App，Keep的配色方式則完全符合了產品界面的配色目標。相比前面案例的兩個界面，Keep的產品界面呈現出優秀的整體品牌感和品質感。

在Keep的整體配色中，最核心的思想就是簡化色彩層級——明確主色，減少不必要的顏色。從配色的角度來分析，作為品牌的主色，“Keep綠”貫穿了所有的產品界面，使整個產品顯得非常統一和整體，凸顯了整體的品牌感和品質感。

其次，Keep的整體界面將除了主色以外的其他顏色精簡到了極致，並將主要的輔助灰以外的所有中性色都控制在了三個層級內；首頁的插畫運用了同色系來精簡色彩層級；視頻的封面圖風格也經過處理，使色調與整體界面統一。

整個界面的閱讀體驗非常舒適，字體顏色層級清晰，重點明確。而在操作引導上，Keep將大量的品牌色用於核心操作路徑和按鈕上，這使得整個產品的引導邏輯清晰明確。

3.精簡色彩層級的意義

色彩層級越精簡，就越容易達到整體色彩平衡，從而提升設計的整體品質感。當我們去看很多大廠的頁面設計時，可以感受到很多的相同點：整體而強烈的品牌感，簡約而高級的配色，豐富細膩的細節等。

用戶在閱讀頁面時，配色是我們大腦最先接收到的畫面信息。所以精簡配色對於產品界面的設計來說至關重要。以品牌色為主色，精簡色彩層級，可以讓整個頁面富有品牌感。

網易雲官網

LOGO大師LOGO大師LOGO大師LOGO大師LOGO大師

阿里雲官網

LOGO大師LOGO大師LOGO大師LOGO大師LOGO大師

騰訊雲官網

4.品牌升級時的色彩簡化趨勢

在品牌LOGO的升級中，簡化色彩層級同樣是一個大的趨勢。簡化層級，可以讓品牌更加簡約和高級，提升品牌的品質感和包容性，使品牌擁有更大延展性和更多的可能性。

星巴克的品牌升級中，除了去掉LOGO字母和咖啡字母外，更簡化了LOGO的圖形和色彩。從而強化了星巴克標誌性的人魚形象和星巴克綠，讓品牌更加簡潔有力，易於傳播。

大麥網在去年也經歷了戰略性的品牌升級。全新的品牌形象包括新LOGO以及新的Slogan，配色上則重新定義了更具年輕活力的紅色作為主色，同時精簡了整體的色彩層級。

LOGO大師LOGO大師LOGO大師

而寶馬在最近官方宣傳圖中，將的BMW標誌將藍白色相間的LOGO簡化為黑白單色，而新LOGO專為品牌旗下的即將推出的高端豪華車型使用。

三

選擇正確的色系

明確配色目標，確定主色以及色彩層級後，如何進行下一步的配色？

這時候我們可以根據不同的配色目標來選擇合適的色系，豐富整個畫面的配色。需要注意的是，在豐富配色的同時，仍然要嚴格控制色彩層級，以保證整體色彩層級的精簡。

1.巧用同色系，統一不單調

同色系是指在色環上相距不超過45°的兩種顏色

，我們可以選擇主色的同色系範圍內的顏色來豐富整體配色。那麼如何選擇同色系的顏色呢？

首先在色環中確定顏色的位置，通過色環兩邊45°延展出我們所需要的同色系。

在主色的同色系範圍內，我們可以選出同色系顏色作為延展色，單獨使用或者組合成漸變色進行使用。

下面的案例頁面就是運用同色系原理來進行配色的。可以看到，整個頁面在保持色彩統一的前提下，增強了畫面的層次和豐富性，從而提升了整個頁面的層次感和品質感。

同色系的配色特點是整體頁面統一而富有層次，從而傳遞出一種穩定、專業的形象，適合絕大多數的場景使用，是最為簡單和有效的配色方式。

我們可以總結一下同色系的配色方法。首先確定主色，主色兩邊45°以內的同色系色彩範圍，在範圍中選取合適的單色作為輔助色，或者選取一段漸變色單獨使用。

2. 不同場景的對比色用法

對比色是指在色環上相距120°-180°之間的兩種顏色（180°時則互為互補色）。處於對比色關係的兩種顏色，通常色相差異較大，能夠相互產生強烈的對比效果，我們可以利用這種原理來增強畫面的吸引力。

在不同的場景中，對比色同樣有著不一樣的使用方式。在產品設計中，通過小面的顏色對比，可以加強主色的活力與整體豐富性；而在推廣設計中，通常會使用大面的的對比色在增強頁面的吸引力。

（1）產品界面中的對比色應用

產品界面的配色對於產品來說至關重要，好的配色不僅能夠準確地反映產品的調性，還能正確地引導用戶閱讀並理解產品。

我們可以結合網易七魚的官網改版案例，來了解如何通過配色來提升官網的設計品質。

下圖是七魚的舊版官網頁面，在配色上，產品方認為原來的配色過於單調和沉悶，希望可以讓整體更活潑一些。且網站的整體跳出率過高，希望我們能夠找到原因並通過改版解決這個問題。

我們還是通過三個維度去分析舊版官網存在的問題：

如何解決以上問題？從何處下手？

由於七魚首頁的修改涉及到整體官網的配色修改，單純從每個頁面入手並不能從根本解決問題，容易造成整體官網配色不統一的情況。這個時候，我們就要從品牌配色入手，

通過修改配色並制定新的設計規範，在整體上解決問題。

首先從品牌主色入手。經過嚴格的討論，我們重新制定了七魚的品牌主色。為了解決顏色沉悶的問題，我們選擇了接近原有主色，但更鮮亮且富有活力的藍色色作為主色。而輔助色上，為了讓七魚品牌更有溫度，我們選擇主色的對比色——橙色。

藍色與橙色在小面積上的互相對比，可以互相襯托，讓兩種顏色更顯活力。

我們以新的配色規範為基礎，重新制定了全新的七魚設計規範。規範中包含了配色的使用比例、不同的icon樣式與配色的結合方式等一系列的頁面細節，以保證規範可以完整、統一地落實到每個頁面和元素中。

運用新的配色規範進行頁面設計時，要靈活地將配色與產品內容相結合，讓配色更好的融於頁面中，而不是生搬硬套地將配色裝到頁面裡（很多初級設計師在執行規範時會出現類似問題）。

比如我們在優化首頁的主要功能模塊時，首先做的便是重新梳理產品功能的展示構架，然後再結合新的設計形式和配色規範，讓新的規範發揮最大的作用。

在不同頁面的功能icon上，我們豐富了icon的表現形式，同時將新的對比色配色加入到每個icon元素中，增強了icon的活力和吸引力，讓每個icon看起來更精緻。

而在功能插圖中上，我們採用了與icon統一的配色和表現形式，讓頁面中的所有元素具有統一的品牌感。

最終，我們將新的配色規範逐步落實到網易七魚所有的Web端和Mob端頁面中，使七魚的整體官網設計煥然一新。在新的官網頁面中，不僅提升了整體的設計品質，同時也解決了前面分析的問題，整體提升了15%的客戶留存率。

通過這個案例我們可以發現，整體配色的改變，可以極大的提升官網對於用戶的第一印象。用戶往往在進來的一瞬間就決定了對官網的印象，並最終影響用戶是否進一步閱讀，而配色則是其中非常重要的一部分，正確的配色能夠讓用戶更願意停留並閱讀內容。

（2）推廣活動頁面中的對比色應用

在推廣頁面的設計中，通常需要用營造強烈的視覺衝擊，以達到快速吸引用戶並傳遞信息的目標。這就需要大面積的對比色，來達到強烈的對比效果。而在較大面積使用對比色時，整體色彩的主次和整體平衡至關重要。

我們可以來看一個案例：

可以看到，整個頁面主由橙色和深藍紫色兩個主要對比色構成。大面積的對比色產生了強烈的視覺衝擊，讓整個頁面充滿了吸引力。整個畫面用最強烈的對比色重點突出了兩個主要的人物角色，從而吸引用戶注意並進行閱讀，最終將用戶引導至購買入口。至此，整個頁面的任務也算是完成了。

在推廣頁面中，我們需要注意的是，重點信息並非只能是文字內容，也可以是最吸引用戶的畫面核心元素。

3. 嘗試更多的創新配色

除了掌握以上的幾種基本色系的配色方法外，大家可以在此基礎上嘗試更多的配色風格。比如在同色系、對比色系的基礎上，有目的地加入色彩元素豐富色調，在保持整體色彩層級的同時，加入更豐富的變化，從而達到配色目標。

更清新的“同色系”配色

更豐富的“同色系”配色

更多彩的“對比色”配色

復古的平面風配色

而對於很多初學者來說，我建議大家能夠首先明確配色的目標，在配色時保持色彩層級的精簡明確

。在此基礎上，循序漸進，逐步去嘗試更多地配色風格。只有這樣，才能養成良好的配色習慣。

四

提升品質感

我們按照之前的方法，正確的確定了配色的目標，選擇了合適的配色方向，並逐步完成了整體的設計排版。很多同學到這一步之後，就覺得作品已經完成，便停止繼續深入了，而這也是初級設計師經常容易出現的問題。這個時候的作品，從整體上看並沒有太多問題。但是當用戶被頁面吸引，開始仔細欣賞作品時，往往會發現作品沒什麼看點。

出現這種問題的原因，就是作品缺乏足夠的細節和品質，導致作品不夠耐看。就像一本書有著精美的封面，但是打開以後卻平淡無奇，最終對整本書都非常失望。

想要讓作品更優秀，除了基本的版式和配色之外，往往還需要更深入地去雕刻作品，讓作品帶有一種更高級的“氣質”，而這種“氣質”就是我們所說的品質感。

1.什麼是品質感？

品質感是對於設計作品來說，是一個綜合性的評價。我們可以將這個詞分為“品”和“質”，“品”代表物體本身的品相和細節，而“質”則代表質感。

怎樣的設計才算是有品質感的？如何提升設計的品質感？我們可以首先來研究一些優秀的設計案例，尋找其中的共同點。蘋果的產品和頁面設計，是比較公認的具有較高品質感的，我們可以來看一下蘋果的部分官網頁面。

蘋果的所有產品和頁面，從產品圖到頁面的設計都非常有質感。為什麼這種質感會如此吸引我們，令我們覺得非常舒適？如何才能讓設計產生質感？

要了解如何產生質感，首先要了解一下物體產生質感的原理。

當光線照射在富有質感的物體表面時，會產生不同程度的漫反射，最終反射進入我們的眼球后，就會顯現出一層富有質感的漸變色。所以想讓物體獲得質感，漸變是一個關鍵要素。

我們可以利用這一原理來提升質感。下面的案例，是FisnDesign組件庫官網的一個局部頁面。其中就運用了大量的漸變色質感原理，將漸變色融入到icon和頁面元素中，從而提升了整個頁面的質感。

2.獲得品質感的關鍵要素

漸變只是是獲得品質感的關鍵因素之一，蘋果官網將漸變這種原理加入到頁面和元素中，配合精美的產品圖片，讓頁面保持了非常高的品質感。

那麼是否還有其他要素的存在，能夠提升質感呢？

仔細觀察蘋果的所有元素設計，在漸變的同時，還加入了微量的投影和豐富的細節，使所有的元素在簡潔中充滿了細膩的質感。

我們可以總結一下，讓設計獲得品質感的幾個要點：細膩的漸變+輕微的光影+細節/紋理

。

發現這些原理以後，我們可以嘗試將這些原理運用到設計中，從而提升設計的品質感。下面的幾個案例，就是我在研究時所做的一些案例，在不同的頁面細節中都可以看到以上原理的運用效果。

五

總結

看完前面的內容，大家會發現，其實配色並沒有想象中那麼複雜。

只要掌握正確的配色策略，並逐漸適應這種方法，就可以應付各種不同的設計類型。最後，我們將前面講的配色法則做一個簡要的總結：明確目標-確定主色-精簡層級-選擇色系、豐富配色-提升品質感。

只要掌握正確的配色策略，並逐漸適應這種方法，就可以應付各種不同的設計類型。

大大君評語：

不知道大家整篇看下來，有沒有注意到一個核心重點：以上的所有配色法則，基本上都圍繞著“體驗感”來展開的。無論是品牌、界面還是推廣頁面的設計，都是基於受眾的感受和反應來做出相應的、有針對性的設計策略。想要更好地提升配色的品質感，需要設計師處理好每一處微小的細節，而一切微小細節都是為受眾的體驗感而服務的。

畢竟設計是一門基於人的學問，這就需要設計師在一開始就明確客戶的需求以及受眾的喜好，再在此基礎上，發揮設計師本身的技術和技巧。這時候考驗的不單只是設計師的設計能力，還有對客戶需求的理解、與客戶溝通和轉化成設計語言的能力，才不會有面對客戶“五彩斑斕的黑”的要求，卻束手無策的狀況出現。基本的配色是有法則可遵循的，但如果要最求“品質感”，最終還是要歸於設計的需求和目的，這樣的配色才有“靈魂”可言。

免責申明：文章來源於公開網絡，僅供設計師學習，版權歸原創者所有!無對涉及版權問題負責，如有原作者認侵，聯繫必刪

福利互動

為答謝客官閱讀完此文支持，特准備設計新人整套課程（字體設計，海報，logo，ps工具）贈送領取

下方是領取方式

2，評論文章，不限字數，一個字都行