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

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

想讓大家明白：

為什么 B 端項目的品牌色可以進行調(diào)整？

中性色設(shè)定的背后邏輯？

不同的輔助色之間我應(yīng)該如何進行梳理？

一、品牌色

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

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

1. 品牌色的設(shè)定

在 B 端設(shè)計當中，品牌色的使用場景會有些特殊。一般會被用來強調(diào)頁面當中的關(guān)鍵信息，比如在 B 端系統(tǒng)當中的 主按鈕、導(dǎo)航菜單、文字鏈接、選中狀態(tài)，我們都可以使用品牌色的方式進行呈現(xiàn)。

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

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

比如 我們要為 中信銀行企業(yè)端 設(shè)計 B 端產(chǎn)品，這時候它的紅色就會和系統(tǒng)當中的警告色相沖突，那我們應(yīng)該怎么辦？

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

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

② 重新設(shè)定：在品牌色的基礎(chǔ)上，為企業(yè)端的用戶單獨設(shè)定一套以藍色為主的顏色風(fēng)格，這樣能夠保證顏色的使用上不會出現(xiàn)較大問題。

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

2. 品牌色的使用

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

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

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

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

① 黑白透明度疊加法：根據(jù)我們確定的品牌色，通過疊加 10% 透明度的白或者黑，進而能夠推導(dǎo)出對應(yīng)色階。

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

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

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

網(wǎng)址： https://arco.design/palette/list

3. 品牌色的使用面積

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

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

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

當然，這個也并不是絕對，我們也會與頁面的類型相關(guān)，進行相應(yīng)微調(diào)。

4. 為什么現(xiàn)在品牌色也不太重要

因為現(xiàn)在的 B 端產(chǎn)品，大多數(shù)都是以藍色為主，你會發(fā)現(xiàn)我們不能做到 "看到某一個顏色，就能立馬想起你來～"

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

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

二、中性色

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

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

1. 中性色的設(shè)定

這里給到大家兩個頁面，你會發(fā)現(xiàn)右側(cè)明顯會更好，更清晰，它的設(shè)計原理就用到一句話："黑下來、淺上去"

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

黑下去，是讓深色區(qū)域的顏色加重。

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

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

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

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

在整體的顏色趨勢上，你會發(fā)現(xiàn)它是形成這樣的一個趨勢。

2. 中性色的原理

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

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

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

三、輔助色

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

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

1. 輔助色的要點

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

在一個系統(tǒng)當中，顏色的使用過于的混亂。比如在審批模塊當中，綠色代表進行中；在通知模塊當中；綠色代表個人消息；在商機階段當中，綠色代表成單，你會發(fā)現(xiàn)輔助色的使用就會出現(xiàn)混亂的場景，如果你沒有合理的梳理，就會導(dǎo)致輔助色異?；靵y。

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

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

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

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

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

2. 輔助色的設(shè)定

那涉及到這么多顏色，如何設(shè)定？

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

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

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

作者： CE青年Youthce