如何更科學的給顏色命名？高手總結了7個步驟！

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

上篇回顧

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

一、什么是原子顏色？

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

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

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

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

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

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

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

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

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

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

三、把原子顏色和語義顏色相關聯

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

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

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

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

四、創建語義化的顏色集和命名約定

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

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

最好的組件名稱是設計文件盡可能與代碼對齊，因此我們如何命名樣式非常重要。開發通常喜歡小寫命名，但在需要使用多個單詞時，你也可能會看到駝峰命名法、短橫線命名法或下劃線命名法。

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

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

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

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

2. 三大類語義顏色集

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

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

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

3. 組件設計樣式

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

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

在上面的示例中，展示了一個 toast，它屬于“系統”類別下的“成功”子類。我們仍然使用了主要和次要顏色來設置文本內容的顏色，使用了第三種顏色來設置圖標按鈕的顏色。

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

五、子類別命名

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

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

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

語義命名結構示例

1. 系統范圍的顏色樣式

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

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

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

系統范圍的顏色樣式示例

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

如果某種樣式沒有在整個系統中使用，第二級將定義意圖或用途。這第二級通常包括互動、輸入控件、系統和強調。

①交互組件

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

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

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

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

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

③系統樣式

系統樣式用于所有系統組件，而嚴重性狀態用于交互式組件。這將包括 toast，內聯提醒，輸入錯誤等。

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

④強調

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

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

六、應用

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

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

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

七、用插圖示意

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

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

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

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

總結

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

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

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

歡迎關注作者的微信公眾號：「彩云譯設計」