2021-3-19 ui設(shè)計(jì)分享達(dá)人
B 端設(shè)計(jì)也是 UI 設(shè)計(jì)的一種，它的輸出環(huán)境只存在于電子屏幕中，所以統(tǒng)一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因?yàn)槊總€(gè)像素點(diǎn)是由 R 紅色、G 綠色、B 藍(lán)色三種顏色的不同色彩強(qiáng)度混合而成。所以 RGB 色的表示可以由 3 個(gè)顏色各自使用 0-255 中的數(shù)值來呈現(xiàn)，比如：
這是 RGB 色彩最標(biāo)準(zhǔn)的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計(jì)算機(jī)中，為了方便記錄和調(diào)用，使用了一串十六進(jìn)制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進(jìn)制碼進(jìn)行復(fù)用，你就可以在任何文件、設(shè)備中獲得相同的色彩。
但在實(shí)際顯示效果上，不同的系統(tǒng)、設(shè)備、瀏覽器都有自己的調(diào)色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關(guān)行業(yè)為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環(huán)境下，能實(shí)現(xiàn)最接近的色彩效果。
那么安全色都有哪些呢？網(wǎng)上有很多地方都有對(duì)應(yīng)的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個(gè)鏈接中的網(wǎng)頁工具，幫助我們快速實(shí)現(xiàn)選色和復(fù)制色彩代碼的操作。
網(wǎng)站鏈接：https://www.materialpalette.com/colors
當(dāng)然，設(shè)計(jì) B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會(huì)提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設(shè)計(jì)類似，我們主要的目標(biāo)就是在項(xiàng)目設(shè)計(jì)過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應(yīng)用到合理的位置中去。
只是，針對(duì) C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學(xué)習(xí) B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會(huì)干擾我們對(duì)界面的實(shí)用和對(duì)信息的識(shí)別、檢索效率，除非是一些政績工程用來當(dāng) “花瓶” 的數(shù)據(jù)大屏，否則我們首先要排除顏色過度應(yīng)用的選項(xiàng)。
那么什么主色、輔助色、中性色，我們先簡單做個(gè)說明。
主色，即你這套產(chǎn)品中的品牌色彩，是整套項(xiàng)目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關(guān)聯(lián)，比如騰訊云的藍(lán)色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統(tǒng)中進(jìn)行強(qiáng)調(diào)、標(biāo)識(shí)、區(qū)分的彩色系統(tǒng)。品牌或者 C 端設(shè)計(jì)可能會(huì)通過輔助色和主色搭配實(shí)現(xiàn)個(gè)性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應(yīng)用的目的性更強(qiáng)，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對(duì)應(yīng)的功能寓意場(chǎng)景。
中性色，則是這套系統(tǒng)中色彩使用的相關(guān)灰色，因?yàn)榛疑菦]有色相、冷暖的區(qū)別，所以我們也稱它們?yōu)橹行陨Ｖ饕獞?yīng)用在文字、背景、分割線等基礎(chǔ)元素中。
B 端的配色，即了解這三個(gè)色彩類型以后，能正確制定合理的顏色，并應(yīng)用進(jìn)項(xiàng)目中去。下面，我們分別對(duì)每個(gè)類別進(jìn)行簡單的講解。
1. 主色的應(yīng)用規(guī)則
B 端的主色也就是產(chǎn)品的品牌色，多數(shù) B 端項(xiàng)目中，主色不需要 B 端設(shè)計(jì)師自己選，在項(xiàng)目開始前就會(huì)有相關(guān)的品牌色、LOGO，直接復(fù)制色號(hào)即可。
和 C 端配色最大的不同是，品牌色在這里很多時(shí)候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設(shè)品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內(nèi)涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。
在 B 端設(shè)計(jì)中，主色的應(yīng)用是最不需要大面積填充的，即使它是常見、耐用的藍(lán)色、橙色，主色的填充主要只應(yīng)用在下面這些類型內(nèi)容中：
2. 輔助色的應(yīng)用規(guī)則
有了主色，我們就要為項(xiàng)目添加其它色彩了。
B 端彩色的搭配原則只有一個(gè)，那就是 —— 能省就省。我們不是設(shè)計(jì)一個(gè)讓用戶發(fā)出感嘆的色彩豐富絢麗、細(xì)節(jié)眾多的視覺平面，而是設(shè)計(jì)一個(gè)用來使用的軟件系統(tǒng)。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項(xiàng)目中敬而遠(yuǎn)之。
用專業(yè)術(shù)語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項(xiàng)目添加的輔助色類型其實(shí)也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經(jīng)有畫面了。我們會(huì)為正確使用綠色、鏈接使用藍(lán)色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經(jīng)驗(yàn)吻合，沒有識(shí)別的成本。
而如果為了個(gè)性而個(gè)性，對(duì)輔助用色另辟蹊徑，相當(dāng)于在異國自駕時(shí)使用藍(lán)燈行棕色停的系統(tǒng)，異國風(fēng)情是有了，說翻車也就翻車了。
所以，針對(duì) B 端輔助色的使用上，如果自己沒有把握和經(jīng)驗(yàn)，可以套用下方我們整理的 RGB 安全色，填充到頁面對(duì)應(yīng)的元素中去：
用谷歌色卡各選 3 個(gè)同類色出來，并進(jìn)行標(biāo)記
3. 中性色的應(yīng)用規(guī)則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項(xiàng)目，同一個(gè)界面中都包含了多個(gè)模塊、層級(jí)，以及數(shù)之不盡的文本字段。在這么多的內(nèi)容中，我們要根據(jù)模塊、文字的權(quán)重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數(shù)量根本無法統(tǒng)計(jì)，非常的混亂。
所以，為了避免這樣的情況，我會(huì)建議從開始設(shè)計(jì)之前就定一套中性色，并將它們添加到設(shè)計(jì)軟件的色彩畫板中，每次填充中性色的時(shí)候直接從這個(gè)色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對(duì)偏冷的中性色是耐受的（舒適），所以專業(yè)的 B 端項(xiàng)目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區(qū)域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時(shí)，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標(biāo)準(zhǔn)，全黑時(shí) B 值為 0，白色為 100，每個(gè)定義出來的灰度都可以用 B 值作為代號(hào)，如 B20、B40 等。
我們根據(jù)這個(gè)標(biāo)準(zhǔn)，定義出 5-8 級(jí)的中性色，就可以滿足項(xiàng)目中的大多數(shù)場(chǎng)景。
雖然會(huì)有一些項(xiàng)目會(huì)使用透明度來制定灰度等級(jí)，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場(chǎng)景和實(shí)際色值定義區(qū)分開來，只有在色彩的不同狀態(tài)（選中/失效等）下再應(yīng)用透明度。
有關(guān) B 端配色的部分也就先說到這里，B 端配色遠(yuǎn)遠(yuǎn)比 C 端更簡單，也更枯燥?？梢允褂玫纳史秶?，套路也更一致。我們要做的，就是將它們合理進(jìn)行填充。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com