▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 4454 字，預(yù)計(jì)閱讀 12 分鐘

TCC 情報(bào)局的 第 88 篇 干貨分享

2021 年的 第 76 篇

我相信你們的團(tuán)隊(duì)已經(jīng)或者很快就會(huì)意識(shí)到需要建立一個(gè)強(qiáng)大的設(shè)計(jì)系統(tǒng)。沒(méi)有理由不這樣做，因?yàn)橐粋€(gè)設(shè)計(jì)系統(tǒng)能讓這個(gè)團(tuán)隊(duì)更具一致性和可擴(kuò)展性，并且能夠大大提高團(tuán)隊(duì)的效率。

既然現(xiàn)在你的團(tuán)隊(duì)已經(jīng)決定投資開(kāi)發(fā)一個(gè)設(shè)計(jì)系統(tǒng)，它的 第一步必須是確定基礎(chǔ)要素，基礎(chǔ)是指顏色、排版、布局、圖標(biāo)等核心元素，一旦你把他們整理好了，你就可以繼續(xù)定義組件、圖形和模板了。在這篇文章中，我將分享我們建立色彩體系的整個(gè)過(guò)程。

如何創(chuàng)建一個(gè)色彩體系？

下面是整個(gè)流程的步驟，我們將會(huì)在后面對(duì)每一步進(jìn)行詳細(xì)的講解：

• 給所有的顏色歸類 —— 定義清晰所有的顏色，并將它們按類別分組。

• 創(chuàng)建擴(kuò)展色板 —— 通過(guò)基礎(chǔ)色的變體來(lái)創(chuàng)建整個(gè)色彩體系。

• 確立命名習(xí)慣 —— 以便所有團(tuán)隊(duì)成員用同樣的代稱進(jìn)行交流而不是用十六進(jìn)制代碼。

• 驗(yàn)證新的色板 —— 確保新的顏色符合所有的顏色要求并符合無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)。

• 定義使用規(guī)范 —— 將顏色應(yīng)用至全局的 UI 元素中，如背景、文本和容器。

• 發(fā)布并測(cè)試 —— 將新的色彩規(guī)范發(fā)送給團(tuán)隊(duì)中的所有成員。

• 迭代 —— 接受團(tuán)隊(duì)的反饋和意見(jiàn)，如果需要的話，對(duì)色彩系統(tǒng)進(jìn)行迭代。

• 共享給開(kāi)發(fā)者 —— 開(kāi)發(fā)者接下來(lái)可以將色彩系統(tǒng)應(yīng)用至他們的組件庫(kù)。

1、給所有顏色歸類

對(duì)我們大多數(shù)人來(lái)說(shuō)，所有顏色可以被分為四類，它們分別是 主色、輔助色、中性色和語(yǔ)義色。

1）主色

主色是你的用戶界面中最常使用的顏色，它賦予了一個(gè)產(chǎn)品獨(dú)特的特征，并且這些顏色通常是一個(gè)公司定義品牌識(shí)別的顏色。使用品牌色作為主色，可以加強(qiáng)品牌的知名度。

一些知名品牌的主色

2）輔助色

輔助色用以突出或補(bǔ)充主色，但要盡可能少并巧妙地使用它們以使 UI 元素脫穎而出，同時(shí)通常在品牌規(guī)范中也會(huì)定義輔助色。

通常情況下，一個(gè)品牌有 1～6 個(gè)輔色。盡管如此，限制輔助色的數(shù)量在 3 個(gè)以內(nèi)會(huì)讓品牌更具辨識(shí)度和一致性。

3）中性色

中性色包含的是白色和黑色之間的灰色，這些顏色 通常用于背景、文本顏色等，構(gòu)成了用戶界面大部分的內(nèi)容。

我更喜歡在灰色中加一點(diǎn)微微的藍(lán)色，因?yàn)檫@可以給這些顏色帶來(lái)更多的活潑感。

中性色色板

4）語(yǔ)義色

語(yǔ)義色是傳達(dá)信息的顏色，它們幫助我們向用戶傳達(dá)信息。例如，綠色具有積極的含義，因此我們通常用綠色來(lái)傳達(dá)成功和確認(rèn)等信息。                 

2、創(chuàng)建擴(kuò)展色板

我們?cè)O(shè)計(jì)師都應(yīng)該知道，只有基礎(chǔ)色是不夠的。我們需要基礎(chǔ)色有更多的色彩變化，以滿足不同的情景。一旦確定了主色、輔助色和語(yǔ)義色，下一步就是創(chuàng)建一個(gè)體系，讓你能夠根據(jù)這些顏色生成擴(kuò)展顏色。

             不同的基礎(chǔ)色產(chǎn)生的顏色變化

1）擴(kuò)展色生成器

