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