目錄

設(shè)計系統(tǒng)

設(shè)計系統(tǒng)的定義

設(shè)計系統(tǒng)的優(yōu)勢

設(shè)計系統(tǒng)存在的問題

設(shè)計工程化

設(shè)計系統(tǒng)探索

設(shè)計系統(tǒng)落地實踐

Design Token

Design Token 實踐

設(shè)計工程化理想方案構(gòu)想

展望

參考文獻

---

????????近幾年圍繞業(yè)務(wù)中臺化的場景，涌現(xiàn)出了許多低代碼平臺。面對多組件、多頁面、跨平臺的復(fù)雜場景，如何保證整體的用戶體驗一致性，減少用戶認知和負擔(dān)，提升用戶使用效率，便成為業(yè)務(wù)迫切需要解決的問題。本文從組件化角度聊聊設(shè)計工程化是如何解決模塊化與規(guī)?；膯栴}。

????????從傳統(tǒng)軟件工程的思路出發(fā)，組件化是解決復(fù)雜模塊的抽象、復(fù)用及統(tǒng)一的常用解決方案。那么對于中臺設(shè)計來說，是否也能借鑒軟件工程學(xué)的思路來解決設(shè)計遇到的模塊化與規(guī)?；膯栴}呢？這便是近幾年設(shè)計工程化所討論并嘗試解決的問題。

????????設(shè)計工程化源于 2013 年 Brad Forst 提出的原子設(shè)計理論（Atomic Design），理論使用一種有條理創(chuàng)建模式庫的方法，結(jié)合軟件開發(fā)的組件化思想，從最原始的原子出發(fā)，逐層構(gòu)筑更高級別的組織，以解決設(shè)計模塊化的問題，這就是設(shè)計系統(tǒng)的前身。

設(shè)計系統(tǒng)

設(shè)計系統(tǒng)的定義

????????設(shè)計系統(tǒng)是由設(shè)計語言和模式庫構(gòu)成，在設(shè)計原則的指導(dǎo)下，通過統(tǒng)一的協(xié)作語言和科學(xué)的管理方法組織起來，并創(chuàng)建體驗一致的用戶界面的系統(tǒng)。其目的是用于提高設(shè)計師和研發(fā)人員溝通效率，協(xié)作效率的實用工具，也能夠更為客觀地反映用戶的需求。建立有效的設(shè)計系統(tǒng)，不僅能提高設(shè)計決策和協(xié)作的效率，也能減少系統(tǒng)出錯的可能性。

設(shè)計系統(tǒng)的優(yōu)勢

• 溝通效率：以往由于雙方專業(yè)知識領(lǐng)域的差異而不好理解的概念，變得清晰了許多，例如在討論組件的視覺呈現(xiàn)和交互邏輯時，往往需要不少的溝通和反復(fù)調(diào)整的成本，如今也因為規(guī)則的約定而順暢了許多；

• 一致性：產(chǎn)品在跨項目、跨平臺的場景下，借助設(shè)計系統(tǒng)約定的規(guī)則，使用一致的設(shè)計語言來避免產(chǎn)品快速迭代中，可能遇到的視覺，交互，體驗不一致問題；

• 文檔化：將設(shè)計語言、設(shè)計規(guī)則、模式庫文檔化，詳細說明組件的外觀，交互，適用場景等，可避免設(shè)計研發(fā)無根可循；

• 模塊化：組件化使用有限的規(guī)則來指導(dǎo)設(shè)計和研發(fā)，這樣可實現(xiàn)設(shè)計研發(fā)關(guān)注點分離；并且利用原子化設(shè)計理論，逐層構(gòu)筑模塊、模板、頁面等；

• 可維護性：原子化的應(yīng)用增強了模塊的獨立性，使得設(shè)計和研發(fā)的迭代更新變得高效，當一個模塊需要更新時，使用這個模塊的更高階模塊也能夠同步更新；

