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

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

想讓大家明白：

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

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

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

一、品牌色

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

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

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

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

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

但如果顏色為 紅色、橙色、黃色，處理起來(lái)則會(huì)比較麻煩，需要考慮品牌色與輔助色相混淆的問(wèn)題。

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

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

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

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

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

2. 品牌色的使用

在品牌色當(dāng)中，它的使用場(chǎng)景不同，會(huì)衍生出不同的顏色色值，需要在頁(yè)面當(dāng)中使用。我們把這部分衍生出來(lái)的顏色叫做色階。

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

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

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

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

這種做法整體會(huì)比較簡(jiǎn)單，但操作起來(lái)會(huì)存在相應(yīng)的誤差，因?yàn)閷?duì)于顏色只修改了它的明度，并沒(méi)有對(duì)色度進(jìn)行修改，會(huì)稍稍有些不合理。

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

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

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

3. 品牌色的使用面積

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

其實(shí)在頁(yè)面當(dāng)中，我們不需要哪哪都放品牌色～

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

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

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

因?yàn)楝F(xiàn)在的 B 端產(chǎn)品，大多數(shù)都是以藍(lán)色為主，你會(huì)發(fā)現(xiàn)我們不能做到 “看到某一個(gè)顏色，就能立馬想起你來(lái)～”

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

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

二、中性色

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

因?yàn)閷?duì)于 B 端頁(yè)面而言，本質(zhì)上就是頁(yè)面的“排版設(shè)計(jì)”，所以使用合理的中性色能夠讓用戶更容易獲取信息。

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

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

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

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

因?yàn)樯钌珔^(qū)域的顏色大多都是用在 標(biāo)題、正文 等顏色，這部分需要強(qiáng)調(diào)頁(yè)面的識(shí)別性，因此顏色越黑，用戶閱讀的難度就會(huì)越低。

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

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

因?yàn)闇\色區(qū)域大多是用在 描邊、背景 等輔助信息的區(qū)域，這部分就需要減少顏色的占比，使得中性色對(duì)頁(yè)面的干擾減少。比如太多灰色會(huì)造成頁(yè)面太散、和文字進(jìn)行搭配就會(huì)很難識(shí)別，所以我們?cè)谑褂蒙暇蜁?huì)減少顏色色值。

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

2. 中性色的原理

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

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

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

三、輔助色

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

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

1. 輔助色的要點(diǎn)

這里想問(wèn)問(wèn)大家，你是否遇到這種情況。

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

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

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

進(jìn)一步描述不同的顏色，具體會(huì)有哪些含義

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

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

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

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

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

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

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

歡迎關(guān)注作者的微信公眾號(hào)： CE青年Youthce