一本一道AV无码中文字幕,亚洲熟妇女综合网,日韩国产亚洲一区二区

Ant Design 4.0：創(chuàng)造快樂工作

2021-1-8 資深UI設(shè)計者

第一趴：Ant Design 的基本假定

在我開始所有話題之前，我有問題想問大家，大家工作快樂嗎？

我聽到了特別積極的反應(yīng)，說非常的快樂。希望大家說快樂，不是因為今天是周五。

但是呢，其實，工作并沒有我們想象中那么快樂，是所有的活動當(dāng)中快樂指數(shù)的，跟躺著帶來的快樂差不多的，有些人躺著什么也不干，也比工作快樂。

什么原因?qū)е铝斯ぷ鞯牟豢鞓罚?

第一類，關(guān)乎目標(biāo)。大部分人認(rèn)為工作是為老板服務(wù)，所以很難受。另一類，是因為反饋，很多工作的結(jié)果依靠于外界，依靠于老板，所以你跟直屬上司的關(guān)系，決定了工作的體驗。第三類，是我們認(rèn)為挑戰(zhàn)和技能的不匹配，導(dǎo)致了我們工作的不快樂。當(dāng)挑戰(zhàn)大于技能的時候，你就會焦慮，當(dāng)技能大于挑戰(zhàn)的時候，你就會覺得無聊，你的工作就會在焦慮和無聊之間來回地徘徊，這是我們理解的世界。

這個問題，在數(shù)字世界中會變得更加的明顯。70 年前，第一臺計算機(jī)出來之后能解決的問題非常的簡單，但是 70 幾年過去了，數(shù)字世界得到了非常大的發(fā)展，我身邊任何一個小設(shè)備都遠(yuǎn)遠(yuǎn)大于 70 年的。而現(xiàn)在的我們和 70 年前的前輩們沒有本質(zhì)的區(qū)別，我們有 7+2 的記憶法則，最多只能記住 9 個數(shù)字，這就導(dǎo)致了在數(shù)字世界當(dāng)中，我們所面臨的挑戰(zhàn)遠(yuǎn)遠(yuǎn)大于人類所掌握的技能。

數(shù)字世界往往給我們帶來了挑戰(zhàn)大于技能，所以你的體驗是負(fù)能的。如果你的工作更加有趣，挑戰(zhàn)能夠匹配技能的時候，工作就會變得很好玩。工作就像打游戲一樣，你通過了一關(guān)，技能得到了提升，工作就會變得持續(xù)好玩，所以我們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。

說起工作，大家多多少少會有快樂的體驗，但是和躺在沙灘上睡覺的體驗完全不一樣。某一個下午或者晚上，需要處理一件稍微有難度的事情時，你需要集中所有的注意力，專注于你和你的事情，一抬頭兩個小時過去了，這是一種極度飽滿、極度被滿足之后的快樂，它是一種成長的快樂，也是一種挑戰(zhàn)和技能匹配的快樂，也是全情投入的快樂，所以我們所說的快樂工作指的是全情投入的工作。

基于這樣的思考，我們將每個人都追求快樂工作，作為Ant Design 的基本假定。

第一個原因是，我們認(rèn)為人或多或少都有這樣的快樂體驗；第二個很重要的原因在于，對于大多數(shù)人而言，我們醒著的絕大部分時間都要工作，如果你無法在工作中體驗到快樂，人生將會在焦慮和無聊中度過。

基于這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基于相對論一樣，我們想基于這樣的假定，表達(dá) Ant Design 的體系。

Ant Design的設(shè)計價值觀

這就是 Ant Design 的基本假定，每個人都追求快樂工作，Ant Design 中每個人是誰？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設(shè)計者。所謂的設(shè)計者是創(chuàng)造這些應(yīng)用性能的人，也就是在座的大多數(shù)。

我們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基于此，我們衍生出了 Ant Design 四個價值觀，設(shè)計首先是自然的，其次是確定的，第三，設(shè)計是要有意義的，第四，設(shè)計是能讓用戶和產(chǎn)品不斷成長的，它是具有生長性的。

第二趴：確定性

所以接下來的分享當(dāng)中，因為時間的關(guān)系，我會重點分享其中的兩塊。

第一塊叫做確定性。分享一個小案例，我剛?cè)胄械臅r候，就碰到了社會的毒打，我想找到我的合作伙伴進(jìn)行驗收發(fā)布的環(huán)節(jié)，因為設(shè)計師對細(xì)節(jié)有非常強(qiáng)的管控情系，我用略微虔誠的態(tài)度說：“親，能稍微調(diào)整一下列寬嗎？”，他可能沒理解我的意思，說“我覺得挺好”，我說“都換行了，哪里好？”，我以為會引起他的注意，結(jié)果他回了我一句：“這不重要，你行你上?！?

