色彩是我們感知世界的重要媒介，在設(shè)計(jì)中僅次于功能的另一要素。色彩與我們的生活息息相關(guān)，怎樣科學(xué)配色、靈活用色成了絕大部分設(shè)計(jì)師的難題。

作為一名擁有多年擰螺絲經(jīng)驗(yàn)的設(shè)計(jì)師，不免每天都會(huì)和色彩打交道，在配色的過(guò)程中，你是否也曾遇到過(guò)以下困擾：每次做項(xiàng)目隨便吸色？

盲目運(yùn)用色卡？

配色總是看起來(lái)不舒服？

色感差，天天被老板和同事Diss？

…

接下來(lái)，請(qǐng)你花幾分鐘看看谷歌等其他大廠，都在用的系統(tǒng)配色方案。以下以船長(zhǎng)BI為例，做品牌色彩的規(guī)范引導(dǎo)。

船長(zhǎng)BI： 
深圳船奇科技有限公司-是中國(guó)專業(yè)的跨境電商SAAS系統(tǒng)服務(wù)企業(yè)。旗下船長(zhǎng)BI，專注亞馬遜精細(xì)化運(yùn)營(yíng)與大數(shù)據(jù)分析，為不同階段、不同規(guī)模的企業(yè)提供全場(chǎng)景多維度分析，一站式精準(zhǔn)推廣和全鏈路供應(yīng)鏈協(xié)同管理，幫助企業(yè)實(shí)現(xiàn)數(shù)智化運(yùn)營(yíng)。同是船奇科技也是亞馬遜SPN服務(wù)商。

01

科學(xué)的系統(tǒng)配色

1-1 設(shè)計(jì)主張

船長(zhǎng)BI系統(tǒng)是亞馬遜精準(zhǔn)化運(yùn)營(yíng)及大數(shù)據(jù)下鉆分析的高效化共同體。從單功能運(yùn)作到多功能融合，再到大數(shù)據(jù)多元化產(chǎn)品下鉆、閉環(huán)及溯源，打破了亞馬遜跨境運(yùn)營(yíng)服務(wù)商單點(diǎn)運(yùn)作的局限。我們希望新的品牌色，能夠?yàn)榇L(zhǎng)BI在跨境企業(yè)中營(yíng)造更加權(quán)威、高效向數(shù)智化轉(zhuǎn)型的視覺(jué)感知。

船長(zhǎng)BI 設(shè)計(jì)語(yǔ)言：英文Captain BI Design Language簡(jiǎn)稱CapDesign。

經(jīng)過(guò)團(tuán)隊(duì)的諸多調(diào)研到佐證,我們將品牌標(biāo)準(zhǔn)色太平洋藍(lán)(Pacific Blue)，升級(jí)為更加科學(xué)、權(quán)威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業(yè)中具有更多神秘的數(shù)智化意味，在實(shí)際應(yīng)用中隱含著更多的生機(jī)和信任，表明了船長(zhǎng)對(duì)進(jìn)入數(shù)智化運(yùn)營(yíng)新挑戰(zhàn)的氣魄。同時(shí)，品牌色的升級(jí)能夠快速區(qū)別于競(jìng)品，形成船長(zhǎng)BI獨(dú)特的色彩感知，通過(guò)色彩感知形成品牌記憶。

色彩命名源自潘通Pantone。

1-2 創(chuàng)建調(diào)色板

人的視覺(jué)系統(tǒng)在辨別顏色時(shí)，不會(huì)把色光分解成RGB或者CMYK幾種單獨(dú)顏色，而是按照色相度、純度和明度來(lái)判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個(gè)參數(shù)，只對(duì)其他兩個(gè)參數(shù)做改變或者只改動(dòng)其中的一個(gè)參數(shù)，符合人對(duì)色彩差異幅度的感知，而RGB、CMYK都是牽一發(fā)動(dòng)全身的節(jié)奏。↗