• 協(xié)作效率：設(shè)計系統(tǒng)的引入解決了設(shè)計和研發(fā)兩種角色在產(chǎn)品迭代鏈路中，信息丟失和同步問題，大部分未遵循設(shè)計規(guī)則的組件模塊，能夠被及時發(fā)現(xiàn)并拋出；

設(shè)計系統(tǒng)存在的問題

????????自 Google 推出 Material Design 以來，各個大小公司的設(shè)計團隊都花費了大量時間整理并發(fā)布自家產(chǎn)品的設(shè)計規(guī)范。用百家齊放來形容并不為過，并連續(xù)三年占據(jù)設(shè)計領(lǐng)域的熱度榜。甚至有些規(guī)模不超過10人的小團隊，也都投身到設(shè)計系統(tǒng)的整理中，似乎變成了每個設(shè)計團隊的 KPI。

經(jīng)過各個團隊的驗證，目前設(shè)計系統(tǒng)存在以下需要好好思考的問題：

• 整理耗時：定義所有的設(shè)計規(guī)則和約束，以及基礎(chǔ)和業(yè)務(wù)組件的整理，都需要經(jīng)過大量的討論，不僅僅涉及設(shè)計團隊內(nèi)部的溝通，也涉及各個業(yè)務(wù)線研發(fā)團隊的外部溝通。

• 維護成本：設(shè)計系統(tǒng)是需要不斷維護并迭代的，并非一勞永逸；

• 缺乏創(chuàng)造力：業(yè)務(wù)迭代受限于設(shè)計系統(tǒng)的規(guī)則和約束，創(chuàng)作的空間少了，但也帶來了產(chǎn)品體驗的一致性；

• 復(fù)雜度高：模塊化可降低系統(tǒng)的維護成本，但相反地會提高模塊之間的耦合度，使得產(chǎn)品創(chuàng)新性難以提升；

????????如果從長遠的角度看，一個好的設(shè)計系統(tǒng)不僅僅要能支持當前階段的設(shè)計和研發(fā)工作，也要能支持一個團隊的整體協(xié)同工作，更要能支持從規(guī)范本身出發(fā)，不斷地進行演進和創(chuàng)新。

設(shè)計工程化

????????設(shè)計系統(tǒng)的流行推動了設(shè)計工程化的發(fā)展，下面對設(shè)計工程化的討論主要分為兩個部分：第一部分是以設(shè)計師視角出發(fā)的設(shè)計系統(tǒng)探索，第二部分是以工程師視角的設(shè)計系統(tǒng)落地實踐。

設(shè)計系統(tǒng)探索

????????以產(chǎn)品生產(chǎn)鏈路來看，設(shè)計稿作為生產(chǎn)的上游輸入源，資源的生產(chǎn)方式和管理方式，直接影響下游（如：研發(fā)生產(chǎn)）的交付效率。設(shè)計系統(tǒng)的引入，對于設(shè)計師來說，必然得主導(dǎo)系統(tǒng)的落地運行，以保證設(shè)計資產(chǎn)的質(zhì)量與流通順暢。

????????但設(shè)計系統(tǒng)的落地強依賴于生產(chǎn)工具的能力，傳統(tǒng)的 Photoshop，AI 等設(shè)計工具，缺乏資源管理維度的能力。在現(xiàn)代設(shè)計工具（如 Sketch，Figma）出現(xiàn)以前，設(shè)計系統(tǒng)往往需要借助第三方平臺提供的插件，并按插件規(guī)范命名圖層，組織設(shè)計資源，才能生成設(shè)計系統(tǒng)文檔。設(shè)計規(guī)則和約束依舊無法很好的融入設(shè)計工作流，于是在 UI 設(shè)計工具領(lǐng)域出現(xiàn)了 Figma, Sketch 等新寵，嘗試將前端工程化的思想帶入設(shè)計領(lǐng)域。

