Ant Design 設(shè)計體系

本文的主題叫做 Invisible Design System，隱形的設(shè)計體系，主要是想和大家分享，我們對可見的設(shè)計體系背后隱形的設(shè)計規(guī)則的思考，以及如何通過設(shè)計工程化的方式，讓這些復(fù)雜的規(guī)則可用而不可見。

整個設(shè)計工程化探索主要分成兩部分內(nèi)容，第一部分是以設(shè)計師視角出發(fā)的工程化規(guī)則探索，第二部分是以工程師視角的工程化實(shí)踐。本文從設(shè)計師視角，聊聊 Ant Design 設(shè)計體系的建設(shè)。

Ant Design 從 2015 年第一個版本發(fā)布，至今已有 5 年時間，去年 Ant Design4.0 發(fā)布，提出了全新的價值觀：自然、確定性、意義感、生長性，基于這幾個價值觀向上發(fā)展，有最基礎(chǔ)的設(shè)計語言、設(shè)計資產(chǎn)，以及去年探索出的以工作流為中心的設(shè)計策略 JCD，最上層包括設(shè)計工具 Kitchen 以及云鳳蝶，這些內(nèi)容構(gòu)成了 Ant Design 設(shè)計體系的完整建設(shè)框架。

隨著整個行業(yè)的發(fā)展，企業(yè)級產(chǎn)品和系統(tǒng)的復(fù)雜度不斷的增強(qiáng)，我們也在思考，Ant Design 提供的組件和模板，在未來的應(yīng)用場景中能否持續(xù)提效和保證體驗一致。同時，我們也在思考，Ant Design 下一代的組件會是什么樣子，以及 Ant Design 整個設(shè)計體系會朝著什么方向演進(jìn)。

目前 Ant Design 一共有 63 個基礎(chǔ)組件，這些組件基本可以滿足一個系統(tǒng) 80% 以上的頁面搭建訴求，而且這些組件也提供高自由度的配置和自定義屬性。但也正是因為高靈活性，會導(dǎo)致很多人在使用組件的時候，找不到統(tǒng)一的原則和規(guī)范，尤其是設(shè)計層，在面對同樣的場景下，使用同樣的組件和規(guī)范，不同的人還是會出現(xiàn)不同的結(jié)果。

我們嘗試從整個設(shè)計體系的角度來思考，如何解決統(tǒng)一性和規(guī)范共識的問題。一套設(shè)計體系，除了最上層呈現(xiàn)的設(shè)計資產(chǎn)，例如，antd、antd pro、antV、TechUI 等，還包括資產(chǎn)背后的設(shè)計模式、設(shè)計原則、組織協(xié)同等，可見的設(shè)計資產(chǎn)只是整套設(shè)計體系呈現(xiàn)出來最直觀的一部分，而不可見的模式、原則和機(jī)制，提供了整套體系不斷演進(jìn)和創(chuàng)新的思路。

2020 年 UXTOOLS 對整個行業(yè)設(shè)計體系調(diào)研中總結(jié)到：“設(shè)計體系不能僅僅停留在組件層，而要將注意力聚焦在組件背后的體系上，既要支持從規(guī)范到代碼的自動調(diào)整，還要支持規(guī)范和組件體系化的演進(jìn)和創(chuàng)新。”

簡單來說，設(shè)計體系區(qū)別于單純的組件庫最大差異就是，能否支持從規(guī)范到代碼的自動調(diào)整，如果能做到這一層，才可以稱之為，Living Desing System（真正的設(shè)計體系）。

我們對整個設(shè)計體系的定位和思考，主要聚焦在兩個維度，一是從規(guī)范本身出發(fā)，另一個是從組織協(xié)同角度。從規(guī)范本身比較容易理解，大多數(shù)組件或者規(guī)范的建立基本都會從規(guī)范本身去迭代和進(jìn)化，但是組織協(xié)同是大家很少提到的一個點(diǎn)。那么組織協(xié)同和設(shè)計體系是一種什么關(guān)系呢？

