▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

作者：吳鵬飛

編輯：章成愉

共 4915 字，預(yù)計(jì)閱讀 13 分鐘

在互聯(lián)網(wǎng)快速發(fā)展的時(shí)代，許多公司的設(shè)計(jì)團(tuán)隊(duì)都構(gòu)建了屬于自己的設(shè)計(jì)系統(tǒng)，極大地提高了一致性和效率。而色彩體系，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的部分之一，在心智模型中占據(jù)了關(guān)鍵的地位，因此為團(tuán)隊(duì)創(chuàng)建色彩體系至關(guān)重要。用戶體驗(yàn)設(shè)計(jì)師 Anvay Choudhary 將這一流程分為 7 步，為我們?cè)敿?xì)講解了如何從 0 到 1 創(chuàng)建一個(gè)完整的色彩體系，接下來讓我們一起學(xué)習(xí)這篇文章并嘗試為團(tuán)隊(duì)創(chuàng)建色彩體系吧！

圖片來源：Unsplash -- Clay Banks

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

不再為錯(cuò)誤狀態(tài)提供兩種不同的顏色、不再每次都從頭開始、也不再為決定按鈕的圓角半徑而猶豫不決，你應(yīng)該能 get 到我的點(diǎn)。

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

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

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

給所有的顏色歸類 —— 定義清晰所有的顏色，并將它們按類別分組。
創(chuàng)建擴(kuò)展色板 —— 通過基礎(chǔ)色的變體來創(chuàng)建整個(gè)色彩體系。
確立命名習(xí)慣 —— 以便所有團(tuán)隊(duì)成員用同樣的代稱進(jìn)行交流而不是用十六進(jìn)制代碼。
驗(yàn)證新的色板 —— 確保新的顏色符合所有的顏色要求并符合無障礙設(shè)計(jì)標(biāo)準(zhǔn)。
定義使用規(guī)范 —— 將顏色應(yīng)用至全局的 UI 元素中，如背景、文本和容器。
發(fā)布并測(cè)試 —— 將新的色彩規(guī)范發(fā)送給團(tuán)隊(duì)中的所有成員。
迭代 —— 接受團(tuán)隊(duì)的反饋和意見，如果需要的話，對(duì)色彩系統(tǒng)進(jìn)行迭代。
共享給開發(fā)者 —— 開發(fā)者接下來可以將色彩系統(tǒng)應(yīng)用至他們的組件庫(kù)。

1、給所有顏色歸類

對(duì)我們大多數(shù)人來說，所有顏色可以被分為四類，它們分別是 主色、輔助色、中性色和語(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í)度和一致性。

如果你的團(tuán)隊(duì)旗下有多款產(chǎn)品，那么每個(gè)子品牌（或產(chǎn)品）可能都需要有自己的一套主色和輔助色。

3）中性色

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

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

中性色色板

4）語(yǔ)義色

語(yǔ)義色是傳達(dá)信息的顏色，它們幫助我們向用戶傳達(dá)信息。例如，綠色具有積極的含義，因此我們通常用綠色來傳達(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 算法來創(chuàng)建色彩體系，現(xiàn)在他們已經(jīng)將其變?yōu)殚_源網(wǎng)站了，這樣我們就可以在網(wǎng)站上根據(jù)自己的需求調(diào)整參數(shù)，從而非常方便地創(chuàng)建色彩體系。

Colorbox 截圖

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

色相
飽和度
明度

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

讓我們一起來看一下如何使用 Colorbox：

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

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

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

首先，定義首尾色塊的色相值；
接下來，選擇一條變化曲線（線性 / 三次曲線 / 正弦...）。曲線決定了首尾色塊之間的色相如何變化。可以多嘗試一下，玩一玩，然后選擇一種比變化曲線；

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

首先，定義首尾色塊的飽和度值。（我更喜歡 5～100，因?yàn)樗梢援a(chǎn)生用于背景的淺色。）
同樣地，接下來選擇一條變化曲線（線性 / 三次曲線 / 正弦......），它將決定首尾色塊之間的飽和度值如何變化。

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

100 到 35 的范圍可以滿足大多數(shù)顏色的需求，盡管你可能最終還是想要對(duì)其中一些色塊做細(xì)微的調(diào)整。
如果你想讓明度從一個(gè)色塊到下一個(gè)色塊有規(guī)律的變化，我建議可以使用線性曲線。

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

對(duì)所有的基礎(chǔ)色使用相同的飽和度和明度變化設(shè)置是一個(gè)很好的做法，這樣的話我們最后會(huì)得到一個(gè)很和諧的色彩體系。

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

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

更多的選擇 —— 更多的認(rèn)知負(fù)荷 —— 更多的維護(hù)

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

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

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

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

（[1]Design tokens 是與平臺(tái)無關(guān)的變量。例如，將一種顏色色值傳到系統(tǒng)中，然后轉(zhuǎn)換成 token ，前端就可以直接取這個(gè)變量使用。即使是色值被修改，當(dāng)變量名不變時(shí)，對(duì)整體代碼是毫無影響的，開發(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ù)顏色的功能而不是本身的色相來命名，例如：主色、成功色和錯(cuò)誤色而不是海洋綠、綠色和紅色。

下面來看一下 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è)顏色的色板。理論上來講，這些調(diào)色板應(yīng)該滿足你在設(shè)計(jì)每個(gè) UI 元素時(shí)的顏色需求。

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

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

WCAG 色彩對(duì)比指南

以裝飾為唯一目的的 UI 元素和處于禁用狀態(tài)的元素不需要遵循本準(zhǔn)則。

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

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

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

輔助文字應(yīng)該使用哪種色調(diào)？

CTA 按鈕[2[（Call to action，行為召喚按鈕）的背景色應(yīng)該是什么顏色？

處于禁用狀態(tài)的元素要用什么顏色？

（[2] CTA 是 Call to action 的縮寫，中文通常稱之為行為召喚，CTA 按鈕即為行為召喚按鈕。當(dāng)設(shè)計(jì)師有意識(shí)地通過設(shè)計(jì)去引導(dǎo)甚至誘導(dǎo)用戶去執(zhí)行特定的操作，諸如點(diǎn)擊按鈕、留下聯(lián)絡(luò)方式或者發(fā)生購(gòu)買行為，都算是行為召喚。）

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

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

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

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

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

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

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

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