往期回顧：

一、配色的流程解釋

一個完整的平面視覺畫面，里面包含的所有元素、色彩都不是孤立的，都會和其它元素形成聯系，產生整體的影響。

而我們在設計過程中，如果對元素的設計、配色是逐一完成的，那就很難控制整體的效果。因為你在做第一個元素的配色時，是很難預估它在最終畫面中的效果是否是合理的。

所以在我的配色建議中，不能一邊設計框架、交互、布局、樣式時一邊配色，而要把它當成一個獨立的步驟，即 —— 配色階段，在完成界面的基礎的原型或簡單的上色后，再進行統一的配色操作。

而配色的操作也不是看著元素一個一個填的，而是根據配色的類型，分層次、分順序逐步完成。前面之所以把 UI 的色彩類型拆解得那么細致，其中一個原因就是為了應對當前的情況。

配色的第一步就是完成中性色的配置，前面我們說過中性色是整個項目色彩的骨骼、基礎框架。在我們完成前期頁面原型設計的階段，就可以先創建中性色的階梯，來完成對界面層次、信息權重的表現。

有了這個基礎，第二步就是填充品牌色，品牌色是整個項目配色中最關鍵的色彩類型，因為它要建立用戶對品牌的認識，是一個必須使用且要高頻使用的色彩類型。

并且，后續所有的顏色的制定都會和品牌色發生聯系，理論上這些顏色和品牌色產生的聯系必須是和諧、穩固、有效的。所以制定了品牌色，也就對后續的配色產生的一定的影響和約束。

接著，就是制定功能色。因為產品的基礎原型構建完成以后，設計師對產品使用哪些特殊的字段、信息就會有清晰的認識。那么最好把這些需要特殊表現的內容先整理并羅列出來，然后選出合理的功能色進行填充。

再往后就是填充容，根據相關的場景、內容、風格來選擇合適的配圖，確保配圖的用色不會和前面的色彩產生沖突，且根據配圖的類型決定它們色彩的突出程度。

最后就是裝飾色的處理，主要針對復雜的組件細節和圖標等完成配色。之所以放在最后，是因為裝飾色的選擇是最復雜且沒有限制的，但它依舊要確保和畫面其它色彩能建立和諧的聯系。

所以當其它顏色的配置都已經完成以后，裝飾色的配色范圍就被大大限制了，選擇范圍變小，選擇起來自然也就更容易。

應用這種配色方法，我們可以非常快的完成對界面的配色，并且可以在每個階段檢查對應配色的效果，并快速做出修改。除了效率外，這么做最大的好處，就是幫助我們更有效地提升對色彩地深入認識，以及積累不同配色組合的方案。

講到這里，分層次和順序按一定的條件選色填充，就是 UI 配色的全部嗎？

當然不止，還有一個更重要的部分 —— 對設計風格的構建。

即展開正式的配色之前，設計師還需要對項目采用哪種風格做出定義，后續的設計包括版式、圖標、樣式、色彩，都是構建這個風格的一部分。比如很多作品集包裝中會展示 “情緒版”，它就是項目前期分析中探索設計風格的工具之一。

理論上配色的前置環節，是先探索并確定設計風格，為配色指明方向。但這個流程對設計師的職業水平是有很高要求的，如果本身項目經驗少，對設計風格的積累理解不足，是沒辦法建立風格和色彩的聯系的。

初級設計師會認為情緒版、品牌化的分析是種包裝，毫無意義，但專業的 UI 設計師和團隊卻對風格定義和分析樂此不彼，這就是經驗限制了認知，我們沒辦法想象還沒做好的工作要怎么才能突破瓶頸做的更好！

所以在前期的積累過程中，不用過分關注品牌、風格化的分析，而是先確保能按照上面的做法輸出有效的配色。只要每個層級的配色不出錯，那么最終結果也會附帶品牌和風格的附加屬性。

而在適應這種操作并越來越熟練以后，你們就會發現只用這種方法的配色是 —— 莫得靈魂的，它們不能賦予你設計方案底層的價值和深度，要突破這種瓶頸就要追求更宏觀的思考和分析。
所以先從實踐出發，用實踐積累經驗和有效的問題，然后才能真正理解進階的思維和流程的價值。

二、配色的實例演示

這次的配色演示我要用一個學員的作品為例，下面是原圖：

在這套界面中，顏色的整體觀感顯然是很不好的。一方面主色的應用和品牌（捷安特）很不符合，另一方面色彩的搭配不和諧，尤其是內容色和配色很沖突。

還有一個很重要的因素，就是默認使用的深色配色，這是非常難駕馭的方向，完全不推薦新手在輸出項目作品時使用。

所以在后續的演示中，我們會分成兩個部分，首先從淺色模式開展了解基本的配色邏輯，然后再在這個基礎上進行深色模式的配色說明，掌握兩種配色模式的實踐路徑。

Step1: 中性色填充

首先從淺色模式開始說起，在進行配色前，先完成基礎的原型框架，為配色做后續的準備。而完成基礎框架就要順便完成對中性色的定義，選擇合適的中性色數量和色彩，滿足產品需要。

原型對原圖做了簡單的修改和調整，讓布局先更合理一點，才適合配色的發揮。

Step2：品牌色填充

因為捷安特是一個成熟品牌，有自己的 VI 系統，所以選色要從官方品牌的色彩出發，主色是深藍色（RGB 已經比印刷色更淺），淺藍是輔助色。

然后，開始填充主色和輔助色。主色要填充到頁面最重要的元素和背景色上，比如 LOGO、選中的底部導航圖標、首頁背景色、重要的標簽、按鈕等。輔助色可以添加到相對次要但高頻出現的一些設計元素上，如次要標簽、按鈕等。

Step3：功能色填充

接著總結界面中包含的一些應該填充色彩但又不適合用主色、中性色的對象，比如價格元素、評分、收藏、熱門等。

Step4：內容填充

到這里色彩的主體已經有了，就可以先開始往里面填圖片內容了。整體的選圖標準用比較“安全”的做法，即大圖有能和主色搭配的背景顏色，小圖則盡量避免有大色塊、復雜的色彩，減少沖突性。

Step5：裝飾色填充

最后就到了裝飾色的填充上，對于一些特殊組件，以及裝飾圖標，就要在前面的配色基礎上做選擇。得到最終結果并沒有使用什么理論、規則，僅僅是從一系列的選擇中找出自己最滿意的結果而已。

到這一步基本配色也就完成了，可以再和原來的做法做一次對比。

這就是我們總結出來的最簡單的基礎配色方式，而上面的方案也不是唯一的配色方案，你們可以嘗試自己臨摹一遍原型，自己填充一遍色彩，看看能得到什么新的結果。

結尾

簡單的配色獲得好的結果，是建立在扎實的原型結構之上，如果沒有良好的框架設計，那么不管你怎么配色最后的結果都不會太好。

所以學習配色的過程中，也要反問一個問題，就是你基本界面的設計水平是否過關了，它們足以支撐你展開配色的練習沒有？

對于多數新人來說，這個答案是否定的~

歡迎關注作者的微信公眾號：「超人的電話亭」