翹首以待!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 都有一顆心,有一張圖,打好一場仗。

543c1e00-a07e-422b-901c-290c0c7f5bee.png

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

  • 底層靜水深流,探索設計深度:確定「每個人都追求快樂工作」這一基本假定,作爲體系的原點。在此之上,衍生出 4 個設計價值觀:自然、確定性、意義感、生長性。

  • 頂部百花齊放,融合設計廣度:生長出更多設計資產和設計策略。其中,設計資產提高研發的效率和一致性,讓產品更好看;而設計策略讓產品更加好用,讓用戶目標更加專注,讓人機交互更加緊密。

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

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

840e4a7a-e357-4742-8efb-8fce025658cc.png

時下常常聽到一句話:「工作使我快樂」,然而,工作真的使人快樂嗎?對於大多數人來說,工作是一個複雜的話題,因爲我們對它又愛又恨。

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

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

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

  • 寧願發呆,我們也不願意工作:在所有活動中,工作的動機最低。對於很多人而言,寧願發呆也不願意工作。

寧願發呆也不願意工作,分明是「工作使我難過呀」!那麼,是什麼讓工作體驗如此糟糕呢?

工作設計的不合理,導致挑戰大於技能

雖然導致不快樂的原因很多,但是總結歸納之後,大致分爲三大類原因:

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

  • 不好的反饋,帶來負面感受:工作結果不被認可,經常被否定。此外,還有人際關係衝突,尤其是與直屬上司之間的衝突和矛盾。

  • 挑戰和技能不匹配:由於工作設計的不合理,導致挑戰和技能的不匹配。有些企業主只關注成本和效益,把工作設計的非常枯燥,員工處於重複性勞作,比如:生產線上的工人;而另外一些工作,又設計的過於複雜或者難度太大,導致員工疲於應付,沒有時間和精力陪伴自己的家人,比如:互聯網從業者。

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

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

不同的挑戰,會帶來不同的情感體驗

e5727462-e5ca-4672-817b-56dc92378b79.png

當工作中挑戰和技能不匹配時,會給我們帶來不同的心裏感受。

  • 當技能高於挑戰的時候,我們會感覺到無聊、鬆懈。

  • 當挑戰高於技能的時候,我們會感覺到擔心、焦慮。而數字世界中的我們,長時間面臨過大的挑戰,使得擔心和焦慮成爲了常態。

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

全情投入,快樂工作

7fb0cebe-53e7-4113-bcc5-c51cdb10a9ec.png

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

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

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

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

  • 第一、每個人,都曾經有快樂工作的經歷。只要讓挑戰持續匹配技能,就能創造連續的快樂工作。

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

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

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

2a6f531b-d25c-4b43-878e-56b4ad3bf800.png

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

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

  • 用戶的快—確定性 Certain:一致性的方案,降低學習成本。同樣的問題,同樣的解決方案,有利於用戶在系統內外快速學習和操作,降低學習熵。

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

  • 設計者的樂—生長性 Growing:設計的系統有用戶互動,有越來越多的用戶互動。並不是指用戶羣體的變大,系統功能的增長,而是指用戶羣體和系統功能的互動關係更加緊密,生長和演化出一個羣體。

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

限於文章篇幅,在這裏,我們給大家講講「自然」,瞭解詳盡內容,可以閱讀設計價值觀(https://next.ant.design/docs/spec/values-cn)。

自然

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

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

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

用戶:語雀可以插入圖片麼? 
語雀負責人:當然可以,最基礎的功能。用戶:可是我們找不到在哪裏? 

d053d286-69a6-4b8a-91ac-77f2fe331d6f.png

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

這不是語雀特有的問題,是我們這個時代產品的通病,因爲我們都採用 WIMP 界面的組織方式。

WIMP 界面:用戶找功能

3737a5a2-e1e2-4d59-8099-50cd49dcd2b5.png

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

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

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

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

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

WIMP 界面不自然的兩大原因

7db44437-6910-4c33-990f-2642326ddfcf.png

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

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

034d88bb-da52-4bde-9fc3-4b42c2522332.png

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

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

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

98190c52-84bd-4a78-9c0c-c7646c1cc439.png

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

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

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

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

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

  • 相逢不相識:系統主動式交互,由於不是用戶有意識觸發的。所以用戶能看到變化,但不一定明白背後的邏輯。

  • 可用不可見:系統主動式交互,用戶壓根看不見,可能從來沒有意識到過。

52ae4ea2-19cb-4504-8d40-15dab31a254f.png

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

bbcfcc91-31b0-4f58-bdd8-0dbd2214573e.png

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

當分析 500+ 個自然交互的設計細節之後,我們發現殊途同歸,所有主動式可以分爲 9 大類,叫做自然交互工具。通過使用它,可以快速尋找自然交互的方法和脈絡。讓你的用戶更省力、更快樂。

解決圖片上傳的問題

782e5081-8437-4a01-8d0d-ed8523f8e62d.png

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

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

ee8e785c-4361-4bf6-b6f6-51a3e2f944db.png

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

1a697c47-f5ff-45fa-ac06-7b0e6ad4d238.png

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

9718a556-a78a-4c0f-91e1-438f7264dfc3.png

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

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

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章