如果從更長遠(yuǎn)的階段來看，一個設(shè)計體系不僅僅能支持當(dāng)前階段的設(shè)計和開發(fā)工作，也不只是支持某個開發(fā)者或者某個設(shè)計師的生產(chǎn)提效，而是要支持一個團(tuán)隊、一個組織的整體協(xié)同工作，還要能從規(guī)范本身支持不斷的演進(jìn)和創(chuàng)新。

首先從規(guī)范本身思考，以一個按鈕為例，一個按鈕除了直觀呈現(xiàn)出的樣式之外，還包括語義、位置、交互等，這些維度組合在一起，決定了按鈕最終呈現(xiàn)的狀態(tài)。而每一個維度里，又包含很多變量，這些變量可能會導(dǎo)致最終結(jié)果千差萬別。所以，因為規(guī)則本身的變量，會導(dǎo)致規(guī)范本身存在不確定性，這種不確定性會導(dǎo)致大家對組件的認(rèn)知和使用成本增加，進(jìn)而導(dǎo)致設(shè)計決策和研發(fā)成本增加，這是第一層思考。

另一個維度是從組織協(xié)同的角度去思考。Ant Design 的組件和規(guī)范從設(shè)計到最終被用戶使用，一共有四類角色參與，分別是 Ant Design 的設(shè)計師和工程師，業(yè)務(wù)設(shè)計師和工程師。理想的情況下生產(chǎn)和消費(fèi)流程是：Ant Design 的設(shè)計師設(shè)計組件，Ant Design 的工程師開發(fā)組件，再把組件給到業(yè)務(wù)設(shè)計師和工程師使用，業(yè)務(wù)工程師和設(shè)計師把使用過程中的問題反饋給生產(chǎn)端，形成一個完整的閉環(huán)。

但實(shí)際上，這個流程遠(yuǎn)遠(yuǎn)沒有這么理想化。實(shí)際過程各類角色并不是一個單獨(dú)的個體，所以每個角色之間可能存在各種交叉和連接，這就會導(dǎo)致兩個問題：一個是剛才提到過的規(guī)范本身的不確定性，每個人對規(guī)則的理解有所不同，導(dǎo)致規(guī)則在傳播過程中存在信息的分散和損耗。

另一個是因為多角色的協(xié)同，導(dǎo)致協(xié)作過程中存在信息不對等，比如，設(shè)計師更新了設(shè)計稿，但是前端沒有及時更新，就會導(dǎo)致最終的的組件效果存在差異。針對這兩個問題，我們嘗試通過設(shè)計工程化的方式，來收斂整個過程中的不確定性，提升 Ant Design 組織協(xié)同和組件生產(chǎn)效率。

設(shè)計工程化主要包含兩部分內(nèi)容，第一部分是基于 ETCG 模式的工程化規(guī)則探索，另一部分是系統(tǒng)化協(xié)作流程的建立。

ETCG 工程化規(guī)則探索

首先來看看 ETCG 工程化規(guī)則探索的部分。ETCG 是 Ant Design 基礎(chǔ)的設(shè)計模式，提供了從全局樣式到組件再到模板的設(shè)計體系建設(shè)思路，比如大家比較熟悉的 Globe Styles：全局樣式層，最基礎(chǔ)的色彩、字體、圖標(biāo)等，Components：antd 組件，Templates：Ant Design Pro 以及內(nèi)部版本的 TechUI。

今年，我們主要在前四個的基礎(chǔ)上新增了一個 G，Guides 交互規(guī)則。前四部分決定了組件和模板長成什么樣，最后一個 G，決定了人和機(jī)器之間應(yīng)該如何進(jìn)行交互。這套模式的核心是希望，不同的人在遇到同樣的問題時，能夠運(yùn)用這套模式推理得出同樣的結(jié)論。通過 ETCG 進(jìn)行工程化規(guī)則探索，可以簡單抽象成四個步驟：聚攏資產(chǎn)、定義概念、定性描述、定量決策。

