在前不久的上海外灘大會上，螞蟻集團高級體驗設計專家林外分享了Ant Design4.0背後的設計理念，咱們將內容整理出來與你們分享。微信
今天，我和你們分享的話題叫作，創造快樂工做。網絡
在我開始全部話題以前，我有問題想問你們，你們工做快樂嗎？app
我聽到了特別積極的反應，說很是的快樂。框架
可是呢，其實，工做並無咱們想象中那麼快樂，是全部的活動當中快樂指數最低的，跟躺着帶來的快樂差很少的，有些人躺着什麼也不幹，也比工做快樂。less
什麼緣由致使了工做的不快樂？大部分人認爲工做是爲老闆服務，因此很難受。另外一類人是由於反饋，不少工做的結果依靠於外界，依靠於老闆，因此你跟直屬上司的關係，決定了工做的體驗。機器學習
第三類是咱們認爲挑戰和技能的不匹配，致使了咱們工做的不快樂。當挑戰大於技能的時候，你就會焦慮，當技能大於挑戰的時候，你就會以爲無聊，你的工做就會在焦慮和無聊之間來回地徘徊，這是咱們理解的世界。編輯器
這個問題，在數字世界中會變得更加的明顯。70 年前，第一臺計算機出來以後能解決的問題很是的簡單，可是 70 幾年過去了，數字世界獲得了很是大的發展，我身邊任何一個小設備都遠遠大於 70 年的。而如今的咱們和 70 年前的前輩們沒有本質的區別，咱們有 7+2 的記憶法則，最多隻能記住9個數字，這就致使了在數字世界當中，咱們所面臨的挑戰遠遠大於人類所掌握的技能。ide
數字世界每每給咱們帶來了挑戰大於技能，因此你的體驗是負能的。若是你的工做更加有趣，挑戰可以匹配技能的時候，工做就會變得很好玩。工做就像打遊戲同樣，你經過了一關，技能獲得了提高，工做就會變得持續好玩，因此咱們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。工具
提及工做，你們多多少少會有快樂的體驗，可是和躺在沙灘上睡覺的體驗徹底不同。某一個下午或者晚上，須要處理一件稍微有難度的事情時，你須要集中全部的注意力，專一於你和你的事情，一擡頭兩個小時過去了，這是一種極度飽滿、極度被知足以後的快樂，它是一種成長的快樂，也是一種挑戰和技能匹配的快樂，也是全情投入的快樂，因此咱們所說的快樂工做指的是全情投入的工做。佈局
基於這樣的思考，咱們將每一個人都追求快樂工做，做爲Ant Design 的基本假定。
第一個緣由是，咱們認爲人或多或少都有這樣的快樂體驗；第二個很重要的緣由在於，對於大多數人而言，咱們醒着的絕大部分時間都要工做，若是你沒法在工做中體驗到快樂，人生將會在焦慮和無聊中度過。
基於這樣的思考，咱們找到了 Ant Design 的基本假定。就像光速不變基於相對論同樣，咱們想基於這樣的假定，表達 Ant Design 的體系。
這就是 Ant Design 的基本假定，每一個人都追求快樂工做，Ant Design 中每一個人是誰？咱們分紅兩種不一樣類型的用戶：第一類是用戶，第二類叫作設計者。所謂的設計者是創造這些應用性能的人，也就是在座的大多數。
咱們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基於此，咱們衍生出了 Ant Design 四個價值觀，設計首先是天然的，其次是肯定的，第三，設計是要有意義的，第四，設計是能讓用戶和產品不斷成長的，它是具備生長性的。
因此接下來的分享當中，由於時間的關係，我會重點分享其中的兩塊。第一塊叫作肯定性。分享一個小案例，我剛入行的時候，就碰到了社會的毒打，我想找到個人合做夥伴進行驗收發布的環節，由於設計師對細節有很是強的管控情繫，我用略微虔誠的態度說：「親，能稍微調整一下列寬嗎？」，他可能沒理解個人意思，說「我以爲挺好」，我說「都換行了，哪裏好？」，我覺得會引發他的注意，結果他回了我一句：「這不重要，你行你上。」
我一開始並不明白，爲何這個世界是這樣的？我認爲咱們都應該有一樣的認知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不只在產品上，PPT 裏也不換行。不一樣的人有不一樣的想法，不一樣的工種也有不一樣的想法，而咱們的工做是須要這樣一羣人一塊兒合做，就會致使一個問題，當不一樣的人有不一樣的、不肯定性的想法，會致使研發過程的不肯定性。
咱們總說，一我的能夠走得很快，一羣人才能走得很遠。咱們要想辦法怎麼讓這羣人能夠步調一致地走得快，又走得遠，咱們把這套體系、方法論叫作 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，謝謝你們！
- END -
本文分享自微信公衆號 - 支付寶技術（Ant-Techfin）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。