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

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

構(gòu)成

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

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

而對(duì)于SaaS類(lèi)或者APass類(lèi)的公司而言，設(shè)計(jì)變量還可提供給多個(gè)合作商所用，滿足多種定制化的訴求。

實(shí)施例舉

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

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

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

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

意指歸類(lèi)與對(duì)象的精準(zhǔn)性，配置化的靈活度，語(yǔ)意命名上的易讀性。

對(duì)所需范圍進(jìn)行定義，命名規(guī)則與前端書(shū)寫(xiě)規(guī)則達(dá)成約定。

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

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

主題定制

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

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

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

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

跨平臺(tái)呈現(xiàn)

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

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

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

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

優(yōu)化工作流

擁有了強(qiáng)大的設(shè)計(jì)變量樣式庫(kù)之后，它對(duì)我們的工作流程將帶來(lái)什么革新呢？

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

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

結(jié)語(yǔ)

簡(jiǎn)而言之，設(shè)計(jì)變量作為一個(gè)管理風(fēng)格樣式的有效手段，可集成主題管理，對(duì)跨平臺(tái)開(kāi)發(fā)也同樣起到作用。簡(jiǎn)化團(tuán)隊(duì)合作協(xié)作流程，提升迭代維護(hù)效率。尤其適用于需要構(gòu)建多個(gè)Web應(yīng)用程序和跨終端應(yīng)用程序的組織。

文章來(lái)源：站酷   作者：酷家樂(lè)UED

藍(lán)藍(lán)設(shè)計(jì)( www.0391cbd.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)