起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Design Token 應用指南——設計篇
編輯導語：在產品設計流程中，從設計到研發落地，期間需要讓研發團隊與前線團隊理解產品的設計規范，而合適的方式方法不僅有助于減少溝通成本，同時也有利于后期的產品迭代升級。本篇文章里，作者介紹了design token這一方法，讓我們一起來看一下。
在線設計、研發協作工具和組件概念的普世化，讓設計、研發效率大大提升；在數字產品發展到今天，數字產品對迭代速度、個性化品質要求也越來越強。設計師應該如何應對，做到更快速、高效地從設計到研發的落地？本文將通過介紹 Design Token 的基本知識及 Design Token 在設計中通過應用為大家提供新的問題解決思路。
一、關于設計的一致性
設計師對于原子設計理論（Atomic Design Methodology）肯定不陌生，從原子（Atoms）、分子（Molecules）、組織（Organisms）、模板（Templates）、頁面（Pages）包括標準流程（Patterns）到更完善的設計體系（Design Systems），一切的一切都是為了產品設計、研發效率和一致性提供幫助。同時，它們也是傳達設計原則、構成產品獨特氣質的基石。
為了讓上述的“設計基石”更統一，設計師一定會有一套設計規則（設計規范），但令人遺憾的是對于這些關鍵規則最熟悉的人，也大多是規則的制定者，其他設計師對該規則的細節則不甚清晰，在生產過程中大多是通過組件的復制、樣式的復制完成產品的設計。
而開發者對規范的理解成本則更高，這在開發落地過程中則基本上依賴設計師和工程師的線下溝通，存在較高的溝通和走查的時間成本。
二、什么是 Design Token?
“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。
它是通過規定樣式參數，并通過一套符合設計師、工程師理解的統一的命名規則，為這些樣式參數的定義名稱。
例如在真實的產品設計、研發過程中，這個環節大多是斷掉的，通?？吹降臉邮酱a幾乎都沒有辨識性的參數。當時間一久、產品復雜起來，想要全局迭代維護將是意見非常痛苦的事情，但如果我們將這些樣式參數規范和封裝起來，用語義化的方式進行描述和管理，開發過程就會清晰得多：
lightningdesignsystem-design tokens
設計也是同理：
lightningdesignsystem-UI Kit
通過 Design Token 可以更有效地保障設計、開發落地的一致性和可拓展性。接下來我將以 Sketch 為主要輸出工具的案例，給大家詳細講解以下內容：
- 什么樣的產品需要用到 Design Token？
- 如何更高效地在設計文件中管理樣式參數？
- 如何向研發輸出 Design Token？
三、什么樣的產品需要用到 Design Token?
界面需要支持暗黑模式、用戶自定義、高頻運營皮膚需求的長生命周期產品。
1. 如何更高效地在設計文件中管理樣式參數？
1）提煉元素
提煉核心影響視覺風格的元素：形、色、字、構、質，落實到繪圖工具中（以 Sketch 最新版本為例），可通過樣式庫管理樣式類型有：形（倒角）、色（色彩）、字（文字）、質（投影），間距則需要設計師通過記憶制定好的間距階直接應用到設計中即可。
2）樣式管理
由于設計師對于樣式管理個人習慣和產品體量的差異，大致可以分為以下兩種管理方式。
① 以組件維度管理
即以基礎組件為中心，分散式管理應用在組件中的樣式。以色彩為例，下圖中應用按鈕中的灰色線框樣式被歸類到“按鈕”下。同時，該樣式也同樣應用到輸入框中，因此，該樣式還需要被歸類到“輸入框”下。
這種管理方式在設計師在調用過程中看似應用目標更清晰，但當業務不斷發展出現了復合型組件時，組件之間發生了嵌套，且復合組件中也需要用到相同的線框樣式時，這個相同的線框樣式還可能出現在更多的復合組件中。
當需要對樣式進行全局調整時，則需要考驗設計師是否還能記得這個相同的線框樣式應用在哪些組件里。無疑，這種方式對于樣式的維護和管理是個大的挑戰。因此可以采用更為集成化的抽象維度管理。
② 以抽象維度管理
即樣式不與組件綁定，僅以樣式本身的性質進行分類。還是以上述的線框樣式為例，在分類上則以該樣式的性質進行歸類，如：線框/灰色。在樣式應用時，這三個組件則可直接引用統一樣式，將原本的三個相同樣式進行了集成化管理。
3）定義框架
基于抽象維度管理方法，在設計文件中我們可以通過結合 Symbol 及樣式庫對：形（倒角）、色（色彩）、字（文字）、質（投影）分別進行集中管理：
圖中的示例中可以看到，樣式的分類可以通過“性質+具體樣式”的框架進行管理。
4）定義命名規則
基于上述框架，還可在“性質”中增加“應用范圍”層級，可以更好地管理樣式的應用范圍。
如：常見的自定義主題涉及到需要支持變更的品牌色；產品中相對需要固定的功能色（錯誤、成功、告警等）。這樣的分類框架，可以幫助設計師進行樣式集成管理的同時，也能對應用場景有清晰規劃。
在“具體樣式”層級中，也可針對具體管理對象靈活調整，例如：在文字樣式管理中可添加文字對齊方向；在投影樣式管理中減少“應用范圍”。
四、如何向研發輸出 Design Token？
通過完成上述管理樣式參數的方法，就可以在 Sketch 中的樣式庫中呈現一套完整的樣式表。
圖層樣式：
文字：
為了將這些樣式提取到研發同學方便查看的環境，設計同學需將樣式庫中的樣式轉錄至 Excel 表中：
具體研發命名與分類方式可基于該表格與研發同學共同擬定、優化形成最終的設計、研發 Design Token 對照表。
在日常產品設計過程中，設計同學在對樣式進行調整后并定稿后，需及時將修改點同步到對照表中，并及時通知研發同學及時修改研發側 Design Token，確保設計、研發的一致性。
作者：騰訊CDC；公眾號：騰訊CDC體驗設計
原文鏈接：https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw
本文由@騰訊CDC體驗設計 授權發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