????????設(shè)計師在完成樣式設(shè)計后，研發(fā)工程師需要按設(shè)備的尺寸，還原設(shè)計的排版布局意圖。這造成了 UI/UX 和工程師之間的職能錯配和重疊問題，工程師似乎承擔(dān)了不少設(shè)計層面的實現(xiàn)任務(wù)。Figma 將組件化思想融入設(shè)計工具的同時，還引入了 Variants 等概念。讓組件的響應(yīng)式設(shè)計任務(wù)回歸設(shè)計師，由設(shè)計師把控組件交互的各個形態(tài)。同時也因為顏色變量、文本樣式、圖層樣式等運用復(fù)用思想的特地引入，設(shè)計系統(tǒng)的運行與維護，設(shè)計資產(chǎn)的流通，也順利進入設(shè)計師的日常工作流中。

設(shè)計系統(tǒng)落地實踐

????????作為「設(shè)計系統(tǒng)」執(zhí)行方的設(shè)計師與前端工程師，日常工作分別是在兩個差異化較大的工作流中進行的。常規(guī)流程是設(shè)計師在設(shè)計工具（Sketch、Figma）中完成頁面設(shè)計后，前端再參照繪制好的原型稿和標注稿，在代碼環(huán)境中還原視覺稿 UI/UX。

但在這個過程中時常會遇到以下問題：

1. ·前端如何高效的獲取上游設(shè)計的更新？

2. ·視覺稿中可復(fù)用的設(shè)計系統(tǒng)原子，如果準確地傳達給下游？

3. ·視覺還原工作還能提效嗎？

前端如何高效的獲取上游設(shè)計的更新？

????????設(shè)想這么一個場景，在產(chǎn)研交付的過程中，設(shè)計師在視覺稿中做的每次修改，都希望能快速響應(yīng)到最終的產(chǎn)品中，盡可能做到敏捷。而實際工作中，設(shè)計上游變更后會告知前端（存在少數(shù)變更不告知的情況），前端再打開包含標注信息的設(shè)計工具和代碼編輯工具完成需求修改。在這個場景中，設(shè)計師會通過口頭或文字羅列視覺變更點，存在一定的溝通成本和信息丟失問題。在最終產(chǎn)品交付上線前，還會經(jīng)過一輪「設(shè)計走查」環(huán)節(jié)（敏捷開發(fā)中經(jīng)常忽略的一環(huán)），可能又會產(chǎn)生新的設(shè)計上游變更，如此反復(fù)。

視覺稿中可復(fù)用的設(shè)計系統(tǒng)原子，如何傳達給下游？

????????一個成熟的項目，往往會有自己的設(shè)計系統(tǒng)，設(shè)計原子作為系統(tǒng)中可復(fù)用程度較高的模塊，已深度整合到設(shè)計工作流中。但由于設(shè)計和前端領(lǐng)域的概念不互通，導(dǎo)致可復(fù)用的信息不能有效傳達。雖然設(shè)計師會整理包含字號層級，品牌色板，卡片陰影等信息的設(shè)計規(guī)范文件，但這些信息往往不能在視覺交付稿中很好的展現(xiàn)。要理解視覺稿中的設(shè)計原子，前端需要了解設(shè)計工具中的概念，如 Sketch 的圖層樣式、Symbols，Figma 的 Variants 等等。設(shè)計師是最了解頁面樣式復(fù)用邏輯的，但真正實現(xiàn)頁面樣式的卻是前端工程師，這不可避免產(chǎn)生視覺還原誤差。

視覺還原工作還能提效嗎？

