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

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

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

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

　　? 組件重做。包括Table、Form、DatePicker等組件進行重做。

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

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

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

　　Ant Design 4.0 的由來

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

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

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

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

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

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

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

　　底層靜水深流,探索設(shè)計深度:確定「每個人都追求快樂工作」這一基本假定,作為體系的原點。在此之上,衍生出 4 個設(shè)計價值觀:自然、確定性、意義感、生長性。頂部百花齊放,融合設(shè)計廣度:生長出更多設(shè)計資產(chǎn)和設(shè)計策略。其中,設(shè)計資產(chǎn)提高研發(fā)的效率和一致性,讓產(chǎn)品更好看;而設(shè)計策略讓產(chǎn)品更加好用,讓用戶目標更加專注,讓人機交互更加緊密。

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

　　基本假定:每個人都追求快樂工作

　　時下常常聽到一句話:「工作使我快樂」,然而,工作真的使人快樂嗎?對于大多數(shù)人來說,工作是一個復(fù)雜的話題,因為我們對它又愛又恨。

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

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

　　●工作大部分時間,我們不快樂:我們在從事愛好、看電影、吃東西等活動,都會頻繁感受到快樂,然而在從事工作/學習以及家務(wù)的時候,并不快樂。

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

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

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

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

　　●目標不一致:大部分工作者認為,工作是幫助老板完成目標,而不是自己的人生目標。

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

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

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

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

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

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

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

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

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

　　全情投入,快樂工作

　　工作中的快樂,和我們在沙灘上曬太陽的那種快樂,很不一樣。大家看一下這張圖,回想一下自己的工作,一定會有這樣的體會。當你面臨一件非常有挑戰(zhàn)的事情,你需要集中所有注意力,保持專注,做一件事。一抬頭,2 個小時過去,居然下班了。過程中,你不會有任何感受,而完成后,你會有很強的成就感和滿足感。

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

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

　　我們認為「每個人都追求快樂工作」。因為這兩個主要原因:

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

　　●第二、工作不可避免。因為我們一半以上時間都在工作。如果我們想要一個快樂的人生,那么快樂工作,對我們每個人都意義重大。

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

　　基本假定衍生 4 個設(shè)計價值觀

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

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

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

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

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

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

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

　　自然

　　視覺是人獲取信息的最主要途經(jīng),也是人類感知的最主要通道,所以在 Ant Design 3.0 的時候,我們重點討論視覺的自然之美。這一次,我們在前饋層面,討論行為的自然之美。

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

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

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

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

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

　　這不是語雀特有的問題,是我們這個時代產(chǎn)品的通病,因為我們都采用 WIMP 界面的組織方式。

　　WIMP 界面:用戶找功能

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

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

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

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

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

　　WIMP 界面不自然的兩大原因

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

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

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

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

　　增加主動式交互,讓功能找到用戶

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

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

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

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

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

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

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

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

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

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

　　解決圖片上傳的問題

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

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

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

　　第一種,上下文(上一個動作)。我們發(fā)現(xiàn)用戶在使用同類型產(chǎn)品時,經(jīng)常會下意識的將圖片拖到文檔里,這一動作在桌面軟件中尤其盛行。雖然語雀是 Web 應(yīng)用,但為了讓用戶的上下文保持串聯(lián),我們讓用戶可以直接將圖片拖進去。直接拖進去,而不需要費力的尋找對應(yīng)的 icon。

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

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

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

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