在線設(shè)計(jì)、研發(fā)協(xié)作工具和組件概念的普世化，讓設(shè)計(jì)、研發(fā)效率大大提升；數(shù)字產(chǎn)品發(fā)展到今天，數(shù)字產(chǎn)品對(duì)迭代速度、個(gè)性化品質(zhì)要求也越來(lái)越強(qiáng)。設(shè)計(jì)師應(yīng)該如何應(yīng)對(duì)，做到更快速、高效的從設(shè)計(jì)到研發(fā)的落地？本文將通過(guò)介紹 Design Token 的基本知識(shí)及 Design Token 在設(shè)計(jì)中通過(guò)應(yīng)用為大家提供新的問(wèn)題解決思路。

關(guān)于設(shè)計(jì)的一致性

設(shè)計(jì)師對(duì)于原子設(shè)計(jì)理論（Atomic Design Methodology）肯定不陌生，從原子（Atoms）、分子（Molecules）、組織（Organisms）、模板（Templates）、頁(yè)面（Pages）包括標(biāo)準(zhǔn)流程（Patterns）到更完善的設(shè)計(jì)體系（Design Systems）一切的一切都是為了產(chǎn)品設(shè)計(jì)、研發(fā)效率和一致性提供幫助。同時(shí)，它們也是傳達(dá)設(shè)計(jì)原則、構(gòu)成產(chǎn)品獨(dú)特氣質(zhì)的基石。

為了讓上述的“設(shè)計(jì)基石”更統(tǒng)一，設(shè)計(jì)師一定會(huì)有一套設(shè)計(jì)規(guī)則（設(shè)計(jì)規(guī)范），但令人遺憾的是對(duì)于這些關(guān)鍵規(guī)則最熟悉的人，也大多是規(guī)則的制定者，其他設(shè)計(jì)師對(duì)該規(guī)則的細(xì)節(jié)則不甚清晰，在生產(chǎn)過(guò)程中大多是通過(guò)組件的復(fù)制、樣式的復(fù)制完成產(chǎn)品的設(shè)計(jì)。而開發(fā)者對(duì)規(guī)范的理解成本則更高，這在開發(fā)落地過(guò)程中則基本上依賴設(shè)計(jì)師和工程師的線下溝通，存在較高的溝通和走查的時(shí)間成本。

什么是 Design Token?

“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務(wù)器端進(jìn)行驗(yàn)證，而在設(shè)計(jì)體系中，Design Token 則可以簡(jiǎn)單理解為封裝的視覺(jué)樣式參數(shù)。

它是通過(guò)規(guī)定樣式參數(shù)，并通過(guò)一套符合設(shè)計(jì)師、工程師理解的統(tǒng)一的命名規(guī)則，為這些樣式參數(shù)的定義名稱。

例如在真實(shí)的產(chǎn)品設(shè)計(jì)、研發(fā)過(guò)程中，這個(gè)環(huán)節(jié)大多是斷掉的，通常看到的樣式代碼幾乎都沒(méi)有辨識(shí)性的參數(shù)，當(dāng)時(shí)間一久、產(chǎn)品復(fù)雜起來(lái)，想要全局迭代維護(hù)將是非常痛苦的事情，但如果我們將這些樣式參數(shù)規(guī)范和封裝起來(lái)，用語(yǔ)義化的方式進(jìn)行描述和管理，開發(fā)過(guò)程就會(huì)清晰的多：

△ lightningdesignsystem-design tokens

設(shè)計(jì)也是同理：

△ lightningdesignsystem-UI Kit

通過(guò) Design Token 可以更有效地保障設(shè)計(jì)、開發(fā)落地的一致性和可拓展性。接下來(lái)我將以 Sketch 為主要輸出工具的案例，給大家詳細(xì)講解以下內(nèi)容：

• 什么樣的產(chǎn)品需要用到 Design Token？
• 如何更高效地在設(shè)計(jì)文件中管理樣式參數(shù)？
• 如何向研發(fā)輸出 Design Token？

什么樣的產(chǎn)品需要用到 Design Token?

界面需要支持暗黑模式、用戶自定義、高頻運(yùn)營(yíng)皮膚需求的長(zhǎng)生命周期產(chǎn)品

1. 如何更高效地在設(shè)計(jì)文件中管理樣式參數(shù)？

Step1: 提煉元素

提煉核心影響視覺(jué)風(fēng)格的元素：形、色、字、構(gòu)、質(zhì)，落實(shí)到繪圖工具中（以 Sketch 最新版本為例），可通過(guò)樣式庫(kù)管理樣式類型有：形（倒角）、色（色彩）、字（文字）、質(zhì)（投影），間距則需要設(shè)計(jì)師通過(guò)記憶制定好的間距階直接應(yīng)用到設(shè)計(jì)中即可。

