專訪螞蟻金服體驗技術UED：Ant Design希望成為世界級設計體系

成規模的設計團隊都有一套自己的設計規範，用它來解決設計產出的一致性，提升設計的效率。但是如果產品量級驚人，產品迭代，技術變革，用戶行為等不確定大，不太靈活的設計規範就有了局限性，於是就有了設計體系。

「設計體系是一個具包容性且充滿生命力的東西。包容性指的是從組件庫到設計語言到設計方法等所有和產品設計相關的方面。而生命力指的是它並非靜態的內容，而是可以應對不斷變化的環境，是一個不斷進化的過程。」2018年，在首屆螞蟻體驗科技大會，Ant Design設計負責人它山這樣描述設計體系的優越性。當天，螞蟻金服體驗技術部 UED對外正式發布了 Ant Design 3.0，正式將 Ant Design 從 UI 組件庫的概念升級至面向企業級的設計體系。

螞蟻金服體驗技術部 UED （以下簡稱螞蟻UED）是一支和前端技術團隊在一起的設計團隊，成立於 2014 年。初期團隊只有 1 位設計師支持螞蟻企業級產品的設計需求。隨著螞蟻金服 TechFin的戰略轉型（即重心將由支付及消費金融轉向技術服務），內部的企業級產品開壯大，同時這類產品量級巨大、功能複雜、並發頻繁。有限的人力，必然無法支持海量的業務需求，除了擴展團隊人數外，螞蟻金服UED聯合社區一起打磨出 Ant Design —— 一個服務於企業級產品的設計體系。通過 Ant Design，以少量人力，提升大阿里內部1,000+ 產品、外部20,000+ 產品的研發效率，至今為止，累計為全球 300w+ 設計者和開發者使用，帶去了友好的研發體驗。

隨著螞蟻金服的高速發展和商業化進程的加快，企業級產品的用戶體驗變得越發重要。如今的螞蟻金服UED已逐步發展成近 60+ 設計師的團隊規模，儲備著品牌、3D 動畫、影視、用戶研究、產品設計等等各種專業方向的人才，以滿足企業級產品多元化的需求，實現不僅讓設計者和開發者「體驗美好」，更讓終端用戶「體驗美好」的目標。

我們是在ant.design（https://ant.design）這個網站上知道了Ant design，知道了這個由中國團隊出品的優秀的設計體系。於是我們聯繫了幕後團隊——螞蟻金服體驗技術UED，Ant Design設計負責人它山接受了我們的專訪。我們也非常高興通過這次專訪，能把Ant design介紹給更多人，把這個優秀的設計團隊介紹給更多人。

現在就帶你了解為全球 300w+設計者和開發者帶來友好研發體驗的設計體系，為你揭曉螞蟻金服企業級產品高效研發的秘密。

企業級產品設計：把痛點和難點當作挑戰

.design：螞蟻金服體驗技術部 UED是一隻怎樣的設計團隊，它的構成如何，分別承擔了什麼樣的設計職能？

螞蟻UED：我們是一家和前端工程師一起的，服務螞蟻企業級應用的團隊。目前UED 一共分成兩個大團隊：分別是設計服務中心和體驗設計中心，設計服務中心負責螞蟻企業級設計體系與科技品牌的心智打造，主攻設計工程化與科技情感化，體驗設計中心負責支持螞蟻 CTO 業務線的日常業務支持，以 better UX 為目標，致力於企業級設計領域的體驗方法與優秀案例 。

.design：談起螞蟻金服，可能很多人會先想到支付寶錢包，芝麻信用，螞蟻森林等等，沒有想到你們要服務這麼多企業級產品。能否聊聊螞蟻的企業級產品，其體驗設計最大痛點和難點是什麼？

螞蟻UED：一說起螞蟻金服，相信很多人對支付寶錢包、芝麻信用、網商銀行、春節紅包、螞蟻森林這些應用並不陌生。如果這把我們螞蟻的整個產品體系比做冰山的話，這些屬於水面以上的部分。而 Ant Design 所服務的企業級產品更多的是屬於水面以下的部分，這是一個非常龐大且複雜的產品網。功能囊括了資金、運維、研發、安全、風控、效能管理、渠道管理等所有維持我們前台業務快速高效安全穩定運行的模塊。

至於企業級產品設計的設計難點，從設計師的視角來回答這個問題的話，應該是量級大、變化快、產品邏輯複雜、用戶同理心比較難建立，但其實我們更願意把痛點和難點看成是挑戰。

Ant Design：希望成為世界級設計體系

.design：用最簡單的話概括，Ant Design是什麼，能為設計師和開發人員做什麼？

螞蟻UED:提供前端組件庫和配套的 Sketch、Axure 的設計資源包，幫助設計師和開發人員提升 5-10 倍的研發效能。提供設計價值觀、原則和模式，幫助設計師和開發人員做更好的產品設計。

