Ant Design 4.0正式發佈：創造快樂工做

2月28日，廣受開發者歡迎的前端開源項目Ant Design發佈4.0正式版本。這是兩年多以來的首次發佈的里程碑版本。新版本中進行了多項改進，包括：

• 設計規範升級。增長了暗色主題和無邊框組件。
• 兼容性調整。最低支持IE 11，依賴的React最低版本升級到16.9。
• 更小的尺寸。調整了圖標使用API以支持tree shaking，並對相關依賴進行精簡。
• 組件重作。包括Table、Form、DatePicker等組件進行重作。

你們能夠訪問 ant.design 瞭解更多信息，或在GitHub上關注Ant Design項目。

2015 年，Ant Design 發佈第一個版本，到如今時間過去整整 5 年了，第一代 Ant Designers 陸續退出舞臺中心，第二代、第三代 Ant Designers 正在扛起大旗。他們不只僅扛起發展的重任，還要傳承 Ant Designer 的精神。正如「天然」中的萬事萬物，有發展、有死亡、更有進化。

本篇文章將和你們一塊兒聊聊 Ant Design 4.0，以及穿插一些 4.0 背後的故事，但願給各位完整的輸入和體感。

Ant Design 4.0 的由來

在一次內部會議中，咱們談及 Ant Design 的歷史的問題：

林外說：Ant Design 已經作 4 年多了 

玉伯立馬糾正：Ant Design 才作了 4 年，剛剛起步，咱們起碼要作 30 年 

Ant Design 已經走過了四個年頭。此時的 Ant Design ，已經遠不止是一個 UI 組件庫。咱們誕生可視化資產（AntV）、插畫資產（海兔），以及體驗設計、增加設計、品牌設計等各類策略；同時，在可預見的將來，咱們也將會涉及工業設計、運營設計等工做範疇。隨着業務複雜性和人員複合性不斷增長，如何去詮釋和融合新生力量，去構建一個緊密聯繫的體系，而非一味的堆砌，成爲咱們須要思考的重要問題。

此外，做爲一個立志作 30 年的設計體系，光依靠一兩代人的努力是遠遠不夠的。爲 Ant Design 創建一套科學的核心模型，並指引一代又一代的 Ant Designers 去傳承、發展、演進，成爲當下愈發緊急的事項。

找到 Ant Design 的思考原點，衍生出咱們的價值取向，泛化原則和模式來解決一再出現的問題，並經過工具化和團隊不斷放大效能、賦能生態，是 4.0 的立項初衷。咱們得讓每一個 Ant Designer 都有一顆心，有一張圖，打好一場仗。

以上即是 Ant Design 4.0 升級的最大內因。所以，這一次咱們除了增長了一些資產之外，更重要的是找到一個根基，自下而上天然生成：

• 底層靜水深流，探索設計深度：肯定「每一個人都追求快樂工做」這一基本假定，做爲體系的原點。在此之上，衍生出 4 個設計價值觀：天然、肯定性、意義感、生長性。
• 頂部百花齊放，融合設計廣度：生長出更多設計資產和設計策略。其中，設計資產提升研發的效率和一致性，讓產品更好看；而設計策略讓產品更加好用，讓用戶目標更加專一，讓人機交互更加緊密。

如偏右的所說：這兩年的 Ant Design，底層靜水深流、頂部百花齊放。整個設計體系，將在設計師和工程師的碰撞和融合中繼續前行，爲業界和螞蟻生態帶去更多設計和技術價值。

基本假定：每一個人都追求快樂工做

時下經常聽到一句話：「工做使我快樂」，然而，工做真的令人快樂嗎？對於大多數人來講，工做是一個複雜的話題，由於咱們對它又愛又恨。

根據《發現心流：平常生活中的最優體驗》的數據統計，工做的體驗並不那麼友好，具體有三大特徵：

• 工做讓咱們專一：工做令人專一，是全部活動中專一度最高的。
• 工做大部分時間，咱們不快樂：咱們在從事愛好、看電影、吃東西等活動，都會頻繁感覺到快樂，然而在從事工做/學習以及家務的時候，並不快樂。
• 寧願發呆，咱們也不肯意工做：在全部活動中，工做的動機最低。對於不少人而言，寧願發呆也不肯意工做。