我一開始并不明白，為什么這個世界是這樣的？我認(rèn)為我們都應(yīng)該有同樣的認(rèn)知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不僅在產(chǎn)品上，PPT 里也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會導(dǎo)致一個問題，當(dāng)不同的人有不同的、不確定性的想法，會導(dǎo)致研發(fā)過程的不確定性。

ETCG 2.0：Ant Design設(shè)計的方法論

我們總說，一個人可以走得很快，一群人才能走得很遠(yuǎn)。我們要想辦法怎么讓這群人可以步調(diào)一致地走得快，又走得遠(yuǎn)，我們把這套體系、方法論叫做 ETCG 2.0。

這是原有 ETCG 的基礎(chǔ)上，進(jìn)行升級的過程。我們希望面對同樣的問題，各個角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹的種子，你一定在秋天可以得到一顆蘋果樹，而不是一顆梨樹。

ETCG 2.0幾個字母分別代表不同的意義，第一個是功能范例，第二個是模板，模板是我們基于業(yè)務(wù)的抽象，目的是幫助新手或者幫助不同設(shè)計師保持設(shè)計的一致性，指引頁面如何設(shè)計，比如這是典型的列表頁，由高級搜索和表格組成。今年在模板的基礎(chǔ)之上又做了一層更大的精進(jìn)，我們做了抽象和規(guī)范衍生出了模板組件。一行模板組件，當(dāng)無法滿足你的需求時，只要一行代碼，就可以得到一個完整的序列。

除了列表頁，還有表格頁，還有圖表、表單，以及布局，構(gòu)成了我們對系統(tǒng)的抽象，叫做「四表一局」，它大概覆蓋了中后臺系統(tǒng)、或者企業(yè)級產(chǎn)品 80% 以上的業(yè)務(wù)訴求，同時本著非常開源、開放和普惠的心理，整個「四表一局」正式對外開放，大家可以訪問 Ant Design 的倉庫下載和使用。

ETCG 中的 C 是組件，是 Ant Design 最早和大家見面的內(nèi)容，五年的時間里面，我們有了很多數(shù)量上和質(zhì)量上的精進(jìn)，同時創(chuàng)造了非常多的社會價值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻(xiàn)者參與到 Ant Design 的建設(shè)中，同時 TOP 50 當(dāng)中，60% 來源于社區(qū)，他們?yōu)?2 萬家企業(yè)提升了 3-5 倍的研發(fā)效能，同時我們正式于去年年底成為全球開源第一的組件庫。五年前，螞蟻集團(tuán)發(fā)起了 Ant Design 這個項目，但是它今天所取得的成就是來源于社區(qū)和我們的共同努力，這里的榮譽(yù)和掌聲應(yīng)該獻(xiàn)給所有為Ant Design 貢獻(xiàn)過代碼的同學(xué)，謝謝你們的支持。

ETCG 的 G 有兩個。第一個 G，是對組件樣式的抽象，我們用了變量化的方式進(jìn)行了約束和管控，它可以做什么？特別簡單，你的老板今天不喜歡藍(lán)色，想要橙色，你只要一行編碼，就讓組件庫發(fā)生了煥然一新的變化。

ETCG 的第二個 G，是我們今年重點建設(shè)的部分，也是全新的一部分，叫做 Guides，指的是人和機(jī)如何進(jìn)行互動交互的過程。

比如說這里是應(yīng)該放一個數(shù)值輸入框，還是放一個輸入框？以及如何進(jìn)行放置？我們將瑣碎的交互規(guī)則進(jìn)行抽象和封裝，讓機(jī)器學(xué)習(xí)這些規(guī)則，讓機(jī)器幫助我們進(jìn)行這些規(guī)則。你只要導(dǎo)入原數(shù)據(jù)，幾乎不用做任何的配置和更改，可以得到可進(jìn)入生產(chǎn)環(huán)境、可研發(fā)的表單頁面，設(shè)計得可能比初級的設(shè)計師產(chǎn)生的效果更好，你想要的一切都應(yīng)該放在合適的地方。

這就是我們對 Ant Design 確定性的理解，不需要設(shè)計師參與的設(shè)計產(chǎn)品，提升了設(shè)計和研發(fā)的體驗，當(dāng)然商業(yè)化還需要很長的時間。當(dāng)下如何解決現(xiàn)在碰到的問題？仰望星空，也要腳踏實地。作為設(shè)計師，我在想怎么解決五年前的問題，我很想說我行我上。

