編輯導(dǎo)語：設(shè)計團隊在日常工作時，經(jīng)常會遇到一些風(fēng)格化等等不相同的問題，這時候需要一套設(shè)計原則來敲定界面，確定用戶真正想要的，也能提高團隊整體效率；本文作者分享了關(guān)于UI設(shè)計中的設(shè)計變量，我們一起來看一下。

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

從目標達成的角度來說，設(shè)計規(guī)則的創(chuàng)建與執(zhí)行同樣重要。

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

一、構(gòu)成

什么是設(shè)計變量（Design Token）？

在數(shù)字產(chǎn)品的概念中，許多中心和微小的UI信息片段將在多個平臺上使用，被稱為：設(shè)計變量（Design Token），他們是設(shè)計系統(tǒng)中設(shè)計語言的構(gòu)建塊，也是設(shè)計決策的呈現(xiàn)。

他們維護核心樣式的所有值：間距，顏色，版式，斷點，動畫，字體，平臺比例尺，組件狀態(tài)等，最終通過數(shù)據(jù)表示。

命名規(guī)范和結(jié)構(gòu)化的約束，可確保產(chǎn)品體驗的統(tǒng)一度與靈活性，更進一步可為產(chǎn)品打造賦有情感的品牌認知；而對于SaaS類或者APass類的公司而言，設(shè)計變量還可提供給多個合作商所用，滿足多種定制化的訴求。

二、實施例舉

在以往的真實產(chǎn)品中，示例（如下）。

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

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

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

這里我們將以群核科技旗下，工具設(shè)計系統(tǒng)（Tools ）中的設(shè)計變量為例，來給大家進行詳細分析。

首先在設(shè)計原則下，我們引申出設(shè)計變量規(guī)則的制定原則：精準、靈活、易讀。

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

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

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

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

1）主題定制

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

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

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

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

2）跨平臺呈現(xiàn)

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

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

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

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

3）優(yōu)化工作流

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

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

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

三、結(jié)語

簡而言之，設(shè)計變量作為一個管理風(fēng)格樣式的有效手段，可集成主題管理，對跨平臺開發(fā)也同樣起到作用。

簡化團隊合作協(xié)作流程，提升迭代維護效率，尤其適用于需要構(gòu)建多個Web應(yīng)用程序和跨終端應(yīng)用程序的組織。

作者：神樂；參與：小柴，西之，沙拉；公眾號：酷家樂用戶體驗設(shè)計

本文由 @酷家樂用戶體驗設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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