????????設(shè)計師在繪制好頁面視覺稿后，前端需要將視覺稿還原成可交互的頁面，按古早的分工，這里需要三種角色參與，分別是視覺設(shè)計師、頁面重構(gòu)工程師（負責(zé) HTML + CSS 等 UI/UX 邏輯）和前端工程師（負責(zé)數(shù)據(jù)渲染等邏輯）。本質(zhì)上，視覺還原就是將設(shè)計工具中的視覺稿描述轉(zhuǎn)換為 Web 能理解的數(shù)據(jù)描述，即 HTML + CSS。而這一塊的信息轉(zhuǎn)換工作正是團隊近一年來嘗試攻克的點，團隊立項的「Deco 智能代碼項目」通過設(shè)計工具插件從視覺稿原始信息中提取結(jié)構(gòu)化的數(shù)據(jù)描述（D2C Schema），然后結(jié)合規(guī)則系統(tǒng)、計算機視覺、智能布局、深度學(xué)習(xí)等技術(shù)對 D2C Schema 進行處理，轉(zhuǎn)換為布局合理且語義化的 D2C Schema JSON 數(shù)據(jù)，最后再借助 DSL 解析器轉(zhuǎn)換為多端代碼。

????????智能代碼解決了視覺還原工作整體的效能問題，但具體怎么讓設(shè)計系統(tǒng)完美銜接研發(fā)工作流，降低設(shè)計研發(fā)協(xié)作成本，提升最終產(chǎn)出代碼的可維護度，正是 DesignToken 可以發(fā)揮作用的地方。

Design Token

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. -- Jina Anne?

????????用上述 Design Token 之母的一段話，我們可以這么理解 Design Token。Design Token 是一種以平臺無關(guān)的方式來表達設(shè)計決策的方法，以便在不同領(lǐng)域、工具和技術(shù)之間共享。在設(shè)計系統(tǒng)中的，Design Token 代表了構(gòu)成視覺風(fēng)格的，可復(fù)用的設(shè)計屬性，例如顏色、間距、字體大小等等。Token 被賦予一個特定的名稱（color.brand），該名稱對應(yīng)于某個設(shè)計決策定義的值（#3271FE）。

????????但有別于設(shè)計變量（Design Variables），Design Token 是一個具有平臺無關(guān)性的抽象層，該抽象層的命名約定為設(shè)計屬性創(chuàng)建了一種通用語言，可支持跨應(yīng)用，跨平臺，跨框架使用。

Design Token 的工作流程如下：

按照 W3C Design Token 興趣組最新擬定的草案，Design Token 主要涉及三個部分：

令牌（Token）

設(shè)計工具（Design Tool）

設(shè)計工具如 Figma、Sketch、AdobeXD 等，負責(zé)生產(chǎn)并維護設(shè)計系統(tǒng)中的 Tokens。

翻譯工具（Translation Tool）

翻譯工具是將 Design Token 從一種格式轉(zhuǎn)換為另外一種格式的工具，如 JSON to CSS。

Design Token 實踐

????????在「Deco 智能代碼」項目中，研發(fā)可以給項目關(guān)聯(lián)特定的設(shè)計系統(tǒng)（DSM），如「京東 APP 設(shè)計系統(tǒng)」，其中包含文本樣式，圖層樣式，調(diào)色板等設(shè)計原子。Deco 在做布局樣式還原時，會優(yōu)先使用設(shè)計系統(tǒng)中已有的 Design Tokens 并進行替換，并會標記設(shè)計系統(tǒng)中暫未錄入的設(shè)計變量，例如不在設(shè)計規(guī)范中的色值，字體大小等。

????????Design Token 的引入除了可以給布局還原的代碼做樣式精簡外，還能為視覺走查提供便利。因為 D2C（DesignToCode）的技術(shù)方案中，產(chǎn)出的代碼視覺還原度可以達到將近 100%，設(shè)計師可以更多地關(guān)注自身視覺稿的設(shè)計系統(tǒng)覆蓋度，借助上述流程中被標記的「設(shè)計變量」列表，可以十分方便的確認設(shè)計誤差，例如設(shè)計規(guī)范中規(guī)定的背景色為 brand-color-bg: F7F7F7，但代碼還原后的背景色未被替換為brand-color-bg，而是 #F6F6F6。