我們怎么使用？使用 Kitchen 進(jìn)行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進(jìn)行服務(wù)的搭建，搭建可進(jìn)入生產(chǎn)環(huán)境的服務(wù)產(chǎn)品，讓設(shè)計師變成設(shè)計工程師的角色。

第三趴：如何讓設(shè)計變得更自然？

在今天分享的最后一趴，我和大家聊聊這個場次經(jīng)常聽到的詞，那就是“自然”，學(xué)術(shù)界和產(chǎn)業(yè)界對自然有非常多的理解。我們把它定義成了形容詞，我們認(rèn)為這個行為很自然，大家經(jīng)常在各個場合聽到的一句話，設(shè)計是關(guān)乎如何運(yùn)作的問題，Ant Design 在這個基礎(chǔ)上，要聊的是 how it worksnaturally。

同樣分享一個小案例，在我們有一天的用戶群里，我們的用戶反饋了一個非常有意思的問題。他說語雀可以插入圖片嗎？語雀的負(fù)責(zé)人當(dāng)時在現(xiàn)場，就回到：“當(dāng)然可以，最基本的能力”。我們的用戶問出第二個特別具有代表性的問題：“可是我們找不到在哪里”。語雀是阿里內(nèi)外都很喜歡的一款文檔類文件。編輯頁的第一頁，我們的工程師特意做成了綠色的，你點進(jìn)第一個的第一行就是圖片上傳的功能。但是大家有沒有想過？我們僅僅隱藏了一級，就讓用戶記不起來有這個功能，我們僅僅隱藏了一級，就讓用戶找不到這個功能。這不是語雀產(chǎn)品特有的特征和問題，而是這個時代大部分問題具有的特征和問題，因為大部分的產(chǎn)品處于 1973 年的基礎(chǔ)上。

WIMP 是什么？Window、lcon、Menu、PointDevice，當(dāng)我們的功能只有 20 幾個的時候，這是非常好的設(shè)計，總比代碼行好太多，今天我們說了數(shù)字世界當(dāng)中，我們的設(shè)備、計算機(jī)、網(wǎng)絡(luò)成千上億倍的發(fā)展，用戶怎么記得住 8000 個功能？用戶怎么定位到 8000 個功能在哪里？所以 WIMP 界面碰到了人機(jī)交互的瓶頸階段。

為什么碰到瓶頸會越來越不自然？第一個角度從人機(jī)互動的環(huán)節(jié)，當(dāng)用戶記不住的時候，就沒辦法從哪個入口出發(fā)。所以 WIMP 界面第一個不自然的原因在于，所有動作的發(fā)起都依托于用戶。用戶一旦記不住，一旦找不到，人機(jī)交互就沒辦法走通，這是 WIMP 界面的第一個問題。

第二個問題，要回到人身上。人的行為分為有意識、無意識的兩層，能量消耗比較大的就是有意識層面。WIMP 在于所有的行為依托于用戶有意識地觸發(fā)，這本身就是一個非常消耗腦力的一件事情。在我們面對這么多功能的環(huán)境下，這兩個問題導(dǎo)致了我們在數(shù)字世界當(dāng)中碰到的巨大問題。因為我們知道系統(tǒng)的功能每天在增加，數(shù)字世界不需要遵循物理制造的極限，它可以進(jìn)入無限備功能的疊加，所以在這個世界當(dāng)中碰到的挑戰(zhàn)遠(yuǎn)遠(yuǎn)大于我們所掌握的技能，所以 WIMP 界面碰到了誕生以來最大的問題。

我們?nèi)绾谓鉀Q這個問題呢？首先一定要清晰地認(rèn)識到，人是有意識和無意識兩種思維的結(jié)構(gòu)和意識形態(tài)的。同時系統(tǒng)也可以分為兩部分，一部分是主動功能，第二部分是被動功能，我們要嘗試的守正出奇。守正延續(xù)了 WIMP 界面常規(guī)的功能，讓人有意識尋找功能，觸發(fā)系統(tǒng)的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動式的交互，讓功能找到用戶。

接下來分享幾個案例，在我們的常規(guī)設(shè)備當(dāng)中，都已經(jīng)有這樣一些主動式的服務(wù)來尋找到你。