前面兩個是大多數(shù)組件或者規(guī)范建設(shè)的思路，我們在工程化規(guī)探索上，重點(diǎn)對規(guī)則本身進(jìn)行定性和定量的區(qū)分，定性規(guī)則作為設(shè)計指南提供給設(shè)計師，定量的規(guī)則，提供給機(jī)器進(jìn)行工程化規(guī)則和組件的封裝。

第一步，聚攏資產(chǎn)，簡單來說就是收集業(yè)務(wù)中的頁面，找到高復(fù)用度的組件和模塊，并按照類型分類。通過對螞蟻中臺 50+產(chǎn)品的收集和整理，初步確定八個類型的專題，再經(jīng)過一輪收斂之后，最終確定下五大類專題，分別是：圖表、表單、列表、表格以及布局，內(nèi)部簡稱：四表一局。并按照專題小組的形式，對每個專題進(jìn)行規(guī)則探索。

確定好專題類型之后，下一步需要定義清楚每類專題里面的模板和組件，這里的定義概念，主要是用通俗易懂的原則去描述組件的用途。Ant Design 有 63 個組件和十幾套模板，如果每個都是單獨(dú)描述，屬性和概念會非常多，所以，這里就需要一層通用規(guī)則的概念。

關(guān)于通用規(guī)則的理解，這里舉一個例子——右行制，靠右行駛，右側(cè)通行。全世界有 90% 的國家都實(shí)行右行制，這是一條深入人心且得到廣泛共識的原則。具體到不同的場景，比如馬路上的行車線、指示牌、斑馬線上的彎折箭頭，自動扶梯上的分隔線，雖然不同的場景會有不同的呈現(xiàn)形態(tài)，但是這些背后都是依據(jù)右行制這個通用的原則去建立的。即使在一個完全陌生的環(huán)境，潛意識里也可以根據(jù)這個原則找到規(guī)律。

根據(jù)這個思路，在組件設(shè)計和規(guī)則的制定上，也需要找到這種通用且被廣泛共識的原則。

比如，在元素的空間布局上，會根據(jù)閱讀習(xí)慣去考慮，大多數(shù)文字的閱讀習(xí)慣都是從左到右，比如頁面布局經(jīng)典的 F 模式和 Z 模式，所以在元素的空間位置上，會傾向于根據(jù)視覺動線和閱讀習(xí)慣來放置元素。

在字號、間距、尺寸上，會根據(jù)梳理邏輯來推理，比如最基礎(chǔ)的 8n 模式、菲波那切數(shù)列等，讓整套數(shù)值符合某種規(guī)律，這樣才能方便推理和傳播。

同樣，在交互上也需要盡量模擬現(xiàn)實(shí)世界中的物理反饋，例如自然光影的變化對應(yīng)的色彩模式，按鈕的點(diǎn)擊、按下、抬起、結(jié)果反饋等，應(yīng)該都是不同的狀態(tài)，所以需要通過光影和色彩變化來模擬現(xiàn)實(shí)世界中的物理反饋。

總結(jié)下來就是，在通用規(guī)則層要盡可能找到符合大家認(rèn)知的某種認(rèn)知和規(guī)律，這也是探索自然交互的核心內(nèi)容。

根據(jù)這個思路，在按鈕位置上，我們通過對大量按鈕進(jìn)行研究和分析，制定了這樣一條規(guī)則：主按鈕貼邊原則。意思是，如果頁面中出現(xiàn)按鈕組，要盡量讓主按鈕貼近容器的邊緣，除方向性按鈕之外。比如整體左對齊，那主按鈕就貼近容器左邊緣，右對齊，主按鈕貼近容器右邊緣。這是一條非常簡單的規(guī)則，稍加推理，就能找到不同場景下按鈕的位置規(guī)律，比如在表單、表格、彈窗、抽屜中，不同的組件，都可以按照這個規(guī)則去細(xì)化按鈕的對齊方式。