我們以CapDesign品牌基準(zhǔn)色#2AC5D4（H=185\ S=80\ B=83) 為起始點(diǎn)，S飽和度、B明度保持不變，H色相以185°為起點(diǎn)，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個(gè)色板是我們選取輔助色的重要依據(jù)。

02

拓展豐富的輔助色

2-1 以鄰近色、互補(bǔ)色、對(duì)比色為原則，選擇絢麗多彩的輔助色↗

為了保有更多CapDesign 的品牌基調(diào)，我們選擇了相對(duì)較多的鄰近色，以保證整體色韻的清爽感和數(shù)智科技化意味。并利用對(duì)比色及互補(bǔ)色擴(kuò)展色相，選擇更加豐富多元的輔助色，使其色相對(duì)比鮮明，以保證能色彩夠滿足各種復(fù)雜場(chǎng)景。

Q：色相位到底選擇多少個(gè)合適？ 
A：有的產(chǎn)品選擇7個(gè)色相位，有的產(chǎn)品選擇10幾個(gè)色相位，都是允許的，選擇的依據(jù)取決于： 
1.色彩對(duì)比明顯，選擇色相數(shù)少；色彩對(duì)比柔和，選擇色相數(shù)多； 
2.產(chǎn)品功能的場(chǎng)景簡(jiǎn)單，選擇色相數(shù)少；產(chǎn)品功能的場(chǎng)景復(fù)雜，選擇色相數(shù)多； 

Captain BI 是亞馬遜運(yùn)營(yíng)與大數(shù)據(jù)集成，功能交叉比對(duì)及數(shù)據(jù)可視場(chǎng)景復(fù)雜，為迎合業(yè)務(wù)發(fā)展需要，CapColor選擇的色相位為13個(gè)。

2-2 校正輔助色(波長(zhǎng)和振幅)

雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于每個(gè)色相的波長(zhǎng)各不相同，導(dǎo)致色彩在感官感受上存在差異。

在可見(jiàn)光波譜當(dāng)中，波長(zhǎng)越長(zhǎng)其穿透力就越強(qiáng)；紅色的波長(zhǎng)是最長(zhǎng)，穿透力就最強(qiáng)，感知度最高。↗

為了讓不同色相在視覺(jué)感官上看起來(lái)更加協(xié)調(diào)，需要對(duì)色板的明度和飽和度進(jìn)行反復(fù)的校驗(yàn)，以保證視覺(jué)感官更加和諧舒適。

校正原則 
A.色相最好維系在同類色(色相環(huán)中15°夾角內(nèi)的顏色)↗ 
B.色相感官保持平衡(明度和飽和度) 
C.保證視障群體的識(shí)別度(WCAG 對(duì)比度) 
調(diào)色的技巧 
淺灰色調(diào): 飽和度減少(S↓)，明度增加(B↑) 
深色色調(diào): 飽和度減少(S↑)，明度增加(B↓) 

使用HSB調(diào)色模式時(shí)，可以參考以上規(guī)律，能讓快速調(diào)和想要的顏色。校正后得到了以下色域清晰、對(duì)比明顯的主色及輔助色。并且針對(duì)視障群體進(jìn)行了色彩測(cè)試。

2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來(lái)滿足不同場(chǎng)景下顏色的應(yīng)用。建立色彩層級(jí)，以提升品牌感知，達(dá)到信息傳達(dá)辨識(shí)、強(qiáng)化界面層級(jí)等作用。

在梯度色板系統(tǒng)中，很多配色產(chǎn)品都是使用Tints and shades系統(tǒng)：通過(guò)在原有色相的基礎(chǔ)上增加白色或者增加黑色，來(lái)改變它的明度和飽和度，形成梯度色板。但這種方法得到的調(diào)色板往往比較刻板生硬。CapColor在Material Design-Color的基礎(chǔ)上進(jìn)行了細(xì)化，構(gòu)建更有層次感、空間感、立體感的梯度色板。

CapColor梯度色板：

1.在Primary的基礎(chǔ)上，使用Tints and shades系統(tǒng)找到Light和Dark：

