作者：林外

https://www.yuque.com/ant-design/ant-design/xurgy5

2015 年，Ant Design 發(fā)布第一個(gè)版本，到現(xiàn)在時(shí)間過(guò)去整整 5 年了，第一代 Ant Designers 陸續(xù)退出舞臺(tái)中心，第二代、第三代 Ant Designers 正在扛起大旗。他們不僅僅扛起發(fā)展的重任，還要傳承 Ant Designer 的精神。正如「自然」中的萬(wàn)事萬(wàn)物，有發(fā)展、有死亡、更有進(jìn)化。

本篇文章將和大家一起聊聊 Ant Design 4.0，以及穿插一些 4.0 背后的故事，希望給各位完整的輸入和體感。

Ant Design 4.0 的由來(lái)

在一次內(nèi)部會(huì)議中，我們談及 Ant Design 的歷史的問(wèn)題：林外說(shuō)：Ant Design 已經(jīng)做 4 年多了玉伯立馬糾正：Ant Design 才做了 4 年，剛剛起步，我們起碼要做 30 年

Ant Design 已經(jīng)走過(guò)了四個(gè)年頭。此時(shí)的 Ant Design ，已經(jīng)遠(yuǎn)不止是一個(gè) UI 組件庫(kù)。我們誕生可視化資產(chǎn)（AntV）、插畫(huà)資產(chǎn)（海兔），以及體驗(yàn)設(shè)計(jì)、增長(zhǎng)設(shè)計(jì)、品牌設(shè)計(jì)等各種策略；同時(shí)，在可預(yù)見(jiàn)的未來(lái)，我們也將會(huì)涉及工業(yè)設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)等工作范疇。隨著業(yè)務(wù)復(fù)雜性和人員復(fù)合性不斷增加，如何去詮釋和融合新生力量，去構(gòu)建一個(gè)緊密聯(lián)系的體系，而非一味的堆砌，成為我們需要思考的重要問(wèn)題。

此外，作為一個(gè)立志做 30 年的設(shè)計(jì)體系，光依靠一兩代人的努力是遠(yuǎn)遠(yuǎn)不夠的。為 Ant Design 建立一套科學(xué)的核心模型，并指引一代又一代的 Ant Designers 去傳承、發(fā)展、演進(jìn)，成為當(dāng)下愈發(fā)緊急的事項(xiàng)。找到 Ant Design 的思考原點(diǎn)，衍生出我們的價(jià)值取向，泛化原則和模式來(lái)解決一再出現(xiàn)的問(wèn)題，并通過(guò)工具化和團(tuán)隊(duì)不斷放大效能、賦能生態(tài)，是 4.0 的立項(xiàng)初衷。我們得讓每個(gè) Ant Designer 都有一顆心，有一張圖，打好一場(chǎng)仗。

以上便是 Ant Design 4.0 升級(jí)的最大內(nèi)因。因此，這一次我們除了增加了一些資產(chǎn)以外，更重要的是找到一個(gè)根基，自下而上自然生成：

• 底層靜水深流，探索設(shè)計(jì)深度：確定「每個(gè)人都追求快樂(lè)工作」這一基本假定，作為體系的原點(diǎn)。在此之上，衍生出 4 個(gè)設(shè)計(jì)價(jià)值觀：自然、確定性、意義感、生長(zhǎng)性。

• 頂部百花齊放，融合設(shè)計(jì)廣度：生長(zhǎng)出更多設(shè)計(jì)資產(chǎn)和設(shè)計(jì)策略。其中，設(shè)計(jì)資產(chǎn)提高研發(fā)的效率和一致性，讓產(chǎn)品更好看；而設(shè)計(jì)策略讓產(chǎn)品更加好用，讓用戶目標(biāo)更加專注，讓人機(jī)交互更加緊密。

如偏右的所說(shuō)：這兩年的 Ant Design，底層靜水深流、頂部百花齊放。整個(gè)設(shè)計(jì)體系，將在設(shè)計(jì)師和工程師的碰撞和融合中繼續(xù)前行，為業(yè)界和螞蟻生態(tài)帶去更多設(shè)計(jì)和技術(shù)價(jià)值。

