產(chǎn)品配色那些事3-我的配色實踐

本章會從實操出發(fā)，結(jié)合真實項目為大家?guī)砼渖珜嵺`。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統(tǒng)。

項目背景

21年我司進(jìn)行業(yè)務(wù)調(diào)整，原保險業(yè)務(wù)從當(dāng)前產(chǎn)品中獨立出去，作為一家全新平臺為印尼用戶提供保險選購及理賠服務(wù)，為此我們提供了新的產(chǎn)品設(shè)計和配色。

一、定義主色

1、選擇色相

根據(jù)上一章提到的選色邏輯，我們依次從產(chǎn)品情緒、行業(yè)屬性和目標(biāo)用戶幾個緯度去思考。作為一家全新的保險平臺，我們希望產(chǎn)品給到用戶專業(yè)、安全、信任之感，那么藍(lán)色、綠色可以作為備選，藍(lán)色代表專業(yè)、權(quán)威，綠色代表安全、健康。后續(xù)我們做了相關(guān)行業(yè)調(diào)研，發(fā)現(xiàn)大部分本地產(chǎn)品也使用了這兩個顏色，可以確保備選顏色是符合行業(yè)喜好的，屬于安全的用色范圍。最后考慮到用戶的地域?qū)傩?，印尼大部分用戶都信奉伊斯蘭教，對綠色有著非同一般的熱愛。結(jié)合本次項目訴求，便選擇了綠色成為我們產(chǎn)品主色。

2、確定色調(diào)

明確了主色色相，但同一色相會有冷暖、深淺之別，給到用戶的心里感受也略有差異。具體到本次項目中，暖綠有溫暖、活潑、歡快的感覺，冷綠則帶給用戶冷靜、平和的情緒。對于本次項目，冷綠更加符合產(chǎn)品定位。

3、調(diào)整飽和度、明度

飽和度控制色彩的艷麗程度，明度控制色彩的明暗變化，這兩項參數(shù)直接影響色彩的最終效果，所以需要同步交替調(diào)整，直到選出最合適的?？紤]到主色常用于按鈕或重要文本，所以需要注意色彩的對比度，確保文本在界面中的可讀性。在本次項目中，“綠色”本身屬于對比度較小的顏色，為了獲得合適的對比度，需要調(diào)整更大的飽和度和更低的明度。經(jīng)調(diào)整之后，我們測試了色彩的對比度為3:1，滿足W3C中給到的色彩對比度建議。

二、推導(dǎo)輔助色

1、匹配色相

根據(jù)輔助色定義，我們匹配到了不同色相的輔助色，但并不是所有顏色都是我們需要的，需要根據(jù)經(jīng)驗做出一定刪減。如同類色中的兩個綠色，色相上與主色過于接近，使用過程中會造成視覺混淆，所以我們剔除這組顏色。再如中差色與對比色中都有黃色，為了與橙色區(qū)分更加明顯，我們刪除對比色中的黃色。經(jīng)過一系列刪減后，留下來的便是我們需要的色彩。此時也可以對色相進(jìn)一步調(diào)整，如類似色中的藍(lán)色偏向湖藍(lán)，為了盡量和主色拉開差別，我們選擇色相向右偏移。

2、視覺感官校準(zhǔn)

以上色彩只確定了色相，沒有進(jìn)行飽和度、明度調(diào)整，視覺上并不屬于同一層級。為了獲取更加統(tǒng)一的配色，需要對其進(jìn)行調(diào)整，這一過程被稱為視覺感官校準(zhǔn)。如何校準(zhǔn)？有人通過給色彩疊加黑色，對比色彩亮度進(jìn)行校準(zhǔn)。但不同顏色本身亮度不同，強行調(diào)整一致會導(dǎo)致部分顏色失衡。所以此種方法可作為參考，但不具備太大可靠性，實際工作中還需依靠自身經(jīng)驗進(jìn)行調(diào)整，確保視覺上和諧統(tǒng)一。以下為完成校準(zhǔn)后的配色。

三、推導(dǎo)中性色

第二章提到中性色可通過調(diào)整明度或透明度得到，本項目使用場景比較固定，所以決定調(diào)整明度來得到中性色?？紤]到主色為“冷綠”，與偏藍(lán)的中性色搭配可保證色彩調(diào)性一致，于是我們?nèi)∷{(lán)色色相值，調(diào)整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低，飽和度需要逐級增加。最后確保主要用色符合無障礙設(shè)計指南，我們對一級、二級、三級文字用色進(jìn)行了對比度測試，符合無障礙設(shè)計要求。

四、生成梯度色板

梯度色板可以提供更多配色，覆蓋更多使用場景，避免后續(xù)新增顏色的煩惱。早期為了獲得梯度色板需要設(shè)計師利用公式計算，現(xiàn)在可以直接使用在線工具生成。如Ant design的色板生成工具（https://ant.design/docs/spec/colors），Material design的色板生成工具（https://materialpalettes.com/），Eva Design System的色版生成工具（https://colors.eva.design/）。由于不同平臺算法不同，生成的色版效果也存在差異，這里首推Ant design，對比其他平臺色相變化更豐富、顏色更均勻、色階也更明確。

五、建立色彩系統(tǒng)

1、如何理解色彩系統(tǒng)？

色彩系統(tǒng)隸屬設(shè)計系統(tǒng)的一部分，是對色彩進(jìn)行科學(xué)管理的體系。不同于色彩規(guī)范主要針對設(shè)計側(cè)，而是需要打通開發(fā)聚焦產(chǎn)品代碼中。

2、色彩系統(tǒng)包含什么？

簡單來說色彩系統(tǒng)由design token、色彩庫和說明文檔構(gòu)成。design token是設(shè)計與開發(fā)約定一致的色彩名稱，作為色彩調(diào)用的唯一憑證。色彩庫是包含design token和顏色參數(shù)的樣式集合，供我們在設(shè)計和開發(fā)中調(diào)用。說明文檔類似于設(shè)計規(guī)范，定義了色彩的使用方式，為我們的使用提供指導(dǎo)。

3、如何建立色彩系統(tǒng)

a、token命名

如何命名需要考慮token層級和token構(gòu)成。

關(guān)于token層級，設(shè)計師Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般設(shè)計系統(tǒng)會將token分為三個層級，核心token（core token）、語義token（semantic tokens）和組件 token（component tokens）。核心token存儲的是原始值作為構(gòu)建設(shè)計系統(tǒng)的基礎(chǔ)，語義token引用核心token，它的名稱描述了token的預(yù)期用途。組件token引用語義token，并將token綁定到對應(yīng)的組件。較多的層級可以使token命名更加清晰，但層層嵌套的邏輯也增加了管理的難度，Lukas Oppermann在文中提到也可以使用一層或兩層。

關(guān)于token構(gòu)成，體驗設(shè)計師Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出為了更加充分的描述token，token可以由名稱空間（namespace）、目標(biāo)對象（object）、基礎(chǔ)樣式（ base）、修飾符（Modifier）構(gòu)成。名稱空間對應(yīng)系統(tǒng)、主題名稱，目標(biāo)對象對應(yīng)組件、組件元素和復(fù)合組件，基礎(chǔ)樣式是token的主干部份，包含樣式、屬性、語義，修飾符表明狀態(tài)、尺度、模式等。由于篇幅原因，此處只是簡單介紹，感興趣的同學(xué)可以點擊原文查看。

按照兩位作者的觀點，筆者對本次色彩系統(tǒng)進(jìn)行了design token命名，如下所示：

b、建立樣式庫

樣式庫是設(shè)計與開發(fā)調(diào)用的基礎(chǔ)，需要在設(shè)計工具中實現(xiàn)token的層級邏輯，同時方便開發(fā)同學(xué)查看。筆者主要使用的工具是figma，F(xiàn)igma為我們提供了豐富的功能和插件建立樣式庫，以下會介紹些主流方式及優(yōu)缺點，大家按照項目實際情況選擇使用即可。

local style：figma支持將色彩定義為全局樣式，并對樣式進(jìn)行命名。設(shè)計在調(diào)用樣式后，開發(fā)便可以在查看面板看到對應(yīng)token，基本實現(xiàn)了樣式庫的作用。但local style不支持token的層級嵌套，只能實現(xiàn)單層級token。如果你的項目剛好使用了單層級token，那么建議你使用此功能。

local variables：在今年6月份的config大會中，figma發(fā)布了變量功能，雖然CEO Dylan Field先生說不會推出design tokens，但變量功能卻完美實現(xiàn)了token的作用。它支持將色彩定義為變量，且可以實現(xiàn)層級嵌套，開發(fā)在查看面板也可以方便的看到變量名稱，算是解決了figma在design token方面的缺陷。

Figma token：一款定義design token的插件，且支持token的層級嵌套。開發(fā)查看token名稱目前有兩種方式：1.可在 Figma token的inspect面板進(jìn)行查看，但插件需要在編輯模式下使用，意味著你需要給到開發(fā)編輯權(quán)限，這無疑會增加團(tuán)隊成本。2.插件支持將token轉(zhuǎn)化為figma樣式和變量，并保持當(dāng)前的token名稱，此時開發(fā)可以在figma的inspect面板查看token，建議使用此種方式，經(jīng)濟(jì)實惠。

c、輸出說明文檔及團(tuán)隊推進(jìn)

一般文檔內(nèi)容包含使用規(guī)則、注意事項、場景描述、token名稱、色值參數(shù)等等，也可根據(jù)實際情況作以增減。輸出說明文檔后，整個色彩系統(tǒng)搭建完成，接下來需要推進(jìn)團(tuán)隊使用。為確保整個系統(tǒng)在項目中順利落地，最好組織相關(guān)人員進(jìn)行一次宣講，介紹清楚使用規(guī)范及注意事項，明確要求嚴(yán)格按照系統(tǒng)執(zhí)行。