編輯導讀：在產品的迭代升級過程中，改版設計是常常會遇到的問題。文章對58集團內部即時通訊工作——微聊的升級改版進行了詳細的梳理，對遇到的一些問題進行了分析總結，供大家參考學習。
如今，社交產品根據不同的需求和定位，已深入網際網路更多細分領域。按功能屬性可被劃分為通訊工具和社交平臺。除了能滿足人們日常生活中即時聊天的需求，最主要的是可以將網站信息與聊天用戶直接聯繫在一起，滿足人們的公共社交需求。
微聊是集團內部的高效即時通訊工具，連接了用戶、商家、客服等不同角色。最為接入業務數最多的中臺能力，是實現業務連接 、商業轉化的有力支撐。
微聊接入業務近幾年，隨著公司業務的不斷增長、產品結構複雜化，微聊在承接業務過程中收到用戶及業務方的反饋：微聊風格陳舊、各端體驗不一致，且微聊回復率低，擴展性較差。
目前同城業務已經覆蓋包括App端、M端、小程序等平臺，但仍有大量用戶習慣使用網頁端58，這些用戶的使用體驗仍是我們需要重點關注的。
58同城正在從「流量型」平臺轉向「服務型」平臺。新技術的應用加大了用戶與商戶之間的連接數量和連接效率，促進交易的發生。我們的產品目標是打造體驗一流、生態完善的全連結服務，幫助集團全業務發展。面對現有的訴求點 ，我們發起了對網頁端微聊改版項目。
那麼對於此次改版，我們除了滿足基本聊天需求外是不是可以做的更多？
結合中臺業務特點，我們重新定義微聊，微聊不僅僅是輕量聊天工具，也是助力各業務的全連結服務生態；作為中臺能力，除了為集團各業務提供標準化服務，高復用性、快速接入以外，還具備擴展性，支持業務自定義。
為了讓產品更符合用戶預期，最大化滿足業務需求，針對PC端微聊方案改版，我們確定本次改版設計目標。
設計流程中 我們通過洞察問題點並挖掘多方訴求來尋找機會點，確定設計目標後並進行拆解落地，通過對數據驗證，從而展開後續的迭代規劃。
在改版前期 ，針對舊版頁面進行問題梳理，主要包括三個方面：
我們對設計目標進行拆解，從以下4個點切入設計目標並進行落地：
視覺升級中，在保持微聊原有圖形不變的前提下，對微聊品牌色進行升級，在原有藍色系基礎上進行加深，使其更符合高效、工具性特點；
同時為了強化品牌，利用微聊圖形的特徵，在功能圖標設計中使用相同的元素，加強品牌記憶點。在微聊界面頭部位置， 將圖形放大化作為背景，在潛移默化中加強用戶對微聊產品的感知。
在優化信息層級中，對原有信息層級進行梳理，並優化信息結構展示。減少溝通中幹擾元素，增加信息強弱對比，強化重點內容。固定了消息通知模塊，使用戶瀏覽更聚焦；同時壓縮帖子信息和輸入區，來增加消息瀏覽空間，使閱讀更有效率；
為保證業務接入更高效，我們對通用功能卡片組件化，增加親和力的同時兼顧信息主次對比，強化主體信息和視覺一致性。
如在文件發送卡片中，固定卡片信息結構，並列出文件縮略圖合集，方便適配各種文件發送場景；
同時在帖子信息卡片中， 通用視覺元素的合併抽離，形成豐富的組件庫，方便業務直接復用，有效控制視覺輸出的一致性。將卡片劃分為5個區域：標題、次要信息、價格、圖片、標籤 ；同時列舉出各種欄位空缺時的正常展示樣式，保證視覺設計統一性，提高了模塊的易用性及後期延展性。
在產品層面，為滿足多業務的個性化需求、豐富多場景的溝通需求，在微聊布局中，我們創新提出預留自定義區域，在網頁端右側新增第三欄的布局結構，通過打造沉浸式體驗，讓用戶瀏覽更專注，溝通更高效；業務方可根據自身業務需求，選擇兩欄或三欄的展示形式，方便實現快速接入；
改版上線後微聊回複閱讀比提升了3.95%，表明相比於之前的單向發送，上線後雙方建立連結率有提升。
本次PC端微聊改版是由設計側主動推動並落地的項目，我們通過體驗的視角去洞見機會點，以體驗設計的方案為業務賦能，在協同中臺業務全流程中，實現設計價值的最大化。
最後感謝全體項目組成員的辛苦付出：孫巧玲、李洋、劉靜頤、汪洋、劉辰
作者：張華，視覺設計師
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@張華
題圖來自 Unsplash，基於CC0協議。