我們?cè)?Lyft 的朋友使用一套名為 Colorbox 算法來(lái)創(chuàng)建色彩體系，現(xiàn)在他們已經(jīng)將其變?yōu)殚_(kāi)源網(wǎng)站了，這樣我們就可以在網(wǎng)站上根據(jù)自己的需求調(diào)整參數(shù)，從而非常方便地創(chuàng)建色彩體系。              

       Colorbox 截圖

顏色可以用三個(gè)維度的數(shù)值來(lái)表達(dá)：

• 色相

• 飽和度

• 明度

為了創(chuàng)建一個(gè)一致的和諧的色彩體系，必須使用一套定義好的算法來(lái)創(chuàng)建調(diào)色板，因?yàn)樗惴ㄍ瑫r(shí)考慮了所有的維度 —— 色相、飽和度和明度。

讓我們一起來(lái)看一下如何使用 Colorbox：

1、設(shè)定顏色變體數(shù)：這決定了調(diào)色板中色塊的數(shù)量，10～11 個(gè)通常是一個(gè)比較不錯(cuò)的選擇；

2、定義基礎(chǔ)色：輸入基礎(chǔ)色也就是想要?jiǎng)?chuàng)建變體的顏色（可以是主色、輔助色或語(yǔ)義色）；

3、設(shè)定色相變化：這決定了色相在顏色變體中的變化方式，你可以讓所有色塊的色相值與基礎(chǔ)色完全相同，也可以添加輕微的變化；

1. 首先，定義首尾色塊的色相值；

2. 接下來(lái)，選擇一條變化曲線（線性 / 三次曲線 / 正弦...）。曲線決定了首尾色塊之間的色相如何變化?？梢远鄧L試一下，玩一玩，然后選擇一種比變化曲線；

4、設(shè)定飽和度的變化：上述定義色相變化的過(guò)程同樣也適用于飽和度和明度。

1. 首先，定義首尾色塊的飽和度值。（我更喜歡 5～100，因?yàn)樗梢援a(chǎn)生用于背景的淺色。）

2. 同樣地，接下來(lái)選擇一條變化曲線（線性 / 三次曲線 / 正弦......），它將決定首尾色塊之間的飽和度值如何變化。

5、設(shè)定明度變化：在右側(cè)的色板中，色塊的明度遵循越往下越低的排序。

1. 100 到 35 的范圍可以滿足大多數(shù)顏色的需求，盡管你可能最終還是想要對(duì)其中一些色塊做細(xì)微的調(diào)整。

2. 如果你想讓明度從一個(gè)色塊到下一個(gè)色塊有規(guī)律的變化，我建議可以使用線性曲線。

就是這樣，你已經(jīng)擁有你自己的調(diào)色板了。

2）精簡(jiǎn)色板中的顏色

經(jīng)過(guò)了前面的實(shí)踐后，你已經(jīng)擁有了許多色板，而每個(gè)調(diào)色板大約會(huì)有 10～11 個(gè)顏色，但問(wèn)題是，你并不需要所有的這些顏色。這個(gè)時(shí)候，我建議 分析一下顏色的具體使用情景，從而控制一下顏色的數(shù)量。這將為我們帶來(lái)兩點(diǎn)好處：第一，可以減少設(shè)計(jì)師的認(rèn)知負(fù)荷，提高決策速度；第二，維護(hù)色彩系統(tǒng)會(huì)方便很多。

下面就是我們要使用的色板，我們把它縮減到了 5 個(gè)顏色。前兩個(gè)主要是用于背景色，而除了基礎(chǔ)色之外的顏色則是用于按鈕的懸浮狀態(tài)和選中狀態(tài)等。             

3、確立命名習(xí)慣

用 "主色" 等邏輯性強(qiáng)、易懂的名稱比用十六進(jìn)制的代碼（#1F6AE3）跟團(tuán)隊(duì)成員溝通，要容易得多，我覺(jué)得這一點(diǎn)是毋庸置疑的吧。

更棒的地方在于，這些名字可以同時(shí)用作我們的 Design Token[1] 。Design Token 是存儲(chǔ)視覺(jué)設(shè)計(jì)屬性（間距、顏色、排版等）的命名實(shí)體，我們可以使用 Token 來(lái)代替編碼值，以開(kāi)發(fā)和維護(hù)一個(gè)可擴(kuò)展且一致的設(shè)計(jì)系統(tǒng)。

（[1]Design tokens 是與平臺(tái)無(wú)關(guān)的變量。例如，將一種顏色色值傳到系統(tǒng)中，然后轉(zhuǎn)換成 token ，前端就可以直接取這個(gè)變量使用。即使是色值被修改，當(dāng)變量名不變時(shí)，對(duì)整體代碼是毫無(wú)影響的，開(kāi)發(fā)者要做的僅僅是重新導(dǎo)入一份 token。

https://jelly.jd.com/article/6006b1055b6c6a01506c8845）

       子品牌 X 和子品牌 Y 的主色

Design Token 可以使同一元素（背景色）有不同的值

那么我們?nèi)绾谓o顏色命名呢？

