DesignToken 是這兩年非常高頻出現(xiàn)的 B 端設(shè)計術(shù)語，主要應(yīng)用于設(shè)計規(guī)范的交付和前端協(xié)作上，是 B 端設(shè)計師必須要掌握的基礎(chǔ)知識和概念之一，今天的分享來認識它的基本概念。

一、DesignToken 是什么

了解 DesignToken 就要先要了解 Token 是什么，它是一個開發(fā)術(shù)語，大多翻譯為 —— 令牌，是程序之間進行數(shù)據(jù)驗證和通信的相關(guān)編碼的統(tǒng)稱。

比如我們在一個應(yīng)用中完成賬號的登錄，那么服務(wù)器就會返回給客戶端一串字符，每次你刷新頁面還是訪問其它模塊時服務(wù)器都會驗證這個串字符來確定你的身份。類似于我們進辦公樓前臺拿了一個臨時卡，你就可以用它穿行于樓內(nèi)的不同區(qū)域，如果沒有這個臨時卡就只能被安檢拒之門外。

令牌這個翻譯用在開發(fā)場景中非常合適，但直接把 DesignToken 叫設(shè)計令牌的話是不太合理的，我更愿意把它稱為 —— 樣式標簽，原因下面就解釋。

在 Html+CSS 的基礎(chǔ)知識中我們知道，要指定一個元素的樣式就要為它添加對應(yīng)的 CSS 屬性和值。比如一級標題要設(shè)置成品牌紅，那么就要增加這段 CSS 代碼，

“ h1 { color : red } ”（h1 一級標題）

如果鏈接文本也要使用相同的顏色，就要添加相同的屬性和值。

“ a { color : red }”（ a 即鏈接文本）

這個邏輯很容易理解，大多數(shù)設(shè)計元素都包含顏色，要分別為它們添加顏色屬性并設(shè)置色值。這時你就會發(fā)現(xiàn)，同一個顏色，往往會應(yīng)用到很多不同的元素上，比如上面的品牌紅色可以用在用戶名、提示信息、價格、關(guān)注按鈕等元素上。

剛開始設(shè)置的時候還好，但如果項目開發(fā)到一半或在后續(xù)的迭代中，品牌色從紅色變成藍色怎么辦？這就需要開發(fā)手動去把這些顏色找出來，然后改成新的色值，這種處理方式想想也復(fù)雜對不對。

而 DesignToken 的作用，就是在樣式和目標元素中間，再添加一層 “標簽”，用于統(tǒng)一管理。比如上面的品牌色，我們可以賦予它一個 Token 名叫 BrandColor（名字隨意起的不用糾結(jié)內(nèi)容和格式），后續(xù)所有用到品牌色的屬性只需要添加這個名字即可，而不用填寫具體的色彩數(shù)值，比如標題 h1 修改后的做法如下：

h1 { Color: var( BrandColor ); }

通過定義一個語義化的標簽讓不同設(shè)計元素被引用，不僅提高代碼的可讀性和編寫效率，同時可以讓后續(xù)的批量修改變得更容易。只要修改它的色值，就可以批量修改所有關(guān)聯(lián)了這個標簽的元素的顏色。

這個邏輯對于有 UI 設(shè)計學習經(jīng)驗的同學來說都很好理解，那就是在 UI 設(shè)計軟件中樣式定義。

通過定義一個樣式并命名，那么后續(xù)就可以批量調(diào)用和修改這個樣式，它們就是 DesignToken 的實際應(yīng)用案例之一。

但 DesignToken 并不只是一個簡單樣式名、標簽，它還可以實現(xiàn)更復(fù)雜的操作與應(yīng)用。

以主色舉例，雖然規(guī)范中定義主色只有一個，但并不代表在實際應(yīng)用中它的色值就是“固定”的，還可能會產(chǎn)生各種變體，比如一個填充主色的按鈕，除了默認狀態(tài)還包括懸停、點擊、禁用等不同狀態(tài)，它們都需要通過顏色區(qū)分，所以要設(shè)置多個主色變體來應(yīng)對這些場景。

同理，這些多出來的顏色，也要為它們設(shè)置對應(yīng)的 Token 命名。而除了主色外，其它輔助用色也有同樣的使用需求，且顏色的使用場景不一定只是狀態(tài)切換，所以命名往往是在色彩后加數(shù)字的方式，比如下方 Arco 的主色和成功色命名案例（變量名）：

雖然到這里我們可以用 Token 定義整個項目的所有色彩了，但還沒結(jié)束，就是同一個色彩可以應(yīng)用的對象很多，比如一個輔助色既可以用在文字，也能用在按鈕，還能用在日歷、選擇器、復(fù)選框中。