基本假定：每個(gè)人都追求快樂(lè)工作

時(shí)下常常聽(tīng)到一句話：「工作使我快樂(lè)」，然而，工作真的使人快樂(lè)嗎？對(duì)于大多數(shù)人來(lái)說(shuō)，工作是一個(gè)復(fù)雜的話題，因?yàn)槲覀儗?duì)它又愛(ài)又恨。

根據(jù)《發(fā)現(xiàn)心流：日常生活中的最優(yōu)體驗(yàn)》的數(shù)據(jù)統(tǒng)計(jì)，工作的體驗(yàn)并不那么友好，具體有三大特征：

• 工作讓我們專注：工作使人專注，是所有活動(dòng)中專注度最高的。

• 工作大部分時(shí)間，我們不快樂(lè)：我們?cè)趶氖聬?ài)好、看電影、吃東西等活動(dòng)，都會(huì)頻繁感受到快樂(lè)，然而在從事工作/學(xué)習(xí)以及家務(wù)的時(shí)候，并不快樂(lè)。

• 寧愿發(fā)呆，我們也不愿意工作：在所有活動(dòng)中，工作的動(dòng)機(jī)最低。對(duì)于很多人而言，寧愿發(fā)呆也不愿意工作。

寧愿發(fā)呆也不愿意工作，分明是「工作使我難過(guò)呀」！那么，是什么讓工作體驗(yàn)如此糟糕呢？

工作設(shè)計(jì)的不合理，導(dǎo)致挑戰(zhàn)大于技能

雖然導(dǎo)致不快樂(lè)的原因很多，但是總結(jié)歸納之后，大致分為三大類原因（刨除錢?的因素，這個(gè)我們管不了?）：

• 目標(biāo)不一致：大部分工作者認(rèn)為，工作是幫助老板完成目標(biāo)，而不是自己的人生目標(biāo)。

• 不好的反饋，帶來(lái)負(fù)面感受：工作結(jié)果不被認(rèn)可，經(jīng)常被否定。此外，還有人際關(guān)系沖突，尤其是與直屬上司之間的沖突和矛盾。

• 挑戰(zhàn)和技能不匹配：由于工作設(shè)計(jì)的不合理，導(dǎo)致挑戰(zhàn)和技能的不匹配。有些企業(yè)主只關(guān)注成本和效益，把工作設(shè)計(jì)的非?？菰?，員工處于重復(fù)性勞作，比如：生產(chǎn)線上的工人；而另外一些工作，又設(shè)計(jì)的過(guò)于復(fù)雜或者難度太大，導(dǎo)致員工疲于應(yīng)付，沒(méi)有時(shí)間和精力陪伴自己的家人，比如：互聯(lián)網(wǎng)從業(yè)者。

而在數(shù)字世界中，這個(gè)矛盾變得更加尖銳和突出。70 年前，第一臺(tái)計(jì)算機(jī)誕生，占地 170 平方米，卻只能做 5000 次/秒的運(yùn)算，然而當(dāng)下我們手上任何一只手機(jī)，都是它運(yùn)算的萬(wàn)倍、甚至幾十萬(wàn)倍。隨著計(jì)算機(jī)技術(shù)能力的提升，系統(tǒng)的數(shù)據(jù)、信息、功能爆發(fā)式增長(zhǎng)。然而，人卻沒(méi)有明顯變化。我們和 70 年前的爺爺輩沒(méi)有本質(zhì)區(qū)別，比如：爺爺輩可以記住 7+2 的數(shù)字短時(shí)記憶能力，到了 00 后這一代還是這個(gè)水平。

所以，系統(tǒng)迭代的光速，遠(yuǎn)遠(yuǎn)超過(guò)人進(jìn)化的龜速。在數(shù)字世界的人機(jī)交互中，系統(tǒng)給我們挑戰(zhàn)遠(yuǎn)遠(yuǎn)、遠(yuǎn)遠(yuǎn)、遠(yuǎn)遠(yuǎn)大于我們掌握的技能。

不同的挑戰(zhàn)，會(huì)帶來(lái)不同的情感體驗(yàn)