寧願發呆也不肯意工做，分明是「工做使我難過呀」！那麼，是什麼讓工做體驗如此糟糕呢？

工做設計的不合理，致使挑戰大於技能

雖然致使不快樂的緣由不少，可是總結概括以後，大體分爲三大類緣由：

• 目標不一致：大部分工做者認爲，工做是幫助老闆完成目標，而不是本身的人生目標。
• 很差的反饋，帶來負面感覺：工做結果不被承認，常常被否認。此外，還有人際關係衝突，尤爲是與直屬上司之間的衝突和矛盾。
• 挑戰和技能不匹配：因爲工做設計的不合理，致使挑戰和技能的不匹配。有些企業主只關注成本和效益，把工做設計的很是枯燥，員工處於重複性勞做，好比：生產線上的工人；而另一些工做，又設計的過於複雜或者難度太大，致使員工疲於應付，沒有時間和精力陪伴本身的家人，好比：互聯網從業者。

而在數字世界中，這個矛盾變得更加尖銳和突出。70 年前，第一臺計算機誕生，佔地 170 平方米，卻只能作 5000 次/秒的運算，然而當下咱們手上任何一隻手機，都是它運算的萬倍、甚至幾十萬倍。隨着計算機技術能力的提高，系統的數據、信息、功能爆發式增加。然而，人卻沒有明顯變化。咱們和 70 年前的爺爺輩沒有本質區別，好比：爺爺輩能夠記住 7+2 的數字短時記憶能力，到了 00 後這一代仍是這個水平。

因此，系統迭代的光速，遠遠超過人進化的龜速。在數字世界的人機交互中，系統給咱們挑戰遠遠、遠遠、遠遠大於咱們掌握的技能。

不一樣的挑戰，會帶來不一樣的情感體驗

當工做中挑戰和技能不匹配時，會給咱們帶來不一樣的內心感覺。

• 當技能高於挑戰的時候，咱們會感受到無聊、鬆懈。
• 當挑戰高於技能的時候，咱們會感受到擔憂、焦慮。而數字世界中的咱們，長時間面臨過大的挑戰，使得擔憂和焦慮成爲了常態。

而只有挑戰和技能匹配的時候，咱們的工做纔會有快樂。同時，隨着技能不斷提高，又能匹配更高的挑戰，就能在工做上持續體會到快樂。那麼，工做就會如遊戲般好玩，是一種別樣的快樂。

全情投入，快樂工做

工做中的快樂，和咱們在沙灘上曬太陽的那種快樂，很不同。你們看一下這張圖，回想一下本身的工做，必定會有這樣的體會。當你面臨一件很是有挑戰的事情，你須要集中全部注意力，保持專一，作一件事。一擡頭，2 個小時過去，竟然下班了。過程當中，你不會有任何感覺，而完成後，你會有很強的成就感和知足感。

這纔是工做的快樂，是全情投入的快樂，也是成長的快樂。

Ant Design 基本假定：每一個人都追求快樂工做

咱們認爲「每一個人都追求快樂工做」。由於這兩個主要緣由：

• 第1、每一個人，都曾經有快樂工做的經歷。只要讓挑戰持續匹配技能，就能創造連續的快樂工做。
• 第2、工做不可避免。由於咱們一半以上時間都在工做。若是咱們想要一個快樂的人生，那麼快樂工做，對咱們每一個人都意義重大。

今天，「每一個人都追求快樂工做」正式成爲 Ant Design 的基本假定，就像「光速不變」至於相對論同樣。咱們期待這個假定，能引領 Ant Design 能不斷傳承、發展、演進，活過三十年。

基本假定衍生 4 個設計價值觀

基於「每一個人都追求快樂工做」這一基本假定，咱們分別爲兩類人：用戶（最終使用用戶的人）、設計者（創造應用的人），帶去兩種感覺：快感、樂趣。自此，咱們衍生出 4 個價值觀：

