淘寶2017 – 即時性回復設計

所謂 「事畢回復」 說的是該回復時就要即時回復，根據事情的輕重緩急做出答覆。手機淘寶新即時回復的設計我們希望用戶在多鏈路上使溝通效率更為便捷，減少以往操作上跳轉成本的痛點問題，減負用戶認知，使在交流的過程中更為順暢，商業成交過程中 「短」 「快」 「平」

現有問題分析

產品要最大化商業價值，設計要在用戶體驗和商業目標之間做權衡。在遵循市場的需求下實現設計最大化，讓用戶體驗推動商業價值，在使用的基礎上提高愉悅性。同樣的設計方式「能用」和「好用」是兩碼事，設計師像一個醫生，哪裡有問題去就症下藥，醫治解決。來看看消息前期的痛點問題。

問題一：

當用戶在逛淘寶，瀏覽購物車、詳情頁等其它頁面進行瀏覽內容時，賣家發來的消息無法在當前頁面進行快速回複信息，需用戶點擊提示后跳轉頁面編輯文字才可發送，如返回上一級需再點擊返回按鈕才可以。這個過程痛點是 「哪怕用戶只需要回復一句簡短的答覆，跳轉頁面的方式成本也為之過大」 反覆和不同賣家溝通來回切換，長時間會增加疲勞感，沒有減負用戶認知，溝通路徑長；

問題二：

操作體驗不佳，賣家發來新消息，直接操作下拉提示會進入進到系統通知頁面，造成傳達誤解，此設計展現會誤導用戶操作，有應用內跳出感，過於隱喻；

問題三：

• 視覺歷史遺留，過於年代感、不夠年輕化，沒有淘系特色；
• Push 灰白色背景層與內容融合度高，用戶不易直接被發現，無層次感，不醒目；
• 缺少結構化展現，形式展現繁多，擴展性不強；

原則的契合

操作系統展現

隨著新的系統應用框架的更新，可以把收到的通知豐富在可操作界面上，兩大操作系統希望用戶能花更少的時間在應用程序內切換跳躍。你可以發送回復，可以保持當前界面並收起，可以觸控拉低通知進行聊天。無論你在幹什麼，不影響當前界面操作。

手淘視覺語言

2017新品牌發布，我們在《淘寶2017視覺升級》的整體品牌語言中提取相關關鍵詞來應用在 「即時性回復」設計中，使品牌美學與一致性達到統一。

動效：提取物理運動中的歡快情緒與出奇不意傳達的驚喜感，吸引並聚焦用戶的注意力，即時、乾脆、明快。構建界面層級，使內容聚集，愉悅用戶。

相鄰色漸變：手淘作為一個平台工具，業務和產品有獨立的劃分。2017新品牌使用橫向漸變融合色彩，弱漸變對比自然過度，時尚而繽紛，充滿生機與活力。

界面層次感：通過顏色區分界面層次，顏色層次越淺越靠近用戶視線。不同內容根據半透明程度區分元素關係。

1.改善目標

設計框架結構保持統一，不隨業務結構多樣性展現，減少用戶認知負擔。

方案一

• 過於與系統保持一致，易誤導用戶認為是系統級的Push，容易收起操作，使用戶忽略其應用內的重要信息內容；

• 回複信息操作不明確，下拉操作與系統類似，沒有手淘獨立視覺風格語言，系統性區分過弱；

方案二

通欄視覺形式感上過於突出淘系列風格，全局橫向來看會導致與界面融合，無法做到區分，易忽略Push內容本身；

其它方案

• 弱漸變提示視覺上會讓整體略顯些臟；

• 強烈的黑色提醒層過重，影響到閱讀，不夠輕盈，與手淘整體視覺語言不符；
• 相鄰色漸變依舊會出現雙11大促時與系統欄相融合的情況；

終稿

• Push界面不附加過多個性化顏色，避免與大促氛圍融合，毛玻璃的視覺效果在不同場景下都可做到易識別；

• 視覺上與系統本身 Push 略做區分, 讓用戶理解屬淘系應用內的推送；
• 整體與手淘2017新品牌視覺語言保持統一性；

• 去掉易誤導用戶下拉收起操作視覺提示，增加輸入框、明確回復操作點擊；
• 在當前頁面即時回復，減少頁面來回切換跳轉的不佳體驗；

2.設計擴展

比如當有賣家發送消息給用戶的時候通過Push提示，用戶點擊后跳轉頁面，這樣的問題是「來回切換頁面成本大，如長時間聊天溝通寶貝切換易疲勞，用戶體驗差，有跳出感」

再比如我們在某聊天軟體上瀏覽一篇文章，震動傳達告訴我有一條未讀消息，此時文章未看完，關閉文章查看信息后再繼續回來瀏覽文章有操作成本，再點擊文章進入后也未必定位在之前你所瀏覽頁面的臨界點。在一個也不知道這條消息是否有回復的必要性。此聊天雖然在右上角點點點圖標內增加了在聊天中置頂的設計，但想必很少有用戶去點擊操作和不知有這個功能，便捷性不佳；

設計過程方案 A

設計過程方案 B （確定稿）

最終抉擇方案B的原因在於：

• 可以延續完整聊天界面的相似度，後期在發送圖片、寶貝等時不會出現與整體脫離的異常狀態；
• 有擴展性，可點擊進入完整聊天頁面操作，對方在線狀態也可以透出。

這樣做給業務帶來的價值是什麼？

1：提升消息產品在手淘多鏈路上溝通效率，給產品帶來更好溝通流暢度

2：改善Push提醒信息，避免重要信息被遺漏

3：減少頁面跳轉，載入上減少操作負擔

這樣做給用戶帶來的好處是什麼？

1：效率上用戶不用反覆跳轉切換溝通

2：操作上用戶不用在跳轉回復，在當前頁面可即時回復

3：展現上用戶不會在遺漏重要信息

4：信息結構上保持一致，給用戶帶來統一的認知

這樣做設計改變和思考是什麼？

1：設計上減少用戶操作中的頁面跳轉感，從而增強用戶回復效率

2：UI表現層上醒目透出，避免重要信息被遺漏

3：視覺改善上貼合淘系2017新品牌設計，年輕化展現

4：保持設計一致性，減負認知

設計驅動產品創新

依舊是老話題，設計師不能簡單的把自己定位在執行層面上，要站在用戶和產品的角度去思考問題，主動求變，推進改善體驗。每次接手的一個產品都是發現並改善體驗機制的機會。這次設計提案並驅動產品改善應用內回復大大減少了用戶來回切換頁面操作成本的問題，而臨時回復消息也變得更自然。

謝謝閱讀！

原文地址：淘寶用戶體驗設計（公眾號）

轉載請註明：學UI網 » 淘寶2017 – 即時性回復設計

學UI就上學UI網！越努力，越幸運！

「學UI網 」最值得關注的UI學習平台！ 每天發布高質量的設計教程和分享設計經驗，服務於20萬UI設計師,幫助初學者快速轉型。每周六晚上免費YY公開課（36013311），給大家提供更多免費學習的機會。想成為設計師的你快來關注吧！

【特色推薦】