上一篇文章，咱們講清楚了如何專業(yè)的創(chuàng)建一套色卡，可能更多是設計團隊內(nèi)部方便使用。今天咱們再聊聊顏色的語義化以及如何制定顏色使用規(guī)則，其價值在于能方便與其他團隊配合，尤其是與開發(fā)之間的配合更加順暢，他們一定會夸你專業(yè)。

命名這個細節(jié)也是讓你設計的 UI 組件更加專業(yè)的要素之一，大廠都比較關注這塊，非常實用，值得學習。

一、什么是原子顏色？

原子顏色是來自我們品牌顏色中的單個顏色，例如紫色 100、紫色 200 等。它是顏色的最基本形式，將與語義化的顏色名稱相關聯(lián)。

原子顏色集，打點的表示品牌色

二、什么是語義化的顏色名稱？

顏色的語義名稱定義了一個原子顏色在整個系統(tǒng)中的使用方式，例如前景.主色。

原子顏色有更實用的名稱，比如綠色.200，紫色.500，因為沒有人能記住#7748F9。這些原子名稱不提供任何關于如何在系統(tǒng)中使用它的信息。

“這個顏色是主按鈕的背景色還焦點狀態(tài)的邊框顏色？”沒有人知道，語義化顏色就是為了解決這樣的問題。

語義命名不僅對顏色，對所有其他基本樣式都是必不可少的。

主按鈕做的 2 個語義顏色定義示例

在上面的例子中，按鈕顏色用了語義化名稱：背景.可交互.主要.默認（background.interactive.primary.default）來定義一個按鈕的默認背景顏色。

這個語義化名稱將原子顏色紫色.500 與按鈕的默認狀態(tài)背景顏色相關聯(lián)，這樣我們就可以清楚地知道紫色.500 將會作為按鈕的默認背景顏色。

三、把原子顏色和語義顏色相關聯(lián)

在語義化設計中，語義名稱并不是替代原子顏色名稱，而是將原子顏色與語義名稱相關聯(lián)，以便更好地表達設計元素的意義和用途。

原子顏色被附加到語義名稱上，因為你可以更改與特定語義名稱相關聯(lián)的原子顏色，而不會影響整個設計系統(tǒng)中其他元素的顏色。這種方式使得設計系統(tǒng)更加靈活，易于維護和修改。

更改原子顏色值會更新與之相關聯(lián)的語義顏色值，同時也會更新應用了該顏色的任何組件。

在上面的例子中，你可以看到我們把紫色.500 改到綠色.600，然后自動更新了語義顏色。一旦建立了你的語義顏色名字，它們就不應該經(jīng)常被更改。比如要創(chuàng)建一個深色模式，你只需要更改原子顏色的附加關系即可。

四、創(chuàng)建語義化的顏色集和命名約定

關于語義化顏色命名，有多種不同的策略。這里也需要多和開發(fā)溝通好，因為他們將在代碼中使用這些名稱。

1. 為什么這些名稱中有那么多的句點和小寫單詞？

最好的組件名稱是設計文件盡可能與代碼對齊，因此我們?nèi)绾蚊麡邮椒浅Ｖ匾?。開發(fā)通常喜歡小寫命名，但在需要使用多個單詞時，你也可能會看到駝峰命名法、短橫線命名法或下劃線命名法。

名稱之間的句點相當于在 Figma 中創(chuàng)建樣式文件夾結構時使用的反斜杠/。

如果你熟悉設計 token 或使用 Tokens Studio（可以參考 https://tokens.studio ），這也是工程師使用的 JSON 文件結構。你可以將其想象成面包屑導航結構。

左邊是 Figma 顏色樣式，右邊是通過 Tokens Studio 生成的.JSON 代碼

上圖左側是樣式的示例。"foreground.primary"或"foreground/primary"表示在前景文件夾中創(chuàng)建了一個主要樣式。

2. 三大類語義顏色集

語義顏色集可以分為 3 個主要類別，它們共同作用來設置所有 UI 元素的樣式。

• 前景色文本、圖標和位于背景之上的任何元素
• 背景色各個 UI 元素和整個內(nèi)容部分或主體的背景顏色
• 邊框色單個 UI 元素的描邊或輪廓顏色

前景、背景和邊框的語義顏色文檔示例，可以參考這份 Figma 文件 https://www.figma.com/community/file/1293249193874276579/how-to-create-semantic-color-sets

3. 組件設計樣式

在深入研究子類別命名之前，先看看前景、背景和邊框是如何一起組合為組件設計樣式的。

前景、背景和邊框樣式如何協(xié)同工作的示例

在上面的示例中，展示了一個 toast，它屬于“系統(tǒng)”類別下的“成功”子類。我們?nèi)匀皇褂昧酥饕痛我伾珌碓O置文本內(nèi)容的顏色，使用了第三種顏色來設置圖標按鈕的顏色。

但是，我們也可以使用“系統(tǒng)成功”顏色來設置文本內(nèi)容的顏色，這并沒有什么問題。由于圖標按鈕是一個嵌套的交互式組件，有它自己的樣式，因此我們不需要更改它的顏色。

五、子類別命名