當(dāng)工作中挑戰(zhàn)和技能不匹配時(shí)，會(huì)給我們帶來(lái)不同的心里感受。

• 當(dāng)技能高于挑戰(zhàn)的時(shí)候，我們會(huì)感覺(jué)到無(wú)聊、松懈。

• 當(dāng)挑戰(zhàn)高于技能的時(shí)候，我們會(huì)感覺(jué)到擔(dān)心、焦慮。而數(shù)字世界中的我們，長(zhǎng)時(shí)間面臨過(guò)大的挑戰(zhàn)，使得擔(dān)心和焦慮成為了常態(tài)。

而只有挑戰(zhàn)和技能匹配的時(shí)候，我們的工作才會(huì)有快樂(lè)。同時(shí)，隨著技能不斷提升，又能匹配更高的挑戰(zhàn)，就能在工作上持續(xù)體會(huì)到快樂(lè)。那么，工作就會(huì)如游戲般好玩，是一種別樣的快樂(lè)。

全情投入，快樂(lè)工作

工作中的快樂(lè)，和我們?cè)谏碁┥蠒裉?yáng)的那種快樂(lè)，很不一樣。大家看一下這張圖，回想一下自己的工作，一定會(huì)有這樣的體會(huì)。當(dāng)你面臨一件非常有挑戰(zhàn)的事情，你需要集中所有注意力，保持專注，做一件事。一抬頭，2 個(gè)小時(shí)過(guò)去，居然下班了。過(guò)程中，你不會(huì)有任何感受，而完成后，你會(huì)有很強(qiáng)的成就感和滿足感。

這才是工作的快樂(lè)，是全情投入的快樂(lè)，也是成長(zhǎng)的快樂(lè)。

Ant Design 基本假定：每個(gè)人都追求快樂(lè)工作

我們認(rèn)為「每個(gè)人都追求快樂(lè)工作」。因?yàn)檫@兩個(gè)主要原因：

• 第一、每個(gè)人，都曾經(jīng)有快樂(lè)工作的經(jīng)歷。只要讓挑戰(zhàn)持續(xù)匹配技能，就能創(chuàng)造連續(xù)的快樂(lè)工作。

• 第二、工作不可避免。因?yàn)槲覀円话胍陨蠒r(shí)間都在工作。如果我們想要一個(gè)快樂(lè)的人生，那么快樂(lè)工作，對(duì)我們每個(gè)人都意義重大。

今天，「每個(gè)人都追求快樂(lè)工作」正式成為 Ant Design 的基本假定，就像「光速不變」至于相對(duì)論一樣。我們期待這個(gè)假定，能引領(lǐng) Ant Design 能不斷傳承、發(fā)展、演進(jìn)，活過(guò)三十年。

基本假定衍生 4 個(gè)設(shè)計(jì)價(jià)值觀

基于「每個(gè)人都追求快樂(lè)工作」這一基本假定，我們分別為兩類人：用戶（最終使用用戶的人）、設(shè)計(jì)者（創(chuàng)造應(yīng)用的人），帶去兩種感受：快感、樂(lè)趣。自此，我們衍生出 4 個(gè)價(jià)值觀：

• 設(shè)計(jì)者的快—確定性 Certain：絕大部分?jǐn)?shù)字產(chǎn)品，都是分工合作的產(chǎn)物。而人越多，團(tuán)隊(duì)合作的熵就會(huì)變高，這是一切低效的來(lái)源。盡可能少的功能，盡可能簡(jiǎn)單易學(xué)的規(guī)則，盡可能模塊化的方案，讓所有人都在一個(gè)思維頻道推理出同樣的方案，這能明顯降低合作熵。Ant Design 的各類資產(chǎn)，都在落實(shí)這個(gè)理念，讓更少人更快、更好的完成研發(fā)工作。

• 用戶的快—確定性 Certain：一致性的方案，降低學(xué)習(xí)成本。同樣的問(wèn)題，同樣的解決方案，有利于用戶在系統(tǒng)內(nèi)外快速學(xué)習(xí)和操作，降低學(xué)習(xí)熵。

