目錄

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

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

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

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

設(shè)計(jì)工程化

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

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

Design Token

Design Token 實(shí)踐

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

展望

參考文獻(xiàn)

---

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

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

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

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

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

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

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

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

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

• 文檔化：將設(shè)計(jì)語(yǔ)言、設(shè)計(jì)規(guī)則、模式庫(kù)文檔化，詳細(xì)說(shuō)明組件的外觀(guān)，交互，適用場(chǎng)景等，可避免設(shè)計(jì)研發(fā)無(wú)根可循；

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

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

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

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

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

經(jīng)過(guò)各個(gè)團(tuán)隊(duì)的驗(yàn)證，目前設(shè)計(jì)系統(tǒng)存在以下需要好好思考的問(wèn)題：

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

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

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

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

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

設(shè)計(jì)工程化

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

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

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

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

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

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

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

但在這個(gè)過(guò)程中時(shí)常會(huì)遇到以下問(wèn)題：

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

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

3. ·視覺(jué)還原工作還能提效嗎？

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

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

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

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

視覺(jué)還原工作還能提效嗎？

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

????????智能代碼解決了視覺(jué)還原工作整體的效能問(wèn)題，但具體怎么讓設(shè)計(jì)系統(tǒng)完美銜接研發(fā)工作流，降低設(shè)計(jì)研發(fā)協(xié)作成本，提升最終產(chǎn)出代碼的可維護(hù)度，正是 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 之母的一段話(huà)，我們可以這么理解 Design Token。Design Token 是一種以平臺(tái)無(wú)關(guān)的方式來(lái)表達(dá)設(shè)計(jì)決策的方法，以便在不同領(lǐng)域、工具和技術(shù)之間共享。在設(shè)計(jì)系統(tǒng)中的，Design Token 代表了構(gòu)成視覺(jué)風(fēng)格的，可復(fù)用的設(shè)計(jì)屬性，例如顏色、間距、字體大小等等。Token 被賦予一個(gè)特定的名稱(chēng)（color.brand），該名稱(chēng)對(duì)應(yīng)于某個(gè)設(shè)計(jì)決策定義的值（#3271FE）。

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

Design Token 的工作流程如下：

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

令牌（Token）

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

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

翻譯工具（Translation Tool）

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

Design Token 實(shí)踐

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

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

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

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

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

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

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

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

展望

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

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

參考文獻(xiàn)

• 探索 Design Token

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

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

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

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

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

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

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

  https://juejin.cn/post/7120150297808207909