一、配色的流程解釋

一個(gè)完整的平面視覺畫面，里面包含的所有元素、色彩都不是孤立的，都會(huì)和其它元素形成聯(lián)系，產(chǎn)生整體的影響。

而我們?cè)谠O(shè)計(jì)過程中，如果對(duì)元素的設(shè)計(jì)、配色是逐一完成的，那就很難控制整體的效果。因?yàn)槟阍谧龅谝粋€(gè)元素的配色時(shí)，是很難預(yù)估它在最終畫面中的效果是否是合理的。

所以在我的配色建議中，不能一邊設(shè)計(jì)框架、交互、布局、樣式時(shí)一邊配色，而要把它當(dāng)成一個(gè)獨(dú)立的步驟，即 —— 配色階段，在完成界面的基礎(chǔ)的原型或簡(jiǎn)單的上色后，再進(jìn)行統(tǒng)一的配色操作。

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

配色的第一步就是完成中性色的配置，前面我們說過中性色是整個(gè)項(xiàng)目色彩的骨骼、基礎(chǔ)框架。在我們完成前期頁面原型設(shè)計(jì)的階段，就可以先創(chuàng)建中性色的階梯，來完成對(duì)界面層次、信息權(quán)重的表現(xiàn)。

有了這個(gè)基礎(chǔ)，第二步就是填充品牌色，品牌色是整個(gè)項(xiàng)目配色中最關(guān)鍵的色彩類型，因?yàn)樗⒂脩魧?duì)品牌的認(rèn)識(shí)，是一個(gè)必須使用且要高頻使用的色彩類型。

并且，后續(xù)所有的顏色的制定都會(huì)和品牌色發(fā)生聯(lián)系，理論上這些顏色和品牌色產(chǎn)生的聯(lián)系必須是和諧、穩(wěn)固、有效的。所以制定了品牌色，也就對(duì)后續(xù)的配色產(chǎn)生的一定的影響和約束。

接著，就是制定功能色。因?yàn)楫a(chǎn)品的基礎(chǔ)原型構(gòu)建完成以后，設(shè)計(jì)師對(duì)產(chǎn)品使用哪些特殊的字段、信息就會(huì)有清晰的認(rèn)識(shí)。那么最好把這些需要特殊表現(xiàn)的內(nèi)容先整理并羅列出來，然后選出合理的功能色進(jìn)行填充。

再往后就是填充容，根據(jù)相關(guān)的場(chǎng)景、內(nèi)容、風(fēng)格來選擇合適的配圖，確保配圖的用色不會(huì)和前面的色彩產(chǎn)生沖突，且根據(jù)配圖的類型決定它們色彩的突出程度。

最后就是裝飾色的處理，主要針對(duì)復(fù)雜的組件細(xì)節(jié)和圖標(biāo)等完成配色。之所以放在最后，是因?yàn)檠b飾色的選擇是最復(fù)雜且沒有限制的，但它依舊要確保和畫面其它色彩能建立和諧的聯(lián)系。

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

應(yīng)用這種配色方法，我們可以非?？斓耐瓿蓪?duì)界面的配色，并且可以在每個(gè)階段檢查對(duì)應(yīng)配色的效果，并快速做出修改。除了效率外，這么做最大的好處，就是幫助我們更有效地提升對(duì)色彩地深入認(rèn)識(shí)，以及積累不同配色組合的方案。

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

當(dāng)然不止，還有一個(gè)更重要的部分 —— 對(duì)設(shè)計(jì)風(fēng)格的構(gòu)建。

即展開正式的配色之前，設(shè)計(jì)師還需要對(duì)項(xiàng)目采用哪種風(fēng)格做出定義，后續(xù)的設(shè)計(jì)包括版式、圖標(biāo)、樣式、色彩，都是構(gòu)建這個(gè)風(fēng)格的一部分。比如很多作品集包裝中會(huì)展示 "情緒版"，它就是項(xiàng)目前期分析中探索設(shè)計(jì)風(fēng)格的工具之一。

理論上配色的前置環(huán)節(jié)，是先探索并確定設(shè)計(jì)風(fēng)格，為配色指明方向。但這個(gè)流程對(duì)設(shè)計(jì)師的職業(yè)水平是有很高要求的，如果本身項(xiàng)目經(jīng)驗(yàn)少，對(duì)設(shè)計(jì)風(fēng)格的積累理解不足，是沒辦法建立風(fēng)格和色彩的聯(lián)系的。

初級(jí)設(shè)計(jì)師會(huì)認(rèn)為情緒版、品牌化的分析是種包裝，毫無意義，但專業(yè)的 UI 設(shè)計(jì)師和團(tuán)隊(duì)卻對(duì)風(fēng)格定義和分析樂此不彼，這就是經(jīng)驗(yàn)限制了認(rèn)知，我們沒辦法想象還沒做好的工作要怎么才能突破瓶頸做的更好！

所以在前期的積累過程中，不用過分關(guān)注品牌、風(fēng)格化的分析，而是先確保能按照上面的做法輸出有效的配色。只要每個(gè)層級(jí)的配色不出錯(cuò)，那么最終結(jié)果也會(huì)附帶品牌和風(fēng)格的附加屬性。

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

二、配色的實(shí)例演示

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

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

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

所以在后續(xù)的演示中，我們會(huì)分成兩個(gè)部分，首先從淺色模式開展了解基本的配色邏輯，然后再在這個(gè)基礎(chǔ)上進(jìn)行深色模式的配色說明，掌握兩種配色模式的實(shí)踐路徑。

Step1: 中性色填充

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

原型對(duì)原圖做了簡(jiǎn)單的修改和調(diào)整，讓布局先更合理一點(diǎn)，才適合配色的發(fā)揮。

Step2：品牌色填充

因?yàn)榻莅蔡厥且粋€(gè)成熟品牌，有自己的 VI 系統(tǒng)，所以選色要從官方品牌的色彩出發(fā)，主色是深藍(lán)色（RGB 已經(jīng)比印刷色更淺），淺藍(lán)是輔助色。

然后，開始填充主色和輔助色。主色要填充到頁面最重要的元素和背景色上，比如 LOGO、選中的底部導(dǎo)航圖標(biāo)、首頁背景色、重要的標(biāo)簽、按鈕等。輔助色可以添加到相對(duì)次要但高頻出現(xiàn)的一些設(shè)計(jì)元素上，如次要標(biāo)簽、按鈕等。

Step3：功能色填充

接著總結(jié)界面中包含的一些應(yīng)該填充色彩但又不適合用主色、中性色的對(duì)象，比如價(jià)格元素、評(píng)分、收藏、熱門等。

Step4：內(nèi)容填充

到這里色彩的主體已經(jīng)有了，就可以先開始往里面填圖片內(nèi)容了。整體的選圖標(biāo)準(zhǔn)用比較"安全"的做法，即大圖有能和主色搭配的背景顏色，小圖則盡量避免有大色塊、復(fù)雜的色彩，減少?zèng)_突性。

Step5：裝飾色填充

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

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

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

結(jié)尾

簡(jiǎn)單的配色獲得好的結(jié)果，是建立在扎實(shí)的原型結(jié)構(gòu)之上，如果沒有良好的框架設(shè)計(jì)，那么不管你怎么配色最后的結(jié)果都不會(huì)太好。

所以學(xué)習(xí)配色的過程中，也要反問一個(gè)問題，就是你基本界面的設(shè)計(jì)水平是否過關(guān)了，它們足以支撐你展開配色的練習(xí)沒有？

對(duì)于多數(shù)新人來說，這個(gè)答案是否定的~

作者：超人的電話亭