你可能會想知道為什么要使用"foreground.system.success"而不是"foreground.feedback_banner.success"。這是因為這些準確的樣式將被多種類型的反饋組件所使用，例如在頁面中嵌入的提醒或警告信息。

設計師還可能需要自定義的本地組件，如果我們使用組件特定的命名方式，這將會讓他們困惑，不知道應該使用哪些樣式。因此，需要使用更加靈活、一致和可擴展的語義化命名方式，以便更好地管理和使用顏色樣式。

詳細分析這些類別，能幫助你為你的系統(tǒng)定義樣式。每個系統(tǒng)都有不同的基本樣式，因此最終的結果會有所不同，但原理是相通的。

語義命名結構示例

1. 系統(tǒng)范圍的顏色樣式

有些顏色樣式可以在多個組件中隨處使用。如果沒有另外指定，它將使用系統(tǒng)范圍的顏色樣式。

一些交互式組件，如次要按鈕，將使用前景.主要“foreground.primary”。而不是（前景.可交互.次級.默認）“foreground.interactive.secondary.default”前景樣式，因為我們不需要它。

我們可能只通過背景顏色來反映狀態(tài)，但如果你的系統(tǒng)希望通過次要按鈕的額外前景色變化來顯示狀態(tài)，那么你就需要加上這些特定的樣式。

系統(tǒng)范圍的顏色樣式示例

2. 特定的顏色樣式，意圖或用途

如果某種樣式?jīng)]有在整個系統(tǒng)中使用，第二級將定義意圖或用途。這第二級通常包括互動、輸入控件、系統(tǒng)和強調(diào)。

①交互組件

拿按鈕來舉例，為什么我們不直接說按鈕呢？因為未來可能會有其他自定義的交互，會使用相同的樣式。

這些按鈕進一步分為主要、次要、第三級和第四級。每個級別都有它們自己的狀態(tài)，包括默認、懸停、焦點、按下和激活。它們還有一個禁用狀態(tài)，但所有禁用的組件都采用相同的樣式，因此它們使用系統(tǒng)范圍的禁用顏色樣式。

②輸入控制組件/輸入組件

輸入控件和輸入的樣式相同，如果不是，你可以將它們分解。輸入包括文本、選擇器、日期控件、搜索、文本域、模糊處理等。輸入控件包括單選、復選框、切換、輸入步進器、滑塊等。

這些將具有未選擇和選擇狀態(tài) ，他們有自己的默認、懸停、焦點和按下狀態(tài)。系統(tǒng)樣式將用于其錯誤和禁用狀態(tài)。

③系統(tǒng)樣式

系統(tǒng)樣式用于所有系統(tǒng)組件，而嚴重性狀態(tài)用于交互式組件。這將包括 toast，內(nèi)聯(lián)提醒，輸入錯誤等。

它們的狀態(tài)是信息、成功、警告和錯誤。通常，錯誤將具有默認、懸停、焦點和按下狀態(tài)，因為在這些情況下用戶總是需要操作。

④強調(diào)

這個范圍很寬，由品牌內(nèi)使用的次要顏色組成。它是為我所謂的“品牌特色”保留的。這讓設計師在設計時具有創(chuàng)造性的靈活性。

這四個類別，加上我們的系統(tǒng)范圍風格，涵蓋了設計系統(tǒng)所需的所有基本組件。

六、應用

如果你是從零開始創(chuàng)建一個設計系統(tǒng)，我建議在你開始定義你的語義色彩風格之前做一些探索性的工作。

設計幾個包含多個核心組件的關鍵頁面，了解這些顏色的外觀，然后開始定義語義色。

很難在一篇文章中展示整個語義色彩系統(tǒng)，強烈推薦看看我做的這個 figma 源文件：https://www.figma.com/community

七、用插圖示意

你也可以使用原子顏色來創(chuàng)建插圖庫的語義化顏色集。這不會被工程師使用，但當你有多個設計師在制作需要保持一致的插圖時，這非常有幫助。

你可以用多種顏色定義高光、基色、陰影和輪廓。如果你在插圖中使用了很多人物，可以考慮制作膚色色卡。

（彩云注：把顏色集畫在一張插畫里，感覺會是一個很有創(chuàng)意的包裝方式，大家可以在自己的作品中試試看。）

使用語義化顏色制作的插圖

總結

提醒下，每個設計系統(tǒng)的需求都不同，所以要根據(jù)自己和團隊的需要來決定。

1. 原子顏色就是顏色的初始版本，而語義名稱則是給顏色起的名字
2. 在顏色的命名上，要和開發(fā)一起商量一個體系
3. 所有顏色樣式都可以分為三類：前景，背景和邊框
4. 為交互元素、輸入控件、整體系統(tǒng)和突出部分提供系統(tǒng)級別的顏色樣式，同時也有更具體的樣式
5. 詳細記錄每個具體顏色樣式的不同狀態(tài)，比如默認狀態(tài)、懸停狀態(tài)、聚焦狀態(tài)、按下狀態(tài)、激活狀態(tài)

今天這篇文章介紹了語義化顏色的細節(jié)點，專業(yè)而系統(tǒng)。如果你有學到一些，記得收藏點贊。以后面試再問你做組件設計細節(jié)，尤其是命名方式，你就可以回答的足夠有底氣了。

作者：彩云譯設計