B 端設(shè)計也是 UI 設(shè)計的一種，它的輸出環(huán)境只存在于電子屏幕中，所以統(tǒng)一使用 RGB 色彩顯示模式即可。

RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍(lán)色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數(shù)值來呈現(xiàn)，比如：

這是 RGB 色彩最標(biāo)準(zhǔn)的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調(diào)用，使用了一串十六進(jìn)制的代碼來指代具體的 RGB 色。

理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進(jìn)制碼進(jìn)行復(fù)用，你就可以在任何文件、設(shè)備中獲得相同的色彩。

但在實際顯示效果上，不同的系統(tǒng)、設(shè)備、瀏覽器都有自己的調(diào)色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……

相關(guān)行業(yè)為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環(huán)境下，能實現(xiàn)最接近的色彩效果。

那么安全色都有哪些呢？網(wǎng)上有很多地方都有對應(yīng)的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。

我們可以通過下面這個鏈接中的網(wǎng)頁工具，幫助我們快速實現(xiàn)選色和復(fù)制色彩代碼的操作。

網(wǎng)站鏈接：https://www.materialpalette.com/colors

當(dāng)然，設(shè)計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。

第 2 件事，自然就是講講該怎么配色了。和 C 端設(shè)計類似，我們主要的目標(biāo)就是在項目設(shè)計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應(yīng)用到合理的位置中去。

只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學(xué)習(xí) B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。

過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當(dāng) “花瓶” 的數(shù)據(jù)大屏，否則我們首先要排除顏色過度應(yīng)用的選項。

那么什么主色、輔助色、中性色，我們先簡單做個說明。

主色，即你這套產(chǎn)品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關(guān)聯(lián)，比如騰訊云的藍(lán)色，阿里云的橙色，七麥的綠色。

輔助色，則是用來在系統(tǒng)中進(jìn)行強調(diào)、標(biāo)識、區(qū)分的彩色系統(tǒng)。品牌或者 C 端設(shè)計可能會通過輔助色和主色搭配實現(xiàn)個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應(yīng)用的目的性更強，是完全貼合操作效率來制定的。

比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應(yīng)的功能寓意場景。

中性色，則是這套系統(tǒng)中色彩使用的相關(guān)灰色，因為灰色是沒有色相、冷暖的區(qū)別，所以我們也稱它們?yōu)橹行陨Ｖ饕獞?yīng)用在文字、背景、分割線等基礎(chǔ)元素中。

B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應(yīng)用進(jìn)項目中去。下面，我們分別對每個類別進(jìn)行簡單的講解。

1. 主色的應(yīng)用規(guī)則

B 端的主色也就是產(chǎn)品的品牌色，多數(shù) B 端項目中，主色不需要 B 端設(shè)計師自己選，在項目開始前就會有相關(guān)的品牌色、LOGO，直接復(fù)制色號即可。

和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。

假設(shè)品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內(nèi)涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。

在 B 端設(shè)計中，主色的應(yīng)用是最不需要大面積填充的，即使它是常見、耐用的藍(lán)色、橙色，主色的填充主要只應(yīng)用在下面這些類型內(nèi)容中：

• LOGO
• 關(guān)鍵按鈕
• 選中狀態(tài)
• 高亮文本、圖標(biāo)
• 標(biāo)簽用色

2. 輔助色的應(yīng)用規(guī)則

有了主色，我們就要為項目添加其它色彩了。

B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設(shè)計一個讓用戶發(fā)出感嘆的色彩豐富絢麗、細(xì)節(jié)眾多的視覺平面，而是設(shè)計一個用來使用的軟件系統(tǒng)。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠(yuǎn)之。

用專業(yè)術(shù)語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。

而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：

• 正確、通過
• 鏈接、選中
• 警示、錯誤
• 提醒、注意
• 失效、未完成

相信看到這里，你們腦海中已經(jīng)有畫面了。我們會為正確使用綠色、鏈接使用藍(lán)色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經(jīng)驗吻合，沒有識別的成本。

而如果為了個性而個性，對輔助用色另辟蹊徑，相當(dāng)于在異國自駕時使用藍(lán)燈行棕色停的系統(tǒng)，異國風(fēng)情是有了，說翻車也就翻車了。

所以，針對 B 端輔助色的使用上，如果自己沒有把握和經(jīng)驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應(yīng)的元素中去：

用谷歌色卡各選 3 個同類色出來，并進(jìn)行標(biāo)記

• 正確、通過：綠色
• 鏈接、選中：藍(lán)色
• 警示、錯誤：紅色
• 提醒、注意：黃色
• 失效、未完成：藍(lán)灰

3. 中性色的應(yīng)用規(guī)則

B 端的輔助色找起來不難，難的是中性色的使用和搭配上。

任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數(shù)之不盡的文本字段。在這么多的內(nèi)容中，我們要根據(jù)模塊、文字的權(quán)重，選擇合理的中性色填充。

新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數(shù)量根本無法統(tǒng)計，非常的混亂。

所以，為了避免這樣的情況，我會建議從開始設(shè)計之前就定一套中性色，并將它們添加到設(shè)計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。

那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業(yè)的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區(qū)域的分布，就并不是全灰的。

所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標(biāo)準(zhǔn)，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。

我們根據(jù)這個標(biāo)準(zhǔn)，定義出 5-8 級的中性色，就可以滿足項目中的大多數(shù)場景。

雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區(qū)分開來，只有在色彩的不同狀態(tài)（選中/失效等）下再應(yīng)用透明度。

結(jié)尾

有關(guān) B 端配色的部分也就先說到這里，B 端配色遠(yuǎn)遠(yuǎn)比 C 端更簡單，也更枯燥。可以使用的色彩范圍更小，套路也更一致。我們要做的，就是將它們合理進(jìn)行填充。

文章來源：站酷   作者：百度MEUX

藍(lán)藍(lán)設(shè)計( www.li-bodun.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)