SEE Conf大會精彩回顧

1月6日，首屆螞蟻金服體驗科技大會 SEE Conf 2018 在杭州成功召開。SEE = Seeking Experience & Engineering，意為探索用戶體驗與工程實踐。這場SEE Conf大會由螞蟻金服集團舉辦，每年 1-2 次，包括專業分享、產品展臺、Workshop 等內容。我們希望通過 SEE Conf，能與業界同行一起分享交流體驗科技的當前進展，一起探討切磋體驗科技的未來發展，共同努力促進體驗設計與技術的開放，讓生態繁榮共贏。

在剛剛落下帷幕的首屆螞蟻金服體驗科技大會 SEE Conf 2018 上，十幾位講師及特邀嘉賓為大家帶來了一場體驗科技的分享盛宴。無論是設計規范背后的數理規律，還是數據可視化對未來的宏大藍圖，以及圓桌嘉賓最后對體驗科技的暢聊等等，相信都讓所有人印象深刻。此外，本次大會有近 500 位參會者到場參與此次體驗科技盛宴，1800 余人在線收看直播。

在大會當天，首個分享話題是《Ant Design 3.0 背后的故事（附演講視頻，鏈接復制至瀏覽器打開 http://v.youku.com/v_show/id_XMzMwMTI4NjIyNA==.html?spm=a2h3j.8428770.3416059.1）》，由 Ant Design 負責人它山帶來。螞蟻設計語言背后細節以及數理邏輯的首次揭秘，讓參會者驚嘆不已。分享以 Ant Design 3.0 的正式發布收尾，非常精彩。本文為演講人它山在活動結束后的總結和思考，快來一睹為快吧！

▲Ant Design 負責人 它山

Ant Design 3.0 背后的故事

作者：Ant Design 負責人它山

（附演講視頻，鏈接復制至瀏覽器打開 http://v.youku.com/v_show/id_XMzMwMTI4NjIyNA==.html?spm=a2h3j.8428770.3416059.1）

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

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

設計體系

#基本概念

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

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

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

那么，什么是設計體系呢？我個人最早接觸到設計體系的概念來自 Brad Frost 的一本書，書名叫 Atomic Design（作者很 open，這本電子書可以在線直接閱讀http://atomicdesign.bradfrost.com/ 本文所有鏈接請復制至瀏覽器打開）。他提出的模塊化思路以及原子級的模塊抽象的方法啟發了后來非常多的設計師以及團隊（比如 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 的布局可以到https://ant.design/docs/spec/layout-cn。

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

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

結語

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

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

總結

以上是生活随笔為你收集整理的大会 | SEE Conf：Ant Design 3.0 背后的故事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。