前言

這一次的北農(nóng)商銀行的項目，是在企業(yè)版手機銀行 App 上加入企業(yè) OA 的功能。所以在繼承現(xiàn)有的設(shè)計規(guī)范的基礎(chǔ)上，行方也希望產(chǎn)品能有一個品牌升級，提升用戶體驗。

我們將從構(gòu)建一套科學(xué)有效的顏色規(guī)范入手，本著北農(nóng)商銀行"人本、創(chuàng)新"的核心價值觀，在設(shè)計中我們想要尋找新活力、新體驗，所以在原有品牌色的基礎(chǔ)上，引入了更多靈動鮮活的輔助色彩，體現(xiàn)北農(nóng)商品牌"聚焦、友好、多元"的個性。我們希望北農(nóng)商銀行企業(yè)手機銀行可以為更多的企業(yè)和行業(yè)賦能，探索視覺上與各行各業(yè)適配的無限可能，帶來更多個性化新體驗。

一、顏色規(guī)范的原則

1. 理性

我們在選色時，盡可能避免個人設(shè)計偏好，減少配色的主觀性，理性地有邏輯地選色

2. 可擴展

確定下來的基礎(chǔ)色，可以拓展生成更多的顏色，以符合不同場景的使用需求

3. 和諧

顏色規(guī)范中的顏色互相搭配使用，是和諧的，整體的

二、制定產(chǎn)品顏色規(guī)范的流程

1. 以前制定產(chǎn)品顏色規(guī)范的流程是什么樣的呢？

"歸納產(chǎn)品特性，結(jié)合行業(yè)屬性和公司的品牌文化-提取關(guān)鍵詞-建立情緒版-選擇色相-制定色系"。這樣的制定流程的優(yōu)勢在于不脫離品牌特性，也符合用戶的基本認知，但是缺少一點理論支撐和數(shù)據(jù)驗證。

所以，我細細研究了幾家大廠的設(shè)計體系，他們對于色彩體系的建立都存在一定的共性，下面我將這套理論在此次北農(nóng)商銀行項目上實踐一下，看看是否可以得到一套更符合用戶審美愛好、更符合產(chǎn)品特性、更規(guī)范、更高效的色彩體系。

2. 舊的設(shè)計規(guī)范

我們先來大概瀏覽下舊的顏色規(guī)范：

三、本次制定顏色規(guī)范的流程

品牌色基礎(chǔ)上確定主色-結(jié)合色環(huán)確定輔助色-采用 HSB 色彩模型調(diào)整輔助色-顏色校正確保感官明度一致-WCAG 標準驗證顏色-調(diào)色板-設(shè)計落地

1. 品牌標準色進化確定主色

主色是產(chǎn)品使用頻率最高、最核心的顏色，常用于主要按鈕和文字、重點操作狀態(tài)、高亮提醒、圖形化等場景。

一般產(chǎn)品的主色，首選是品牌色，可以更好地傳達品牌價值；其次，可以通過產(chǎn)品的行業(yè)屬性來確定主色，比如科技用藍色、電商用紅色、橙色、健康用綠色等。

這里給大家分享一個非常棒的網(wǎng)站： http://brandcolors.net/ （包含全世界 500 強產(chǎn)品的品牌色，可以從這個網(wǎng)站尋找與我們產(chǎn)品業(yè)務(wù)相似的品牌色，獲取靈感）

北農(nóng)商銀行的品牌色是帶有首都鮮明地域特色的紅色，流露出濃郁的文化底蘊。首先，采用 HSB 色彩模型進行設(shè)計，該模型是通過直觀地描述顏色的色相 H（Hue）、飽和度 S（Saturation）和明度 B（Brightness）的方式來表示顏色，更便于設(shè)計師在調(diào)整色彩時對于顏色有明確的心里預(yù)期。

我們保持色相 H: 358 不變，降低了 S，從 89->75，提升了 B，從 78->90，讓原先過于嚴肅的紅色輕量化、輕盈一些，蘊含更多的活力和想象力，承載著北農(nóng)商銀行對未來新挑戰(zhàn)新發(fā)展的態(tài)度。

2. 結(jié)合色環(huán)配色理論，確定輔助色

在一個科學(xué)有效的顏色規(guī)范里，往往包含至少兩種色彩：主色+輔助色。輔助色是輔助主色來豐富產(chǎn)品的界面，以及作為一些操作結(jié)果，狀態(tài)的反饋。

功能色的使用需要符合用戶的認知習(xí)慣，比如正?；虺晒τ镁G色，失敗或錯誤用紅色、等待或警告用橙色，失效用灰色、鏈接用藍色等。用戶不需要閱讀文字信息，就能直觀地了解設(shè)計的狀態(tài)。

本次顏色規(guī)范體系將制定一套豐富多元的輔助色，將用到色環(huán)工具。我們將以北農(nóng)商銀行主色紅色（#E6393E）（H358，S75，B90）為起始點，飽和度 S 和明度 B 保持不變，色相 H 以 358 為起點，以 15 度為增量或減量標準，生成 24 色色環(huán)。

在色環(huán)中，標記好主色紅色，然后在紅色的相近色（15 度）、類似色（30 度）、鄰近色（60 度）、中差色（90 度）、對比色（120 度）和互補色（180 度）選取下面幾個顏色。