而多個顏色，且每個顏色應(yīng)用到的對象是數(shù)十種時，開發(fā)的混亂就開始了。比如定義一個新的彈出窗口內(nèi)的新標簽時，邊框應(yīng)該用 Red1 還是 Green2 還是 Blue3？

前端實現(xiàn)設(shè)計稿的過程之一，就是實現(xiàn)成百上千的設(shè)計元素屬性和值的正確配對，設(shè)計師在可視化的設(shè)計軟件中操作很簡單，但前端工程師完全靠這些基礎(chǔ) Token 命名做定義是很困難的。

于是騷操作就出現(xiàn)了，那就是對 Token 進行 “套娃”。即針對色彩更具體的應(yīng)用場景進行定義，創(chuàng)建更細分更有可讀性的 Token 進行命名，然后關(guān)聯(lián)基礎(chǔ)的色彩 Token 為它們賦值。

比如一個登錄按鈕的背景色可以命名 Token 為 Login-Button-Bg，一個輸入框的邊框可以命名為 Form-Input-Border，它們可以使用上面定義過的 BrandColor 作為值，也就是用上同一個顏色，如下面案例：

Login-Button-Bg: var ( BrandColor-1 );

Form-Input-Border:var ( BrandColor-1 );

有了這樣的聯(lián)系，那么修改了 BrandColor 的顏色，關(guān)聯(lián)它的更下級的 Token，自然也會被修改。

而在這一步很多人無法理解的就是既然前端開發(fā)是組件化的，在組件定義過程中配置好基礎(chǔ) Token 不就可以了，何必要再套一層，違背不樣套娃的祖訓？

恭喜你發(fā)現(xiàn)了華點。

對于部分的基礎(chǔ)的項目而言，在組件化開發(fā)過程中直接使用基礎(chǔ) Token 完全沒有問題。而在一些復(fù)雜的項目中，同一類組件會包含大量的變體，這些變體同樣需要單獨設(shè)置屬性和值，這時候套娃的作用才能真正發(fā)揮出來。不理解這個邏輯沒關(guān)系，只要知道，套娃的層數(shù)不是越多越好即可。

如果使用了 B 端的開源框架，那么色彩 Token 就會額外疊加一層。因為 B 端開源框架制定過豐富的色卡，而顏色上面的英文，就是它對應(yīng)的 Token。這些 Token 并沒有實際的意義，而項目中要定義品牌色、成功色的話，就需要用這些系統(tǒng)內(nèi)置的 Token 進行賦值……

介紹到這里，我們?nèi)紘兽D(zhuǎn)，如果 DesignToken 只定義顏色，那不管怎么套娃都改變不了它雞肋的命運。

真正讓 DesignToken 發(fā)揮價值的地方，在于它還可以定義其它設(shè)計屬性。包括尺寸、字體、透明度、圓角、投影、模糊、動效等要素，即我們在設(shè)計規(guī)范中定義的大多數(shù)樣式內(nèi)容。

通過這些 DesignToken 的定義和應(yīng)用，就可以讓前端在開發(fā)過程中大幅度提升效率，以及提高頁面還原度和最終交付質(zhì)量。

最后總結(jié)一遍，DesignToken 的應(yīng)用就是以前端技術(shù)驅(qū)動的樣式開發(fā)工作流，通過對樣式參數(shù)添加可讀性更高的命名來提升開發(fā)效率。

二、DesignToken 的使用方法

了解了 DesignToken 是什么，那么接下來就要了解項目中應(yīng)該如何制定 DesignToken，我們先從獨立設(shè)計和開發(fā)的項目說起。

DesignToken 是設(shè)計規(guī)范的延續(xù)，需要先完成 B 端設(shè)計規(guī)范，也就是在項目流程的規(guī)范定義和后續(xù)頁面設(shè)計之間展開。因為 DesignToken 必然會影響設(shè)計軟件內(nèi)樣式定義的規(guī)則，所以越早確定越好。

DesignToken 可以覆蓋規(guī)范中的大多數(shù)樣式，所以首先要根據(jù)規(guī)范中整理的樣式做分類，比如下面這些：

每個項目的規(guī)范內(nèi)容都有差異，所以除了色彩和字體外還包含什么內(nèi)容是無法固定的，下面是不同設(shè)計規(guī)范制定的 DesignToken 類目：

然后我們就要定義 DesignToken 的基本命名標準，因為 DesignToken 本身是可以套娃的，所以每一層的命名形式都要做出區(qū)分，我們把 Token 簡單劃分成兩個層：

1. 基礎(chǔ)樣式層
2. 組件應(yīng)用層