.design：ant.design，這個網站是何時建立的？為解決什麼問題而建立？

螞蟻UED：ant.design 是 15 年初建立的。當時螞蟻金服的中台需求非常之多，但支持的前端和設計非常得少，基本上 1000 個系統對 10 個設計師這樣的規模。所以，我們就想到用一個統一的 UI 資產（組件庫）來提升效能，讓我們做得更快，從而把重點項目直接支持好，同時，也能降低 UI 設計門檻，從而賦能我們的合作夥伴（產品經理和後端工程師等），來間接支持更多應用。

.design：為什麼選擇了ant.design這個域名？

螞蟻UED：選擇 Design 這個域名，是期待我們能將設計價值觀、原則和模式逐步傳承下去，因為前端框架、設計風格都會過時，antd （Ant Design of React：用 React 前端框架實現的 Ant Design）一定會被淘汰。但如果我們有 Ant Design ，下個潮流來的時候，我們能快速搭建新的 Ant Design of XXX。非常感動的事，除了 antd，我們已經有 10+ 不同前端框架實現的 Ant Design。 我們的 Design 夢得到了真正的延續。

.design：Ant Design的設計價值觀很特別，它有兩個堅持——自然和確定，能否舉例和我們具體聊聊。

螞蟻UED：自然：以色彩為例子，一般設計師會根據經驗來定色板。但我們通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的 12 色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，藉助美術中素描的思路，對 12 個顏色進行了衍生。

確定：將頁面模塊化、組件化，是將設計規則進行前置和黑箱化，用戶只要去選擇合適的組件用就可以，不必擔心裏面的細節，這就極大降低專業性和溝通成本，也就降低研發的不確定性。比如：不會出現這樣狀況，這個頁面的 Button 有懸停狀態，那個頁面的 Button 沒有懸停狀態。

.design：Ant Design從最初版本到現在Ant Design 3.0，每一次的迭代有什麼重要調整和拓展？

螞蟻UED：1.0 到 2.0：組件能力的不斷優化和整合，同時增加模式，從單一組件庫逐步成為國內領先的設計體系。

2.0 到3.0：引入「自然」這個價值觀，在字體、排版、icon 等多個視覺層面做了重大調整，同時也啟動「人機自然交互」的研究，從單一的視覺自然升級到交互自然；對外正式推出 ETCG 的概念，並發布 Ant Design Pro；後續，還發布面向設計師的 Sketch 工具集 Kitchen，專門提升設計效率。

還有一個小細節，我們每次大版本變化，主色都會調整。這是確定性的一個應用案例，調整起來毫不費力，但是每個色值變化的背後都是深思熟慮的結果。

.design：Ant Design希望成為世界級設計體系的一份子，你們一定也對比研究過不同的設計語言， 優秀的設計語言和規範有哪些共性？

螞蟻UED：參考對象包括：Fiori Design、Human Interface Guidelines、Lightning Design System、Material Design，還有一些《Web 界面設計》、《界面設計模式》等經典書籍。優秀的設計體系和優秀的設計一樣，都是看起來簡單、好用，但都是深思熟慮的成果。

.design：除了Ant Design，你們還在服務和打造大量的企業級產品。基於Ant Design體系設計的產品，反過來可以成為設計體系的驗證，目前Ant Design對於設計效率的提升上有哪些可靠的實例和數據證明？

螞蟻UED：螞蟻的企業級產品介紹基本在這個網站上了https://tech.antfin.com/ ，這還只是商業化對外的一部分，除此之外，還有大量的內部建設需求。

這個問題我拆分成兩個方面來回答：

首先，設計提效可以從業務線宏觀的視角去衡量，也可以從單點業務線微觀的視角去看。大面上，一個60人規模團隊，能撐起上千個系統的設計量的同時還能夠去沉澱專業做創新，這一點如果沒有體系化的思考是不可能的。單點業務線上的日常設計效率，在我們沉澱了組件，模版並通過我們的kitchen、ant design lib等輔助設計的工具，也有較以往很大的提升，舉一個例子，2014年我們支持一個業務，5 名設計師需要全程投入，到現在 1個設計師可以同時支撐多個業務的設計需求並且還能在過程中嘗試方法創新。以往一個業務線需要交互視覺同時搭配來做的事情，通過設計體系，現在一名體驗設計師就可以完成大部分的界面設計工作，甚至通過團隊內部的培訓賦能，我們還將一部分 PD 帶起來，讓他們自己也可以產生簡單的界面。

第二點，設計體系中設計工程化打好了一個效率的大基礎，讓設計師們可以釋放重複工作真正的投入到重點項目的體驗優化中去，從用戶視角出發，幫助產品提升主流程的用戶體驗，目前已經在內部積累了大約 20 多個優秀的案例。在操作時長、用戶滿意度、首次使用成功率等方面都有明顯的成效。

