Ant Design 情感化設計
有幸參加 2019 See Conf，非常高興能在這個寒冷的冬天為大家帶來這場有關溫度的分享，我們抱著開放的心態跟大家共同探討情感化設計落地企業級產品領域的新思路，若有不成熟的地方，歡迎大家一起討論。
關鍵詞： Ant Design、情感化設計、SEE Conf、企業級產品、使用者訪談
預計閱讀時間： 8 分鐘
① Ant Design 情感化設計研究
為什麼做？
之前跟使用者聊天，他說用某個產品經常有種想離職的衝動，但每天卻不得不繼續使用，於是我們想探究造成他情緒如此激烈的原因，而常規的用研方法通常是基於使用者行為，從「產品自身功能或體驗是否有問題」這個關注點出發，對使用者心理狀態和情感關懷的視角是缺失的。所以我們思考，能否從這個視角切入，去發現一些新的可能性。
原研哉曾經提過一個理念：讓感官被重新發現。「設計師先不要急著畫草圖，而是先想想使用者的感受」。
我們決定從使用者的感官之一——情感 出發，通過解讀使用者行為背後的情緒感受來挖掘被忽視的需求。
怎麼做？
提到情感化設計，大家想到的可能是一些登入提示、異常狀態等通過插畫和微互動手段提升使用者體驗的案例，的確能讓使用者會心一笑，起到錦上添花的效果，但我們在落地時發現三個問題：
- 這些提升使用者情感的方法比較散，不成體系；
- 大多停留在視覺和微互動層面，對於企業級產品使用者來說略顯單薄，難以真正為使用者帶來進一步的價值和感受；
- 無法驗證設計產出對於提升使用者情感的準確性和有效性。
所以如何打造有 Ant Design 特色的情感化設計體系？
Ant Design 設計價值觀
先回顧一下 Ant Design 的設計價值觀：「確定」、「自然」。
「確定」指代設計的邊界，使設計者在保持克制的狀態下做出更好的決策；
「自然」是指汲取自然界中的靈感，挖掘自然的美學表達和行為互動，建立更高效更有層次的產品體驗；
在「確定」和「自然」的基礎上，我們反思 Ant Design 情感化設計要為使用者帶來什麼樣的基調。
通常提到企業級產品，給人的印象大多是「技術門檻高」、「操作太複雜」、「專業術語晦澀難懂」等一些冰冷的、缺乏人情味的關鍵詞，所以我們要給使用者帶來有溫度的、有人情味的——也就是有情感的產品體驗，「情感」這個詞，就是 Ant Design 設計語言中的第三個價值觀。
覆蓋範圍
上面提到，當前很多情感化設計聚焦在插畫、微互動層面，結合諾曼的情感化設計三層次理論來看，偏本能層比較多：
這固然是需要我們發力的一個點，但遠不止於此，企業級產品的核心價值體現在解放生產力、提高產能、提升效率，設計者如何通過良好的設計方案，協助產品為使用者提升效率？這就需要我們通過行為層面去做一些事情，輔助使用者高效決策，從而對產品產生正向的情感反應。
另外，反思層面的設計體現在使用者對產品的所思所想，它往往是點睛之筆，需要我們通盤考慮在哪些場景中適合畫龍點睛。
所以 Ant Design 的情感化設計體系，不但要治標，還要治本。嘗試把情感化設計作為體驗設計、甚至某些功能設計的依據和切入點，從使用者情感訴求出發，系統性地盤點產品中哪些場景需要做情感化設計、怎麼做、做到什麼度，然後提煉設計目標，轉化成帶有情感關懷的解決方案，結合業務節奏迭代落地，改善使用者在使用產品時的主觀感受。
理論依據
「情感」即「情緒感受」，來源於心理學，它是人對客觀事物是否滿足自己的需要而產生的態度體驗，引申到企業級產品領域，可以理解為使用者對產品是否滿足自己的需要而產生的態度體驗。
基於這個本源，我們查閱了大量的文獻資料以尋找突破口，包括一些業內比較經典並且在工業設計領域已有成功案例的情感化理論，比如：plutchik 情緒輪、日本的感性工學原理和諾曼的三層次理論等等，但這些都不太適合直接作為企業級產品情感化探索的突破口，直到我們發現了荷蘭代爾夫特理工大學的一些研究成果。
代爾夫特大學積極情感研究實驗室立足於基礎理論模型，採集大量樣本進行調研分析，提煉了人類的25個正面情感指標和36個負面情感指標。
我們決定基於這61個基礎情感指標，站在巨人的肩膀上，結合企業級產品做一些分析和提煉。
但是作為基礎情感指標，不帶任何行業屬性，無法直接使用，怎麼結合企業級產品特質，轉化為可以落地於業務的特徵指標，然後引導我們一步一步採集使用者情感訴求，完成設計實施和方案落地呢？
我們套用常規的設計流程，分五個步驟完成情感化設計的探索和落地：
探索 - 提煉情感指標
我們搞了一場 workshop，邀請在企業級產品領域沉浸多年的各類角色：使用者、PD、設計師、開發、運營，大家根據經驗判斷，結合經常接觸到的企業級產品特性，從這61個指標中進行了兩輪篩選和優化補充，提煉了十個 Ant Design 企業級產品情感指標，在後續落地業務過程中，我們會不斷修正和優化。
為了更精準地向用戶傳達這些指標的含義，我們查詢了這十個情感名詞在心理學中的解釋，並結合企業級產品特徵轉化成使用者能理解的釋義。另外，我們還基於這次調研的目標產品——Ant DataGo 資料研發平臺，擬定了關於產品的十個情感化訪談問題。
為了每個細節都照顧到使用者的情緒感受，我們打算用圖形化的方式代替文字向用戶傳達這十個情感名詞的含義，引導使用者通過形象的插畫聯想到自己的工作場景，於是我們邀請插畫師製作了這套有趣的情感卡片，作為情感化訪談的輔助工具。
聚焦 - 鎖定情感訴求
我們邀請使用者將十張卡片按照在這款資料研發產品中感受到的情緒強弱進行排序，記下排列的序號，引導使用者針對每個情緒指標，結合上面的提綱進行深度訪談，挖掘隱藏在使用者情緒背後的訴求。
整個訪談在非常輕鬆愉悅的氛圍中進行，訪談結束後，我們為每位使用者精心準備了一份三溫暖大禮包：蒸汽眼罩-暖眼；咖啡-暖胃；午睡毯-暖心，使用者對這個有溫度的訪談感覺比較驚喜。
我們總共調研了7名使用者，工齡分佈在0.5年到9年之間，崗位職責主要是資料研發、資料運維工程師和資料分析師；總共採集到53個情緒點，其中正向情緒有29個，負向情緒有24個，接下來我們針對這些調研結果，進行定量和定性分析。
將每位使用者選擇的情緒卡片的序列號，以及參與排序的情緒數量羅列出來，採用一個簡單的公式，統計這些情緒指標的得分，以便從巨集觀層面對所有情緒訴求的強弱進行觀察：
通過公式計算出每個指標的得分和均值：
然後將均值分數從高到低進行排序，從統計結果可以看出，在整個產品中，使用者對於期待、疑惑這兩種情緒是感受最多的，而自豪（也就是成就感）非常少，排到最後；
根據這個排序，我們需要做的是強化/提升使用者的正面情緒，減少/轉化使用者的負面情緒；
為了能更直觀地看到使用者對產品整體的情緒反應，我們將正負情緒的分數分別相加：
由總分可見，使用者對該產品的正負情緒反應基本持平，後續通過體驗優化，可以再進行一輪簡單的情緒調研，將前後的正負情緒得分進行比對，這樣可以比較客觀地驗證情感化設計的有效性、合理性。
接下來把之前採集到的痛點與排序一一關聯，生成魚骨圖，進行定性分析：
每根魚刺代表一個情緒和隱藏在該情緒背後的問題，這將是我們持續提升產品溫度的一張體驗大圖，本期重點聚焦在單項情緒分數最高的兩個問題：「期待」和「疑惑」。
期待：
調研發現，所有使用者都非常期待產品後續的定位和發展是否能滿足自己業務的需求，所以必須通過一個途徑釋放使用者的期待，在與業務方碰撞後，大家認為可以將產品現有能力、和即將釋出的重要能力通過產品能力全景圖的方式透傳給使用者；
疑惑：
通過研究使用者在疑惑這個情緒點傳達的訴求，我們挖掘了三個切入點來減少使用者對於產品的疑惑：
- 良好的幫助引導系統可以減少使用者在操作過程中的疑問；
- 以生動有趣的方式描述產品概念，可以減少使用者對於「這個產品是什麼」的疑問；
- 還有上面提到的產品能力全景圖；
另外我們發現，有三種負面情緒：生氣、焦慮、挫折，指向同一個訴求：運維中心告警機制，這是個體驗重災區，於是我們決定把這個問題的優先順序挪上來。
將以上歸納的痛點進行收斂，與業務方溝通後，產出了三個功能模組來組織和承載這些情感化訴求。
另外有個有意思的點：86%的使用者在「信任」這個情緒上，體現的不是對產品本身的信任，而是對產品背後團隊的信任，這給了我們一些啟發，在梳理門戶首頁需求時，我們考慮在這裡可以提供一個強化使用者信任情緒的入口。
② Ant Design 情感化設計落地
案例一：產品門戶首頁
在產品首頁中，我們主要關注 疑惑、期待、信任 三種情感。
疑惑
新使用者訴求在於希望能清晰瞭解 Ant DataGo 這個產品是什麼：它是生產資料的工具，通過採集原始資料，經過多輪加工，在資產門戶上架，成為一份可供業務消費的資料資產。
為降低使用者理解成本，我們藉助視覺隱喻來傳遞晦澀的產品概念。用雲朵下雨比喻原始資料來源雲端；用鑽石比喻珍貴的資料資產；最後，利用 DataGo 字形衍生的裝置意像來比喻採集、加工和上架這個運作過程。
單純靜態隱喻對於傳達抽象概念還是略困難，因此我們藉助了微互動。微微浮動的資料雲吸引使用者點選，然後觸發整個裝置的執行，從而加強使用者對生產這一動作的感知，有助於培養 Ant DataGo 是 「簡單的、易用的」使用者心智模型。
此外，用心呈現的美學與互動設計還能為我們打造良好的第一印象，為使用者帶來些許愉悅和驚喜。
為了讓使用者更容易理解產品概念，而不單純為了美感。對於首屏裝置意象的設計，我們在多種結構和風格間做了大量取捨，這個過程十分有趣，感興趣的話可以找我們討論。
除首屏的呈現，在次屏位置補充了對產品核心能力的描述，進一步幫助新手使用者快速認識這個產品，降低疑惑感。
期待
使用者訴求在於期待產品未來的發展能匹配自己的業務需要。
研究發現，期待感在使用者心中是十種情感指標裡排名第一、最為強烈的。此外，一部分帶有此種情緒的使用者，因得不到產品方及時溝通，已逐漸從 「期待」 轉化為 「疑惑」，甚至「焦慮」等負面情感。這令人意外，因此我們認為有必要在首頁構建一個承載期待的溝通平臺：產品能力全景圖。不同於常規的布告欄或產品藍圖等形態，它既能透傳產品能力的過去和現在，也能透傳未來的規劃，同時使用者也能表達自己的訴求。
此處視覺隱喻也經過精心考慮：藉助圖形化和互動效果，將產品能力隱喻為不同的技能點，從而傳遞產品能力不斷生長的感覺。我們希望使用者在此處能夠釋放心中的高期待，避免其轉化為負面情感。
信任
有 86% 的使用者表示他們信任的不是產品本身，而是背後的產品團隊。這是因為他們在工作中都曾接觸過產品團隊，團隊成員能快速精準地解決問題，讓使用者感覺很靠譜，因此反而對產品本身有了較好的信任感和期待感，這給了我們一些設計上的啟發。
斯蒂芬 · 安德森在《怦然心動—情感化互動設計指南》中提到過：「在網站中顯示他人的存在，將顯著改變使用者的感覺和行為」。
我們為產品幕後的工程師、設計師和產品經理分別構建了一個虛擬形象，以團隊協作的姿態呈現在此處，結合文案 「我們隨時提供幫助」 引導使用者訪問幫助中心，希望藉此提升產品值得信賴的形象。
此外，我們添加了一些溫情表達，當用戶停留在該模組幾秒之後，幕後支持者會抬頭朝使用者微笑示意，然後繼續低頭工作。希望這些細節能在某些瞬間溫暖到我們的使用者。
以上是情感驅動的產品首頁設計，我們希望去降低使用者疑惑、維持期待和提升信任這三種情感。
案例二：幫助引導系統
該模組我們主要關注 疑惑 這個情感 。
疑惑
這裡的疑惑感與案例一中的有所不同，此處大量的使用者訴求聚焦在如何快速上手、操作過程中遇到問題如何尋求及時有效的幫助。
產品原有幫助功能只是一個很小的面板，當用戶產生疑問時，引導他去聯絡值班人員答疑或去文件中心查閱資料。這兩種方案顯然都不太高效，前者隨著使用者數量的增長，效率會逐步降低，答疑方壓力也會倍增；而後者，只是按產品功能邏輯排列說明文件，定位答案十分不易。
實際上，無論求人還是自助，使用者根本訴求是：能快速定位到問題的答案，排解自己的疑惑。因此我們仔細詢問過使用者疑惑感來源的方方面面，構建了基於場景識別的幫助引導系統。
在具體使用場景中，預判一些使用者可能出現疑惑的點，直接給出輕量化的快速解答，就地化解疑惑。若疑惑未被消除，使用者可定位與該問題對應的的詳細說明文件，也可帶著問題直接跳轉釘釘，求助值班答疑人員。
另外，我們對全域性幫助面板進行升級，它的形式不再是一成不變，而是因地制宜，根據使用者當前訪問的功能模組，給出常見問題指引和快速開始教程。
當然，針對新手使用者最大的疑惑感來源：如何上手，我們也提供了網站地圖這樣一個工具。根據使用者的訪問場景，給出視覺化的使用流程介紹，降低錯綜複雜的資訊架構帶來的理解成本。
我們還有一個強大的後方——幫助中心。從快速搜尋到新手教學，從基於場景識別的自助學習再到互助解答的產品社群，這裡提供了各種各樣的幫助形式和學習資料。我們希望，所有使用者的疑惑總有一個出口可排解，而不是積攢在心中，最後轉化為更消極的情感。
Banner 區域還沿用了首頁的團隊形象，並增添一點有趣的互動。當用戶輸入問題時，虛擬形象會呈現另一種姿態，表示自己正在關注使用者的訴求。我們還營造了一個團隊輪流值班的景象，使用者每次訪問幫助中心，系統會隨機呈現一個虛擬形象。
我們希望在不打擾使用者正常使用的前提下，這些小細節賦予其一點工作樂趣，帶來點溫暖感。
對於幫助系統，我們還在思考一些同樣有價值的事。比如構建成就體系，提升使用者自豪感，為使用者能學會使用如此複雜的企業級產品，成長為專業的資料生產人員而喝彩。 希望以後有機會再跟大家分享這些內容。
案例三：運維告警機制
生氣、焦慮、挫折
研究顯示，幾乎所有較為嚴重的負面情感都產生於運維告警模組，我們在做情感化調研時，一位運維同學吐槽：「天天這樣運維，感覺失去了工作的意義。」 這句話在當時給我們非常大的觸動，那時我們就在想，能為這些使用者做些什麼。作為體驗重災區，我們如何轉化此處的負面情感呢？由於時間關係和資料敏感問題，這部分僅展示思路。
我們把運維流程進行全盤梳理，發現這是一條鏈路超長的任務流程（以下僅展示部分內容），這意味著如果只從單點切入去化解使用者負面情感，可能徒勞無功，必須從全域性角度去思考這個問題。
最終盤點出幾大問題：告警訊息井噴且有效資訊少、跨終端辦公、跨平臺辦公、平臺記憶體在流程斷點。
針對上述問題，我們跟業務方進行反覆討論，得到如下可行的解決方案，它們後續將逐步落地。
- 聚合告警事件，解決告警井噴的問題；
- 藉助釘釘平臺，開發移動運維小程式，利用手機解決大部分運維任務；
- 針對跨平臺問題，在 Ant DataGo 上整合底層引擎能力，將資訊聚合到 Ant DataGo；
- 流程斷點問題是設計師最擅長的技能，不在話下。
最終我們產出了一條新的任務流程，能快速在手機端解決 60%～70% 的運維任務。
除了解決上述偏行為層的核心訴求，我們還理清了其它偏本能層和反思層的抓手，讓設計師能清晰認知在何處給使用者提供進一步的關懷，降低負面情感。
- 在告警資訊的接觸點，可以在用語和美學上更加溫暖；
- 在運維中心，可以構建運維大盤去記錄運維工程師的成長，提升成就感；
- 在使用者深夜完成運維的那一刻，給予深夜關懷。
以上就是情感驅動的運維繫統設計，我們希望能降低使用者負面情感，關懷運維人員。
最初在做體驗優化時，業務方把運維這塊的優先順序放的很低，但當情感化研究報告出來後，大家立馬意識到這塊的重要性。這是一個典型的設計驅動業務的案例，因為關注使用者情感，才讓我們洞悉到這些在辦公室之外、在產品之外的體驗問題，才能提出諸如無線運維等超前的解決方案，並最終推動產品升級。
總結
通過上述案例，我們主要想傳遞的並非解決方案做的有多好，而是我們在做企業級產品情感化設計時的理念和方法。
諾曼在《情感化設計》一書中，提出了經典的情感化設計三層次理論。那麼這三個層面在整個企業級產品設計方案中的比重究竟是多大？哪個更重要？
諾曼傳達了這樣一種理念，在大部分情況下，使用者的任何實際感受都包含這三個層面，在實踐中單一層面的設計是罕見的。這也正是為什麼，有些只從本能層，或只從行為層切入的情感化設計，在企業級產品中往往會被認為是過度設計。因為它們沒有基於使用者背後真正的情感訴求，沒有整體去考慮這三個層面的設計，自然使用者不會買單。
對企業級產品而言，行為水平的設計是至關重要的，從沒有人反對過可用性、易用性。在此基礎上，我們再綜合去考慮本能層和反思層的設計，才能為產品創造深入人心的體驗。這正是我們理解的企業級產品情感化設計。
最初我們摸索如何在企業級產品中進行情感化設計時，也曾走過很多彎路，最後才探索出了這套思路和方法。我們希望這條情感化設計之路能給大家帶來啟發，其中有兩點，特別值得和大家分享：
- 以人為本：讓使用者從自身出發，優先關注自己多樣的情感，而不是優先關注產品，這樣反而能洞察到不少使用者的真實訴求，以此改進我們的產品體驗。
- 標本兼治：避免情感化設計由於忽略情感本源導致的 「治標不治本」的問題，平衡本能、行為和反思三個層面，整體去思考情感化設計，讓設計視角更加開闊、更加貼近使用者和產品，帶著對 「人」 的關懷，去打造溫暖人心的企業級產品。
我們掘金隊一直致力於探索前沿設計理念和追求更好的企業級產品體驗，對於企業級產品情感化設計這個課題，我們也會一直研究下去，如果你對此感興趣，歡迎掃碼加入討論群，或加入我們，一起掘金體驗！