Light=(White+primary) 95%疊色； 
Dark=Black 60%疊色； 
Primary=原色相。

2.結(jié)合Material Design-Color實(shí)踐，得到CapDesign梯度色板及相應(yīng)的參數(shù)。

CapColor選擇10階梯度，對(duì)比穩(wěn)健，更能凸顯船長(zhǎng)系列產(chǎn)品權(quán)威和成熟的形象；9階梯度相對(duì)生硬跳躍，12階梯度過(guò)于柔和平滑。

有的色相穿透性強(qiáng)、飽和度高，所以還需要進(jìn)一步的校驗(yàn)，如藍(lán)色 RYB：

運(yùn)用以上的方法，得到CapDesign豐富的調(diào)色板，為后期業(yè)務(wù)做支撐：

03

易用的中性灰色

Captain BI系統(tǒng)大部分是由容器、面板、列表、卡片等其他組件及元素構(gòu)成。中性色為系統(tǒng)銳化布局、表達(dá)邊界、建立信息層次起到?jīng)Q定性作用。

3-1 中性色

中性色的搭建同時(shí)滿足暗黑模式、換膚及印刷等諸多場(chǎng)景，故在實(shí)現(xiàn)時(shí)按照透明度的呈現(xiàn)方式。

3-2 黑綠松石灰色

中性黑綠松石灰色解決更多復(fù)雜的場(chǎng)景，如表格和表單雙底色、圖標(biāo)的顏色等。中性黑綠松石灰色增強(qiáng)布局、區(qū)別背景，起到強(qiáng)化信息層次的作用。

黑綠松石灰在中性灰色的基礎(chǔ)上增加色相和飽和度，這樣得到的藍(lán)灰色還是有些許生硬，還需要對(duì)飽和度和明度進(jìn)行微調(diào)，讓顏色更有層次感。

中性黑綠松石灰的方法：

在配色模式HSB中： 
H=185(Brand Color)； 
S=3(必要時(shí)微調(diào))； 
B=保持不變。

3-3 WCAG 2.1測(cè)試

為保證視障用戶的使用，保證足夠的對(duì)比度，CapDesign 遵守 WCAG 2.1 的標(biāo)準(zhǔn)，對(duì)調(diào)色板對(duì)比度進(jìn)行了可用性測(cè)試，為后期靈活用色奠定基礎(chǔ)。以中性灰色為例：

WCAG 2.1中規(guī)范了A、AA、AAA的對(duì)比值范圍及使用場(chǎng)景，感興趣的朋友可以前往WCAG 2.1官網(wǎng)詳細(xì)了解，在這不在贅述。

3-4 場(chǎng)景案列

實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，以下通表格的微交互對(duì)中性色進(jìn)行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺(jué)及信息識(shí)別困難。通過(guò)交叉運(yùn)用中性灰色，明顯右邊的表格結(jié)構(gòu)、信息層級(jí)得到強(qiáng)化，視覺(jué)更聚焦。

結(jié)語(yǔ)

主觀情感的取色，一開(kāi)始可能沒(méi)遇到什么大問(wèn)題，但隨著產(chǎn)品不斷完善，主觀取色往往不能滿足業(yè)務(wù)發(fā)展訴求?？茖W(xué)的系統(tǒng)配色，真正滿足和服務(wù)設(shè)計(jì)；同時(shí)對(duì)設(shè)計(jì)一致性及提升團(tuán)隊(duì)效率起到肯定的作用。

通過(guò)這個(gè)漫長(zhǎng)的配色過(guò)程，你是否重新審視過(guò)去設(shè)計(jì)中的配色方法？希望對(duì)配色困擾的你有所幫助。

色彩系統(tǒng)中的系統(tǒng)配色部分已經(jīng)完成，接下來(lái)我們將死熬，續(xù)更系統(tǒng)配色在實(shí)際項(xiàng)目中的應(yīng)用，做到科學(xué)配色、靈活用色。