• 用戶的樂(lè)—意義感 Meaningful：用戶通過(guò)和系統(tǒng)的互動(dòng)和連接實(shí)現(xiàn)超我，并完成他的目標(biāo)，體驗(yàn)到心流，產(chǎn)生一種工作的意義感。前提要實(shí)現(xiàn)兩者：互動(dòng)要有利于他的目標(biāo)的產(chǎn)生和完成，形成意義感；互動(dòng)應(yīng)該是自然的，讓他對(duì)過(guò)程也有意義感。Ant Design 對(duì) JCD 方向的探索，就是在工作場(chǎng)景中尋找目標(biāo)的意義和過(guò)程的意義。有趣的 JCD 是 Job Centered Design，也可以是 Joy Centered Design

• 設(shè)計(jì)者的樂(lè)—生長(zhǎng)性 Growing：設(shè)計(jì)的系統(tǒng)有用戶互動(dòng)，有越來(lái)越多的用戶互動(dòng)。并不是指用戶群體的變大，系統(tǒng)功能的增長(zhǎng)，而是指用戶群體和系統(tǒng)功能的互動(dòng)關(guān)系更加緊密，生長(zhǎng)和演化出一個(gè)群體。

• 用戶/設(shè)計(jì)者—自然 Natural：所有價(jià)值觀的底座，未來(lái)會(huì)孕育出更多價(jià)值觀。自然可以分成感知自然和行為自然兩個(gè)方向，分別映射人機(jī)交互中的反饋和前饋。

限于文章篇幅，在這里，我們給大家講講「自然」，了解詳盡內(nèi)容，可以閱讀設(shè)計(jì)價(jià)值觀。

自然

視覺(jué)是人獲取信息的最主要途經(jīng)，也是人類感知的最主要通道，所以在 Ant Design 3.0 的時(shí)候，我們重點(diǎn)討論視覺(jué)的自然之美。這一次，我們?cè)谇梆亴用?，討論行為的自然之美?/p>

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

有一天晚上，在我們語(yǔ)雀（十萬(wàn)人阿里人喜歡的文檔協(xié)同軟件）的用戶交流群，發(fā)生了一段很有代表性的對(duì)話用戶：語(yǔ)雀可以插入圖片么？

語(yǔ)雀負(fù)責(zé)人：?當(dāng)然可以，最基礎(chǔ)的功能。用戶：可是我們找不到在哪里？

讓我們來(lái)還原一下過(guò)程：在語(yǔ)雀編輯頁(yè)面的左上角，有一個(gè)綠色的 icon；點(diǎn)擊之后，可以在第一行發(fā)現(xiàn)圖片上傳功能。但只是把它收納了一次，就會(huì)有很多用戶，記不住這個(gè)功能；就會(huì)有很多用戶，找不到這個(gè)功能。

這不是語(yǔ)雀特有的問(wèn)題，是我們這個(gè)時(shí)代產(chǎn)品的通病，因?yàn)槲覀兌疾捎?WIMP 界面的組織方式。

WIMP 界面：用戶找功能

整個(gè)人機(jī)交互界面發(fā)展，經(jīng)歷了多個(gè)不同的發(fā)展階段，從批處理界面，到命令行界面，再到 WIMP 界面，以及學(xué)術(shù)界正在探索的 Post-WIMP 界面和 Non-Command 界面。每過(guò)一段時(shí)間，系統(tǒng)的易用性會(huì)得到很大提升，用戶生產(chǎn)力就會(huì)得到極大提高，尤其對(duì)于普通用戶而言。

1973 年，Xerox 首創(chuàng)的 WIMP 界面，是一種劃時(shí)代的界面組織方式，后來(lái)被蘋(píng)果和微軟傳承和發(fā)展，影響了一代又一代人。WIMP 極大降低人機(jī)交互的門(mén)檻，提升易用性，讓人人都能使用計(jì)算機(jī)。即使到了 49 年后的今天，大部分系統(tǒng)仍然采用 WIMP 界面進(jìn)行組織。