就像右行制一樣，在不同的場景中，可能展現(xiàn)的形式不同，但是，背后都能依據(jù)同一條通用原則。

找到這個通用規(guī)則之后，需要對不同的場景，按照定性描述和定量描述的方式去細(xì)化規(guī)則，首先會給設(shè)計師提供一份設(shè)計指南。比如按照對話習(xí)慣，或者方向性的含義，去給設(shè)計師提供指導(dǎo)建議。到這個程度還不夠，具體的細(xì)節(jié)，比如尺寸、間距等等，還需要提供給機(jī)器一份詳細(xì)的說明。

比如，這是按鈕在表格工具欄中的展示規(guī)則，這層規(guī)則需要詳細(xì)的標(biāo)注尺寸，相對位置，間距等等，并且要給出不同的組件排序邏輯。這一層定量內(nèi)容，對用戶而言，就是隱形的規(guī)則。

通過對規(guī)則的定性和定量描述，我們希望暴露給設(shè)計師的規(guī)則盡可能的簡單，能夠幫助設(shè)計師在規(guī)則層面形成共識，同時把復(fù)雜的規(guī)則進(jìn)行封裝，降低規(guī)則在傳播中的發(fā)散和損耗。

所以，ETCG 的工程化規(guī)則的核心，就是探索極簡規(guī)則和極致體驗之間的平衡。

模板組件

前面講了 ETCG 規(guī)則探索的思路，接下來我們用一個具體的例子，來看看這些規(guī)則是如何被封裝在組件內(nèi)，一個表格可以分為三個部分：Header、Body、Footer。

我們先從最簡單的表格工具欄來分析，按照定性和定量的規(guī)則描述，我們把規(guī)則分為兩部分， 寫給設(shè)計師的規(guī)則，設(shè)計師需要關(guān)注兩個問：這個組件是什么，也就是定義組件的功能；這里有什么，即確定這里面可以放置的元素。

剩下的內(nèi)容，怎么對齊，內(nèi)容怎么顯示，我們把規(guī)則細(xì)化并封裝在組件內(nèi)部，讓機(jī)器自動執(zhí)行。

除了表格工具欄，表格主體部分也需要對規(guī)則進(jìn)行細(xì)化，首先對表格主體部分進(jìn)行劃分，左側(cè)定義為功能區(qū)，比如全選操作等，中間的內(nèi)容區(qū)，放置主體內(nèi)容，右側(cè)定義為操作區(qū)。

這一層劃分，是為了定義清楚不同類型的信息應(yīng)該顯示在什么位置。

具體到里面的內(nèi)容，我們也對每一個字段的語義特征進(jìn)行分析，以此來確定，不同的字段應(yīng)該顯示多寬。比如時間字段，按照年月日時分秒，可以確定一個最小寬度，保證 90%以上的時間字段都能安全顯示不換行，同樣，姓名、手機(jī)號、標(biāo)簽等固定格式的語義都可以確定一個最佳的顯示規(guī)則。

除了表格內(nèi)部元素和字段特征定義，表格本身也和列表打通，因為從展示的字段屬性來說，表格和列表展示的內(nèi)容含義非常相似，所以，我們可以通過一行代碼的配置，快速把表格切換成列表。這樣大大降低了設(shè)計的決策成本。

以上這些規(guī)則封裝后，我們把它定義為模板組件，這些模板除了以常規(guī)組件包的形式提供給設(shè)計使用之外，我們還對這些模板進(jìn)行工具化的輸出。

我們把模板組件通過 Kitchen 插件的集成，設(shè)計師甚至是產(chǎn)品同學(xué)，可以直接通過插件的面板，來配置里面的內(nèi)容，從生產(chǎn)源頭保證設(shè)計內(nèi)容的規(guī)范性和一致性。

