編輯導(dǎo)語：在產(chǎn)品設(shè)計流程中，從設(shè)計到研發(fā)落地，期間需要讓研發(fā)團(tuán)隊與前線團(tuán)隊理解產(chǎn)品的設(shè)計規(guī)范，而合適的方式方法不僅有助于減少溝通成本，同時也有利于后期的產(chǎn)品迭代升級。本篇文章里，作者介紹了design token這一方法，讓我們一起來看一下。

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

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

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

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

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

二、什么是 Design Token?

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

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

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

lightningdesignsystem-design tokens

設(shè)計也是同理：

lightningdesignsystem-UI Kit

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

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

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

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

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

1）提煉元素

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

2）樣式管理

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

① 以組件維度管理

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

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

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

② 以抽象維度管理

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

3）定義框架

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

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

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

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

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

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

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

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

圖層樣式：

文字：

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

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

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

作者：騰訊CDC；公眾號：騰訊CDC體驗設(shè)計

原文鏈接：https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw

本文由@騰訊CDC體驗設(shè)計 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議