• 設計者的快—肯定性 Certain：絕大部分數字產品，都是分工合做的產物。而人越多，團隊合做的熵就會變高，這是一切低效的來源。儘量少的功能，儘量簡單易學的規則，儘量模塊化的方案，讓全部人都在一個思惟頻道推理出一樣的方案，這能明顯下降合做熵。Ant Design 的各種資產，都在落實這個理念，讓更少人更快、更好的完成研發工做。
• 用戶的快—肯定性 Certain：一致性的方案，下降學習成本。一樣的問題，一樣的解決方案，有利於用戶在系統內外快速學習和操做，下降學習熵。
• 用戶的樂—意義感 Meaningful：用戶經過和系統的互動和鏈接實現超我，並完成他的目標，體驗到心流，產生一種工做的意義感。前提要實現二者：互動要有利於他的目標的產生和完成，造成意義感；互動應該是天然的，讓他對過程也有意義感。Ant Design 對 JCD 方向的探索，就是在工做場景中尋找目標的意義和過程的意義。有趣的 JCD 是 Job Centered Design，也能夠是 Joy Centered Design
• 設計者的樂—生長性 Growing：設計的系統有用戶互動，有愈來愈多的用戶互動。並非指用戶羣體的變大，系統功能的增加，而是指用戶羣體和系統功能的互動關係更加緊密，生長和演化出一個羣體。
• 用戶/設計者—天然 Natural：全部價值觀的底座，將來會孕育出更多價值觀。天然能夠分紅感知天然和行爲天然兩個方向，分別映射人機交互中的反饋和前饋。

限於文章篇幅，在這裏，咱們給你們講講「天然」，瞭解詳盡內容，能夠閱讀設計價值觀（https://next.ant.design/docs/...）。

天然

視覺是人獲取信息的最主要途經，也是人類感知的最主要通道，因此在 Ant Design 3.0 的時候，咱們重點討論視覺的天然之美。這一次，咱們在前饋層面，討論行爲的天然之美。

一次收納，用戶就記不住、找不到

有一天晚上，在咱們語雀（十萬人阿里人喜歡的文檔協同軟件）的用戶交流羣，發生了一段頗有表明性的對話：

用戶：語雀能夠插入圖片麼？ 

語雀負責人：固然能夠，最基礎的功能。用戶：但是咱們找不到在哪裏？ 

讓咱們來還原一下過程：在語雀編輯頁面的左上角，有一個綠色的 icon；點擊以後，能夠在第一行發現圖片上傳功能。但只是把它收納了一次，就會有不少用戶，記不住這個功能；就會有不少用戶，找不到這個功能。

這不是語雀特有的問題，是咱們這個時代產品的通病，由於咱們都採用 WIMP 界面的組織方式。

WIMP 界面：用戶找功能

整我的機交互界面發展，經歷了多個不一樣的發展階段，從批處理界面，到命令行界面，再到 WIMP 界面，以及學術界正在探索的 Post-WIMP 界面和 Non-Command 界面。每過一段時間，系統的易用性會獲得很大提高，用戶生產力就會獲得極大提升，尤爲對於普通用戶而言。

1973 年，Xerox 獨創的 WIMP 界面，是一種劃時代的界面組織方式，後來被蘋果和微軟傳承和發展，影響了一代又一代人。WIMP 極大下降人機交互的門檻，提高易用性，讓人人都能使用計算機。即便到了 49 年後的今天，大部分系統仍然採用 WIMP 界面進行組織。

WIMP 是 Window, Icon, Menu, Point Device 的簡稱，即：窗口、圖標、菜單、點擊設備。這種界面交互的本質上，能夠理解成：開發者首先組織好功能，而後讓用戶記住這個功能，並在須要的時候找到這個功能，進行人機交互。簡單理解，讓用戶找功能。

當系統只有幾十個功能組織的時候，這是很是好的組織方式，帶來了質的飛躍，讓普通人也能使用電腦。但如今，50 年過去了，功能幾十倍增加以後。不管怎麼組織，都會有人記不住，找不到。

因此，在功能爆炸的今天，WIMP 界面變得愈來愈不天然。

WIMP 界面不天然的兩大緣由

第1、過於依賴用戶觸發，容易走不通。讓咱們看看人機交互的 7 個過程。當功能太多的時候，用戶記不住有沒有這個功能，這就致使了用戶沒法計劃。當功能太多的時候，用戶找不到這個功能在哪裏，這就致使了用戶沒法迅速確認動做，不知道從哪裏開始？

