設計系統(tǒng)基本就是組織如何構建數(shù)字產(chǎn)品的故事，在公司內(nèi)部，設計系統(tǒng)改善了產(chǎn)品團隊之間的協(xié)作，而設計和工程團隊之間面臨的一個常見問題是：共享品牌準則和界面信息。在開發(fā)過程中，應該遵守還原設計的內(nèi)容，但是我們都知道這并不是那么簡單。

從目標達成的角度來說，設計規(guī)則的創(chuàng)建與執(zhí)行同樣重要。我們期望參與產(chǎn)品的每一個角色，都能記住設計規(guī)范，結合設計原則（Perceptual Pattern ）最終達成界面展示在用戶面前的樣子。這也就需要設計系統(tǒng)內(nèi)，有一套控制性強、拓展性高的方法來維系產(chǎn)品的風格呈現(xiàn)，也就是我們今天將要討論的設計變量（Design Token）

構成

什么是設計變量（Design Token）

在數(shù)字產(chǎn)品的概念中，許多中心和微小的UI信息片段將在多個平臺上使用，被稱為：設計變量（Design Token），他們是設計系統(tǒng)中設計語言的構建塊，也是設計決策的呈現(xiàn)。他們維護核心樣式的所有值：間距，顏色，版式，斷點，動畫，字體，平臺比例尺，組件狀態(tài)等，最終通過數(shù)據(jù)表示。命名規(guī)范和結構化的約束，可確保產(chǎn)品體驗的統(tǒng)一度與靈活性，更進一步可為產(chǎn)品打造賦有情感的品牌認知。

而對于SaaS類或者APass類的公司而言，設計變量還可提供給多個合作商所用，滿足多種定制化的訴求。

實施例舉

在以往的真實產(chǎn)品中，示例（如下），設計人員會發(fā)現(xiàn)，實現(xiàn)和樣式管理的環(huán)節(jié)在開發(fā)過程中是完全斷掉的，設計語言轉化為開發(fā)的語言時，缺少風格系統(tǒng)完整性的延續(xù)。我們通常看到的style代碼都是一些幾乎沒有體感的參數(shù)，且公司產(chǎn)品體量越龐大復雜，想要全局迭代就越是痛苦。

但如果我們將這些參數(shù)封裝起來，用語義化的方式來進行描述，就增強了“系統(tǒng)下的畫面感”，如“font-size-level03”、“border-distinguish-background” 等，就是設計準則下情景化的歸類與描述。

但語義命名只是一個最終呈現(xiàn)，真正讓設計與開發(fā)者都能”讀語義，識運用“。還需要我們在設計系統(tǒng)中建立一整套完整的設計變量對應表，并讓大家對它們有著清晰的記憶。

這里我們將以群核科技旗下，工具設計系統(tǒng)（Tools ）中的設計變量為例，來給大家進行詳細分析。首先在設計原則下，我們引申出設計變量規(guī)則的制定原則：精準、靈活、易讀。

意指歸類與對象的精準性，配置化的靈活度，語意命名上的易讀性。

對所需范圍進行定義，命名規(guī)則與前端書寫規(guī)則達成約定。

變量的“結構完整”，有助于設計與工程團隊在長期維護上，提升靈活度，3層繼承結構，很大程度保證了“精準”“靈活”這一原則。

定義完基礎規(guī)則，我們具體來看設計變量在產(chǎn)品構建中，三大主用途——1，主題定制   2，跨平臺呈現(xiàn)  3，優(yōu)化工作流

主題定制

我們找到產(chǎn)品界面中定義“核心樣式”的部分，例如顏色，字體大小，空間，動畫，陰影，斷點等等。通過這些具有統(tǒng)一命名規(guī)則的實體，用于代替硬編碼的值，直接集成到設計系統(tǒng)下的組件庫里，也在日常的產(chǎn)品界面開發(fā)中使用。

通過繼承，別名變量起到了銜接全局變量和指定變量的作用，指定變量影響了最終的樣式呈現(xiàn)，從而實現(xiàn)主題功能。

單個主題可供多個產(chǎn)品團隊使用，主題本身也提供可配置化，即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”，“產(chǎn)品定位差異”等，也可通過創(chuàng)建新的主題，完成新的對應表，繼而產(chǎn)生相應的風格模式，例如“暗夜/日光模式”或“舒適/緊湊”布局模式，“企業(yè)品牌”定制模式等等。

主題功能在產(chǎn)品中體現(xiàn)

跨平臺呈現(xiàn)

多端設計是未來發(fā)展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄，包括音樂，照片，文件和快捷方式，更加高效。它使iPad更具Mac感，也降低了學習成本。

目前我們很多產(chǎn)品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加，設計和開發(fā)會消耗較多的時間在上面，而且很難去統(tǒng)一把控。

Design Token 在跨多端設計中不僅是存儲樣式的變量，更是一套用于各操作系統(tǒng)間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性，在不同終端做到自動化的映射。

假設在移動端正文字用14x，而在pc端為12px，雖然它們值不一樣，但他們都是使用的color_text__primary，在不同終端變量會自動根據(jù)設備來取不同的值，通過一套設計就能實現(xiàn)多端運行，提升效率節(jié)約成本。

優(yōu)化工作流

擁有了強大的設計變量樣式庫之后，它對我們的工作流程將帶來什么革新呢？

顯而易見的是，團隊將節(jié)省非常巨大的工作量，我們不再依賴單個工程人員的修改質量，且能更大程度減少跨組依賴。此外，早期設計工具無法與設計變量生成器進行本地通信，我們通過優(yōu)化Sketch插件，完成了變量命名數(shù)據(jù)的輸出，使得工程人員可直觀看見變量名稱。這將為設計驗收節(jié)省大量時間。

產(chǎn)品的大批量的歷史問題也得到解決。數(shù)字化的自動識別效率遠高于痛苦的人工調(diào)整，設計師和產(chǎn)品團隊都將收獲全新的迭代方式，這是有歷史意義的一刻。

結語

簡而言之，設計變量作為一個管理風格樣式的有效手段，可集成主題管理，對跨平臺開發(fā)也同樣起到作用。簡化團隊合作協(xié)作流程，提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。

文章來源：站酷   作者：酷家樂UED

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務