Step2: 樣式管理

由于設(shè)計(jì)師對(duì)于樣式管理個(gè)人習(xí)慣和產(chǎn)品體量的差異，大致可以分為以下兩種管理方式：

• 以組件維度管理：

即以基礎(chǔ)組件為中心，分散式管理應(yīng)用在組件中的樣式。以色彩為例，下圖中應(yīng)用按鈕中的灰色線框樣式被歸類到“按鈕”下。同時(shí)，該樣式也同樣應(yīng)用到輸入框中，因此，該樣式還需要被歸類到“輸入框”下。

這種管理方式在設(shè)計(jì)師在調(diào)用過(guò)程中看似應(yīng)用目標(biāo)更清晰，但當(dāng)業(yè)務(wù)不斷發(fā)展出現(xiàn)了復(fù)合型組件時(shí)，組件之間發(fā)生了嵌套，且復(fù)合組件中也需要用到相同的線框樣式時(shí)，這個(gè)相同的線框樣式還可能出現(xiàn)在更多的復(fù)合組件中。

當(dāng)需要對(duì)樣式進(jìn)行全局調(diào)整時(shí)，則需要考驗(yàn)設(shè)計(jì)師是否還能記得這個(gè)相同的線框樣式應(yīng)用在哪些組件里。無(wú)疑，這種方式對(duì)于樣式的維護(hù)和管理是個(gè)大的挑戰(zhàn)。因此可以采用更為集成化的抽象維度管理。

• 以抽象維度管理：

即樣式不與組件綁定，僅以樣式本身的性質(zhì)進(jìn)行分類。還是以上述的線框樣式為例，在分類上則以該樣式的性質(zhì)進(jìn)行歸類，如：線框/灰色。在樣式應(yīng)用時(shí)，這三個(gè)組件則可直接引用統(tǒng)一樣式，將原本的三個(gè)相同樣式進(jìn)行了集成化管理。

Step3: 定義框架

基于抽象維度管理方法，在設(shè)計(jì)文件中我們可以通過(guò)結(jié)合 Symbol 及樣式庫(kù)對(duì)：形（倒角）、色（色彩）、字（文字）、質(zhì)（投影）分別進(jìn)行集中管理：

圖中的示例中可以看到，樣式的分類可以通過(guò)“性質(zhì)+具體樣式”的框架進(jìn)行管理。

Step4: 定義命名規(guī)則

基于上述框架，還可在“性質(zhì)”中增加“應(yīng)用范圍”層級(jí)，可以更好地管理樣式的應(yīng)用范圍。

如：常見的自定義主題涉及到需要支持變更的品牌色；產(chǎn)品中相對(duì)需要固定的功能色（錯(cuò)誤、成功、告警等）。這樣的分類框架，可以幫助設(shè)計(jì)師進(jìn)行樣式集成管理的同時(shí)，也能對(duì)應(yīng)用場(chǎng)景有清晰規(guī)劃。

在“具體樣式”層級(jí)中，也可針對(duì)具體管理對(duì)象靈活調(diào)整，例如：在文字樣式管理中可添加文字對(duì)齊方向；在投影樣式管理中減少“應(yīng)用范圍”。

如何向研發(fā)輸出 Design Token？

通過(guò)完成上述管理樣式參數(shù)的方法，就可以在 Sketch 中的樣式庫(kù)中呈現(xiàn)一套完整的樣式表：

圖層樣式：

文字：

為了將這些樣式提取到研發(fā)同學(xué)方便查看的環(huán)境，設(shè)計(jì)同學(xué)需將樣式庫(kù)中的樣式轉(zhuǎn)錄至 Excel 表中：

具體研發(fā)命名與分類方式可基于該表格與研發(fā)同學(xué)共同擬定、優(yōu)化形成最終的設(shè)計(jì)、研發(fā) Design Token 對(duì)照表。

在日常產(chǎn)品設(shè)計(jì)過(guò)程中，設(shè)計(jì)同學(xué)在對(duì)樣式進(jìn)行調(diào)整后并定稿后，需及時(shí)將修改點(diǎn)同步到對(duì)照表中，并及時(shí)通知研發(fā)同學(xué)及時(shí)修改研發(fā)側(cè) Design Token，確保設(shè)計(jì)、研發(fā)的一致性。

歡迎關(guān)注作者「騰訊CDC體驗(yàn)設(shè)計(jì)」的微信公眾號(hào)：