怎么構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)
發(fā)布時間:2021-12-16 09:19 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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


如何建設(shè)?


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

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

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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)


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


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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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


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

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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

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

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

藍(lán)灰色_Grayblue:

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

中性灰色_Gray:

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

品牌藍(lán)色_Primayblue:

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

紅色_Red:

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

其他顏色:

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

顏色變量的語義化命名


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

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

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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)


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


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

1. 設(shè)計內(nèi)協(xié)同:在 Figma 中生成顏色變量

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)

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

騰訊實戰(zhàn)!如何構(gòu)建科學(xué)有效的色彩系統(tǒng)(應(yīng)用篇)


結(jié)束語


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

設(shè)計師們可以在自己的項目中與開發(fā)同學(xué)多多溝通,嘗試這種方法,去建設(shè)更高效的色彩設(shè)計系統(tǒng)。

達(dá)芬奇17影視調(diào)色入門到精通教程
我要自學(xué)網(wǎng)商城 ¥80 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機(jī)械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC