Ant Design 3.0 背後的故事（附演講視頻）

上周六參加了咱們首屆螞蟻體驗科技大會，並且有幸成為第一個開場的主講人。在會後感受到了很多設計師和工程師同學對於設計體系以及 3.0 設計語言的興趣以及熱情，深受感動。說實話在過去有蠻久一段時間，因為這類產品不太容易被太多人所感知，因此也常常會被大家誤解成是比較枯燥且單一的領域。體驗技術部 UED 從 14 年底成立到現在已經 3 年多了，期間我們的設計師和工程師一直默默的耕耘在企業級產品這片土壤上，在潛心積累經驗的同時也讓我們逐漸的沉下心去探索設計最本源的東西。希望通過這一次的對外發聲，可以讓企業級產品的這一個領域被更多人所關注，當然如果你來自其他的領域，也希望這樣的內容可以對你有所啟發。:)

1 月 6 日當天，我們還對外正式發布了 Ant Design 3.0，正式將 Ant Design 從 UI 組件庫的概念升級至面向企業級的設計體系的概念。這篇文章也會分成兩個部分，依次為大家介紹我們的設計體系以及設計語言 3.0 的『自然之美』。

順手，附上發布會當天演講視頻，請各位品嘗～

～～～～～～～～～～～～視頻地址在此～～～～～～～～～～～～

Ant Design 3.0 背後的故事 — 它山

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

??

設計體系

說起設計體系的前身我想大家應該都不陌生，英文叫 style guide，通常我們稱之為設計規範。一個團隊或是產品的主設計師常常會基於團隊當下的設計習慣產出這類的文檔。內容通常包含了字體、顏色、按鈕、圖標、常用的組件、甚至是頁面框架，交互原則等。在過去很長一段時間裡，我們用它來解決產出物的一致性，提升設計的效率。

然而這種形式並不能實質性的解決問題。當產品開始不斷的迭代更新、團隊人員的加入或者離開、外部技術的變革、用戶使用習慣的變化等等這些情況發生的時候，基於當下設計現狀以及習慣的靜態內容就難以應對。隨著時間的推移，設計產出的不確定性就會越來越高。

因此我們需要一種新的更具包容性和多元化的思路，可以幫助我們將不確定性控制在一定範圍內，從而真正的釋放重複勞動，讓更多的設計者有機會去觸及更好的產品體驗，這就是設計體系。

那麼，什麼是設計體系呢？我個人最早接觸到設計體系的概念來自 Brad Frost 的一本書，書名叫 Atomic Design（作者很 open，這本電子書可以在線直接閱讀）。他提出的模塊化思路以及原子級的模塊抽象的方法啟發了後來非常多的設計師以及團隊（比如 GE 的 predix design system）。目前在網路上關於這個概念的解釋也是非常多的，其中有一種類型的解釋是我個人比較認同的，提出者認為設計體系是一個具包容性且充滿生命力的東西。包容性指的是從組件庫到設計語言到設計方法等所有和產品設計相關的方面。而生命力指的是它並非靜態的內容，而是可以應對不斷變化的環境，是一個不斷進化的過程。

當然，設計體系的最終極目標依然是為了實現更好的用戶體驗。而為了這一目標，我們需要先建立起一個強大的基礎設施來解決可控性以及效率的問題。目前在網路上的多數有關於設計體系的專題文章基本上也都是集中在這兩塊做解讀，而在螞蟻我們的設計體系已經往前探出了一小步。

關於螞蟻企業級產品

在開始進一步介紹我們的設計體系之前我想先介紹一下我們所服務的產品，冰山圖大家應該腦子裡都能聯想的起來（我這裡就不貼了）。一說起螞蟻金服，相信很多人對支付寶錢包、芝麻信用、網商銀行、春節紅包、螞蟻森林這些應用並不陌生。這些在我們螞蟻的整個產品體系中，屬於水面以上的部分。而 Ant Design 所服務的企業級產品更多的是屬於水面以下的部分，這是一個非常龐大且複雜的產品網。功能囊括了資金、運維、研發、安全、風控、效能管理、渠道管理等所有維持我們前台業務快速高效安全穩定運行的模塊。

總結一下，我們的企業級產品有這樣幾個特點：

