理論知識(shí)｜主題設(shè)計(jì)神器來啦！知識(shí)點(diǎn) Get 了嗎？

導(dǎo)言

設(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è)常見問題是：共享品牌準(zhǔn)則和界面信息。在開發(fā)過程中，應(yīng)該遵守還原設(shè)計(jì)的內(nèi)容，但是我們都知道這并不是那么簡單。

從目標(biāo)達(dá)成的角度來說，設(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)、拓展性高的方法來維系產(chǎn)品的風(fēng)格呈現(xiàn)，也就是我們今天將要討論的設(shè)計(jì)變量（Design Token）。

構(gòu)成

什么是設(shè)計(jì)變量

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

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

實(shí)施例舉

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

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

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

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

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

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

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

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

1、主題定制

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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