3個章節，幫你學會B端設計師必須掌握的顏色設定

顏色是我們 B 端設計重要的設計媒介，上篇文章我們講解了色彩空間，了解到不同色彩空間對于設計方案究竟會有哪些影響～

但有了影響還是不夠，今天我們來說說 B 端項目當中顏色搭配的底層邏輯，講解清楚不同顏色（品牌色、中性色、輔助色）之間的使用技巧，主要是技巧～

想讓大家明白：

為什么 B 端項目的品牌色可以進行調整？

中性色設定的背后邏輯？

不同的輔助色之間我應該如何進行梳理？

一、品牌色

品牌色是系統顏色的靈魂，它主要是用來強調頁面當中的品牌價值。也就是很多顏色一看，我們就能立馬想到對應的品牌。

比如 綠色，我們能立馬想到微信；紅色我們能想到 可口可樂，這就是品牌色所賦予的價值。

1. 品牌色的設定

在 B 端設計當中，品牌色的使用場景會有些特殊。一般會被用來強調頁面當中的關鍵信息，比如在 B 端系統當中的 主按鈕、導航菜單、文字鏈接、選中狀態，我們都可以使用品牌色的方式進行呈現。

因此對于品牌色的設定就會顯得至關重要。如果設定為 藍色、紫色、綠色，會與整體的設計較為協調，因此較為容易處理。比如：釘釘、飛書，都采取藍紫色的方式確定整體品牌色。

但如果顏色為 紅色、橙色、黃色，處理起來則會比較麻煩，需要考慮品牌色與輔助色相混淆的問題。

比如 我們要為 中信銀行企業端 設計 B 端產品，這時候它的紅色就會和系統當中的警告色相沖突，那我們應該怎么辦？

① 輔助色微調：我們可以考慮延續中信銀行品牌色，但對輔助色的紅色進行微調，使大家能夠明顯感受到區別，這樣能夠快速解決問題。

比如在這里，就可以考慮將輔助色紅色調整為更偏暖的橙紅色，這樣就能夠與品牌色形成較大差別。

② 重新設定：在品牌色的基礎上，為企業端的用戶單獨設定一套以藍色為主的顏色風格，這樣能夠保證顏色的使用上不會出現較大問題。

比如京東在自己品牌色的紅色的基礎上，為商家后臺單獨設定藍色為品牌色，進行呈現和延展。同樣的例子還有 小紅書、淘寶 等...

2. 品牌色的使用

在品牌色當中，它的使用場景不同，會衍生出不同的顏色色值，需要在頁面當中使用。我們把這部分衍生出來的顏色叫做色階。

比如在這個頁面當中，除了品牌色之外，還會有按鈕的選中狀態，Tab 的切換狀態 等等，都會使用與品牌色相關的顏色進行呈現。

在梳理時，需要根據自己的顏色進行合理的安排與設定，這里給大家羅列了色階的使用場景，大家可以保存查看。

那這些顏色怎么來？在色階的設定上，通常會有幾種辦法：

① 黑白透明度疊加法：根據我們確定的品牌色，通過疊加 10% 透明度的白或者黑，進而能夠推導出對應色階。

這種做法整體會比較簡單，但操作起來會存在相應的誤差，因為對于顏色只修改了它的明度，并沒有對色度進行修改，會稍稍有些不合理。

② 色彩空間計算法：同樣在 Figma 當中，我們可以使用色彩空間的計算方式，快速生成對應的顏色色階。但也是一樣的問題，只會存在明度 Tone 的變化。同時我試用下來，發現藍色生成出來色階較深，感覺不算特別理想。

③ 自動生成法：生成法就是最簡單高效的方式。通過 Arco Design 所提供的顏色生成平臺，我們可以將自己的品牌色進行輸入，就能生成導出對應的顏色色值。這種方式既高效，同時結果又較為準確，然后截圖就可以自己在 Figma 里面快速吸取顏色。

網址： https://arco.design/palette/list

3. 品牌色的使用面積

那品牌色到底使用多少呢？

其實在頁面當中，我們不需要哪哪都放品牌色～

因此在使用品牌色，我們需要遵守系統的 631 原則，也就是我們會將整個頁面的顏色進行劃分，其中品牌色只會占據整個頁面的 10% 的比例，剩余的中性色、白色/弱灰色 會占據整個頁面的 30% 與 60%。

當然，這個也并不是絕對，我們也會與頁面的類型相關，進行相應微調。

