2020-12-31 資深UI設(shè)計(jì)者
前文的原子設(shè)計(jì)中我曾經(jīng)講過，原子是構(gòu)成所有元素的最小單元，沒有辦法再被細(xì)分。它通常對(duì)應(yīng)著產(chǎn)品設(shè)計(jì)中的通用樣式及構(gòu)成組件的最小顆粒。而顏色，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的原子之一，在心智模型中占據(jù)了關(guān)鍵的地位。
我們看到紅色能夠感受到熱情、興奮和危險(xiǎn)，看到綠色時(shí)往往就感受到安全、自然和平靜?？梢哉f，顏色調(diào)動(dòng)我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。
接下來，我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping（以下簡稱DS），來進(jìn)行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點(diǎn)啟發(fā)。
大綱走起：
CROV DS是針對(duì)美國市場的線上一件代發(fā)平臺(tái)（類似阿里巴巴的一件代發(fā)業(yè)務(wù)），屬于跨境電商B2C行業(yè)。平臺(tái)幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時(shí)間靈活可控，讓用戶專注于銷售本身。
目前CROV DS業(yè)務(wù)日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴(kuò)展，臨時(shí)增加的顏色很容易被遺漏在某個(gè)不知名角落的畫板中，導(dǎo)致一次性用色的風(fēng)險(xiǎn)。（tips：一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計(jì)）
而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一，一處地方色彩各異的現(xiàn)象比比皆是。
因此，我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系，讓業(yè)務(wù)從用色上達(dá)成基本的一致統(tǒng)一。
我們設(shè)計(jì)師在定義顏色時(shí)，更多的是直接在色板上進(jìn)行取色，但這樣的取色方法存在諸多弊端。
增加決策
可能很多設(shè)計(jì)師選色時(shí)會(huì)有這種情況，一會(huì)覺得這個(gè)顏色臟了，一會(huì)又覺得那個(gè)顏色太刺眼了，有時(shí)候完美主義作祟，為了得到一個(gè)滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時(shí)更為嚴(yán)重。
其實(shí)這和不用網(wǎng)格系統(tǒng)來布局是一個(gè)道理。（注：網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法，后面會(huì)講～）
色板中取色的范圍趨近于無窮。如果將HSB模式下的單個(gè)H、S和B作為一個(gè)最小單元格，那么我們可以選擇的格子高達(dá)數(shù)百萬個(gè)。顆粒度過細(xì)的情況（其實(shí)根本就沒有顆粒度）導(dǎo)致我們在取色時(shí)往往會(huì)被迫進(jìn)行反復(fù)的微調(diào)和嘗試。
缺乏秩序和邏輯性
直接在色板中取色主要依賴的是”直覺“這種相對(duì)感性的存在。
比如一個(gè)按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個(gè)狀態(tài)，如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度，最后的配色方案其實(shí)缺乏內(nèi)在的邏輯性和秩序性。
難以復(fù)用
對(duì)于B端這些偏后臺(tái)工具、場景復(fù)雜的業(yè)務(wù)，顏色運(yùn)用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項(xiàng)目及業(yè)務(wù)場景需要用到新的顏色時(shí)，之前定義的顏色難以復(fù)用，導(dǎo)致我們需要重新定義顏色。而且這種相對(duì)主觀的方法也缺乏說服力，難以體現(xiàn)專業(yè)度。
而如果設(shè)計(jì)師提前定義好一套色彩體系，一方面只需要在對(duì)應(yīng)的色板中選擇即可，大大減少了設(shè)計(jì)決策。另一方面色彩體系所提供的不同色彩梯度也便于各個(gè)需求、業(yè)務(wù)場景的復(fù)用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設(shè)計(jì)師依賴”直覺“所帶來的主觀和不可控。
Alipay Design團(tuán)隊(duì)提過：
以同色系配色為主導(dǎo)，多色搭配為輔。
同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中，具有非常好的延展性。
接下來我以DS項(xiàng)目為例進(jìn)行色彩體系探索——
首先，所有的色彩模型統(tǒng)一采用HSB模型進(jìn)行，正如Ant Design設(shè)計(jì)團(tuán)隊(duì)說的那樣，這個(gè)模型利于調(diào)整色彩時(shí)對(duì)顏色有明確的心理預(yù)期，同時(shí)便于團(tuán)隊(duì)溝通。
這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點(diǎn)說，它們分別代表了明色區(qū)域和暗色區(qū)域）
Crov Dropshipping基于其時(shí)間自由靈活、可兼職副業(yè)、成本風(fēng)險(xiǎn)低的業(yè)務(wù)特征，使得對(duì)應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當(dāng)中。他們不同于我們常規(guī)認(rèn)知里那類傳統(tǒng)的retailer（線下實(shí)體零售商），大部分的DSer擁有自己的事業(yè)和工作，為了賺取外快，將其當(dāng)做自己的副業(yè)。因此，年輕化是這類用戶群的主要標(biāo)簽。
所以，我們采用了高飽和度、偏向藍(lán)色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。
為了覆蓋掉Crov DS本身復(fù)雜的前后臺(tái)業(yè)務(wù)場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。
因此，這里以品牌色色相為基礎(chǔ)，在HSB 360°色環(huán)中，對(duì)色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環(huán)彩帶。
后續(xù)我們的顏色體系就在彩帶上的24個(gè)顏色上面進(jìn)行提取。
品牌色同色系是指，根據(jù)品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達(dá)了品牌性，多個(gè)梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場景，也便于多信息的層級(jí)劃分。
而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。
sketch中可以直接將這套算法可視化處理，便于設(shè)計(jì)師直接生成所有顏色的色階。需要注意的是明色區(qū)（就是上方橫向的那塊取色區(qū)域，白色至純色時(shí)S由0過渡至100）和暗色區(qū)（右側(cè)縱向的取色區(qū)域，純色至黑色時(shí)B由100過渡至0）遵循了兩種不同的規(guī)則，具體規(guī)則見下：
當(dāng)S飽和度變化時(shí)（明色區(qū)域），S值以S/5的結(jié)果值為一個(gè)增量進(jìn)行遞減，B值以(100-B)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個(gè)增量分別是16和0。
品牌色在明色區(qū)的下兩個(gè)色階對(duì)應(yīng)的HSB參數(shù)就是（250，64，100），（250，48，100），以此類推。
而當(dāng)B明度產(chǎn)生變化時(shí)（暗色區(qū)域），S值以(100-S)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增，而B值以B/5的結(jié)果值為一個(gè)增量進(jìn)行遞減。得出的兩個(gè)增量分別為4和20。
品牌色在暗色區(qū)的下兩個(gè)顏色對(duì)應(yīng)的HSB參數(shù)即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。
根據(jù)這兩個(gè)定義規(guī)則推導(dǎo)出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。
我們使用品牌色來傳達(dá)品牌價(jià)值，還需要輔助色來滿足多樣化業(yè)務(wù)場景的需要，對(duì)用戶進(jìn)行不同的情緒引導(dǎo)，同時(shí)也可以緩解用戶對(duì)單一主色產(chǎn)生的視覺疲勞。
輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對(duì)比色和互補(bǔ)色。
結(jié)果見下：
首先，由于相差15°的同類色與品牌色差距過小，色相對(duì)比感微弱，傳遞的調(diào)性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會(huì)作為功能色使用，這里同樣直接舍棄。
類似色
類似色即色相差在30度左右的顏色，屬于較弱對(duì)比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似，并且色彩體系中需要一個(gè)典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。
中差色
中差色即色相相差90度左右的顏色，屬于中等對(duì)比色。H340偏粉，與常規(guī)紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對(duì)H340進(jìn)行了色相校正，調(diào)整至H355。
對(duì)比色
對(duì)比色即色相相差120度左右的顏色，屬于強(qiáng)對(duì)比色。最后得出的H130調(diào)性與中差色的H160過于類似，直接舍棄。H10與H340調(diào)性類似，但是可以向橙色系發(fā)展，所以微調(diào)到同類色進(jìn)行色相校正。
互補(bǔ)色
互補(bǔ)色即色相相差180度左右的顏色，屬于高強(qiáng)度對(duì)比色。最后得出的H70偏綠，這里同樣進(jìn)行了色相校正，將其調(diào)整為H55。
最后，得出了共計(jì)5種輔助色。不過這些輔助色并不能直接使用，還需要進(jìn)行感官明度的校正。
感官明度校正方法來自支付寶設(shè)計(jì)團(tuán)隊(duì)，這是是確認(rèn)輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”，即發(fā)光度。品牌色即輔助色的發(fā)光度不一致，就會(huì)導(dǎo)致視覺上會(huì)有明顯的明暗差別。所以，我們需要通過發(fā)光度來進(jìn)行最終的顏色校正。
明度較高的灰色意味著高發(fā)光度，明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變，我們對(duì)其他輔助色進(jìn)行微調(diào)。
我們只需要將那些視覺明暗差距明顯的顏色進(jìn)行調(diào)整。注意，并非所有的顏色都要調(diào)整到品牌色的感官明度，這些值僅僅是一個(gè)參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。
最后得到校正后的如下輔助色。藍(lán)色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規(guī)、成功、警告和報(bào)錯(cuò)狀態(tài)。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個(gè)層級(jí)。
與品牌色一樣，使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述～
CROV DS的文本色并非純粹的中性色，我們通過加入一點(diǎn)點(diǎn)品牌色來讓文本呈現(xiàn)色彩傾向，以此提升頁面的活力及年輕感，同時(shí)也可以讓界面更加耐看，減緩B端產(chǎn)品長期使用時(shí)的視覺疲勞。
具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級(jí)中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個(gè)層次的文本色。當(dāng)然，中性文本色你也可以參考antDesign中通過透明度進(jìn)行定義的方法，不一定需要按照某個(gè)具體色值來。
我們必須要承認(rèn)的現(xiàn)實(shí)是，設(shè)計(jì)師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境，有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測試，在很多的情況下存在體驗(yàn)降低的風(fēng)險(xiǎn)。
而WCAG（Web Content Accessibility Guideline，Web內(nèi)容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩(wěn)定理解的（Understandable）、穩(wěn)定耐用的（Robust）。
而顏色則正是對(duì)應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對(duì)比度，使之更易被用戶感知識(shí)別。
WCAG顏色對(duì)比度無障礙的兩個(gè)標(biāo)準(zhǔn)分別為：「1.4.3條例：最小對(duì)比度標(biāo)準(zhǔn)」和「1.4.6條例：加強(qiáng)對(duì)比度標(biāo)準(zhǔn)」，分別對(duì)應(yīng)著AA級(jí)和AAA級(jí)。
AA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有4.5：1的對(duì)比度，大文本與背景至少有3：1的對(duì)比度
AAA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有7：1的對(duì)比度，大文本與背景至少有4.5：1的對(duì)比度
（這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本）
這兩個(gè)條例被大廠們廣泛運(yùn)用到了產(chǎn)品的顏色標(biāo)準(zhǔn)當(dāng)中。
比如MD規(guī)范中的文本移動(dòng)性規(guī)范標(biāo)準(zhǔn)中的數(shù)據(jù)就是來自WCAG的1.4.3條例標(biāo)準(zhǔn)。
同樣，阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標(biāo)和WCAG本質(zhì)上也是一樣。
1. 顏色對(duì)比度驗(yàn)證
那該如何驗(yàn)證我們的顏色符合這倆標(biāo)準(zhǔn)呢？
easy。這里直接上個(gè)網(wǎng)址，https://contrast-ratio.com/#%23373247-on-%23fff
我們分別在背景及文本錄入色值，即可得到最終的對(duì)比度數(shù)據(jù)。比如我錄入了白色和一級(jí)文本色數(shù)值，最后的12.28即兩者的對(duì)比度，嗯，達(dá)到了AAA級(jí)標(biāo)準(zhǔn)。
一樣的步驟，分別測試了其他文本色的對(duì)比度（產(chǎn)品無暗色模式，所以此處僅驗(yàn)證白色背景下的顏色對(duì)比度），分別達(dá)到了7.59、4.71和2.38?？梢钥闯龀?.38外，其他文本色的對(duì)比度均符合可見度標(biāo)準(zhǔn)。
不過WCAG中指出，一些特殊情況下的文本無對(duì)比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對(duì)比度對(duì)應(yīng)的文本色主要用于暗提示，因此這種情況就可以無視掉了~
色彩體系的初步探索到此結(jié)束了，不過篇幅原因并沒有面面俱到，比如漸變色、實(shí)際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com