第一類是相逢不相識，名字很好聽，解釋也特別好玩。在語雀當(dāng)中有一個小功能是我特別喜歡的功能，當(dāng)我編輯一篇文檔，編輯了大于 30%、50% 的文本量，這個鉤會自然地幫我鉤上，因為它有一個基礎(chǔ)的設(shè)定：如果這篇文章發(fā)生了比較大規(guī)模的修改，你的訂閱者很自然的想知道你這篇文章做了什么。

第二個相逢不相識的地方，大家可以聚焦一下支付寶。有興趣可以打開支付寶首頁，在你的收款碼應(yīng)用里，解決什么樣的問題？解決面對面交易的問題，所以當(dāng)你輸入一個金額完成以后，自然旋轉(zhuǎn)屏幕的時候，這個屏幕會進(jìn)行自然的翻轉(zhuǎn)，這樣對面掃你錢的人，可以看到信息的正面，這非常自然。

第二個主動式交互的類型，叫做可用不可見。和相逢不相識的區(qū)別在哪里？就是默默地為你提供了服務(wù)，但你可能永遠(yuǎn)不會知道它的存在。在蘋果第一代出來的時候，做了一個非常牛逼的設(shè)計，因為大家都知道虛擬鍵盤，沒有物理觸感，所以誤觸率很高。虛擬鍵盤怎么解決？蘋果基于非常有趣的思考，在蘋果的全鍵盤里面，只要輸入了 Desig 的時候，通過語義詞的分析，N 點擊的范圍遠(yuǎn)遠(yuǎn)大于旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動選擇的服務(wù)，只是我們從來不知道有這樣一件事情。所以我們將這些自然的人機(jī)互動方式進(jìn)行整理，包括融入到更多的案例以后，發(fā)現(xiàn)人機(jī)主動式交互有九種不同類型的分類，除了輸入法，更多是通過用戶使用情景的上下文進(jìn)行優(yōu)化的過程。

我們有了這張人機(jī)自然的交互，怎么解決語雀的問題？我和在座的語雀設(shè)計師有過這樣的討論，用戶說圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨(dú)放出來。這可能會解決剛才的問題，但是如果明天財務(wù)說表格找不到了，我是不是還要把表格拿出來？有人說附件找不到了，還要把附件拿出來嗎？我們需要從主動式交互的角度暢想怎么優(yōu)化人機(jī)互動的過程。

回到這張自然交互的工具，提供了一種簡易的思維框架。

我們?nèi)ヅ袛嗄男┦强梢匀プ龅?，第一件事特別簡單，我們判斷用戶使用的上下文是什么，我們發(fā)現(xiàn)很多產(chǎn)品的通用習(xí)慣，直接把圖片拖進(jìn)去，做成小的服務(wù)，用戶根本不需要知道功能的存在就可以使用。

第二個從原數(shù)據(jù)角度來理解，圖片是一種特殊結(jié)構(gòu)的數(shù)據(jù)，它是 jpg、png。用戶在外部復(fù)制了之后，進(jìn)入編輯頁可以主動推送他一個服務(wù)，詢問他是否要粘貼，本質(zhì)上并不復(fù)雜，但是它確實在 WIMP 界面?zhèn)鹘y(tǒng)意義的基礎(chǔ)上，又提供了初級的部分，又額外做了一部分。

我們所定義的自然里面，是需要我們做更多的主動式的服務(wù)，讓我們這個海量的功能能夠在合適的場景下，去找到用戶，從而節(jié)約人的腦力和體力。因為對于人來說，我們和 70 年前的爺爺輩們沒有本質(zhì)的區(qū)別，我們需要被善待。有感興趣的同學(xué)可以看支付寶的訪問碼，也期待和大家做更多的互動。

結(jié)語

分享的最后一趴，我簡單總結(jié)一下今天做了哪些事情和分享了哪些內(nèi)容。第一趴，我們提出了 Ant Design 的基本假定，我們認(rèn)為每個人都缺少快樂工作，這種快樂工作是和我們平時閑散完全不同的問題。同時大多數(shù)人都不可避免的來工作，我們怎么扭轉(zhuǎn)工作對我們的體驗，這是人生中非常大的問題。第二趴，我們衍生出新的價值觀，這四個價值觀中，因為時間篇幅的原因，重點和大家講了確定性和自然的價值觀，這是歷史最悠久，也是最有代表性的兩塊?；谶@兩個價值觀，我們衍生出了不同的組建庫也好、可視化資產(chǎn)也好，相關(guān)的設(shè)計資產(chǎn)以及設(shè)計策略，以及配套的設(shè)計工具，當(dāng)然藍(lán)色部分是我們今天介紹的重點。最后這張圖特別適合拍照，這是我們系統(tǒng)提供給大家的主動式服務(wù)。