設(shè)計工程化理想方案構(gòu)想

????????設(shè)計工程化解決的是規(guī)?；?#xff0c;效率化的問題。首先從角色分工上，按職責(zé)劃分任務(wù)，涉及視覺呈現(xiàn)層面（元素邊距，字體顏色大小等）的工作交由設(shè)計師負責(zé)，研發(fā)只負責(zé)業(yè)務(wù)邏輯的功能開發(fā)。而設(shè)計稿到產(chǎn)品的視覺還原功能，可結(jié)合 D2C（Design To Code）和 Design Tokens 來實現(xiàn)。D2C 負責(zé)頁面視覺和響應(yīng)式設(shè)計的自動化還原工作，Design Tokens 負責(zé)把設(shè)計決策產(chǎn)生的設(shè)計因子整合到開發(fā)工作流，從而完成設(shè)計系統(tǒng)在設(shè)計和研發(fā)產(chǎn)研鏈路中的落地串聯(lián)。

????????通過上述方案，我們可以初步實現(xiàn)設(shè)計稿靜態(tài)頁面還原 + 響應(yīng)式設(shè)計的工程化。即解決了 UI 到研發(fā)的鏈路打通問題。那對于設(shè)計系統(tǒng)中的交互邏輯的部分（即 UX），該如何實現(xiàn)工程化呢？

????????以往的組件交互邏輯，如按鈕的點擊交互，下拉菜單的展開動畫，大多是由設(shè)計師口頭或簡單地畫組件的分鏡狀態(tài)來跟研發(fā)進行協(xié)作的。缺乏交互規(guī)范，即使設(shè)計系統(tǒng)文檔中有明確的交互設(shè)計規(guī)則，研發(fā)之間也會存在實現(xiàn)方案的差異，無法保持交互統(tǒng)一性和可維護性。

????????Figma 給出的解決方案是在視覺稿中直接繪制組件交互原型，再借助 A2C （Animation To Code）插件轉(zhuǎn)換為動畫描述文件（Animation JSON Schema），最終通過動畫解釋器（Animation Parser）完成 UX 鏈路的轉(zhuǎn)換工作。

以上便是現(xiàn)階段設(shè)計工程化落地的解決方案。

展望

????????設(shè)計工程化探討的不僅是產(chǎn)品設(shè)計系統(tǒng)的搭建過程，也是設(shè)計和研發(fā)兩種角色的分工轉(zhuǎn)變，及協(xié)作效率提升的過程。設(shè)計系統(tǒng)是一個具有包容性且充滿生命力的東西，包含從組件庫到設(shè)計語言的結(jié)構(gòu)化體系以及應(yīng)對不斷變化的創(chuàng)新迭代過程。Design Token 恰好是打通設(shè)計研發(fā)工作鏈路的一把鑰匙，但不應(yīng)該只有一把。

????????好的設(shè)計系統(tǒng)可以在產(chǎn)品的一致性和品牌的創(chuàng)造性表達之間取得平衡，好的組件化思路也應(yīng)該能最大化運用設(shè)計系統(tǒng)的價值。在未來，隨著技術(shù)的推陳出新，比如 AI 畫圖嘗試通過機器學(xué)習(xí)的方式生產(chǎn)藝術(shù)畫，設(shè)計工程化也會有更多可探索的方向。

參考文獻

• 探索 Design Token

• 現(xiàn)代 Web 開發(fā)困局

• 萬字長文：從產(chǎn)品設(shè)計到發(fā)布的全鏈路智能化

• 設(shè)計工程化三部曲：

  https://juejin.cn/post/7122711998839652389#heading-13

• Ant Design 設(shè)計工程化：

  https://zhuanlan.zhihu.com/p/344336425

• 提效神器 Design Token 的探索與應(yīng)用：

  https://juejin.cn/post/7120150297808207909