• 首先，這類產品往往量級非常大且功能複雜，咱們整個螞蟻的企業級產品加起來有上千個之多。
• 其次，這類產品項目變動非常頻繁，且並發很多，需要設計師甚至開發們隨時快速的做出響應。
• 第三，產品間往往有較高的關聯性，因此對於一致性的要求也較高。
• 第四、這類產品往往存在蠻多共性，可以通過抽象，提取出一些非常有價值的模式。這對於我們從事這一領域的設計師而言是無疑一片巨大的沃土。
• 第五、這類產品的使用者大多具備很強的專業性，設計師在設計的時候比較難快速的建立起用戶同理心，並且在市面上可以參照的競品以及用戶心智模型都是非常少見的。因此，了解用戶的訴求就變得格外的重要。
• 最後、開放的趨勢。隨著越來越多的企業級產品成熟並對外開放（比如：螞蟻金融雲），我們堅信在未來在這一個領域對於產品體驗的要求會越來越高。

面對這樣一個龐大且複雜的產品背景，我們 30 幾個人的設計團隊要實現 better UX 的終極目標就必須依靠設計體系的思路。當然也是藉助設計體系，我們的團隊目前已經支撐了螞蟻內部大約 800 個以上的企業級產品（這個數字不包括開源項目服務的那一部分集團以及外部的數字），其中有大約 10% 的產品正在通過我們體驗策略逐漸地提升用戶體驗。

Ant Design System

那麼我們的設計體系是怎樣構成的呢？讓我們一起來看一下這一張大圖。

• Efficiency -- 高效 這部分對應的是我們的設計資產。設計資產除了基礎組件庫以及 pro 組件庫（UI 資產）之外，還包涵設計資源、技術文檔以及我們的設計資源。這部分是我們整個設計體系的起點同時也是基礎。
• Consistency -- 可控性 Consistency 是將不確定性控制在一定範圍內的思路，這一部分交給我們的設計語言。
• Better UX -- 更好的體驗 與之對應的是體驗策略，包涵了設計流程方法、度量體系、體驗運營等等。

設計語言、設計資產以及體驗策略是我們設計體系最核心的三塊內容，分別對應的解決設計體系中的 Consistency、Efficiency 以及 Better UX 的目標。當然這還是不夠的，我們還需要一個多元化並且具備活力的團隊來維持系統的健康運作，並且在過程中又可能進一步迸發出提升效率的產品概念，這就是工具化。（這一塊目前我們正在發力中，所以我要暫時先買個關子。）

團隊模型

前面我們有提到過一個設計體系對應的需要有一個團隊去維持它的運作。大家都知道，我們的體驗技術部本身就是是一個集合了工程師和設計師的多元化的大團隊。針對設計體系，我們有一個大約十幾個人的核心團隊（System Operation Team），由工程師和設計師組成，合力維護著整個體系最為核心的三塊內容。在這過程中我們還兼顧著 PD 以及運營的職責。

核心小組並不是完全脫離業務線的工作的。絕多數的設計師和工程師同時還會有有一半以上的經歷參與在具體的產品設計中，這樣的方式可以保證我們所沉澱的設計模式始終來自於實際的場景，同時新產生的內容可以快速的在實際場景中的得以驗證。

此外，在核心團隊之外，所有業務線的設計師也會組成一個一個的分舵，我們有定期的團隊溝通機制，內部開放的設計資產池以及小組間的合作項目來保證核心團隊同業務團隊的緊密性。核心團隊的成員也並非是固定不變的，除了幾個關鍵人員之外，定期會有人員的流入和流出，目的是保證團隊的活性，這也是維持設計體系生命力的一種方式。

設計資產

設計資產是我們整個設計體系的起點，也是設計和技術結合最為緊密的一個部分。除了 design+coding 的 UI 資產之外，還包涵了與之對應的設計文檔、技術文檔，以及助力設計提效的各類資源包。設計資產是以 『模塊化』為核心思路展開的。 在過去的一年裡，我們在 Atomic Design 以及 GE predix design 的啟發上，形成了符合我們自己特點的 E (examples)、T (template)、C（components）、G（global styles） 的抽象思路。

目前大家在 Ant Design 網站上所感知到的基礎組件以及 Ant Design Pro 這兩塊內容都是基於 ETCG 的思路一步一步抽象出來的，這些內容是我們團隊在企業級業務場景中抽象出來的最為穩定以及復用程度最高的部分。然而這只是我們的設計體系對外的內容，在內部從產品層到業務層，我們都不斷在積累穩定且高復用的模塊, 通過開放的內部資產池以及靈活的溝通機制確保和開方的內容之間的緊密聯繫，於此同時在外部藉由開源社區的力量，令整個 UI 資產的小生態始終保持活力。

體驗策略

體驗策略是我們在設計資產的基礎之上往前走的一小步，體驗策略的核心思路是以任務為導向的。在這一思路的帶領下，我們主要通過四個方面去構建體驗策略。

• 流程與方法：在產品前期就開始大量的推行用戶體驗地圖，確保用戶需求能夠在產品前期就明確被整個團隊所感知。
• 度量體系：著重於 task sucess 核心任務進行度量。
• 運營活動：當然體驗不是設計師一種角色的事，我們還會通過 體驗一起造 活動將產品的各方人員 involve 進來，共同關注產品體驗發掘產品問題。
• 最佳實踐：是體驗策略的最終目標，過程中產出模塊化的解決方案可以反哺給 UI 資產，而核心流程與方法再沉澱之後又可以幫助到更多的產品。

設計語言

服務可控性的設計語言，在理想情況下應該和設計資產以及體驗策略都有很密切的關聯性。在目前這個階段，由於我們的設計資產跑的相對更快，因此 3.0 的設計語言和設計資產的關係會顯得更為緊密。

自然之美

Ant Design 設計語言的核心是設計價值觀，設計價值觀影響到設計的各類場景，產生與之對應的原則、視覺呈現方式、交互模式等內容。

Ant Design 的設計價值觀，從 1.0 版本的時候就已經有開始提及，最初的版本是微小、確定以及幸福感，分別指代我們的細節微創新、模塊化思路以及在研發體驗上的追求。隨著體系的成型，3.0 我們在保留 『確定』的基礎上，又發掘出了『自然』。新的這一個價值對 web 界面的視覺基礎有很大的啟發，可以說 3.0 的整個視覺呈現都是基於『自然』而來的。

Ant Design 認為，一切看似自然的事物在背後都是有數學/物理規律可循的。映射到我們的設計中，從自然的數理規律中尋找啟發，理性的看待我們設計決策的過程，將設計結果、影響結果的變數、以及他們之間的規律發掘出來，就是我們的方向。而這個理性思考，感性表達的過程和我們團隊的技術基因也是非常匹配的。

在『自然』這個新的價值觀的驅動下，3.0 我們一共開展了字體、布局以及色彩三方面的探索。由於篇幅的關係，我會著重為大家展示我們在字體設計上的一整個推導過程，並在最後對另外兩個課題做簡單的介紹。

主字型大小、字階和行高

字體是 UI 設計中一個非常基礎的話題。設計師在字體設計過程中需要關注非常多的方面，比如字體家族、主字體、字階、行高、字重、行間距、字間距等等。3.0 在字體領域上我們著重解決的是三個問題：主字體、字階段以及行高。這三者之間在設計決策時還存在一個遞進關係。接下來就讓我們一起用提問的方式來看一下我們的推導過程。

我們的第一個問題是：多大的主字型大小是自然的？

在 3.0 之前的設計中，我們的主字體定義的是 12px，這個決策基本上是基於我們在企業級設計場景中的經驗來定的。那麼 3.0 我們是怎樣做的呢 ？讓我們來看一下這張圖。

肉眼到物體之間的距離，物體的高度以及這個三角形的角度，構成了一個三角函數的關係。而公式中的 h 的值和我們要解決的核心問題『主字型大小』有著很大的關係。關於這個 a 的角度，有機構和團隊做過研究，當大於 0.3 度時的閱讀效率是最好的。同時我們在操作電腦時，一般來說眼睛距離電腦屏幕的平均值大概會在 50 厘米左右。然而，公式中的距離和高度的單位都是厘米，字體的單位是 pixel。因此我們還需要將二者之間做一輪轉換，完成轉換所需的兩個數值分別是 2.45（cm 到 inch）和 PPI（inch 到 pixel）。

我們假定 PPI 為 120。通過計算便可以得出在顯示器的 PPI 為 120 的情況下，理論上大於 12px 的字體能夠滿足用戶的最佳閱讀效率。基於這樣的思路，確定主流 PPI 的範圍，就很容易鎖定主字體的大小了。根據網路上的數據來源，我們發現只有大約 37.6% 的顯示器 PPI 是小於 120 的，而 PPI 在 120－140 的顯示器的佔比大約為 40%。換句話說 12px 的字體只能滿足 37.6% 用戶的閱讀體驗，但如果我們將字體放大到 14px，就可以保證大約 77% 的顯示器用戶處於比較好的閱讀體驗。因此在 3.0 我們將主字型大小進行了升級，從原本的 12px 調整至 14px。

在這個問題的解答過程中，我們遵循的規律是一個三角函數，決定這個三角函數結果的變數分別是 a 角度、d 距離、以及顯示設備的 PPI。 根據這樣的思路我們同樣可以非常簡單的推導出手機客戶端的主字體大小。

我們現在有了一顆 14px 的字體種子，把它種到土裡，是否能像豆苗一樣發芽並長出一系列自然的字階呢？這就是我們接下來的第二個問題（聽起來很天馬行空，但我們決定挑戰下）。

Robet Bringhurst 在他的字體樣式元素一書中有提出過，定義有規律的字階是構建設計秩序感的基礎。同時他又提出經典的字階和古典音階具備韻律上的相似性。在這個思想的基礎之上，有個叫做 Spencer 的人提出了一個冪函數的字體計算公式。用圖形化來表達就是這樣的。有了這一個公式，讓一粒 14px 的字體種子種發芽的想法就變得不是那麼的天馬行空了。

f0 我們可以理解成為起始字型大小，也就是主字體，我們前面有推導出來為 14px。r 的值決定了這條曲線的趨勢，可以理解成字階的生長一個趨勢。這個數值的啟發來源於自然常數 e，這是一個無理數，大約等於 2.71828。n 則代表了我們如何在曲線上取對應的數字，決定這個數值大小的關鍵在於我們希望相鄰的兩個字型大小之間的差距是大還是小。Spencer 在他的文章中有提到過，建議 n 在選擇上可以參考音律的規則，比如說 3 音階、4 音階、5 音階、7音階等等，這樣可以令字階呈現出一種自然的節奏感。在做了大量的頁面落地試驗之後我們將這個數值定成 5。映射到音樂的世界中，正好是 5 音階。5 聲音階是很多古典樂遵循的規律，比如我國古代的宮商角徵羽。

我們將三個數值代入到前面公式之後，可以得到一組關於字階的原始數組。它們是基於 14px 的字體，以自然常數的生長律，同時用 5 聲音階的單元切分方式得出來的。

在第二個問題的解決過程，字階的規律是一個冪函數。決定這個冪函數結果的變數是起始字型大小、生長律以及單元等分的次數。目前我們只取了曲線上的 10 個字型大小作為默認的字階，當設計對字體有更大的要求的時候，同樣可以基於這個規律快速鎖定我們想要的字型大小。

OK，有了字階，我們就可以進一步推導第三個問題：多大的行高是自然的？

行高大家都知道指的是一個字體外框的肉眼不可見的部分。在 Ant Design 的第一版行高計算思路中，我們用字體乘一個固定的倍數去定義行高。但在實際設計中，我們發現這樣的方式會有一個問題，當字體越大，行高也會越來越大。在字體 2.0 的時候，我們在字階上做了一個分水嶺，超過某一個字型大小的字體行高一律乘以一倍。但以上這兩種做法會增加我們在排版布局層面的規則複雜度，同時不便於計算和記憶。在 3.0 這個階段，我們決定嘗試用『自然』來解決這一問題。首先，我們需要定義出行高的計算規律，除了字階的計算公式之外，我們還有另外兩個信息的輸入：

• 設計師希望字體高度和行高之間能從靜態黃金比出發。
• 但是基於設計經驗，同時不給布局造成壓力，我們希望行高的增長速度能夠隨著字體的增長逐漸趨向於緩慢，並且最終不要超過 1 倍。

藉由這樣的思路。我們在字型大小的基礎之上將增長率做了一個自然律反相的負增長，從而定義了行高的計算公式。根據這一公式，同樣的我們得到了一組原始的行高數組。

現在我們擁有了兩組基於 14px 的原始字型大小。

基於上面這兩組字型大小，我們還需要微調讓它們可以進一步落地應用，這兩個原則分別為：偶數原則和簡化記憶原則。經過調整之後，右邊這一組字型大小就是這一次的字體 3.0。所有的字體以及行高都符合偶數原則，並且行高和字體之間都相差 8，更加便於記憶。

現在，我們將這 10 個字型大小帶行高從小到大依次進行排列，每一個字型大小之間的間隔都為 16px。然後，我們將之前兩個版本的字型大小帶行高按照同樣的間隔排列。讓我們看一下三個版本之間的差別。可以明顯的感受到第三個版本的字體排列起來更為自然，同時更有秩序感。

當然，新的字型大小還需要進一步落地到實際頁面中進行可行性驗證。大家都知道實際的設計過程中有非常多的因素會影響我們設計對於一個頁面結果的判斷，為了讓字體更好的被感知，我們通過去色去圖形的方式來加強字體的被感知度。設計師用這樣的方式一共反覆嘗試了近 200 多張頁面的設計，覆蓋了後台大部分類型的場景。得到的結果是：

• 新的字階在落地中可以實現更為和諧的界面結果。
• 設計師在使用這一套字階的時候明顯感覺到設計決策的過程變的輕鬆很多。
• 不同的設計師產出頁面一致性都比以前有了明顯的提升。

總結一下：整個字體的推導過程就是發掘結果和變數間的規律的過程，並且自然的數理規律在這當中起到了很大的作用。藉由這樣的過程，我們將原本感性的設計思考通過理性的方式呈現出來，讓設計者可以更為自信的去應對不斷發生的變化，這就是可控性。

布局與色彩

同樣，布局 3.0 也是基於和字體相似的思路完成的。啟發來自法國建築大師柯布西耶的模度一書。柯布西耶受到斐波那契雙數組的啟發通過對人體黃金比例關係的拿捏定義出紅藍表雙數組用於建築領域的空間布局。同樣的，我們將斐波那契雙數組的思路映射到 web 布局研究中，得到了布局設計的雙數組，幫助我們的設計師在布局設計決策中更好的實現動態的秩序感。這一次發布的 pro 的空間布局設計，就是基於這部分的結論產出的。進一步了解 3.0 的布局可以到 這裡。

色彩 3.0 的思路和字體以及布局略微有些許不同。因為色彩相對於字體以及布局來說更加會偏向與感性，但色彩的背後也是有數理規律可循的。定義 3.0 的色彩我們主要分成了兩個部分。在第一階段，我們的設計師從自然中去選擇 12 個主色，進一步定義了 3.0 的色環。第二階段是基於主色去進一步的定義色彩的明暗變化，在這一個過程中，我們通過搭建三維模擬空間的方式，通過大量觀察和調試，掌握了不同顏色在自然光照下對應的 HSB 的變化規律，最終形成了我們 3.0 的色板。我們的工程師將設計師發現的數理規律通過代碼的方式實現出來，讓設計師可以跳出12色的框架進行色彩的決策，只需定義合理的主色便可以得到一系列自然的色彩變化，從而簡化了傳統的色彩決策過程。和之前兩個版本的色板相比較，3.0 的色板更加符合我們肉眼對色彩變化的自然認知，並且能夠令界面整體更為明亮和愉悅。進一步了解我們的色板可以到 這裡。

最後想說的是，設計語言服務的可控性並不等於限制。基於可控性這一目標，我們將原本設計團隊中核心設計師的個人經驗理性的釋放出來，形成易理解、可傳承的知識，再反哺回團隊的時候就能在很大程度上批量的提升設計產出的質量，同時也能讓不同程度的設計者在設計決策的時候能更加自信，繼而保證我們的設計下限不斷的被提升。但是在一個充滿生命力且不斷進化的設計體系中，好的設計永遠是沒有上限的。不論是字體、布局還是顏色，甚至是未來的圖形化、動效等領域，Ant Design 始終會堅持往前探索的態度，努力的越做越好。

結語

Ant Design 3.0 的發布推出了全面升級的設計體系的概念。但對於我們來說，在追求企業級產品的 Better UX 這一終極目標上才剛剛邁出了第一步。未來還有很長的路要走，我們的設計資產在未來能否真正的敲開行業解決方案的大門從而服務更多的人，企業級體驗策略是否可以沉澱出越來越多的最佳實踐，在反哺設計資產的同時又能夠推動設計語言的進一步升級，此外還有前面我們提到的產品化等等……

嗯，我想一切才剛剛開始。但想起來總覺得有那麼一點小激動。

視頻地址再來一次：Ant Design 3.0 背後的故事 — 它山

最後，演講 PPT 已精心整理並轉換為 PDF 上傳至 SEE Conf 語雀在線知識庫，歡迎下載（請 註冊語雀，個人描述內註明 #知乎seeconf# 便可快速申請邀請碼，登錄後即可下載）：

點此前往語雀下載

推薦閱讀：