在今天，受限于國內激烈的市場競爭，C 端產品為了爭奪用戶注意力，界面的設計越來越復雜，色彩越來越豐富（花哨），極簡的風格只存在于少數頭部產品和工具類產品中。
這種風氣會傳導到招聘的要求中，也就是對作品集的審視，往往更重視能駕馭復雜視覺風格的作品，而不是極簡的風格。
所以，除了界面設計中對界面、組件框架樣式的設計創新外，最重要的就是對界面配色的管理和表現。而配色作為所有設計類型的終極難題之一，長期困擾著初級 UI 設計師。
所以我們今天的主題，就是用最簡單、適用的邏輯，來解釋 UI 配色的方法！
學會配色首先要理解色彩，以及在 UI 設計中要配哪些“色”。
首先是對色彩的描述，相信大家或多或少聽說過 RGB、CMYK 之類的名詞，它們就是對不同場景下的色彩描述方法。
比如顯示器成像，是由一個個像素點顯示不同色彩組成的，而像素點的顏色由三個發光晶體管控制，即 Red 紅、Green 綠、Blue 藍，它們發出不同強弱的光進行混合，從而形成新像素點上最后顯示的色彩，所以也叫 RGB 色。
而對于現實世界的物體的染色、印刷，就要使用具體的顏料上色，為了節省成本工業界不可能提供成百上千萬的顏料類型，所以使用了 Cyan 青色、 Magenta 洋紅色、 Yellow 黃色三個顏色作為基礎進行混合，生成其它顏色。而因為 Black 黑色、灰色難以用別的顏色混出來，所以單獨提供，于是就有了 CMYK 色。
在 UI 設計中，我們的設計內容無須進行打印，所以只會以 RGB 模式記錄和顯示。但是 RGB 色的記錄模式比較復雜，即每個色值有 0-255 的 256 個顏色，要分別記錄這三個數值，且它們混合后的色彩很難判斷。
所以雖然 UI 中用的是 RGB，但我們日常選色使用的卻是 HSB 模式，即將顏色劃分成色相 Hue、飽和度 Saturation、明度 Brightnessd。
它是對色彩邏輯上的定義，會根據應用的需要轉化成 RGB 和 CMYK，所以不用糾結它不是 RGB 不能顯示怎么辦。
而多數 UI 軟件的色彩選擇面板，就是使用 HSB 的選色邏輯來設計的，有一個橫向的色相條，加一個表示明度、飽和度的矩形區域。
雖然色相條是一個長方形，但用過應該能發現它的首尾都是紅色，因為 HSB 模式下建立的色相是一個360度的環形，也叫色環。選色面板用的色相條，就是這個色環截開拉直后的效果，所以首尾是同一顏色。
使用 HSB 選色的邏輯 ——
先確定色相，再調節飽和度和明度
。
如果飽和度 S 值為零，則色彩沒有任何色相只剩下黑白灰，即中性色。明度 B 值控制亮度，0 即完全沒有亮度所以是黑色，100 最亮則是白色，即顏色越深 B 值越小，B 值越大顏色越亮。
學會使用 HSB 選色和微調的方式是進行配色的關鍵，因為專業的設計過程會有清晰的色彩應用思路，會直接通過色彩面板去找到自己要的顏色，甚至是直接手動輸入數值，而不是把選色面板當盲盒隨機拖一個出來去測試。
在 UI 設計過程中，如果軟件的色彩面板默認是其它模式，優先將它們先切換成 HSB （有些是 HEX）模式。
了解選色模式是第一步，而第二步就是認識UI界面中應用的色彩類型有哪些，為進一步掌握配色做準備。
在過去，我們將界面的配色分為主色、輔助色、中性色三種類型，但這次我們要做出新的定義，以滿足目前 UI 設計趨勢的需要。
UI 界面中應用的色彩可以分成：品牌色、功能色、中性色、裝飾色、內容色等，四個大類。
品牌色即組成產品品牌基調、個性的核心色彩，用于區分自己和其它產品之間的區別。而品牌色并不是只有一個，而是包含主色、輔助色兩個分類。
首先品牌主色，是品牌的核心色調，是和品牌進行綁定的色彩錨點，比如想到美團就是黃色，想到肯德基就是紅色，想到星巴克就是綠色。常規的品牌主色有且只能有一個。
而輔助色，則是建立在品牌色彩系統內搭配主色出現的色彩。比如麥當勞的核心主色是黃色（LOGO 色，"金"拱門），但相信麥當勞的紅色你們一定也不陌生，它們經常相伴出現。再比如沃爾瑪，雖然主色是藍色但是黃色在品牌制品和包裝上也沒少用。
輔助色可以只有一個也可以有多個，作為補充比使用單一主色會更具辨識度和豐富性。但它不是必須的，因為在 UI 界面中出現的顏色往往非常多，品牌輔助色的加入往往會讓配色變得更困難，反而成為拖累。
功能色，就是根據界面傳達信息、隱喻所應用的色彩，具有比較明確的工具作用而存在。部分場景下用戶對色彩代表的寓意認識根深蒂固時，那么我們就有必要順應這種認識來添加色彩。
比如電商中紅色代表價格、折扣，工具產品里綠色代表成功通過，國內金融產品里紅色代表上漲綠色代表下跌，幣圈行業反過來綠色代表上漲紅色代表下跌等。
功能色的應用是必要的，因為色彩也是用于傳遞信息的關鍵要素之一。但是，功能色不一定完全和品牌色脫節，如果品牌色和想要的功能色接近，往往直接使用品牌色即可，不用創建新的顏色。
比如京東的價格、優惠用的就是品牌主色，支付寶的確認、同意用的也是品牌主色。
一個項目再怎么花哨，也會包含不需要使用花哨色彩的背景、文字、圖標，而
通常它們在整個應用內的占比才是最大的，而不是品牌色！
中性色是支撐整個產品色彩體系的骨架，用好中性色就能讓界面被用戶快速理解、認識。所以在一些品牌色就是以黑色為主色的產品中，用戶也并不會因為產品沒有使用其它色相而不知道應用怎么使用。
前面提到的三種色彩類型，都是要進入項目設計規范內的“標準色”，而應用實際設計過程中光靠這些標準色是無法滿足所有場景的。
比如一些特定的活動頁面，或者裝飾圖標，運營場景等，都會根據具體的需求或美觀性應用其它色彩。
裝飾色的配置沒有非常具體的要求，在一定程度上就是脫離原有的規范標準，作為一個獨立的設計去完成。所以很多大廠產品在不同頁面中的運營需求不同，于是裝飾色各用各的，導致最終呈現出來的結果非常割裂。
裝飾色是在今天的移動端設計中最大的難題，因為我們要加入很多新的色彩進去會和規范色形成沖突。雖然線上很多產品的配色都有種放棄治療的決絕，但在招聘環節中對色彩的應用上這些要求又全部回來辣（就是這么分裂）！
最后一個，就是內容色了，即產品內展示的內容所使用的色彩，如用戶的照片，商品的圖片，廣告的圖片等等。
某種程度上來說內容用什么顏色是不可控的，不在配色的考慮范圍內。但對于一些特定的產品中，內容用什么顏色是有確定性的，甚至直接規范內容制作、拍攝、后期的用色規范，讓整體的配色能更統一和諧。
并且在作品集項目和評審中，設計師自己輸出的界面也是要考慮內容用色的，因為內容往往在頁面中占比很大，用色的好壞會直接影響觀看者對整個頁面的評價，所以我們必須要把它當成配色的一部分來處理。
配色就是完成對上面五種色彩類型的選擇、控制、管理，形成最終呈現的效果。
上一節介紹了 UI 配色的五個對象，而這一節中，我們就要針對它們的配色進行更細致的解說。
學習 UI 配色，就繞不過去平面配色的各類知識點、概念、技法，雖然 UI 設計原則上也是平面設計的一種，但在配色上卻有很大的差異，不能直接照搬平面配色的邏輯。
-
-
-
第一點，也是最重要的一點，就是平面設計的對象是“靜止”的，在設計被制作出來后就被固定。而 UI 設計的對象是 “動態” 的，不管是內容還是界面本身都會經常發生修改變化。
靜態的設計穩定，就意味著設計意圖可以貫徹，個性化易于塑造。而動態的設計意味不確定性，上線后內容的變更或產品迭代會直接破壞原有的設計，導致設計意圖的流產。
第二點，則是色彩顯示模式的差異。平面設計要進入真實世界就要經過染色或印刷（CMYK），這些制品的色彩經過光的折射后才進入人眼。而 UI 設計的色彩則是由屏幕自身發光呈現（RGB），直接進入人眼。
自發光和折射光呈現的色彩觀感是非常不同的，這由它們的物理特性決定（暫不拓展），最直觀的一個差異，就是屏幕發光是會“刺眼”的，能讓人眼覺得不適和過快疲勞。比如熒光色系，或者大面積的對比色。
自發光產生的生理影響，決定了 UI 配色為了滿足可用性就要排除一部分色彩，讓配色的范圍大大縮小。所以平面中有句話叫沒有難看的顏色，只有配不好的顏色，并不適用于 UI 配色。
第三點，就是品牌輸出目標的差異。傳統品牌的色彩系統更注重品牌的概念、價值觀的表達，通過在門店、包裝、物料、服務上的統一應用，來潛移默化的塑造用戶對品牌的認識和定位。
而互聯網產品能影響用戶的主要渠道就是手機或顯示器上小小的屏幕，在這個小小的屏幕內還要和成千上萬的其它產品競爭。所以互聯網產品對品牌的塑造上是非常“強硬”的，要讓用戶強烈的感知到并快速形成印象。
平面和 UI 配色的邏輯的差異，自然會導致實踐的方式也不同，需要單獨學習。這也是很多 UI 設計師一直學習配色相關知識但還是做不好UI配色的原因，因為這是兩套不同的體系。
在建立 UI 配色系統時，第一步確定的通常都是品牌色。而品牌色的建立包含兩種情況，一種是設計的產品已經是個完整的品牌建立過自己的 VI 系統，另一種情況是完全獨立的新產品需要全部重新創建。
時，原則上 UI 的配色也要使用原來制定的品牌 VI 用色。但前面也說過平面用色和屏幕用色差異巨大，所以 UI 用色可以在原有的基礎上做調整，比如 MUJI、宜家。
如果還仔細研究過成功的獨立產品配色，那么就會發現一個規律，主色基本都處于飽和度明度面板的右上方。
這種設置的依據，都是為了讓主色能更鮮艷、明亮。一方面是在屏幕上更能吸引用戶注意和灌輸品牌認知，另一部分鮮艷的色彩在屏幕中展示起來也更舒適、和諧，客觀決定了不應該使用一些“有氣無力”的顏色作為產品主色。
遵循這種規律，那么主色的選擇就是先確定色相類型，然后在明度、飽和度面板的右上方再選出具體的顏色。
除了主色外，品牌的輔助色定義也遵循相同的原則。但是，如果不是品牌VI本身就定義過輔助色的情況下，不建議新產品定義輔助色，因為它很容易稀釋主色的權重，不能帶來太多的幫助。
除了品牌色外，最重要的色彩定義就是中性色，在我自己的設計流程中，甚至是先定義中性色再去定義品牌色。
中性色是由黑白灰組成的多個色彩，并通過灰度值（HSB 的 B 值）的高低來形成一個表現強弱的等級階梯。通常一個 UI 產品中會使用不少于5個以上的中性色，以滿足信息對比性的需要。
為了方便記憶，我們會對 B 值使用5的倍數做定義，比如10、20、40、60、80、90等。
中性色的定義并不困難，只要不同等級的顏色有足夠的差異即可，至于需要多少級的顏色，根據具體項目的需要決定。
下面還有兩個中性色定義的細節，一個是
盡量避免使用純黑色
（B 值0），因為純黑在 OLED 屏幕中是完全不發光的狀態，所以會和周遭的顏色產生極大的反差，難以進行控制。
第二個細節，就是成熟項目中的中性色往往并不是純灰色，而是會加入輕微的色相（主要是藍色色相）進去，讓中性色的應用不會那么僵硬和枯燥。
加入色相的中性色，會提供非常微妙的潛在影響，但并不需要用戶感知到這些顏色使用了色相，所以往往只添加了極少的色相值。顏色越淺，色相值就需要越弱才不易被感知，反之可以添加的色相值范圍就越強。
所以中性色的配色邏輯可以在明度、飽和度面板中遵循下方這樣的曲線：
之后制定功能色的配色邏輯，在定義它們之前最好已經完成了項目主要界面內容和原型的搭建，能預判項目中包含了哪些特定的信息、要素、模塊是需要使用非品牌色和中性色來表示的。
比如前文提到的金融軟件，包含漲跌的示意。電商購物應用，包含價格和優惠。一個普通的社區應用，包含收藏、點贊和會員等。
當主色不適合對這些內容進行填充時，就應該選新的顏色作為功能色進行填充。而功能色的選擇也是最簡單的部分，因為功能色的目標通常都很明確，而它們也可以從主色的選擇區域內產生。
進入到裝飾色的環節，就不在色彩規范定義的顏色范圍內了，進入到“看碟下菜”的階段。
裝飾色的應用首先面對的就是裝飾圖標的用色，比如快速入口、瓷片區用的裝飾圖標，往往會使用其它顏色來提高界面色彩的豐富性。
在這類圖標的配色中，沒有固定的配色規律可以遵循，只能憑感覺配。但值得慶幸的是，裝飾圖標的用色也和主色選色類似，可以選擇范圍其實很小，直接在這個范圍內選色很快就能得到想要的結果。
總結一些線上成熟產品的快速入口配色，大家就會發現用色其實非常固定：
除了圖標外，第二種裝飾用色就是運營場景，比如節日主題或是專題頁面，針對它們的設計，可以理解成是針對一個獨立頁面定義新的主色和輔助色，覺得怎么做合適怎么來……
雖然它們的應用可能和產品主色沖突，但運營內容的權重往往是高于項目配色要求的，所以在線上項目中只要加入運營設計開始，界面色彩就開始“雞飛狗跳”。
而在作品集項目的設計中，就要確定裝飾色的應用目標，即通過更多的色彩來增加設計的豐富性，所以盡量從非主色的色系里選擇，避免使用和主色近似的色彩。
最后，就是在填充內容配圖時使用的色彩了。這里也分兩種情況，即該內容在頁面中的占比。
如果占比過大，比如占據半屏以上的廣告圖、商品圖，那么填充進去的內容必定直接影響整個頁面的色彩觀感。
所以在這種場景下，建議使用背景色比較單一的圖片，會比填充色彩凌亂、復雜的圖片效果更好。當然，內容的用色不能和主色完全一致，也不能和主色產生不協調感，這要設計師自己判斷。
然后就是普通內容的用色，比如商品列表中的商品圖，動態列表內的動態圖，新聞列表中的封面等等。尺寸不大，但是往往出現的數量很多。
對這些內容圖的用色傾向太強會使設計結果看起來非常“刻意”，或是色彩的搭配非?；靵y，所以很多設計稿一看就是飛機稿的原因就是配圖使用太刻意，無法呈現界面應有的狀態。
這類內容圖的填充和上一種情況要反著來，即弱化顏色的存在感。盡量使用沒有高飽和度或白色的背景圖，可以讓它們更好的融入整個界面，不會成為界面的累贅。
根據這些總結出來的原則，我們可以再回到識色面板中做一個總結。先將明度、飽和度區域用橫豎做成三等分的“井”字，確定大致色相后選擇具體色彩的區域通常都集中在右上角，背景集中在左上角，中性色集中在左側的區域內。
UI的配色相比平面非常簡單，因為配色的對象固定，每種配色對象的選擇范圍也很 “固定”。配色就是一個蘿卜一個坑的分配適合的色彩，只要積累一定案例分析和實踐經驗，就能快速掌握。
而UI配色所謂的品牌調性，也遠遠沒有平面那么復雜，要做的就是組合出和同類產品不同，能被用戶記憶的色彩！
一個完整的平面視覺畫面，里面包含的所有元素、色彩都不是孤立的，都會和其它元素形成聯系，產生整體的影響。
而我們在設計過程中，如果對元素的設計、配色是逐一完成的，那就很難控制整體的效果。因為你在做第一個元素的配色時，是很難預估它在最終畫面中的效果是否是合理的。
所以在我的配色建議中，不能一邊設計框架、交互、布局、樣式時一邊配色，而要把它當成一個獨立的步驟，即 —— 配色階段，在完成界面的基礎的原型或簡單的上色后，再進行統一的配色操作。
而配色的操作也不是看著元素一個一個填的，而是根據配色的類型，分層次、分順序逐步完成。前面之所以把 UI 的色彩類型拆解得那么細致，其中一個原因就是為了應對當前的情況。
配色的第一步就是完成中性色的配置，前面我們說過中性色是整個項目色彩的骨骼、基礎框架。在我們完成前期頁面原型設計的階段，就可以先創建中性色的階梯，來完成對界面層次、信息權重的表現。
有了這個基礎，第二步就是填充品牌色，品牌色是整個項目配色中最關鍵的色彩類型，因為它要建立用戶對品牌的認識，是一個必須使用且要高頻使用的色彩類型。
并且，后續所有的顏色的制定都會和品牌色發生聯系，理論上這些顏色和品牌色產生的聯系必須是和諧、穩固、有效的。所以制定了品牌色，也就對后續的配色產生的一定的影響和約束。
接著，就是制定功能色。因為產品的基礎原型構建完成以后，設計師對產品使用哪些特殊的字段、信息就會有清晰的認識。那么最好把這些需要特殊表現的內容先整理并羅列出來，然后選出合理的功能色進行填充。
再往后就是填充容，根據相關的場景、內容、風格來選擇合適的配圖，確保配圖的用色不會和前面的色彩產生沖突，且根據配圖的類型決定它們色彩的突出程度。
最后就是裝飾色的處理，主要針對復雜的組件細節和圖標等完成配色。之所以放在最后，是因為裝飾色的選擇是最復雜且沒有限制的，但它依舊要確保和畫面其它色彩能建立和諧的聯系。
所以當其它顏色的配置都已經完成以后，裝飾色的配色范圍就被大大限制了，選擇范圍變小，選擇起來自然也就更容易。
應用這種配色方法，我們可以非?？斓耐瓿蓪缑娴呐渖?，并且可以在每個階段檢查對應配色的效果，并快速做出修改。除了效率外，這么做最大的好處，
就是幫助我們更有效地提升對色彩地深入認識，以及積累不同配色組合的方案
。
講到這里，分層次和順序按一定的條件選色填充，就是UI配色的全部嗎？
當然不止，還有一個更重要的部分 ——
對設計風格的構建
。
即展開正式的配色之前，設計師還需要對項目采用哪種風格做出定義，后續的設計包括版式、圖標、樣式、色彩，都是構建這個風格的一部分。比如很多作品集包裝中會展示 “情緒版”，它就是項目前期分析中探索設計風格的工具之一。
理論上配色的前置環節，是先探索并確定設計風格，為配色指明方向。但這個流程對設計師的職業水平是有很高要求的，如果本身項目經驗少，對設計風格的積累理解不足，是沒辦法建立風格和色彩的聯系的。
初級設計師會認為情緒版、品牌化的分析是種包裝，毫無意義，但專業的 UI 設計師和團隊卻對風格定義和分析樂此不彼，這就是
經驗限制了認知，我們沒辦法想象還沒做好的工作要怎么才能突破瓶頸做的更好
！
所以在前期的積累過程中，不用過分關注品牌、風格化的分析，而是先確保能按照上面的做法輸出有效的配色。只要每個層級的配色不出錯，那么最終結果也會附帶品牌和風格的附加屬性。
而在適應這種操作并越來越熟練以后，你們就會發現只用這種方法的配色是 —— 莫得靈魂的，它們不能賦予你設計方案底層的價值和深度，要突破這種瓶頸就要追求更宏觀的思考和分析。
所以先從實踐出發，用實踐積累經驗和有效的問題，然后才能真正理解進階的思維和流程的價值。
這次的配色演示我要用一個學員的作品為例，下面是原圖：
在這套界面中，顏色的整體觀感顯然是很不好的。一方面主色的應用和品牌（捷安特）很不符合，另一方面色彩的搭配不和諧，尤其是內容色和配色很沖突。
還有一個很重要的因素，就是默認使用的深色配色，這是非常難駕馭的方向，完全不推薦新手在輸出項目作品時使用。
所以在后續的演示中，我們會分成兩個部分，首先從淺色模式開展了解基本的配色邏輯，然后再在這個基礎上進行深色模式的配色說明，掌握兩種配色模式的實踐路徑。
首先從淺色模式開始說起，在進行配色前，先完成基礎的原型框架，為配色做后續的準備。而完成基礎框架就要順便完成對中性色的定義，選擇合適的中性色數量和色彩，滿足產品需要。
原型對原圖做了簡單的修改和調整，讓布局先更合理一點，才適合配色的發揮。
因為捷安特是一個成熟品牌，有自己的 VI 系統，所以選色要從官方品牌的色彩出發，主色是深藍色（RGB 已經比印刷色更淺），淺藍是輔助色。
然后，開始填充主色和輔助色。主色要填充到頁面最重要的元素和背景色上，比如 LOGO、選中的底部導航圖標、首頁背景色、重要的標簽、按鈕等。輔助色可以添加到相對次要但高頻出現的一些設計元素上，如次要標簽、按鈕等。
接著總結界面中包含的一些應該填充色彩但又不適合用主色、中性色的對象，比如價格元素、評分、收藏、熱門等。
到這里色彩的主體已經有了，就可以先開始往里面填圖片內容了。整體的選圖標準用比較“安全”的做法，即大圖有能和主色搭配的背景顏色，小圖則盡量避免有大色塊、復雜的色彩，減少沖突性。
最后就到了裝飾色的填充上，對于一些特殊組件，以及裝飾圖標，就要在前面的配色基礎上做選擇。得到最終結果并沒有使用什么理論、規則，僅僅是從一系列的選擇中找出自己最滿意的結果而已。
到這一步基本配色也就完成了，可以再和原來的做法做一次對比。
這就是我們總結出來的最簡單的基礎配色方式，而上面的方案也不是唯一的配色方案，你們可以嘗試自己臨摹一遍原型，自己填充一遍色彩，看看能得到什么新的結果。
作者：酸梅干超人鏈接：https://www.zcool.com.cn/article/ZMTY0NjQxMg==.html來源：站酷著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