基礎(chǔ)樣式層就是上面提到的分類，它的命名形式可以用 "分類 - 場景 - 狀態(tài)" 這個模式來定義，而 Token 畢竟是代碼，所以只能用英文，不用考慮大小寫，用橫線來進行內(nèi)容的分段。應(yīng)用的案例如下：

基礎(chǔ)顏色 Token：

1. 品牌默認主色：color-brand-defult
2. 品牌主色懸浮：color-brand-hover
3. 錯誤顏色禁用：color-error-disabled

文字字號 Token：

1. 一級標題字號：fontsize-head-big
2. 一般正文字號：fontsize-text-defult
3. 醒目價格字號：fontsize-price-big

陰影等級 Token

1. 較低的陰影：shadow-low
2. 較高的陰影：shadow-high

這個命名的方法不是完全固定的，需要在團隊內(nèi)部協(xié)商，尤其是需要讓相關(guān)前端開發(fā)人員檢查。除了命名的格式外，還包括一些英文用詞的統(tǒng)一。

接著需要創(chuàng)建出對應(yīng)的表格，來記錄所有 Token 的明細，表格的屬性包括 Token 名、中文名、值、應(yīng)用場景等，比如下面的色彩 Token 案例：

完成基礎(chǔ)樣式層的定義以后，就可以進行組件應(yīng)用層的 Token 制定。但這一步，就不是由設(shè)計師來主導，而是讓前端工程師自己定了。

基礎(chǔ)樣式層的 Token，在設(shè)計軟件中就是樣式的命名，對設(shè)計過程有直接的影響，但是組件應(yīng)用層，則完全作用于前端開發(fā)的使用場景，對設(shè)計師而言是毫無必要的。所以項目如果還需要定這一層，就要由前端工程師自己判斷使用的需要，制作一個新的 Token 列表出來。

而在組件應(yīng)用層的 Token，則會使用新的命名規(guī)則，網(wǎng)上常見的做法就是類別+元素+屬性+等級+狀態(tài)，比如下面這個普及度最廣的案例：

光命名還不夠，同樣需要使用表格的方式進行記錄，而它和基礎(chǔ)樣式中唯一不同點，就是數(shù)值是基礎(chǔ)樣式的 Token 名而不是實際屬性值。比如下面案例：

相信你們立馬就能感覺出來這個命名實在是太復(fù)雜了，不是單詞寫的越多、越生僻效果就越好，而是沒有必要的情況下有經(jīng)驗的前端是絕對不會使用這么復(fù)雜的命名，不僅編寫起來麻煩，而且可讀性也極差，只會反向降低自己的效率。

所以任何成熟項目的 DesignToken 命名，都是盡可能精簡命名的段數(shù)和單詞長度，提高利用率。只要明白這個道理即可，而不用盯著前端或自作主張做出看起來非常專業(yè)但實則臃腫雞肋的命名文檔。

具體可以參考成熟的案例，如 SEMI、TDesign 的 Toekn 命名規(guī)則：

1. https://semi.design/zh-CN/basic/tokens
2. https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

掌握以上的認識，制定項目基礎(chǔ)規(guī)范的 DesignToken 就沒有問題了。但是，上一篇分享中提到的深色模式，就是在基礎(chǔ)規(guī)范之上制定一套額外的深色規(guī)范，同樣要被考慮進去。

而 DesignToken 實現(xiàn)深色模式的切換有兩種做法，一種是在 Token 命名中增加模式的前綴，比如 Arco 在深色模式添加了 Dark 的前綴用于區(qū)分。

還有一種做法，就是命名沒有任何變化，只是創(chuàng)建一個新的樣式表，替換里面的顏色，比如在 Semi Design 中的淺色和深色模式命名沒有區(qū)別，只是 HTML 會調(diào)用 Light 或者 Dark。

無論使用哪一種，都要記住在基礎(chǔ)規(guī)范中定義的所有 Token，在深色模式下都要羅列出來，即使它們已經(jīng)合并成相同的顏色，這樣才便于維護。

不管 DesignToken 這個概念看起來多高效還是先進，都一定要充分結(jié)合實際情況展開實踐，再總結(jié)相關(guān)的經(jīng)驗做優(yōu)化。并且并不建議設(shè)計師投入太多的時間到這個部分的工作中去，因為常規(guī)項目的迭代很快，我們很難預(yù)知項目半年以后會長什么樣子，所以 DesignToken 的應(yīng)用要把持靈活、高效、簡潔的核心價值觀。

下面是 Arco 和 Semi 的 Token 命名文檔案例，給大家作為參考：

結(jié)尾

以上就是 DesignToken 的認識和定義的全部知識點，至于如何結(jié)合設(shè)計軟件實現(xiàn)，如果看的人多，點贊轉(zhuǎn)發(fā)也多，就有空再更新。

我們下篇再賤~

作者：超人的電話亭