在《騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)》這篇文章中，我們闡述了騰訊文檔如何升級(jí)了新的品牌色，為騰訊文檔塑造更加有未來(lái)科技感及智慧感的視覺(jué)感受和品牌認(rèn)知，以及如何構(gòu)建一個(gè)科學(xué)有效的調(diào)色板。

在設(shè)計(jì)系統(tǒng)的實(shí)際運(yùn)行中，我們也需要著眼于如何應(yīng)用調(diào)色板，建設(shè)協(xié)同工作流，并給各個(gè)角色提供有關(guān)色彩的擴(kuò)展指導(dǎo)，以達(dá)到在騰訊文檔中構(gòu)建一致且有品牌感的數(shù)字界面并有效提升效率的目的。

在建設(shè)騰訊文檔色彩系統(tǒng)的工作中，我們首先構(gòu)建了一個(gè)包含品牌色、灰色、輔助色的調(diào)色板，但僅有這個(gè)調(diào)色板不足以支撐我們流暢、無(wú)障礙的協(xié)同工作。日常工作中，“這里我用哪個(gè)藍(lán)色？”“這里我用哪個(gè)灰色？”“開發(fā)同學(xué)能否快速的變更某些元素的顏色？”等等問(wèn)題層出不窮，建設(shè)系統(tǒng)的協(xié)同工作流迫在眉睫。

Chapter 1

——————————

如何建設(shè)？

HIG強(qiáng)調(diào)不要在APP中使用“硬代碼”，即十六進(jìn)制色值進(jìn)行編碼，但前期我們構(gòu)建的調(diào)色板僅有色值，這種硬代碼應(yīng)用到app中導(dǎo)致項(xiàng)目效率低下，維護(hù)也會(huì)成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來(lái)管理顏色，顏色變量（color token）基于任務(wù)（role）、主題（theme），為UI中的任務(wù)指定十六進(jìn)制代碼的色值（hex value），以弭平設(shè)計(jì)師之間、開發(fā)與設(shè)計(jì)師之間的溝壑，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于開發(fā)利用程序中的變量來(lái)做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。

所謂顏色變量，通俗的意思就是可以將一個(gè)顏色按任務(wù)用途去抽象，抽象成一個(gè)有命名的顏色樣式，這個(gè)顏色樣式就是顏色變量。

在設(shè)計(jì)或者代碼中，可以通過(guò)修改這個(gè)顏色變量的值來(lái)進(jìn)行全局顏色的更新。例如，我們現(xiàn)在需要給button一個(gè)顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實(shí)現(xiàn)全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現(xiàn)，顏色變量Fill-01可以在不同主題下，映射不同的十六進(jìn)制色值。這就是我們建設(shè)協(xié)同工作流的的基礎(chǔ)邏輯。

Chapter 2

——————————

為調(diào)色板的基礎(chǔ)色值命名

調(diào)色板的各個(gè)色值（hex value）是最底層的基礎(chǔ)樣式，我們將色板上的顏色進(jìn)行規(guī)則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍(lán)色、藍(lán)灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調(diào)色板命名圖表

Chapter 3

——————————

定義顏色使用規(guī)則

1、 從調(diào)色板中選擇合適的顏色并測(cè)試

從調(diào)色板中根據(jù)UI中的任務(wù)挑選合適的顏色并進(jìn)行可用性測(cè)試，做具體任務(wù)中顏色選擇的最優(yōu)解。

例如，我們需要選擇一個(gè)藍(lán)色作為鏈接色，作為文本，對(duì)比度必須達(dá)到4.5:1以上才符合WCAG2.0的可用性標(biāo)準(zhǔn)。經(jīng)過(guò)測(cè)試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導(dǎo)地位，起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。在調(diào)色板中，我們選擇了兩種灰色：中性灰色和藍(lán)灰色，來(lái)支撐系統(tǒng)的設(shè)計(jì)。藍(lán)色系列是騰訊文檔產(chǎn)品和體驗(yàn)的主要?jiǎng)幼黝伾?

同時(shí)我們也使用了其他顏色以滿足一些沖突性任務(wù)（警示等）的顏色使用，這些顏色需要謹(jǐn)慎、有目的地使用。

2 、根據(jù)任務(wù)定義顏色的使用規(guī)則

經(jīng)常會(huì)有設(shè)計(jì)師問(wèn)，“這里我能用這個(gè)灰色嗎？”出現(xiàn)這種問(wèn)題，根本上還是顏色使用規(guī)則定義的不夠清晰，含混的口口相傳的規(guī)則會(huì)導(dǎo)致更多的混亂。于是，需要我們根據(jù)任務(wù)和使用場(chǎng)景把顏色的使用規(guī)則清晰的定義。

首先定義在界面中占主導(dǎo)地位的灰色、藍(lán)色的使用規(guī)則。

藍(lán)灰色_Grayblue：

