2023年Design Token 應(yīng)用指南-設(shè)計(jì)篇

DesignToken應(yīng)用指南——設(shè)計(jì)篇在線設(shè)計(jì)、研發(fā)協(xié)作工具和組件概念的普世化，讓設(shè)計(jì)、研發(fā)效率大大提升；在數(shù)字產(chǎn)品進(jìn)展到今日，數(shù)字產(chǎn)品對迭代速度、共性化品質(zhì)要求也越來越強(qiáng)。設(shè)計(jì)師應(yīng)當(dāng)如何應(yīng)對，做到更快速、高效地從設(shè)計(jì)到研發(fā)的落地？本文將通過介紹DesignToken的基本學(xué)問及DesignToken在設(shè)計(jì)中通過應(yīng)用為大家供應(yīng)新的問題解決思路。

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

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

為了讓上述的“設(shè)計(jì)基石”更統(tǒng)一，設(shè)計(jì)師肯定會有一套設(shè)計(jì)規(guī)章（設(shè)計(jì)規(guī)范），但令人圓滿的是對于這些關(guān)鍵規(guī)章最熟識的人，也大多是規(guī)章的制定者，其他設(shè)計(jì)師對該規(guī)章的細(xì)節(jié)則不甚清楚，在生產(chǎn)過程中大多是通過組件的復(fù)制、樣式的復(fù)制完成產(chǎn)品的設(shè)計(jì)。

而開發(fā)者對規(guī)范的理解成本則更高，這在開發(fā)落地過程中則基本上依靠設(shè)計(jì)師和工程師的線下溝通，存在較高的溝通和走查的時間成本。

二、什么是DesignToken?

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

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

例如在真實(shí)的產(chǎn)品設(shè)計(jì)、研發(fā)過程中，這個環(huán)節(jié)大多是斷掉的，通?？吹降臉邮酱a幾乎都沒有辨識性的參數(shù)。當(dāng)時間一久、產(chǎn)品簡單起來，想要全局迭代維護(hù)將是看法特別苦痛的事情，但假如我們將這些樣式參數(shù)規(guī)范和封裝起來，用語義化的方式進(jìn)行描述和管理，開發(fā)過程就會清楚得多：

lightningdesignsystem-designtokens

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

lightningdesignsystem-UIKit

通過DesignToken可以更有效地保障設(shè)計(jì)、開發(fā)落地的全都性和可拓展性。接下來我將以Sketch為主要輸出工具的案例，給大家具體講解以下內(nèi)容：

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

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

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

1）提煉元素

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

2）樣式管理

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

①以組件維度管理

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

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

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

②以抽象維度管理

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

3）定義框架

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

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

4）定義命名規(guī)章

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

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

在“詳細(xì)樣式”層級中，也可針對詳細(xì)管理對象敏捷調(diào)整，例如：在文字樣式管理中可添加文字對齊方向；在投影樣式管理中削減“應(yīng)用范圍”。

四、如何向研發(fā)輸出DesignToken？

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

圖層樣式：

文字：

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

詳細(xì)研發(fā)命名與分類方式可基于該表格與研發(fā)同學(xué)共同擬定、優(yōu)化形