2022-9-2 博博
7秒的消費決策中，67%的決策取決于色彩。
色彩是我們感知世界的重要媒介，在設計中僅次于功能的另一要素。色彩與我們的生活息息相關，怎樣科學配色、靈活用色成了絕大部分設計師的難題。
作為一名擁有多年擰螺絲經驗的設計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？
盲目運用色卡？
配色總是看起來不舒服？
色感差，天天被老板和同事Diss？
…
接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統配色方案。以下以船長BI為例，做品牌色彩的規范引導。
船長BI：
深圳船奇科技有限公司-是中國專業的跨境電商SAAS系統服務企業。旗下船長BI，專注亞馬遜精細化運營與大數據分析，為不同階段、不同規模的企業提供全場景多維度分析，一站式精準推廣和全鏈路供應鏈協同管理，幫助企業實現數智化運營。同是船奇科技也是亞馬遜SPN服務商。
01
1-1 設計主張
船長BI系統是亞馬遜精準化運營及大數據下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數據多元化產品下鉆、閉環及溯源，打破了亞馬遜跨境運營服務商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業中營造更加權威、高效向數智化轉型的視覺感知。
船長BI 設計語言：英文Captain BI Design Language簡稱CapDesign。
經過團隊的諸多調研到佐證,我們將品牌標準色太平洋藍(Pacific Blue)，升級為更加科學、權威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業中具有更多神秘的數智化意味，在實際應用中隱含著更多的生機和信任，表明了船長對進入數智化運營新挑戰的氣魄。同時，品牌色的升級能夠快速區別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。
色彩命名源自潘通Pantone。
1-2 創建調色板
人的視覺系統在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數，只對其他兩個參數做改變或者只改動其中的一個參數，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發動全身的節奏。↗
我們以CapDesign品牌基準色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
02
拓展豐富的輔助色
2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗
為了保有更多CapDesign 的品牌基調，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復雜場景。
Q：色相位到底選擇多少個合適？
A：有的產品選擇7個色相位，有的產品選擇10幾個色相位，都是允許的，選擇的依據取決于：
1.色彩對比明顯，選擇色相數少；色彩對比柔和，選擇色相數多；
2.產品功能的場景簡單，選擇色相數少；產品功能的場景復雜，選擇色相數多；
Captain BI 是亞馬遜運營與大數據集成，功能交叉比對及數據可視場景復雜，為迎合業務發展需要，CapColor選擇的色相位為13個。
2-2 校正輔助色(波長和振幅)
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導致色彩在感官感受上存在差異。
在可見光波譜當中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗
為了讓不同色相在視覺感官上看起來更加協調，需要對色板的明度和飽和度進行反復的校驗，以保證視覺感官更加和諧舒適。
校正原則
A.色相最好維系在同類色(色相環中15°夾角內的顏色)↗
B.色相感官保持平衡(明度和飽和度)
C.保證視障群體的識別度(WCAG 對比度)
調色的技巧
淺灰色調: 飽和度減少(S↓)，明度增加(B↑)
深色色調: 飽和度減少(S↑)，明度增加(B↓)
使用HSB調色模式時，可以參考以上規律，能讓快速調和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。
2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。
在梯度色板系統中，很多配色產品都是使用Tints and shades系統：通過在原有色相的基礎上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調色板往往比較刻板生硬。CapColor在Material Design-Color的基礎上進行了細化，構建更有層次感、空間感、立體感的梯度色板。
CapColor梯度色板：
1.在Primary的基礎上，使用Tints and shades系統找到Light和Dark：
Light=(White+primary) 95%疊色；
Dark=Black 60%疊色；
Primary=原色相。
2.結合Material Design-Color實踐，得到CapDesign梯度色板及相應的參數。
CapColor選擇10階梯度，對比穩健，更能凸顯船長系列產品權威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。
有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：
運用以上的方法，得到CapDesign豐富的調色板，為后期業務做支撐：
03
易用的中性灰色
Captain BI系統大部分是由容器、面板、列表、卡片等其他組件及元素構成。中性色為系統銳化布局、表達邊界、建立信息層次起到決定性作用。
3-1 中性色
中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現時按照透明度的呈現方式。
3-2 黑綠松石灰色
中性黑綠松石灰色解決更多復雜的場景，如表格和表單雙底色、圖標的顏色等。中性黑綠松石灰色增強布局、區別背景，起到強化信息層次的作用。
黑綠松石灰在中性灰色的基礎上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調，讓顏色更有層次感。
中性黑綠松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要時微調)；
B=保持不變。
3-3 WCAG 2.1測試
為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標準，對調色板對比度進行了可用性測試，為后期靈活用色奠定基礎。以中性灰色為例：
WCAG 2.1中規范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網詳細了解，在這不在贅述。
3-4 場景案列
實踐是檢驗真理的唯一標準，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結構、信息層級得到強化，視覺更聚焦。
結語
主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產品不斷完善，主觀取色往往不能滿足業務發展訴求。科學的系統配色，真正滿足和服務設計；同時對設計一致性及提升團隊效率起到肯定的作用。
通過這個漫長的配色過程，你是否重新審視過去設計中的配色方法？希望對配色困擾的你有所幫助。
色彩系統中的系統配色部分已經完成，接下來我們將死熬，續更系統配色在實際項目中的應用，做到科學配色、靈活用色。
作者：楚焱UX
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司