在騰訊文檔中，藍(lán)灰色與品牌藍(lán)共同建立品牌印象，由此，藍(lán)灰色主要應(yīng)用于與風(fēng)格相關(guān)的場(chǎng)景。包括：圖標(biāo)色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應(yīng)用于一些全局系統(tǒng)行為。如：文本、分割線及交互反饋hover、press等場(chǎng)景。

品牌藍(lán)色_Primayblue：

品牌藍(lán)色主要應(yīng)用于系統(tǒng)中的各種行為，如藍(lán)色圖標(biāo)、button、文本鏈接等。

其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。

紅色_Red：

紅色主要應(yīng)用于系統(tǒng)中需要警示的場(chǎng)景，如紅色警示圖形、錯(cuò)誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會(huì)針對(duì)不同的任務(wù)應(yīng)用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標(biāo)基準(zhǔn)色：

在騰訊文檔中，不同的品類有不同的基準(zhǔn)色。

Chapter 4

——————————

顏色變量的語(yǔ)義化命名

定義了顏色在系統(tǒng)設(shè)計(jì)中的使用規(guī)則后，我們需要根據(jù)顏色變量的使用用途對(duì)其進(jìn)行語(yǔ)義化命名。一套好的語(yǔ)義化命名規(guī)則需要易于維護(hù)且具備可拓展性，如果只是將調(diào)色板的色值命名為 blue-01、blue-02... ，語(yǔ)義化的收益并不明顯。哪天設(shè)計(jì)團(tuán)隊(duì)需要調(diào)整品牌風(fēng)格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對(duì)于開發(fā)來(lái)說(shuō)也是巨大的災(zāi)難。

根據(jù) HIG 的建議，語(yǔ)義化命名不應(yīng)該描述外觀或者色值，而是指明這個(gè)顏色的任務(wù)用途——標(biāo)簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語(yǔ)義化的命名時(shí)，設(shè)計(jì)師也需要用更概括和結(jié)構(gòu)化的視角來(lái)看待界面設(shè)計(jì)，同時(shí)也需與開發(fā)同學(xué)達(dá)成一致，使用同樣的命名，滿足以更好地維護(hù)一套收斂和統(tǒng)一的設(shè)計(jì)語(yǔ)言。

在騰訊文檔中，顏色的任務(wù)用途定義為為以下幾種：背景色 Background、文本色Text、圖標(biāo)色I(xiàn)con、分割線 Border、透明填充 Transparent fill 、實(shí)色填充 Opaque fill 、默認(rèn)交互反饋 Feedback、語(yǔ)義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來(lái)表達(dá)顏色強(qiáng)度。在需要更明確的用途說(shuō)明的任務(wù)中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建設(shè)團(tuán)隊(duì)協(xié)同工作流

以上種種，最終目的在于建設(shè)團(tuán)隊(duì)的協(xié)同工作流，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于設(shè)計(jì)利用變量及組件、開發(fā)利用程序中的變量來(lái)做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。

1、 設(shè)計(jì)內(nèi)協(xié)同：在Figma中生成顏色變量

在設(shè)計(jì)系統(tǒng)中，顏色變量屬于底層的設(shè)計(jì)原子，需要將其生成為顏色變量并嵌入到設(shè)計(jì)組件中，便于設(shè)計(jì)內(nèi)部使用。我們將已根據(jù)任務(wù)用途命名的色值，生成figma中的顏色樣式（color style），后續(xù)無(wú)論是進(jìn)行組件的設(shè)計(jì)，還是項(xiàng)目的設(shè)計(jì)，都可以直接賦予設(shè)計(jì)元素明確的顏色樣式。

2、 設(shè)計(jì)組件與開發(fā)代碼聯(lián)動(dòng)：利用顏色變量表進(jìn)行信息同步

我們生成了一個(gè)面向內(nèi)部、外部的顏色變量表，進(jìn)行顏色變量的說(shuō)明和信息的同步，沉淀落到實(shí)處的資料文檔。（此處推薦使用騰訊文檔，多人協(xié)作實(shí)時(shí)溝通～）

最終形成了設(shè)計(jì)組件庫(kù)與開發(fā)組件庫(kù)的聯(lián)動(dòng)，構(gòu)建了一個(gè)協(xié)同工作流，橫向提升工作效率。

結(jié)束語(yǔ)

上篇的調(diào)色板設(shè)計(jì)后，一直在醞釀這篇調(diào)色板的實(shí)際應(yīng)用。在設(shè)計(jì)一個(gè)較為復(fù)雜、龐大的產(chǎn)品時(shí)，提效是永恒的課題。痛過(guò)、踩過(guò)坑的設(shè)計(jì)師應(yīng)該深有感觸，溝通的無(wú)力、推動(dòng)的困難都推動(dòng)著我們發(fā)動(dòng)自己的能量去想辦法提效。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.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ù)