4. 為什么現在品牌色也不太重要

因為現在的 B 端產品，大多數都是以藍色為主，你會發現我們不能做到 “看到某一個顏色，就能立馬想起你來～”

在這樣的背景下，品牌色的使用就會更為局限

所以建議大家在最初顏色的設定上，盡可能地將時間留給頁面的設定上，而品牌色上就根據頁面設定的初稿進行微調則會更為合理。

二、中性色

中性色非常重要，在我看過 1000 多份同學的作業當中，中性色是最容易犯錯的。

因為對于 B 端頁面而言，本質上就是頁面的“排版設計”，所以使用合理的中性色能夠讓用戶更容易獲取信息。

1. 中性色的設定

這里給到大家兩個頁面，你會發現右側明顯會更好，更清晰，它的設計原理就用到一句話：“黑下來、淺上去”

首先我們先介紹一個中性色的色階，整體會分為：深色區域與淺色區域。

黑下去，是讓深色區域的顏色加重。

因為深色區域的顏色大多都是用在 標題、正文 等顏色，這部分需要強調頁面的識別性，因此顏色越黑，用戶閱讀的難度就會越低。

同時不同顏色之間還是會有明顯的區分，所以在設定時我們會將顏色控制在 #242424 之間。（只要灰色是在 2 開頭左右的范圍都是可以的）

淺上去，是將淺色的部分盡量減弱。

因為淺色區域大多是用在 描邊、背景 等輔助信息的區域，這部分就需要減少顏色的占比，使得中性色對頁面的干擾減少。比如太多灰色會造成頁面太散、和文字進行搭配就會很難識別，所以我們在使用上就會減少顏色色值。

在整體的顏色趨勢上，你會發現它是形成這樣的一個趨勢。

2. 中性色的原理

同時“深下來、淺上去”也是為了讓它能夠更好的滿足 WCAG 的要求，這樣的設定我們的色彩對比度都會在 7.0 以上。

比如在 語雀之前的迭代當中，設計師就是通過加深顏色，讓產品的無障礙能力提高，進而能夠更好的呈現頁面當中的內容。但別人在設計時，描述的就會更具有價值，大家可以學習別人的表述方式。

同時對于中性色的使用，我們可以考慮融入一點點藍色，這樣對于灰色而言整體會更加干凈，會讓你的中性色更具質感。這里給你推薦一組具備藍色的中性色，大家可以直接參考。

三、輔助色

輔助色主要是向用戶明確的傳達成功、警告、錯誤、鏈接等信息和狀態。它主要起到的是輔助的作用，因此出現的頻率不算太高。

通常在輔助色的設定上，我們會優先考慮 紅、綠、黃 等特殊顏色，但在 B 端設計的工作當中，輔助顏色的管理反而更為重要。

1. 輔助色的要點

這里想問問大家，你是否遇到這種情況。

在一個系統當中，顏色的使用過于的混亂。比如在審批模塊當中，綠色代表進行中；在通知模塊當中；綠色代表個人消息；在商機階段當中，綠色代表成單，你會發現輔助色的使用就會出現混亂的場景，如果你沒有合理的梳理，就會導致輔助色異常混亂。

這時候我們就需要根據：先描述顏色的含義，再梳理不同的模塊，最后確定不同的狀態下究竟應該用哪些顏色。

這里，我們整理了顏色，一共包含：藍色、紅色、橙色、綠色、黃色、灰色...

進一步描述不同的顏色，具體會有哪些含義

然后梳理用到輔助色模塊有哪些，將其進行記錄

最后根據顏色含義和模塊語義進行匹配，選擇更為合理的輔助顏色，這才是我們需要去做到的。

2. 輔助色的設定

那涉及到這么多顏色，如何設定？

對于日常工作中，如果系統沒有特殊要求，我們可以直接按照設計系統當中的輔助色進行使用，這就不需要太多思考，較為簡單。

那如果自己有一定設置的特殊要求，就可以考慮使用 Color Space 插件來快速產出輔助色，不過在使用下來，你會發現輔助色的提示性不夠，我們還可以對顏色進行微調，讓它色度更高，也就是更為鮮艷，這樣才能起到輔助色的作用。

最后就是將前面提到的輔助色色值與所使用的模塊進行整理，放在系統當中的表格處，在后續的使用時，大家都可以根據顏色的要求進行合理的輸出和匹配～

歡迎關注作者的微信公眾號： CE青年Youthce