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