WIMP 是 Window, Icon, Menu, Point Device 的簡(jiǎn)稱，即：窗口、圖標(biāo)、菜單、點(diǎn)擊設(shè)備。這種界面交互的本質(zhì)上，可以理解成：開(kāi)發(fā)者首先組織好功能，然后讓用戶記住這個(gè)功能，并在需要的時(shí)候找到這個(gè)功能，進(jìn)行人機(jī)交互。簡(jiǎn)單理解，讓用戶找功能。

當(dāng)系統(tǒng)只有幾十個(gè)功能組織的時(shí)候，這是非常好的組織方式，帶來(lái)了質(zhì)的飛躍，讓普通人也能使用電腦。但現(xiàn)在，50 年過(guò)去了，功能幾十倍增長(zhǎng)之后。無(wú)論怎么組織，都會(huì)有人記不住，找不到。

所以，在功能爆炸的今天，WIMP 界面變得越來(lái)越不自然。

WIMP 界面不自然的兩大原因

第一、過(guò)于依賴用戶觸發(fā)，容易走不通。讓我們看看人機(jī)交互的 7 個(gè)過(guò)程。當(dāng)功能太多的時(shí)候，用戶記不住有沒(méi)有這個(gè)功能，這就導(dǎo)致了用戶無(wú)法計(jì)劃。當(dāng)功能太多的時(shí)候，用戶找不到這個(gè)功能在哪里，這就導(dǎo)致了用戶無(wú)法迅速確認(rèn)動(dòng)作，不知道從哪里開(kāi)始？

這是 WIMP 交互不自然的第一個(gè)原因：過(guò)于依賴用戶觸發(fā)，一旦用戶記不住、一旦用戶找不到，這條路就會(huì)走不通。

第二、過(guò)度依賴意識(shí)觸發(fā)，容易費(fèi)腦力。我們回到人身上：根據(jù)消耗的能量不同，人的意識(shí)行為分為兩層：意識(shí)和無(wú)意識(shí)。意識(shí)好比耗能，消耗更多的卡路里和氧氣。而 WIMP 界面交互中，系統(tǒng)功能是被動(dòng)的，它需要人有意識(shí)的觸發(fā)動(dòng)作，激活所有的功能。想獲得更詳盡的闡述，請(qǐng)閱讀「林外日課——人腦中的兩套系統(tǒng)」。

這是 WIMP 交互不自然的第二個(gè)原因：過(guò)于依賴意識(shí)的觸發(fā)，比一般活動(dòng)更耗腦力，如果長(zhǎng)期做，這條路就會(huì)越走越累。

增加主動(dòng)式交互，讓功能找到用戶

如何去解決 WIMP 界面下的這兩個(gè)問(wèn)題呢？首先，明確將系統(tǒng)功能分成主動(dòng)功能和被動(dòng)功能，人也要分成意識(shí)和無(wú)意識(shí)。其次，我們要守正出奇：

• 守正：保留 WIMP 界面的常見(jiàn)模式，讓用戶有意識(shí)觸發(fā)被動(dòng)功能。

• 出奇(jī)：奇是奇數(shù)的奇，而奇數(shù)要比偶數(shù)多一點(diǎn)。所以，我們要在守正的基礎(chǔ)上，多做一步。增加系統(tǒng)主動(dòng)式交互，讓功能找到用戶。

既然用戶記不住、找不到功能；那么這一次，我們就讓功能主動(dòng)找用戶。

一般情況下，常見(jiàn)的主動(dòng)交互可以分成兩種類型。

• 相逢不相識(shí)：系統(tǒng)主動(dòng)式交互，由于不是用戶有意識(shí)觸發(fā)的。所以用戶能看到變化，但不一定明白背后的邏輯。

• 可用不可見(jiàn)：系統(tǒng)主動(dòng)式交互，用戶壓根看不見(jiàn)，可能從來(lái)沒(méi)有意識(shí)到過(guò)。

舉一個(gè)相逢不相識(shí)的例子。在使用支付寶的收款碼時(shí)，當(dāng)你的設(shè)備旋轉(zhuǎn)達(dá)到一定角度之后，界面會(huì)自然翻轉(zhuǎn)。此時(shí)，對(duì)面的人通過(guò)掃一掃，就能看到人的正面。仔細(xì)想想這個(gè)細(xì)節(jié)，非常自然。