同時，再往前一步，這些配置生成后，可以直接導(dǎo)出代碼配置，提供給前端使用，進(jìn)一步保證從設(shè)計到前端之間的無縫銜接。

順便預(yù)告一下，目前 Kitchen 3 beta 版本正在內(nèi)測中，預(yù)計在四月份 Kitchen 3 正式版會對外發(fā)布。

同樣的思路，除了表格之外，我們對表單、列表、圖標(biāo)、布局都進(jìn)行一層模板提取和封裝，這些內(nèi)容構(gòu)成了完整四表一局模板組件，目前也已經(jīng)對外開放，大家可以訪問官方倉庫下載使用： https://github.com/ant-design/pro-components

總結(jié)一下，以上主要分享了從 ETCG 工程化規(guī)則探索，到四表一局模板組件的封裝思路，再從模板到 Kitchen 工具化實(shí)踐，這是我們在設(shè)計工程化上探索的基本思路。

Ant Design 設(shè)計開源計劃

前面一共分享了兩部分內(nèi)容，第一部分 ETCG 工程化規(guī)則的探索，第二部分，系統(tǒng)化協(xié)作流程的建立，前端同學(xué)也分享了設(shè)計工程化實(shí)踐的框架和開源工具，可以提供給開發(fā)者嘗試和使用。

那么對于設(shè)計同學(xué)而言，這些內(nèi)容和自己有什么關(guān)系呢？

秉承著開源的思想，我們希望這套思路和模式，不僅僅能服務(wù)于螞蟻集團(tuán)內(nèi)部的產(chǎn)品，也能夠服務(wù)到行業(yè)內(nèi)更多的設(shè)計師和開發(fā)者。

所以，我們正式推出，Ant Design 設(shè)計開源計劃！

希望通過設(shè)計開源，能夠連接行業(yè)內(nèi)更多的設(shè)計師，同時已邀請大家能夠參與到 Ant Design 設(shè)計體系的建設(shè)中來。

整個設(shè)計開源計劃主要包含三部分內(nèi)容：開放、發(fā)現(xiàn)、交流。

開放

前面講到的所有規(guī)則探索思路、模板組件、工具，都會開放給大家嘗試和使用，我們希望除了前端開源、組件開源、工具開源之外，還能做到思維的開源，希望這些探索思路能夠給大家在設(shè)計工程化探索上一些啟發(fā)和幫助。

發(fā)現(xiàn)

我們會通過 Ant Design 官方媒體賬號，定期發(fā)起話題，并邀請所有的設(shè)計師參與話題討論，希望能夠發(fā)現(xiàn)優(yōu)秀的創(chuàng)意和想法，并且一起把這些想法落地，共同建設(shè)服務(wù)于整個行業(yè)的設(shè)計體系。

交流

目前我們已經(jīng)開通了知乎專欄、站酷、以及 UI 中國的官網(wǎng)媒體賬號，后續(xù)我們會把 Ant Design 團(tuán)隊在行業(yè)設(shè)計體系中建設(shè)的經(jīng)驗總結(jié)分享給大家，共同打造一個開放的交流社區(qū)，專注于設(shè)計體系，以及面向未來的設(shè)計工程化研究。

歡迎掃描下方二維碼，了解設(shè)計開源計劃的全部內(nèi)容。

最后，設(shè)計開源，只是一個起點(diǎn)，我們常說：一個人可以走的很快，但一群人才能走的更遠(yuǎn)，Ant Design 建設(shè)有 5 年的時間，Ant Design 的建設(shè)離不開社區(qū)的貢獻(xiàn)以及用戶的支持。

5 年時間，對一個設(shè)計體系來說，我們還很年輕，還有很多的成長空間，我們希望通過開放、發(fā)現(xiàn)和交流學(xué)習(xí)的心態(tài)，和所有的設(shè)計師以及開發(fā)者，共同去探索 Ant Design 設(shè)計工程化未來的更多可能。