這是 WIMP 交互不天然的第一個緣由：過於依賴用戶觸發，一旦用戶記不住、一旦用戶找不到，這條路就會走不通。

第2、過分依賴意識觸發，容易費腦力。咱們回到人身上：根據消耗的能量不一樣，人的意識行爲分爲兩層：意識和無心識。意識比如耗能，消耗更多的卡路里和氧氣。而 WIMP 界面交互中，系統功能是被動的，它須要人有意識的觸發動做，激活全部的功能。

這是 WIMP 交互不天然的第二個緣由：過於依賴意識的觸發，比通常活動更耗腦力，若是長期作，這條路就會越走越累。

增長主動式交互，讓功能找到用戶

如何去解決 WIMP 界面下的這兩個問題呢？首先，明確將系統功能分紅主動功能和被動功能，人也要分紅意識和無心識。其次，咱們要守正出奇：

• 守正：保留 WIMP 界面的常見模式，讓用戶有意識觸發被動功能。
• 出奇(jī)：奇是奇數的奇，而奇數要比偶數多一點。因此，咱們要在守正的基礎上，多作一步。增長系統主動式交互，讓功能找到用戶。

既然用戶記不住、找不到功能；那麼這一次，咱們就讓功能主動找用戶。

通常狀況下，常見的主動交互能夠分紅兩種類型。

• 相逢不相識：系統主動式交互，因爲不是用戶有意識觸發的。因此用戶能看到變化，但不必定明白背後的邏輯。
• 可用不可見：系統主動式交互，用戶壓根看不見，可能歷來沒有意識到過。

舉一個相逢不相識的例子。在使用支付寶的收款碼時，當你的設備旋轉達到必定角度以後，界面會天然翻轉。此時，對面的人經過掃一掃，就能看到人的正面。仔細想一想這個細節，很是天然。

舉一個可用不可見的例子。iOS 的鍵盤很特別，它會根據你的上一個動做，主動調整每一個字母的點擊熱區。好比：你輸了 Ant Desig 以後，那麼 n 出現的可能性會大於旁邊的 b 和 m，讓你更容易點擊。這一切，很是天然，天然到咱們徹底意識不到它的存在。

當分析 500+ 個天然交互的設計細節以後，咱們發現異曲同工，全部主動式能夠分爲 9 大類，叫作天然交互工具。經過使用它，能夠快速尋找天然交互的方法和脈絡。讓你的用戶更省力、更快樂。

解決圖片上傳的問題

回到剛開始的語雀上傳的案例，咱們能夠經過將「圖片」icon 拿出來，解決用戶找不到、記住不的問題。可是，明天表格找不到了？後天附件找不到了？咱們不可能將全部的 icon 都拿出來，經過打平的方式解決。

今天，咱們用另一種思路「主動式交互」，去解決記不住、找不到的問題。

首基於主動式交互的 9 個維度，咱們能夠依次排查每種互動可能性。對於靠譜的方式，打 1；不靠譜的方式，打 0。最終在一輪排查以後，發現兩種可行的方式。

第一種，上下文（上一個動做）。咱們發現用戶在使用同類型產品時，常常會下意識的將圖片拖到文檔裏，這一動做在桌面軟件中尤爲盛行。雖然語雀是 Web 應用，但爲了讓用戶的上下文保持串聯，咱們讓用戶能夠直接將圖片拖進去。直接拖進去，而不須要費力的尋找對應的 icon。

第二種，元數據。圖片是一種特殊格式數據：jpg、png，系統是很容易識別的。因此當用戶粘貼了這種格式，在進入到編輯頁面時候，適時的冒出一個提示，詢問用戶是否粘貼。

這兩種方式，並不驚世駭俗，甚至比較常規。可是它們都跳出了 WIMP 界面的思惟模式（讓用戶記、讓用戶找的模式），用全新的視覺，更天然的交互方式來彌補 WIMP 的不足。而天然交互工具，就是提供一種思惟框架，讓設計者快速得出水準之上的設計方案。

咱們認爲：傳統的 WIMP 界面在海量功能面前，變得愈來愈不天然了。須要更多的主動式交互，讓系統功能找到用戶，節省用戶腦力和體力。這是咱們的天然之道，這也是用戶的快樂之道。