舉一個(gè)可用不可見(jiàn)的例子。iOS 的鍵盤(pán)很特別，它會(huì)根據(jù)你的上一個(gè)動(dòng)作，主動(dòng)調(diào)整每個(gè)字母的點(diǎn)擊熱區(qū)。比如：你輸了 Ant Desig 之后，那么 n 出現(xiàn)的可能性會(huì)大于旁邊的 b 和 m，讓你更容易點(diǎn)擊。這一切，非常自然，自然到我們完全意識(shí)不到它的存在。

當(dāng)分析 500+ 個(gè)自然交互的設(shè)計(jì)細(xì)節(jié)之后，我們發(fā)現(xiàn)殊途同歸，所有主動(dòng)式可以分為 9 大類，叫做自然交互工具。通過(guò)使用它，可以快速尋找自然交互的方法和脈絡(luò)。讓你的用戶更省力、更快樂(lè)。

解決圖片上傳的問(wèn)題

回到剛開(kāi)始的語(yǔ)雀上傳的案例，我們可以通過(guò)將「圖片」icon 拿出來(lái)，解決用戶找不到、記住不的問(wèn)題。但是，明天表格找不到了？后天附件找不到了？我們不可能將所有的 icon 都拿出來(lái)，通過(guò)打平的方式解決。

今天，我們用另外一種思路「主動(dòng)式交互」，去解決記不住、找不到的問(wèn)題。

首基于主動(dòng)式交互的 9 個(gè)維度，我們可以依次排查每種互動(dòng)可能性。對(duì)于靠譜的方式，打 1；不靠譜的方式，打 0。最終在一輪排查之后，發(fā)現(xiàn)兩種可行的方式。

第一種，上下文（上一個(gè)動(dòng)作）。我們發(fā)現(xiàn)用戶在使用同類型產(chǎn)品時(shí)，經(jīng)常會(huì)下意識(shí)的將圖片拖到文檔里，這一動(dòng)作在桌面軟件中尤其盛行。雖然語(yǔ)雀是 Web 應(yīng)用，但為了讓用戶的上下文保持串聯(lián)，我們讓用戶可以直接將圖片拖進(jìn)去。直接拖進(jìn)去，而不需要費(fèi)力的尋找對(duì)應(yīng)的 icon。更多上下文案例，可以查看《「自然交互 1」前饋：讓功能找到用戶》

第二種，元數(shù)據(jù)。圖片是一種特殊格式數(shù)據(jù)：jpg、png，系統(tǒng)是很容易識(shí)別的。所以當(dāng)用戶粘貼了這種格式，在進(jìn)入到編輯頁(yè)面時(shí)候，適時(shí)的冒出一個(gè)提示，詢問(wèn)用戶是否粘貼。更多元數(shù)據(jù)案例，可以查看《拆解元數(shù)據(jù)，讓功能找到用戶》

這兩種方式，并不驚世駭俗，甚至比較常規(guī)。但是它們都跳出了 WIMP 界面的思維模式（讓用戶記、讓用戶找的模式），用全新的視覺(jué)，更自然的交互方式來(lái)彌補(bǔ) WIMP 的不足。而自然交互工具，就是提供一種思維框架，讓設(shè)計(jì)者快速得出水準(zhǔn)之上的設(shè)計(jì)方案。

我們認(rèn)為：傳統(tǒng)的 WIMP 界面在海量功能面前，變得越來(lái)越不自然了。需要更多的主動(dòng)式交互，讓系統(tǒng)功能找到用戶，節(jié)省用戶腦力和體力。這是我們的自然之道，這也是用戶的快樂(lè)之道。

現(xiàn)在，大家就可以訪問(wèn) next.ant.design，提前看到 4.0 的精彩內(nèi)容，同時(shí)，Ant Design 4.0 正式版將于今年 4 月份推出，和大家一起創(chuàng)造快樂(lè)工作。

分享前端好文，點(diǎn)亮?在看?