下面將根據(jù)實際界面使用情況，對上面色環(huán)得到的顏色進行刪減，確定輔助色。為了保持北農(nóng)商銀行的基礎(chǔ)品牌調(diào)性，選擇了冷暖一致的類似色橙色，以保證整體色調(diào)統(tǒng)一和諧，感情特性一致，一定程度上也增加了色彩層次。并利用了中差色藍紫色和對比色藍色、綠色這些豐富多元的色相，使視覺沖擊力強，活潑有趣，增加了色彩的平衡，并且滿足各種場景下對色彩的需求。

大家在確定色值的時候可以這樣操作：在主色紅色的色相 358 的基礎(chǔ)上，分別增加或減少 120，得到兩個對比色（藍色和綠色）

3. 確保輔助色和主色一致的明度和飽和度

確定好輔助色之后，要對輔助色進行下一步的調(diào)整，這步非常簡單，就是保證輔助色和主色擁有一致的明度和飽和度。

4. 顏色校正，確保感官明度一致，對顏色進行微調(diào)

在 HSB 模式中，即使飽和度和明度一樣，但是不同色相的顏色的感官明度是不一樣的，黃色、青色、洋紅實際看起來比較淺，所以為了讓整個色板看起來更和諧，畫面不跳躍，我們要動手調(diào)整，校正輔助色。

校準方式：在顏色上面疊加純黑色圖層，圖層模式選擇色相，通過無彩色系下的明度色值進行對比，就可以直觀地看到無彩色視覺感官明度。

細調(diào)過程中，相差大的顏色可以以"5"為差值調(diào)整飽和度或明度，最后在根據(jù)效果進行微調(diào)（校正原則：色相保持同類色即可。對顏色不滿意，可以稍微調(diào)整色相，以實際效果為準）

5. WCAG 標準驗證顏色

為了保證視障用戶的使用，保證足夠的對比度，我們的用色需要遵守 WCAG 用色標準。

WCAG 用色標準中普通文本與背景對比度不低于 4.5:1，所以一般顏色規(guī)范中的中性色（#33333）等都需要滿足于這個標準。那么對于產(chǎn)品主色，是不是也要達到這個標準呢？

對主流 App 以及主色為紅色的競品 App 進行測試，發(fā)現(xiàn)范圍在 3.2-4.2 的居多，所以這是個比較合適的對比值范圍。下圖是北農(nóng)商銀行 App 主色（#E6393E）的色彩對比度檢測。

6. 調(diào)色板

① 如何得到同色系配色？

第一種方法是無色相變化的同色系，就是通過調(diào)節(jié)明度的方法，得到一系列同色系配色方案。將顏色從白到黑排列成黑白色卡，黑白色卡可以劃分 10 級灰度，然后把純色放入調(diào)好的 10 級灰度的黑白色卡中，得到一些同色系配色方案。

第二種方法是有色相變化的同色系。淺色系中，色相往感官明度高的色相依次差值 2，飽和度依次減少 15，明度依次增加 5；深色系中，色相往感官明度低的色相依次差值 2，明度依次減少 15，飽和度依次增加 5。

兩種方法，我會更推薦第二種有色相變化的同色系，也稱微色相變化，在色環(huán)上夾角小于 30 度的顏色變化，色相的跨度很小，所以配色上比較容易控制，可以很好地平衡畫面的層次感和規(guī)律感 。

7. 落地

落地分為兩個方面：設(shè)計方面和開發(fā)方面。

① 設(shè)計方面

此次項目實施中，發(fā)現(xiàn)了顏色在界面的實際應(yīng)用中也應(yīng)該注意一些問題。比如：

主色為紅色，如果將品牌色賦予按鈕的時候，它會和界面中涉及破壞性操作的按鈕發(fā)生沖突。因為一般情況下，紅色在按鈕上含有警告和禁止的含義。帶有刪除數(shù)據(jù)、取消操作、涉及破壞性的操作，都會用紅色標識出來。所以將主色紅色應(yīng)用于按鈕顏色，要考慮好異常情況，如果是雙按鈕形式（確定+取消）應(yīng)該怎么定義按鈕的顏色，才能讓用戶更好的區(qū)分。

② 開發(fā)方面

為了配合開發(fā)，我們定義了 Design Token。這樣在以后的換膚中，只需要在底層對變量的值進行改變即可實現(xiàn)全局的更改，提高效率和拓展性。

對于 UI 原子的命名規(guī)則為：大類字母(名稱)/小類數(shù)字(樣式編號)/樣式說明_樣式狀態(tài)

例如：

1. a/1/主色_nor：#E6393E
2. a/2/1/輔助紅_nor：#FF4E3A

對于開發(fā)原子的命名可以根據(jù)各平臺特性去定義，保持基礎(chǔ)編號能快速識別對應(yīng)即可（僅供參考）

例如：

1. sscolor_a_1_nor：#E6393E
2. sscolor_a_2_1_nor：#FF4E3A

四、設(shè)計規(guī)范·組件庫搭建

五、頁面效果

六、推薦工具

Ant Design 色板工具地址： https://ant.design/docs/spec/colors

Acrodesign 色板工具地址： https://arco.design/palette/list

arco.design*ColorPalette 色彩對比度檢測： https://arco.design/palette/wcag

結(jié)語

在這次的顏色規(guī)范重新定義中，重新審視過去的設(shè)計，我們?yōu)榱粟s項目進度，為了自身便利，時常依靠主觀情感和偏好去選擇顏色，這將不利于產(chǎn)品的迭代和發(fā)展。

將設(shè)計理論應(yīng)用到項目中，讓色彩體系科學(xué)化，真正讓色彩去服務(wù)設(shè)計，讓設(shè)計更高效，希望本文對您也有所幫助。

作者：兆日 UCD