2021-3-22 鶴鶴
設計系統基本就是組織如何構建數字產品的故事，在公司內部，設計系統改善了產品團隊之間的協作，而設計和工程團隊之間面臨的一個常見問題是：共享品牌準則和界面信息。在開發過程中，應該遵守還原設計的內容，但是我們都知道這并不是那么簡單。
從目標達成的角度來說，設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色，都能記住設計規范，結合設計原則（Perceptual Pattern ）最終達成界面展示在用戶面前的樣子。這也就需要設計系統內，有一套控制性強、拓展性高的方法來維系產品的風格呈現，也就是我們今天將要討論的設計變量（Design Token）
什么是設計變量（Design Token）
在數字產品的概念中，許多中心和微小的UI信息片段將在多個平臺上使用，被稱為：設計變量（Design Token），他們是設計系統中設計語言的構建塊，也是設計決策的呈現。他們維護核心樣式的所有值：間距，顏色，版式，斷點，動畫，字體，平臺比例尺，組件狀態等，最終通過數據表示。命名規范和結構化的約束，可確保產品體驗的統一度與靈活性，更進一步可為產品打造賦有情感的品牌認知。
而對于SaaS類或者APass類的公司而言，設計變量還可提供給多個合作商所用，滿足多種定制化的訴求。
在以往的真實產品中，示例（如下），設計人員會發現，實現和樣式管理的環節在開發過程中是完全斷掉的，設計語言轉化為開發的語言時，缺少風格系統完整性的延續。我們通常看到的style代碼都是一些幾乎沒有體感的參數，且公司產品體量越龐大復雜，想要全局迭代就越是痛苦。
但如果我們將這些參數封裝起來，用語義化的方式來進行描述，就增強了“系統下的畫面感”，如“font-size-level03”、“border-distinguish-background” 等，就是設計準則下情景化的歸類與描述。
但語義命名只是一個最終呈現，真正讓設計與開發者都能”讀語義，識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表，并讓大家對它們有著清晰的記憶。
這里我們將以群核科技旗下，工具設計系統（Tools ）中的設計變量為例，來給大家進行詳細分析。首先在設計原則下，我們引申出設計變量規則的制定原則：精準、靈活、易讀。
意指歸類與對象的精準性，配置化的靈活度，語意命名上的易讀性。
對所需范圍進行定義，命名規則與前端書寫規則達成約定。
變量的“結構完整”，有助于設計與工程團隊在長期維護上，提升靈活度，3層繼承結構，很大程度保證了“精準”“靈活”這一原則。
主題定制
我們找到產品界面中定義“核心樣式”的部分，例如顏色，字體大小，空間，動畫，陰影，斷點等等。通過這些具有統一命名規則的實體，用于代替硬編碼的值，直接集成到設計系統下的組件庫里，也在日常的產品界面開發中使用。
通過繼承，別名變量起到了銜接全局變量和指定變量的作用，指定變量影響了最終的樣式呈現，從而實現主題功能。
單個主題可供多個產品團隊使用，主題本身也提供可配置化，即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”，“產品定位差異”等，也可通過創建新的主題，完成新的對應表，繼而產生相應的風格模式，例如“暗夜/日光模式”或“舒適/緊湊”布局模式，“企業品牌”定制模式等等。
主題功能在產品中體現
跨平臺呈現
多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄，包括音樂，照片，文件和快捷方式，更加高效。它使iPad更具Mac感，也降低了學習成本。
目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加，設計和開發會消耗較多的時間在上面，而且很難去統一把控。
Design Token 在跨多端設計中不僅是存儲樣式的變量，更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性，在不同終端做到自動化的映射。
假設在移動端正文字用14x，而在pc端為12px，雖然它們值不一樣，但他們都是使用的color_text__primary，在不同終端變量會自動根據設備來取不同的值，通過一套設計就能實現多端運行，提升效率節約成本。
擁有了強大的設計變量樣式庫之后，它對我們的工作流程將帶來什么革新呢？
顯而易見的是，團隊將節省非常巨大的工作量，我們不再依賴單個工程人員的修改質量，且能更大程度減少跨組依賴。此外，早期設計工具無法與設計變量生成器進行本地通信，我們通過優化Sketch插件，完成了變量命名數據的輸出，使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。
產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整，設計師和產品團隊都將收獲全新的迭代方式，這是有歷史意義的一刻。
簡而言之，設計變量作為一個管理風格樣式的有效手段，可集成主題管理，對跨平臺開發也同樣起到作用。簡化團隊合作協作流程，提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。
文章來源：站酷 作者：酷家樂UED
藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務