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

一、DesignToken 是什么

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

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

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

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

“ h1 { color : red } ”（h1 一級(jí)標(biāo)題）

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

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

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

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

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

h1 { Color: var( BrandColor ); }

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

這個(gè)邏輯對(duì)于有 UI 設(shè)計(jì)學(xué)習(xí)經(jīng)驗(yàn)的同學(xué)來(lái)說(shuō)都很好理解，那就是在 UI 設(shè)計(jì)軟件中樣式定義。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、DesignToken 的使用方法

了解了 DesignToken 是什么，那么接下來(lái)就要了解項(xiàng)目中應(yīng)該如何制定 DesignToken，我們先從獨(dú)立設(shè)計(jì)和開(kāi)發(fā)的項(xiàng)目說(shuō)起。

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

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

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

然后我們就要定義 DesignToken 的基本命名標(biāo)準(zhǔn)，因?yàn)?DesignToken 本身是可以套娃的，所以每一層的命名形式都要做出區(qū)分，我們把 Token 簡(jiǎn)單劃分成兩個(gè)層：

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

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

基礎(chǔ)顏色 Token：

1. 品牌默認(rèn)主色：color-brand-defult
2. 品牌主色懸?。篶olor-brand-hover
3. 錯(cuò)誤顏色禁用：color-error-disabled

文字字號(hào) Token：

1. 一級(jí)標(biāo)題字號(hào)：fontsize-head-big
2. 一般正文字號(hào)：fontsize-text-defult
3. 醒目?jī)r(jià)格字號(hào)：fontsize-price-big

陰影等級(jí) Token

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

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

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

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

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

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

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

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

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

具體可以參考成熟的案例，如 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

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

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

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

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

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

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

結(jié)尾

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

我們下篇再賤~

作者：超人的電話亭