在前不久的上海外灘大會上，螞蟻集團高級體驗設計專家林外分享了Ant Design4.0背後的設計理念，我們將內容整理出來與大家分享。
今天，我和大家分享的話題叫做，創造快樂工作。
Ant Design的基本假定
在我開始所有話題之前，我有問題想問大家，大家工作快樂嗎？
我聽到了特別積極的反應，說非常的快樂。
但是呢，其實，工作並沒有我們想象中那麼快樂，是所有的活動當中快樂指數最低的，跟躺著帶來的快樂差不多的，有些人躺著什麼也不幹，也比工作快樂。
什麼原因導致了工作的不快樂？大部分人認為工作是為老闆服務，所以很難受。另一類人是因為反饋，很多工作的結果依靠於外界，依靠於老闆，所以你跟直屬上司的關係，決定了工作的體驗。
第三類是我們認為挑戰和技能的不匹配，導致了我們工作的不快樂。當挑戰大於技能的時候，你就會焦慮，當技能大於挑戰的時候，你就會覺得無聊，你的工作就會在焦慮和無聊之間來回地徘徊，這是我們理解的世界。
這個問題，在數字世界中會變得更加的明顯。70 年前，第一臺計算機出來之後能解決的問題非常的簡單，但是 70 幾年過去了，數字世界得到了非常大的發展，我身邊任何一個小設備都遠遠大於 70 年的。而現在的我們和 70 年前的前輩們沒有本質的區別，我們有 7+2 的記憶法則，最多隻能記住9個數字，這就導致了在數字世界當中，我們所面臨的挑戰遠遠大於人類所掌握的技能。
數字世界往往給我們帶來了挑戰大於技能，所以你的體驗是負能的。如果你的工作更加有趣，挑戰能夠匹配技能的時候，工作就會變得很好玩。工作就像打遊戲一樣，你通過了一關，技能得到了提升，工作就會變得持續好玩，所以我們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。
說起工作，大家多多少少會有快樂的體驗，但是和躺在沙灘上睡覺的體驗完全不一樣。某一個下午或者晚上，需要處理一件稍微有難度的事情時，你需要集中所有的注意力，專注於你和你的事情，一抬頭兩個小時過去了，這是一種極度飽滿、極度被滿足之後的快樂，它是一種成長的快樂，也是一種挑戰和技能匹配的快樂，也是全情投入的快樂，所以我們所說的快樂工作指的是全情投入的工作。
基於這樣的思考，我們將每個人都追求快樂工作，作為Ant Design 的基本假定。
第一個原因是，我們認為人或多或少都有這樣的快樂體驗；第二個很重要的原因在於，對於大多數人而言，我們醒著的絕大部分時間都要工作，如果你無法在工作中體驗到快樂，人生將會在焦慮和無聊中度過。
基於這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基於相對論一樣，我們想基於這樣的假定，表達 Ant Design 的體系。
這就是 Ant Design 的基本假定，每個人都追求快樂工作，Ant Design 中每個人是誰？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設計者。所謂的設計者是創造這些應用性能的人，也就是在座的大多數。
Ant Design的設計價值觀
我們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基於此，我們衍生出了 Ant Design 四個價值觀，設計首先是自然的，其次是確定的，第三，設計是要有意義的，第四，設計是能讓用戶和產品不斷成長的，它是具有生長性的。
所以接下來的分享當中，因為時間的關係，我會重點分享其中的兩塊。第一塊叫做確定性。分享一個小案例，我剛入行的時候，就碰到了社會的毒打，我想找到我的合作伙伴進行驗收發布的環節，因為設計師對細節有非常強的管控情繫，我用略微虔誠的態度說：“親，能稍微調整一下列寬嗎？”，他可能沒理解我的意思，說“我覺得挺好”，我說“都換行了，哪裡好？”，我以為會引起他的注意，結果他回了我一句：“這不重要，你行你上。”
我一開始並不明白，為什麼這個世界是這樣的？我認為我們都應該有同樣的認知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不僅在產品上，PPT 裡也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會導致一個問題，當不同的人有不同的、不確定性的想法，會導致研發過程的不確定性。
ETCG 2.0：Ant Design設計的方法論
我們總說，一個人可以走得很快，一群人才能走得很遠。我們要想辦法怎麼讓這群人可以步調一致地走得快，又走得遠，我們把這套體系、方法論叫做 ETCG 2.0。
這是原有 ETCG 的基礎上，進行升級的過程。我們希望面對同樣的問題，各個角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹的種子，你一定在秋天可以得到一顆蘋果樹，而不是一顆梨樹。
ETCG 2.0幾個字母分別代表不同的意義，第一個是功能範例，第二個是模板，模板是我們基於業務的抽象，目的是幫助新手或者幫助不同設計師保持設計的一致性，指引頁面如何設計，比如這是典型的列表頁，由高級搜索和表格組成。今年在模板的基礎之上又做了一層更大的精進，我們做了抽象和規範衍生出了模板組件。一行模板組件，當無法滿足你的需求時，只要一行代碼，就可以得到一個完整的序列。
除了列表頁，還有表格頁，還有圖表、表單，以及佈局，構成了我們對系統的抽象，叫做「四表一局」，它大概覆蓋了中後臺系統、或者企業級產品 80% 以上的業務訴求，同時本著非常開源、開放和普惠的心理，整個「四表一局」正式對外開放，大家可以訪問 Ant Design 的倉庫下載和使用。
ETCG 中的 C 是組件，是 Ant Design 最早和大家見面的內容，五年的時間裡面，我們有了很多數量上和質量上的精進，同時創造了非常多的社會價值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻者參與到 Ant Design 的建設中，同時 TOP 50 當中，60% 來源於社區，他們為 2 萬家企業提升了 3-5 倍的研發效能，同時我們正式於去年年底成為全球開源第一的組件庫。五年前，螞蟻集團發起了 AntDesign 這個項目，但是它今天所取得的成就是來源於社區和我們的共同努力，這裡的榮譽和掌聲應該獻給所有為Ant Design 貢獻過代碼的同學，謝謝你們的支持。
ETCG的 G 有兩個。第一個 G，是對組件樣式的抽象，我們用了變量化的方式進行了約束和管控，它可以做什麼？特別簡單，你的老闆今天不喜歡藍色，想要橙色，你只要一行編碼，就讓組件庫發生了煥然一新的變化。ETCG 的第二個 G，是我們今年重點建設的部分，也是全新的一部分，叫做 Guides，指的是人和機如何進行互動交互的過程。
比如說這裡是應該放一個數值輸入框，還是放一個輸入框？以及如何進行放置？我們將瑣碎的交互規則進行抽象和封裝，讓機器學習這些規則，讓機器幫助我們進行這些規則。你只要導入原數據，幾乎不用做任何的配置和更改，可以得到可進入生產環境、可研發的表單頁面，設計得可能比初級的設計師產生的效果更好，你想要的一切都應該放在合適的地方。
這就是我們對 Ant Design 確定性的理解，不需要設計師參與的設計產品，極致提升了設計和研發的體驗，當然商業化還需要很長的時間。當下如何解決現在碰到的問題？仰望星空，也要腳踏實地。作為設計師，我在想怎麼解決五年前的問題，我很想說我行我上。
我們怎麼使用？使用 Kitchen 進行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進行服務的搭建，搭建可進入生產環境的服務產品，讓設計師變成設計工程師的角色。
如何讓設計變得更自然？
在今天分享的最後一趴，我和大家聊聊這個場次經常聽到的詞，那就是“自然”，學術界和產業界對自然有非常多的理解。我們把它定義成了形容詞，我們認為這個行為很自然，大家經常在各個場合聽到的一句話，設計是關乎如何運作的問題，Ant Design 在這個基礎上，要聊的是 how it worksnaturally。
同樣分享一個小案例，在我們有一天的用戶群裡，我們的用戶反饋了一個非常有意思的問題。他說語雀可以插入圖片嗎？語雀的負責人當時在現場，就回到：“當然可以，最基本的能力”。我們的用戶問出第二個特別具有代表性的問題：“可是我們找不到在哪裡”。語雀是阿里內外都很喜歡的一款文檔類文件。編輯頁的第一頁，我們的工程師特意做成了綠色的，你點進第一個的第一行就是圖片上傳的功能。但是大家有沒有想過？我們僅僅隱藏了一級，就讓用戶記不起來有這個功能，我們僅僅隱藏了一級，就讓用戶找不到這個功能。這不是語雀產品特有的特徵和問題，而是這個時代大部分問題具有的特徵和問題，因為大部分的產品處於 1973 年的基礎上。
WIMP 是什麼？Window、lcon、Meru、PointDevice，當我們的功能只有20幾個的時候，這是非常好的設計，總比代碼行好太多，今天我們說了數字世界當中，我們的設備、計算機、網絡成千上億倍的發展，用戶怎麼記得住 8000 個功能？用戶怎麼定位到8000個功能在哪裡？所以 WIMP 界面碰到了人機交互的瓶頸階段。
為什麼碰到瓶頸會越來越不自然？第一個角度從人機互動的環節，當用戶記不住的時候，就沒辦法從哪個入口出發。所以 WIMP 界面第一個不自然的原因在於，所有動作的發起都依託於用戶。用戶一旦記不住，一旦找不到，人機交互就沒辦法走通，這是 WIMP 界面的第一個問題。
第二個問題，要回到人身上。人的行為分為有意識、無意識的兩層，能量消耗比較大的就是有意識層面。WIMP 在於所有的行為依託於用戶有意識地觸發，這本身就是一個非常消耗腦力的一件事情。在我們面對這麼多功能的環境下，這兩個問題導致了我們在數字世界當中碰到的巨大問題。因為我們知道系統的功能每天在增加，數字世界不需要遵循物理製造的極限，它可以進入無限備功能的疊加，所以在這個世界當中碰到的挑戰遠遠大於我們所掌握的技能，所以 WIMP 界面碰到了誕生以來最大的問題。
我們如何解決這個問題呢？首先一定要清晰地認識到，人是有意識和無意識兩種思維的結構和意識形態的。同時系統也可以分為兩部分，一部分是主動功能，第二部分是被動功能，我們要嘗試的守正出奇。守正延續了 WIMP 界面常規的功能，讓人有意識尋找功能，觸發系統的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動式的交互，讓功能找到用戶。
接下來分享幾個案例，在我們的常規設備當中，都已經有這樣一些主動式的服務來尋找到你。
第一類是相逢不相識，名字很好聽，解釋也特別好玩。在語雀當中有一個小功能是我特別喜歡的功能，當我編輯一篇文檔，編輯了大於 30%、50% 的文本量，這個鉤會自然地幫我鉤上，因為它有一個基礎的設定：如果這篇文章發生了比較大規模的修改，你的訂閱者很自然的想知道你這篇文章做了什麼。第二個相逢不相識的地方，大家可以聚焦一下支付寶。有興趣可以打開支付寶首頁，在你的收款碼應用裡，解決什麼樣的問題？解決面對面交易的問題，所以當你輸入一個金額完成以後，自然旋轉屏幕的時候，這個屏幕會進行自然的翻轉，這樣對面掃你錢的人，可以看到信息的正面，這非常自然。
第二個主動式交互的類型，叫做可用不可見。和相逢不相識的區別在哪裡？就是默默地為你提供了服務，但你可能永遠不會知道它的存在。在蘋果第一代出來的時候，做了一個非常牛逼的設計，因為大家都知道虛擬鍵盤，沒有物理觸感，所以誤觸率很高。虛擬鍵盤怎麼解決？蘋果基於非常有趣的思考，在蘋果的全鍵盤裡面，只要輸入了 Desig 的時候，通過語義詞的分析，N 點擊的範圍遠遠大於旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動選擇的服務，只是我們從來不知道有這樣一件事情。所以我們將這些自然的人機互動方式進行整理，包括融入到更多的案例以後，發現人機主動式交互有九種不同類型的分類，除了輸入法，更多是通過用戶使用情景的上下文進行優化的過程。
我們有了這張人機自然的交互，怎麼解決語雀的問題？我和在座的語雀設計師有過這樣的討論，用戶說圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨放出來。這可能會解決剛才的問題，但是如果明天財務說表格找不到了，我是不是還要把表格拿出來？有人說附件找不到了，還要把附件拿出來嗎？我們需要從主動式交互的角度暢想怎麼優化人機互動的過程。
回到這張自然交互的工具，提供了一種簡易的思維框架。我們去判斷哪些是可以去做的，第一件事特別簡單，我們判斷用戶使用的上下文是什麼，我們發現很多產品的通用習慣，直接把圖片拖進去，做成小的服務，用戶根本不需要知道功能的存在就可以使用。
第二個從原數據角度來理解，圖片是一種特殊結構的數據，它是 jpg、png，用戶在外部複製了之後，進入編輯頁可以主動推送他一個服務，詢問他是否要粘貼，本質上並不複雜，但是它確實在 WIMP 界面傳統意義的基礎上，又提供了初級的部分，又額外做了一部分。
我們所定義的自然裡面，是需要我們做更多的主動式的服務，讓我們這個海量的功能能夠在合適的場景下，去找到用戶，從而節約人的腦力和體力。因為對於人來說，我們和 70 年前的爺爺輩們沒有本質的區別，我們需要被善待。有感興趣的同學可以看支付寶的訪問碼，也期待和大家做更多的互動。
分享的最後一趴，我簡單總結一下今天做了哪些事情和分享了哪些內容。第一趴，我們提出了 Ant Design 的基本假定，我們認為每個人都缺少快樂工作，這種快樂工作是和我們平時閒散完全不同的問題。同時大多數人都不可避免的來工作，我們怎麼扭轉工作對我們的體驗，這是人生中非常大的問題。第二趴，我們衍生出新的價值觀，這四個價值觀中，因為時間篇幅的原因，重點和大家講了確定性和自然的價值觀，這是歷史最悠久，也是最有代表性的兩塊。基於這兩個價值觀，我們衍生出了不同的組建庫也好、可視化資產也好，相關的設計資產以及設計策略，以及配套的設計工具，當然藍色部分是我們今天介紹的重點。最後這張圖特別適合拍照，這是我們系統提供給大家的主動式服務。
我是設計師林外，來自於Ant Design，謝謝大家！