2月28日,廣受開發(fā)者歡迎的前端開源項(xiàng)目Ant Design發(fā)布4.0正式版本。這是兩年多以來的首次發(fā)布的里程碑版本。新版本中進(jìn)行了多項(xiàng)改進(jìn),包括:

　　? 設(shè)計(jì)規(guī)范升級(jí)。增加了暗色主題和無邊框組件。

　　? 兼容性調(diào)整。最低支持IE 11,依賴的React最低版本升級(jí)到16.9。

　　? 更小的尺寸。調(diào)整了圖標(biāo)使用API以支持tree shaking,并對(duì)相關(guān)依賴進(jìn)行精簡。

　　? 組件重做。包括Table、Form、DatePicker等組件進(jìn)行重做。

　　大家可以訪問 ant.design 了解更多信息,或在GitHub上關(guān)注Ant Design項(xiàng)目。

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

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

　　Ant Design 4.0 的由來

　　在一次內(nèi)部會(huì)議中,我們談及 Ant Design 的歷史的問題:

　　林外說:Ant Design 已經(jīng)做 4 年多了

　　玉伯立馬糾正:Ant Design 才做了 4 年,剛剛起步,我們起碼要做 30 年

　　Ant Design 已經(jīng)走過了四個(gè)年頭。此時(shí)的 Ant Design ,已經(jīng)遠(yuǎn)不止是一個(gè) UI 組件庫。我們誕生可視化資產(chǎn)(AntV)、插畫資產(chǎn)(海兔),以及體驗(yàn)設(shè)計(jì)、增長設(shè)計(jì)、品牌設(shè)計(jì)等各種策略;同時(shí),在可預(yù)見的未來,我們也將會(huì)涉及工業(yè)設(shè)計(jì)、運(yùn)營設(shè)計(jì)等工作范疇。隨著業(yè)務(wù)復(fù)雜性和人員復(fù)合性不斷增加,如何去詮釋和融合新生力量,去構(gòu)建一個(gè)緊密聯(liá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à)值取向,泛化原則和模式來解決一再出現(xiàn)的問題,并通過工具化和團(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è)人都追求快樂工作」這一基本假定,作為體系的原點(diǎn)。在此之上,衍生出 4 個(gè)設(shè)計(jì)價(jià)值觀:自然、確定性、意義感、生長性。頂部百花齊放,融合設(shè)計(jì)廣度:生長出更多設(shè)計(jì)資產(chǎn)和設(shè)計(jì)策略。其中,設(shè)計(jì)資產(chǎn)提高研發(fā)的效率和一致性,讓產(chǎn)品更好看;而設(shè)計(jì)策略讓產(chǎn)品更加好用,讓用戶目標(biāo)更加專注,讓人機(jī)交互更加緊密。

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

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

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

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

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

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

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

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

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

　　●雖然導(dǎo)致不快樂的原因很多,但是總結(jié)歸納之后,大致分為三大類原因:

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

　　●不好的反饋,帶來負(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ì)的過于復(fù)雜或者難度太大,導(dǎo)致員工疲于應(yīng)付,沒有時(shí)間和精力陪伴自己的家人,比如:互聯(lián)網(wǎng)從業(yè)者。

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

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

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

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

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

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

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

　　全情投入,快樂工作

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

　　這才是工作的快樂,是全情投入的快樂,也是成長的快樂。

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

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

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

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

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

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

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

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

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

　　●用戶的樂—意義感 Meaningful:用戶通過和系統(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ì)過程也有意義感。Ant Design 對(duì) JCD 方向的探索,就是在工作場(chǎng)景中尋找目標(biāo)的意義和過程的意義。有趣的 JCD 是 Job Centered Design,也可以是 Joy Centered Design

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

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

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

　　自然

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

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

　　有一天晚上,在我們語雀(十萬人阿里人喜歡的文檔協(xié)同軟件)的用戶交流群,發(fā)生了一段很有代表性的對(duì)話

　　用戶:語雀可以插入圖片么?

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

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

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

　　WIMP 界面:用戶找功能

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

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

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

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

　　所以,在功能爆炸的今天,WIMP 界面變得越來越不自然。

　　WIMP 界面不自然的兩大原因

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

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

　　第二、過度依賴意識(shí)觸發(fā),容易費(fèi)腦力。我們回到人身上:根據(jù)消耗的能量不同,人的意識(shí)行為分為兩層:意識(shí)和無意識(shí)。意識(shí)好比耗能,消耗更多的卡路里和氧氣。而 WIMP 界面交互中,系統(tǒng)功能是被動(dòng)的,它需要人有意識(shí)的觸發(fā)動(dòng)作,激活所有的功能。

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

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

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

　　●守正:保留 WIMP 界面的常見模式,讓用戶有意識(shí)觸發(fā)被動(dòng)功能。

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

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

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

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

　　●可用不可見:系統(tǒng)主動(dòng)式交互,用戶壓根看不見,可能從來沒有意識(shí)到過。

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

　　舉一個(gè)可用不可見的例子。iOS 的鍵盤很特別,它會(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 大類,叫做自然交互工具。通過使用它,可以快速尋找自然交互的方法和脈絡(luò)。讓你的用戶更省力、更快樂。

　　解決圖片上傳的問題

　　回到剛開始的語雀上傳的案例,我們可以通過將「圖片」icon 拿出來,解決用戶找不到、記住不的問題。但是,明天表格找不到了?后天附件找不到了?我們不可能將所有的 icon 都拿出來,通過打平的方式解決。

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

　　首基于主動(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)作在桌面軟件中尤其盛行。雖然語雀是 Web 應(yīng)用,但為了讓用戶的上下文保持串聯(lián),我們讓用戶可以直接將圖片拖進(jìn)去。直接拖進(jìn)去,而不需要費(fèi)力的尋找對(duì)應(yīng)的 icon。

　　第二種,元數(shù)據(jù)。圖片是一種特殊格式數(shù)據(jù):jpg、png,系統(tǒng)是很容易識(shí)別的。所以當(dāng)用戶粘貼了這種格式,在進(jìn)入到編輯頁面時(shí)候,適時(shí)的冒出一個(gè)提示,詢問用戶是否粘貼。

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

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

特別提醒：本網(wǎng)內(nèi)容轉(zhuǎn)載自其他媒體，目的在于傳遞更多信息，并不代表本網(wǎng)贊同其觀點(diǎn)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。本站不承擔(dān)此類作品侵權(quán)行為的直接責(zé)任及連帶責(zé)任。如若本網(wǎng)有任何內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系我們，本站將會(huì)在24小時(shí)內(nèi)處理完畢。