我們的調(diào)色板由基礎(chǔ)色和擴(kuò)展色組成，擴(kuò)展色指的是從基礎(chǔ)色中產(chǎn)生的色彩變體。

我們可以將顏色命名為 "色彩標(biāo)簽 - XX"（例如：主色 - 100）。

色彩標(biāo)簽代表基礎(chǔ)色，而 'XX' 數(shù)字代表不同的色調(diào)。在此強(qiáng)烈 建議根據(jù)顏色的功能而不是本身的色相來(lái)命名，例如：主色、成功色和錯(cuò)誤色而不是海洋綠、綠色和紅色。

下面來(lái)看一下 XX 的值是如何確定的

基礎(chǔ)色：100

比基礎(chǔ)色更深的色調(diào)：>100

比基礎(chǔ)色更淺的色調(diào)：<100

       給主色命名

                將命名習(xí)慣應(yīng)用至其他色板（輔助色、錯(cuò)誤色和成功色等）

4、驗(yàn)證新色板的有效性

現(xiàn)在，你應(yīng)該已經(jīng)有了主色、輔助色、中性色和語(yǔ)義色每一個(gè)顏色的色板。理論上來(lái)講，這些調(diào)色板應(yīng)該滿足你在設(shè)計(jì)每個(gè) UI 元素時(shí)的顏色需求。

為了確保色板行之有效，請(qǐng)?zhí)暨x你的產(chǎn)品的幾個(gè)關(guān)鍵用戶使用場(chǎng)景并進(jìn)行測(cè)試。接下來(lái)，開(kāi)始用新創(chuàng)建的顏色替換現(xiàn)有設(shè)計(jì)中的顏色，一定要確保沒(méi)有遺漏任何東西，例如背景、文字等。然后，驗(yàn)證你的色板是否達(dá)到了它們應(yīng)該有的效果。例如，輔助顏色必須突出以吸引用戶的注意力。

另一個(gè)重要的考慮因素是無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)。你需要檢查背景和文本元素之間是否有足夠的對(duì)比度，并努力遵守 WCAG（Web Content Accessibility Guideline，Web 內(nèi)容無(wú)障礙設(shè)計(jì)規(guī)范) 中的顏色對(duì)比規(guī)范， 下面是指南中的截圖。

                       WCAG 色彩對(duì)比指南

在這里推薦一個(gè)很方便的插件 Stark，它可以幫助你很輕松地檢查你的顏色有沒(méi)有符合無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)。

5、定義使用規(guī)范

相信我，僅僅限制設(shè)計(jì)師從一組預(yù)定義的顏色中選擇，并不能帶來(lái)一致性。我們需要先行一步，定義這些顏色的使用規(guī)范。

我們的工作應(yīng)該是確保所有設(shè)計(jì)師或開(kāi)發(fā)人員面對(duì)這些問(wèn)題時(shí)都有相同的答案，IBM 建立的 Carbon 設(shè)計(jì)系統(tǒng) 在這方面就做得很好。

6、發(fā)布并測(cè)試使用

設(shè)計(jì)系統(tǒng)如果在團(tuán)隊(duì)中不被大家接受或沒(méi)有被真正落實(shí)，它都有可能會(huì)被廢棄。越早讓團(tuán)隊(duì)成員接納設(shè)計(jì)系統(tǒng)越好，這樣系統(tǒng)會(huì)在每個(gè)人的支持和使用下不斷發(fā)展、更新變得越來(lái)越好。

將建立好的色彩體系以及使用規(guī)范推送給團(tuán)隊(duì)成員后，他們可以在一些關(guān)鍵用戶使用場(chǎng)景中測(cè)試相同的顏色，并驗(yàn)證色彩體系的有效性。然后 接受團(tuán)隊(duì)的反饋和意見(jiàn)，根據(jù)需求對(duì)色彩系統(tǒng)進(jìn)行迭代。

7、共享給開(kāi)發(fā)者

現(xiàn)在應(yīng)該做什么呢？你已經(jīng)建立了你的色彩系統(tǒng)，也已經(jīng)驗(yàn)證了它的有效性。下一步就是將這個(gè)色彩系統(tǒng)共享給開(kāi)發(fā)者，開(kāi)發(fā)者把帶有顏色信息的 Design Token 納入他們的庫(kù)中，這就使開(kāi)發(fā)者可以用 Design Tokens 而不是顏色代碼來(lái)為 UI 元素分配顏色。

現(xiàn)在，如果你要把你的主色從海洋綠改成天藍(lán)，只需修改一行代碼就可以在所有 UI 元素中使用新的主色。

希望這篇文章能幫助你在設(shè)計(jì)系統(tǒng)中創(chuàng)建色彩體系。如果你想要學(xué)習(xí)更多設(shè)計(jì)系統(tǒng)中排版和布局的知識(shí)，可以在評(píng)論中留言，謝謝！

往期精選文章：