2021-1-8 濤濤
在我開(kāi)始所有話題之前，我有問(wèn)題想問(wèn)大家，大家工作快樂(lè)嗎？
我聽(tīng)到了特別積極的反應(yīng)，說(shuō)非常的快樂(lè)。希望大家說(shuō)快樂(lè)，不是因?yàn)榻裉焓侵芪濉?
但是呢，其實(shí)，工作并沒(méi)有我們想象中那么快樂(lè)，是所有的活動(dòng)當(dāng)中快樂(lè)指數(shù)的，跟躺著帶來(lái)的快樂(lè)差不多的，有些人躺著什么也不干，也比工作快樂(lè)。
什么原因?qū)е铝斯ぷ鞯牟豢鞓?lè)？
第一類，關(guān)乎目標(biāo)。大部分人認(rèn)為工作是為老板服務(wù)，所以很難受。另一類，是因?yàn)榉答仯芏喙ぷ鞯慕Y(jié)果依靠于外界，依靠于老板，所以你跟直屬上司的關(guān)系，決定了工作的體驗(yàn)。第三類，是我們認(rèn)為挑戰(zhàn)和技能的不匹配，導(dǎo)致了我們工作的不快樂(lè)。當(dāng)挑戰(zhàn)大于技能的時(shí)候，你就會(huì)焦慮，當(dāng)技能大于挑戰(zhàn)的時(shí)候，你就會(huì)覺(jué)得無(wú)聊，你的工作就會(huì)在焦慮和無(wú)聊之間來(lái)回地徘徊，這是我們理解的世界。
這個(gè)問(wèn)題，在數(shù)字世界中會(huì)變得更加的明顯。70 年前，第一臺(tái)計(jì)算機(jī)出來(lái)之后能解決的問(wèn)題非常的簡(jiǎn)單，但是 70 幾年過(guò)去了，數(shù)字世界得到了非常大的發(fā)展，我身邊任何一個(gè)小設(shè)備都遠(yuǎn)遠(yuǎn)大于 70 年的。而現(xiàn)在的我們和 70 年前的前輩們沒(méi)有本質(zhì)的區(qū)別，我們有 7+2 的記憶法則，最多只能記住 9 個(gè)數(shù)字，這就導(dǎo)致了在數(shù)字世界當(dāng)中，我們所面臨的挑戰(zhàn)遠(yuǎn)遠(yuǎn)大于人類所掌握的技能。
數(shù)字世界往往給我們帶來(lái)了挑戰(zhàn)大于技能，所以你的體驗(yàn)是負(fù)能的。如果你的工作更加有趣，挑戰(zhàn)能夠匹配技能的時(shí)候，工作就會(huì)變得很好玩。工作就像打游戲一樣，你通過(guò)了一關(guān)，技能得到了提升，工作就會(huì)變得持續(xù)好玩，所以我們?cè)跓o(wú)聊和焦慮中間尋找平衡，這個(gè)平衡就是快樂(lè)的通道。
說(shuō)起工作，大家多多少少會(huì)有快樂(lè)的體驗(yàn)，但是和躺在沙灘上睡覺(jué)的體驗(yàn)完全不一樣。某一個(gè)下午或者晚上，需要處理一件稍微有難度的事情時(shí)，你需要集中所有的注意力，專注于你和你的事情，一抬頭兩個(gè)小時(shí)過(guò)去了，這是一種極度飽滿、極度被滿足之后的快樂(lè)，它是一種成長(zhǎng)的快樂(lè)，也是一種挑戰(zhàn)和技能匹配的快樂(lè)，也是全情投入的快樂(lè)，所以我們所說(shuō)的快樂(lè)工作指的是全情投入的工作。
基于這樣的思考，我們將每個(gè)人都追求快樂(lè)工作，作為Ant Design 的基本假定。
第一個(gè)原因是，我們認(rèn)為人或多或少都有這樣的快樂(lè)體驗(yàn)；第二個(gè)很重要的原因在于，對(duì)于大多數(shù)人而言，我們醒著的絕大部分時(shí)間都要工作，如果你無(wú)法在工作中體驗(yàn)到快樂(lè)，人生將會(huì)在焦慮和無(wú)聊中度過(guò)。
基于這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基于相對(duì)論一樣，我們想基于這樣的假定，表達(dá) Ant Design 的體系。
這就是 Ant Design 的基本假定，每個(gè)人都追求快樂(lè)工作，Ant Design 中每個(gè)人是誰(shuí)？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設(shè)計(jì)者。所謂的設(shè)計(jì)者是創(chuàng)造這些應(yīng)用性能的人，也就是在座的大多數(shù)。
我們將快樂(lè)拆成兩部分，一部分是快感，一部分是樂(lè)趣，基于此，我們衍生出了 Ant Design 四個(gè)價(jià)值觀，設(shè)計(jì)首先是自然的，其次是確定的，第三，設(shè)計(jì)是要有意義的，第四，設(shè)計(jì)是能讓用戶和產(chǎn)品不斷成長(zhǎng)的，它是具有生長(zhǎng)性的。
所以接下來(lái)的分享當(dāng)中，因?yàn)闀r(shí)間的關(guān)系，我會(huì)重點(diǎn)分享其中的兩塊。
第一塊叫做確定性。分享一個(gè)小案例，我剛?cè)胄械臅r(shí)候，就碰到了社會(huì)的毒打，我想找到我的合作伙伴進(jìn)行驗(yàn)收發(fā)布的環(huán)節(jié)，因?yàn)樵O(shè)計(jì)師對(duì)細(xì)節(jié)有非常強(qiáng)的管控情系，我用略微虔誠(chéng)的態(tài)度說(shuō)：“親，能稍微調(diào)整一下列寬嗎？”，他可能沒(méi)理解我的意思，說(shuō)“我覺(jué)得挺好”，我說(shuō)“都換行了，哪里好？”，我以為會(huì)引起他的注意，結(jié)果他回了我一句：“這不重要，你行你上?！?
我一開(kāi)始并不明白，為什么這個(gè)世界是這樣的？我認(rèn)為我們都應(yīng)該有同樣的認(rèn)知，直到有一天我看到他的競(jìng)爭(zhēng)升級(jí) PPT 的時(shí)候，我就明白了，原來(lái)他不是針對(duì)我，他不換行不僅在產(chǎn)品上，PPT 里也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會(huì)導(dǎo)致一個(gè)問(wèn)題，當(dāng)不同的人有不同的、不確定性的想法，會(huì)導(dǎo)致研發(fā)過(guò)程的不確定性。
我們總說(shuō)，一個(gè)人可以走得很快，一群人才能走得很遠(yuǎn)。我們要想辦法怎么讓這群人可以步調(diào)一致地走得快，又走得遠(yuǎn)，我們把這套體系、方法論叫做 ETCG 2.0。
這是原有 ETCG 的基礎(chǔ)上，進(jìn)行升級(jí)的過(guò)程。我們希望面對(duì)同樣的問(wèn)題，各個(gè)角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹(shù)的種子，你一定在秋天可以得到一顆蘋果樹(shù)，而不是一顆梨樹(shù)。
ETCG 2.0幾個(gè)字母分別代表不同的意義，第一個(gè)是功能范例，第二個(gè)是模板，模板是我們基于業(yè)務(wù)的抽象，目的是幫助新手或者幫助不同設(shè)計(jì)師保持設(shè)計(jì)的一致性，指引頁(yè)面如何設(shè)計(jì)，比如這是典型的列表頁(yè)，由高級(jí)搜索和表格組成。今年在模板的基礎(chǔ)之上又做了一層更大的精進(jìn)，我們做了抽象和規(guī)范衍生出了模板組件。一行模板組件，當(dāng)無(wú)法滿足你的需求時(shí)，只要一行代碼，就可以得到一個(gè)完整的序列。
除了列表頁(yè)，還有表格頁(yè)，還有圖表、表單，以及布局，構(gòu)成了我們對(duì)系統(tǒng)的抽象，叫做「四表一局」，它大概覆蓋了中后臺(tái)系統(tǒng)、或者企業(yè)級(jí)產(chǎn)品 80% 以上的業(yè)務(wù)訴求，同時(shí)本著非常開(kāi)源、開(kāi)放和普惠的心理，整個(gè)「四表一局」正式對(duì)外開(kāi)放，大家可以訪問(wèn) Ant Design 的倉(cāng)庫(kù)下載和使用。
ETCG 中的 C 是組件，是 Ant Design 最早和大家見(jiàn)面的內(nèi)容，五年的時(shí)間里面，我們有了很多數(shù)量上和質(zhì)量上的精進(jìn)，同時(shí)創(chuàng)造了非常多的社會(huì)價(jià)值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻(xiàn)者參與到 Ant Design 的建設(shè)中，同時(shí) TOP 50 當(dāng)中，60% 來(lái)源于社區(qū)，他們?yōu)?2 萬(wàn)家企業(yè)提升了 3-5 倍的研發(fā)效能，同時(shí)我們正式于去年年底成為全球開(kāi)源第一的組件庫(kù)。五年前，螞蟻集團(tuán)發(fā)起了 Ant Design 這個(gè)項(xiàng)目，但是它今天所取得的成就是來(lái)源于社區(qū)和我們的共同努力，這里的榮譽(yù)和掌聲應(yīng)該獻(xiàn)給所有為Ant Design 貢獻(xiàn)過(guò)代碼的同學(xué)，謝謝你們的支持。
ETCG 的 G 有兩個(gè)。第一個(gè) G，是對(duì)組件樣式的抽象，我們用了變量化的方式進(jìn)行了約束和管控，它可以做什么？特別簡(jiǎn)單，你的老板今天不喜歡藍(lán)色，想要橙色，你只要一行編碼，就讓組件庫(kù)發(fā)生了煥然一新的變化。
ETCG 的第二個(gè) G，是我們今年重點(diǎn)建設(shè)的部分，也是全新的一部分，叫做 Guides，指的是人和機(jī)如何進(jìn)行互動(dòng)交互的過(guò)程。
比如說(shuō)這里是應(yīng)該放一個(gè)數(shù)值輸入框，還是放一個(gè)輸入框？以及如何進(jìn)行放置？我們將瑣碎的交互規(guī)則進(jìn)行抽象和封裝，讓機(jī)器學(xué)習(xí)這些規(guī)則，讓機(jī)器幫助我們進(jìn)行這些規(guī)則。你只要導(dǎo)入原數(shù)據(jù)，幾乎不用做任何的配置和更改，可以得到可進(jìn)入生產(chǎn)環(huán)境、可研發(fā)的表單頁(yè)面，設(shè)計(jì)得可能比初級(jí)的設(shè)計(jì)師產(chǎn)生的效果更好，你想要的一切都應(yīng)該放在合適的地方。
這就是我們對(duì) Ant Design 確定性的理解，不需要設(shè)計(jì)師參與的設(shè)計(jì)產(chǎn)品，提升了設(shè)計(jì)和研發(fā)的體驗(yàn)，當(dāng)然商業(yè)化還需要很長(zhǎng)的時(shí)間。當(dāng)下如何解決現(xiàn)在碰到的問(wèn)題？仰望星空，也要腳踏實(shí)地。作為設(shè)計(jì)師，我在想怎么解決五年前的問(wèn)題，我很想說(shuō)我行我上。
我們?cè)趺词褂茫渴褂?Kitchen 進(jìn)行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺(jué)得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進(jìn)行服務(wù)的搭建，搭建可進(jìn)入生產(chǎn)環(huán)境的服務(wù)產(chǎn)品，讓設(shè)計(jì)師變成設(shè)計(jì)工程師的角色。
在今天分享的最后一趴，我和大家聊聊這個(gè)場(chǎng)次經(jīng)常聽(tīng)到的詞，那就是“自然”，學(xué)術(shù)界和產(chǎn)業(yè)界對(duì)自然有非常多的理解。我們把它定義成了形容詞，我們認(rèn)為這個(gè)行為很自然，大家經(jīng)常在各個(gè)場(chǎng)合聽(tīng)到的一句話，設(shè)計(jì)是關(guān)乎如何運(yùn)作的問(wèn)題，Ant Design 在這個(gè)基礎(chǔ)上，要聊的是 how it worksnaturally。
同樣分享一個(gè)小案例，在我們有一天的用戶群里，我們的用戶反饋了一個(gè)非常有意思的問(wèn)題。他說(shuō)語(yǔ)雀可以插入圖片嗎？語(yǔ)雀的負(fù)責(zé)人當(dāng)時(shí)在現(xiàn)場(chǎng)，就回到：“當(dāng)然可以，最基本的能力”。我們的用戶問(wèn)出第二個(gè)特別具有代表性的問(wèn)題：“可是我們找不到在哪里”。語(yǔ)雀是阿里內(nèi)外都很喜歡的一款文檔類文件。編輯頁(yè)的第一頁(yè)，我們的工程師特意做成了綠色的，你點(diǎn)進(jìn)第一個(gè)的第一行就是圖片上傳的功能。但是大家有沒(méi)有想過(guò)？我們僅僅隱藏了一級(jí)，就讓用戶記不起來(lái)有這個(gè)功能，我們僅僅隱藏了一級(jí)，就讓用戶找不到這個(gè)功能。這不是語(yǔ)雀產(chǎn)品特有的特征和問(wèn)題，而是這個(gè)時(shí)代大部分問(wèn)題具有的特征和問(wèn)題，因?yàn)榇蟛糠值漠a(chǎn)品處于 1973 年的基礎(chǔ)上。
WIMP 是什么？Window、lcon、Menu、PointDevice，當(dāng)我們的功能只有 20 幾個(gè)的時(shí)候，這是非常好的設(shè)計(jì)，總比代碼行好太多，今天我們說(shuō)了數(shù)字世界當(dāng)中，我們的設(shè)備、計(jì)算機(jī)、網(wǎng)絡(luò)成千上億倍的發(fā)展，用戶怎么記得住 8000 個(gè)功能？用戶怎么定位到 8000 個(gè)功能在哪里？所以 WIMP 界面碰到了人機(jī)交互的瓶頸階段。
為什么碰到瓶頸會(huì)越來(lái)越不自然？第一個(gè)角度從人機(jī)互動(dòng)的環(huán)節(jié)，當(dāng)用戶記不住的時(shí)候，就沒(méi)辦法從哪個(gè)入口出發(fā)。所以 WIMP 界面第一個(gè)不自然的原因在于，所有動(dòng)作的發(fā)起都依托于用戶。用戶一旦記不住，一旦找不到，人機(jī)交互就沒(méi)辦法走通，這是 WIMP 界面的第一個(gè)問(wèn)題。
第二個(gè)問(wèn)題，要回到人身上。人的行為分為有意識(shí)、無(wú)意識(shí)的兩層，能量消耗比較大的就是有意識(shí)層面。WIMP 在于所有的行為依托于用戶有意識(shí)地觸發(fā)，這本身就是一個(gè)非常消耗腦力的一件事情。在我們面對(duì)這么多功能的環(huán)境下，這兩個(gè)問(wèn)題導(dǎo)致了我們?cè)跀?shù)字世界當(dāng)中碰到的巨大問(wèn)題。因?yàn)槲覀冎老到y(tǒng)的功能每天在增加，數(shù)字世界不需要遵循物理制造的極限，它可以進(jìn)入無(wú)限備功能的疊加，所以在這個(gè)世界當(dāng)中碰到的挑戰(zhàn)遠(yuǎn)遠(yuǎn)大于我們所掌握的技能，所以 WIMP 界面碰到了誕生以來(lái)最大的問(wèn)題。
我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢？首先一定要清晰地認(rèn)識(shí)到，人是有意識(shí)和無(wú)意識(shí)兩種思維的結(jié)構(gòu)和意識(shí)形態(tài)的。同時(shí)系統(tǒng)也可以分為兩部分，一部分是主動(dòng)功能，第二部分是被動(dòng)功能，我們要嘗試的守正出奇。守正延續(xù)了 WIMP 界面常規(guī)的功能，讓人有意識(shí)尋找功能，觸發(fā)系統(tǒng)的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動(dòng)式的交互，讓功能找到用戶。
接下來(lái)分享幾個(gè)案例，在我們的常規(guī)設(shè)備當(dāng)中，都已經(jīng)有這樣一些主動(dòng)式的服務(wù)來(lái)尋找到你。
第一類是相逢不相識(shí)，名字很好聽(tīng)，解釋也特別好玩。在語(yǔ)雀當(dāng)中有一個(gè)小功能是我特別喜歡的功能，當(dāng)我編輯一篇文檔，編輯了大于 30%、50% 的文本量，這個(gè)鉤會(huì)自然地幫我鉤上，因?yàn)樗幸粋€(gè)基礎(chǔ)的設(shè)定：如果這篇文章發(fā)生了比較大規(guī)模的修改，你的訂閱者很自然的想知道你這篇文章做了什么。
第二個(gè)相逢不相識(shí)的地方，大家可以聚焦一下支付寶。有興趣可以打開(kāi)支付寶首頁(yè)，在你的收款碼應(yīng)用里，解決什么樣的問(wèn)題？解決面對(duì)面交易的問(wèn)題，所以當(dāng)你輸入一個(gè)金額完成以后，自然旋轉(zhuǎn)屏幕的時(shí)候，這個(gè)屏幕會(huì)進(jìn)行自然的翻轉(zhuǎn)，這樣對(duì)面掃你錢的人，可以看到信息的正面，這非常自然。
第二個(gè)主動(dòng)式交互的類型，叫做可用不可見(jiàn)。和相逢不相識(shí)的區(qū)別在哪里？就是默默地為你提供了服務(wù)，但你可能永遠(yuǎn)不會(huì)知道它的存在。在蘋果第一代出來(lái)的時(shí)候，做了一個(gè)非常牛逼的設(shè)計(jì)，因?yàn)榇蠹叶贾捞摂M鍵盤，沒(méi)有物理觸感，所以誤觸率很高。虛擬鍵盤怎么解決？蘋果基于非常有趣的思考，在蘋果的全鍵盤里面，只要輸入了 Desig 的時(shí)候，通過(guò)語(yǔ)義詞的分析，N 點(diǎn)擊的范圍遠(yuǎn)遠(yuǎn)大于旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動(dòng)選擇的服務(wù)，只是我們從來(lái)不知道有這樣一件事情。所以我們將這些自然的人機(jī)互動(dòng)方式進(jìn)行整理，包括融入到更多的案例以后，發(fā)現(xiàn)人機(jī)主動(dòng)式交互有九種不同類型的分類，除了輸入法，更多是通過(guò)用戶使用情景的上下文進(jìn)行優(yōu)化的過(guò)程。
我們有了這張人機(jī)自然的交互，怎么解決語(yǔ)雀的問(wèn)題？我和在座的語(yǔ)雀設(shè)計(jì)師有過(guò)這樣的討論，用戶說(shuō)圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨(dú)放出來(lái)。這可能會(huì)解決剛才的問(wèn)題，但是如果明天財(cái)務(wù)說(shuō)表格找不到了，我是不是還要把表格拿出來(lái)？有人說(shuō)附件找不到了，還要把附件拿出來(lái)嗎？我們需要從主動(dòng)式交互的角度暢想怎么優(yōu)化人機(jī)互動(dòng)的過(guò)程。
回到這張自然交互的工具，提供了一種簡(jiǎn)易的思維框架。
我們?nèi)ヅ袛嗄男┦强梢匀プ龅模谝患绿貏e簡(jiǎn)單，我們判斷用戶使用的上下文是什么，我們發(fā)現(xiàn)很多產(chǎn)品的通用習(xí)慣，直接把圖片拖進(jìn)去，做成小的服務(wù)，用戶根本不需要知道功能的存在就可以使用。
第二個(gè)從原數(shù)據(jù)角度來(lái)理解，圖片是一種特殊結(jié)構(gòu)的數(shù)據(jù)，它是 jpg、png。用戶在外部復(fù)制了之后，進(jìn)入編輯頁(yè)可以主動(dòng)推送他一個(gè)服務(wù)，詢問(wèn)他是否要粘貼，本質(zhì)上并不復(fù)雜，但是它確實(shí)在 WIMP 界面?zhèn)鹘y(tǒng)意義的基礎(chǔ)上，又提供了初級(jí)的部分，又額外做了一部分。
我們所定義的自然里面，是需要我們做更多的主動(dòng)式的服務(wù)，讓我們這個(gè)海量的功能能夠在合適的場(chǎng)景下，去找到用戶，從而節(jié)約人的腦力和體力。因?yàn)閷?duì)于人來(lái)說(shuō)，我們和 70 年前的爺爺輩們沒(méi)有本質(zhì)的區(qū)別，我們需要被善待。有感興趣的同學(xué)可以看支付寶的訪問(wèn)碼，也期待和大家做更多的互動(dòng)。
分享的最后一趴，我簡(jiǎn)單總結(jié)一下今天做了哪些事情和分享了哪些內(nèi)容。第一趴，我們提出了 Ant Design 的基本假定，我們認(rèn)為每個(gè)人都缺少快樂(lè)工作，這種快樂(lè)工作是和我們平時(shí)閑散完全不同的問(wèn)題。同時(shí)大多數(shù)人都不可避免的來(lái)工作，我們?cè)趺磁まD(zhuǎn)工作對(duì)我們的體驗(yàn)，這是人生中非常大的問(wèn)題。第二趴，我們衍生出新的價(jià)值觀，這四個(gè)價(jià)值觀中，因?yàn)闀r(shí)間篇幅的原因，重點(diǎn)和大家講了確定性和自然的價(jià)值觀，這是歷史最悠久，也是最有代表性的兩塊。基于這兩個(gè)價(jià)值觀，我們衍生出了不同的組建庫(kù)也好、可視化資產(chǎn)也好，相關(guān)的設(shè)計(jì)資產(chǎn)以及設(shè)計(jì)策略，以及配套的設(shè)計(jì)工具，當(dāng)然藍(lán)色部分是我們今天介紹的重點(diǎn)。最后這張圖特別適合拍照，這是我們系統(tǒng)提供給大家的主動(dòng)式服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com