.design：Ant Design不但追求『用戶』的使用體驗，還追求『設計者』和『開發者』的使用體驗，這非常感人。為此你們經常會接收到設計者和開發者的體驗反饋嗎？如何處理這些反饋？

螞蟻UED：截止今天，在 GitHub 上至少有 12,000 條反饋 issue ，我們會專門安排工程師和設計師值班處理這些反饋。其實，Ant Design 能走到今天，離不開社區的反饋和共建。

開放創新產品：為生態夥伴帶去更多價值

.design：你們研發的企業級產品，不僅作為內部工具還慢慢對外開放，比如「語雀」，為什麼要做語雀，它相比市面上的知識庫產品有什麼特色和優勢？

螞蟻UED：首先做語雀是為了滿足內部用戶的大量文檔述求，在經過三年的內部捶打之後，語雀成為阿里內部首選的文檔知識庫。之後，我們發現外部中小企業也有非常旺盛的文檔需求，本著螞蟻金服對外開放的大背景，語雀從去年開始正式對外服務，為我們的生態夥伴帶去更多價值。

至於特色和優勢，知識庫屬於知識管理這個領域的一種產品，在這個領域有很多競爭對手，比如 Confluence 和 藍凌等專業軟體，它們都需要安排專人進行維護，主要是重管理而輕創作和組織，大多數都是自上而下的管理方式。而語雀的優勢在於，我們提供了一種輕盈的知識組織方式，不需要安排專門同學對接，任何人或團隊都可以輕鬆的創作出他想要的內容，同時以更優雅的方式呈現給需要的人。在管理之餘可以更高效率地完成在線協同。

.design：類似的創新產品還有哪些，簡單介紹一下？

螞蟻UED：雲鳳蝶：https://www.yunfengdie.com/，一個基於 SaaS 模式的智能建站平台。使用雲鳳蝶將獲得自助建站，安全域名，站點託管，數據分析，和第三方營銷插件等服務。Kitchen：https://kitchen.alipay.com/，一款為設計者提升工作效率的 Sketch 工具集。

一切用專業說話的團隊：簡單、自由、有愛

.design：作為一支和前端技術團隊在一起的設計團隊，專為企業級產品的用戶體驗，是否形成了一些獨特的團隊文化？

螞蟻UED：一切用專業說話，簡單、自由、有愛。

.design：和前端技術團隊需要密切配合的設計師們，應該如何保證溝通通暢和話語權的掌握？

螞蟻UED：因為紮根在技術體內，平時大家也都坐在一起，所以和工程師在日常溝通上可以說還是比較通暢的，話語權的掌握這個問題，其實還是考驗設計師的責任感與專業度。

.design：短短几年從一個設計師到現在的60人團隊的高速發展，這其中如何優化人才結構，保證團隊適應快速成長，有什麼經驗可以分享？

螞蟻UED：首先，是建體系，解放重複勞動力，只有設計體系才有能把人員先從大量反覆的工作中解放出來。逐漸的業務量和業務盤子就會起來，這個時候就是吸引人才，搭梯隊。最後是做專業影響力，吸引更多的人才。

.design：螞蟻金服體驗技術部 UED歡迎什麼樣的設計師加入你們的團隊？

螞蟻UED：首先一定是專業度，不管是體驗設計還是創意設計師，棒棒的作品一定是最好的敲門磚。其次，是一些溝通，協作等設計以外的軟實力。最後一點，做企業級產品的體驗設計，很重要的一點是有一顆耐的住寂寞的心，我們的產品從idea，到產品化，到商業化，從服務內部到普惠生態，往往是一個漫長的且磨人的過程，在這樣的環境里，謙遜、簡單、匠心非常重要。

.design：團隊接下來有什麼偉大計劃和小目標？

螞蟻UED：短期內我們正在籌備ant design 4.0的升級計劃，除了會完善更多企業級領域的設計資產之外，還會升級 ETCG 組件抽象的思路，同時嘗試性的邁出服務化的第一步。

長遠來看，希望我們可以在企業級設計領域越做越好吧，極致提效的同時，探索更多體驗實踐落地案例，積累好的設計服務能力，最終可以逐步的開放給同行們。

這就是用匠心打造良心設計體系和企業級產品和螞蟻金服體驗技術UED，希望在這樣優秀的大廠團隊的技術探索和經驗分享能帶領國內的設計行業走得更遠。如果你想了解Ant Design，可以訪問官網：https://ant.design/

參考文獻：Ant Design 3.0 背後的故事： https://zhuanlan.zhihu.com/p/32746810

原文鏈接：https://www.zcool.com.cn/article/ZOTU0NjA0.html

推薦閱讀：