設計研發資產的管理和應用是大中型前端項目須要考慮的重要問題，設計工程化能夠提高設計、研發、驗收、消費各個環節的肯定性，確保設計和前端的無縫銜接。在過去幾年，Ant Design在這個方向上作了不少探索，如今讓咱們來看看他們是如何作的。
今天咱們和你們分享的主題是 Invisible Design System，隱形的設計體系，主要是想和你們分享，咱們對可見的設計體系背後隱形的設計規則的思考，以及如何經過設計工程化的方式，讓這些複雜的規則可用而不可見。
整個設計工程化探索主要分紅兩部份內容，第一部分是以設計師視角出發的工程化規則探索，第二部分是以工程師視角的工程化實踐。
首先從設計師視角，聊聊 Ant Design 設計體系的建設。
Ant Design 從 2015 年第一個版本發佈，至今已有 5 年時間，去年 Ant Design4.0 發佈，提出了全新的價值觀：天然、肯定性、意義感、生長性，基於這幾個價值觀向上發展，有最基礎的設計語言、設計資產，以及去年探索出的以工做流爲中心的設計策略 JCD，最上層包括設計工具 Kitchen 以及雲鳳蝶，這些內容構成了 Ant Design 設計體系的完整建設框架。
隨着整個行業的發展，企業級產品和系統的複雜度不斷的加強，咱們也在思考，Ant Design 提供的組件和模板，在將來的應用場景中可否持續提效和保證體驗一致。同時，咱們也在思考，Ant Design 下一代的組件會是什麼樣子，以及 Ant Design 整個設計體系會朝着什麼方向演進。
目前 Ant Design 一共有 63 個基礎組件，這些組件基本能夠知足一個系統 80% 以上的頁面搭建訴求，並且這些組件也提供高自由度的配置和自定義屬性。但也正是由於高靈活性，會致使不少人在使用組件的時候，找不到統一的原則和規範，尤爲是設計層，在面對一樣的場景下，使用一樣的組件和規範，不一樣的人仍是會出現不一樣的結果。
咱們嘗試從整個設計體系的角度來思考，如何解決統一性和規範共識的問題。一套設計體系，除了最上層呈現的設計資產，例如，antd、antd pro、antV、TechUI 等，還包括資產背後的設計模式、設計原則、組織協同等，可見的設計資產只是整套設計體系呈現出來最直觀的一部分，而不可見的模式、原則和機制，提供了整套體系不斷演進和創新的思路。
2020 年 UXTOOLS 對整個行業設計體系調研中總結到：「設計體系不能僅僅停留在組件層，而要將注意力聚焦在組件背後的體系上，既要支持從規範到代碼的自動調整，還要支持規範和組件體系化的演進和創新。」
簡單來講，設計體系區別於單純的組件庫最大差別就是，可否支持從規範到代碼的自動調整，若是能作到這一層，才能夠稱之爲，Living Desing System（真正的設計體系）。
咱們對整個設計體系的定位和思考，主要聚焦在兩個維度，一是從規範自己出發，另外一個是從組織協同角度。從規範自己比較容易理解，大多數組件或者規範的創建基本都會從規範自己去迭代和進化，可是組織協同是你們不多提到的一個點。那麼組織協同和設計體系是一種什麼關係呢？
若是從更長遠的階段來看，
一個設計體系不只僅能支持當前階段的設計和開發工做，也不僅是支持某個開發者或者某個設計師的生產提效，而是要支持一個團隊、一個組織的總體協同工做，還要能從規範自己支持不斷的演進和創新。
首先從規範自己思考，以一個按鈕爲例，一個按鈕除了直觀呈現出的樣式以外，還包括語義、位置、交互等，這些維度組合在一塊兒，決定了按鈕最終呈現的狀態。而每個維度裏，又包含不少變量，這些變量可能會致使最終結果千差萬別。因此，由於規則自己的變量，會致使規範自己存在不肯定性，這種不肯定性會致使你們對組件的認知和使用成本增長，進而致使設計決策和研發成本增長，這是第一層思考。
另外一個維度是從組織協同的角度去思考。Ant Design 的組件和規範從設計到最終被用戶使用，一共有四類角色參與，分別是 Ant Design 的設計師和工程師，業務設計師和工程師。理想的狀況下生產和消費流程是：Ant Design 的設計師設計組件，Ant Design 的工程師開發組件，再把組件給到業務設計師和工程師使用，業務工程師和設計師把使用過程當中的問題反饋給生產端，造成一個完整的閉環。
但實際上，這個流程遠遠沒有這麼理想化。實際過程各種角色並非一個單獨的個體，因此每一個角色之間可能存在各類交叉和鏈接，這就會致使兩個問題：一個是剛纔提到過的規範自己的不肯定性，每一個人對規則的理解有所不一樣，致使規則在傳播過程當中存在信息的分散和損耗。
另外一個是由於多角色的協同，致使協做過程當中存在信息不對等，好比，設計師更新了設計稿，可是前端沒有及時更新，就會致使最終的的組件效果存在差別。針對這兩個問題，咱們嘗試經過設計工程化的方式，來收斂整個過程當中的不肯定性，提高Ant Design 組織協同和組件生產效率。
設計工程化主要包含兩部份內容，第一部分是基於 ETCG 模式的工程化規則探索，另外一部分是系統化協做流程的創建。
首先來看看 ETCG 工程化規則探索的部分。ETCG 是 Ant Design 基礎的設計模式，提供了從全局樣式到組件再到模板的設計體系建設思路，好比你們比較熟悉的 Globe Styles：全局樣式層，最基礎的色彩、字體、圖標等，Components：antd 組件，Templates：Ant Design Pro 以及內部版本的 TechUI。
今年，咱們主要在前四個的基礎上新增了一個 G，Guides 交互規則。前四部分決定了組件和模板長成什麼樣，最後一個 G，決定了人和機器之間應該如何進行交互。這套模式的核心是但願，不一樣的人在遇到一樣的問題時，可以運用這套模式推理得出一樣的結論。經過 ETCG進行工程化規則探索，能夠簡單抽象成四個步驟：聚攏資產、定義概念、定性描述、定量決策。
前面兩個是大多數組件或者規範建設的思路，咱們在工程化規探索上，重點對規則自己進行定性和定量的區分，定性規則做爲設計指南提供給設計師，定量的規則，提供給機器進行工程化規則和組件的封裝。
第一步，聚攏資產，簡單來講就是收集業務中的頁面，找到高複用度的組件和模塊，並按照類型分類。經過對螞蟻中臺 50+產品的收集和整理，初步肯定八個類型的專題，再通過一輪收斂以後，最終肯定下五大類專題，分別是：圖表、表單、列表、表格以及佈局，內部簡稱：四表一局。並按照專題小組的形式，對每一個專題進行規則探索。
肯定好專題類型以後，下一步須要定義清楚每類專題裏面的模板和組件，這裏的定義概念，主要是用通俗易懂的原則去描述組件的用途。Ant Design 有 63 個組件和十幾套模板，若是每一個都是單獨描述，屬性和概念會很是多，因此，這裏就須要一層通用規則的概念。
關於通用規則的理解，這裏舉一個例子——右行制，靠右行駛，右側通行。全世界有 90%的國家都實行右行制，這是一條深刻人心且獲得普遍共識的原則。具體到不一樣的場景，好比馬路上的行車線，指示牌，斑馬線上的彎折箭頭，自動扶梯上的分隔線，雖然不一樣的場景會有不一樣的呈現形態，可是這些背後都是依據右行制這個通用的原則去創建的。即便在一個徹底陌生的環境，潛意識裏也能夠根據這個原則找到規律。
根據這個思路，在組件設計和規則的制定上，也須要找到這種通用且被普遍共識的原則。
好比，在元素的空間佈局上，會根據閱讀習慣去考慮，大多數文字的閱讀習慣都是從左到右，好比頁面佈局經典的 F 模式和 Z模式，因此在元素的空間位置上，會傾向於根據視覺動線和閱讀習慣來放置元素。
在字號、間距、尺寸上，會根絕梳理邏輯來推理，好比最基礎的 8n 模式、菲波那切數列數列等，讓整套數值符合某種規律，這樣才能方便推理和傳播。
一樣，在交互上也須要儘可能模擬現實世界中的物理反饋，例如天然光影的變化對應的色彩模式，按鈕的點擊、按下、擡起、結果反饋等，應該都是不一樣的狀態，因此須要經過光影和色彩變化來模擬現實世界中的物理反饋。
總結下來就是，在通用規則層要儘量找到符合你們認知的某種認知和規律，這也是探索天然交互的核心內容。
根據這個思路，在按鈕位置上，咱們經過對大量按鈕進行研究和分析，制定了這樣一條規則：主按鈕貼邊原則。意思是，若是頁面中出現按鈕組，要儘可能讓主按鈕貼近容器的邊緣，除方向性按鈕以外。好比總體左對齊，那主按鈕就貼近容器左邊緣，右對齊，主按鈕貼近容器右邊緣。這是一條很是簡單的規則，稍加推理，就能找到不一樣場景下按鈕的位置規律，好比在表單、表格、彈窗、抽屜中，不一樣的組件，均可以按照這個規則去細化按鈕的對齊方式。
就像右行制同樣，在不一樣的場景中，可能展示的形式不一樣，可是，背後都能依據同一條通用原則。
找到這個通用規則以後，接下須要，須要對不一樣的場景，按照定性描述和定量描述的方式去細化規則，首先會給設計師提供一份設計指南。好比按照對話習慣，或者方向性的含義，去給設計師提供指導建議。到這個程度還不夠，具體的細節，好比尺寸，間距等等，還須要提供給機器一份詳細的說明。
好比，這是按鈕在表格工具欄中的展現規則，這層規則須要詳細的標註尺寸，相對位置，間距等等，而且要給出不一樣的組件排序邏輯。這一層定量內容，對用戶而言，就是隱形的規則。
經過對規則的定性和定量描述，咱們但願暴露給設計師的規則儘量的簡單，可以幫助設計師在規則層面造成共識，同時把複雜的規則進行封裝，下降規則在傳播中的發散和損耗。
因此，ETCG 的工程化規則的核心，就是探索極簡規則和極致體驗之間的平衡。
前面講了 ETCG 規則探索的思路，接下來咱們用一個具體的例子，來看看這些規則是如何被封裝在組件內，一個表格能夠分爲三個部分：Header、Body、Footer。
咱們先從最簡單的表格工具欄來分析，按照定性和定量的規則描述，咱們把規則分爲兩部分， 寫給設計師的規則，設計師須要關注兩個問：一、這個組件是什麼，也就是定義組件的功能，二、這裏有什麼，即肯定這裏面能夠放置的元素。
剩下的內容，怎麼對齊，內容怎麼顯示，咱們把規則細化並封裝在組件內部，讓機器自動執行。
除了表格工具欄，表格主體部分也須要對規則進行細化，首先對錶格主體部分進行劃分，左側定義爲功能區，好比全選操做等，中間的內容區，放置主體內容，右側定義爲操做區。
這一層劃分，是爲了定義清楚不一樣類型的信息應該顯示在什麼位置。
具體到裏面的內容，咱們也對每個字段的語義特徵進行分析，以此來肯定，不一樣的字段應該顯示多寬。好比時間字段，按照年月日時分秒，能夠肯定一個最小寬度，保證 90%以上的時間字段都能安全顯示不換行，一樣，姓名、手機號、標籤等固定格式的語義均可以肯定一個最佳的顯示規則。
除了表格內部元素和字段特徵定義，表格自己也和列表打通，由於從展現的字段屬性來講，表格和列表展現的內容含義很是類似，因此，咱們能夠經過一行代碼的配置，快速把表格切換成列表。這樣大大下降了設計的決策成本。
以上這些規則封裝後，咱們把它定義爲模板組件，這些模板除了以常規組件包的形式提供給設計使用以外，咱們還對這些模板進行工具化的輸出。
咱們把模板組件經過 Kitchen 插件的集成，設計師甚至是產品同窗，能夠直接經過插件的面板，來配置裏面的內容，從生產源頭保證設計內容的規範性和一致性。
同時，再往前一步，這些配置生成後，能夠直接導出代碼配置，提供給前端使用，進一步保證從設計到前端之間的無縫銜接。
順便預告一下，目前 Kitchen 3 beta 版本正在內測中，預計在四月份 Kitchen 3 正式版會對外發布。
一樣的思路，除了表格以外，咱們對錶單、列表、圖標、佈局都進行一層模板提取和封裝，這些內容構成了完整四表一局模板組件，目前也已經對外開放，你們能夠點擊閱讀原文訪問官方倉庫下載使用。
總結一下，以上主要分享了從 ETCG 工程化規則探索，到四表一局模板組件的封裝思路，再從模板到Kitchen 工具化實踐，這是咱們在設計工程化上探索的基本思路。
前面分享了ETCG 工程化規則的探索。那麼對於設計同窗而言，這些內容和本身有什麼關係呢？
秉承着開源的思想，咱們但願這套思路和模式，不只僅能服務於螞蟻集團內部的產品，也可以服務到行業內更多的設計師和開發者。
因此，咱們正式推出，Ant Design 設計開源計劃！
但願經過設計開源，可以鏈接行業內更多的設計師，同時已邀請你們可以參與到 Ant Design 設計體系的建設中來。
整個設計開源計劃主要包含三部份內容：開放、發現、交流。
前面講到的全部規則探索思路、模板組件、工具，都會開放給你們嘗試和使用，咱們但願除了前端開源、組件開源、工具開源以外，還能作到思惟的開源，但願這些探索思路可以給你們在設計工程化探索上一些啓發和幫助。
咱們會經過Ant Design 官方媒體帳號，按期發起話題，並邀請全部的設計師參與話題討論，但願可以發現優秀的創意和想法，而且一塊兒把這些想法落地，共同建設服務於整個行業的設計體系。
目前咱們已經開通了知乎專欄、站酷、以及 UI 中國的官網媒體帳號，後續咱們會把 Ant Design 團隊在行業設計體系中建設的經驗總結分享給你們，共同打造一個開放的交流社區，專一於設計體系，以及面向將來的設計工程化研究。
歡迎掃描下方二維碼，瞭解設計開源計劃的所有內容，也能夠關注 Ant Design 的知乎、站酷、UI 中國等官方媒體帳號，瞭解更多動態。
最後，設計開源，只是一個起點，咱們常說：一我的能夠走的很快，但一羣人才能走的更遠，Ant Design 建設有 5 年的時間，Ant Design 的建設離不開社區的貢獻以及用戶的支持。
5 年時間，對一個設計體系來講，咱們還很年輕，還有不少的成長空間，咱們但願經過開放、發現和交流學習的心態，和全部的設計師以及開發者，共同去探索 Ant Design 設計工程化將來的更多可能。
本文分享自微信公衆號 - 支付寶技術（Ant-Techfin）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。antd
