編輯導讀：在產品的迭代升級過程中，改版設計是常常會遇到的問題。文章對58集團內部即時通訊工作——微聊的升級改版進行了詳細的梳理，對遇到的一些問題進行了分析總結，供大家參考學習。

01 前言

如今，社交產品根據不同的需求和定位，已深入互聯網更多細分領域。按功能屬性可被劃分為通訊工具和社交平臺。除了能滿足人們日常生活中即時聊天的需求，最主要的是可以將網站信息與聊天用戶直接聯系在一起，滿足人們的公共社交需求。

02 背景

微聊是集團內部的高效即時通訊工具，連接了用戶、商家、客服等不同角色。最為接入業務數最多的中臺能力，是實現業務連接 、商業轉化的有力支撐。

微聊接入業務近幾年，隨著公司業務的不斷增長、產品結構復雜化，微聊在承接業務過程中收到用戶及業務方的反饋：微聊風格陳舊、各端體驗不一致，且微聊回復率低，擴展性較差。

目前同城業務已經覆蓋包括App端、M端、小程序等平臺，但仍有大量用戶習慣使用網頁端58，這些用戶的使用體驗仍是我們需要重點關注的。

03 重新定義

58同城正在從“流量型”平臺轉向“服務型”平臺。新技術的應用加大了用戶與商戶之間的連接數量和連接效率，促進交易的發生。我們的產品目標是打造體驗一流、生態完善的全鏈接服務，幫助集團全業務發展。面對現有的訴求點 ，我們發起了對網頁端微聊改版項目。

那么對于此次改版，我們除了滿足基本聊天需求外是不是可以做的更多？

結合中臺業務特點，我們重新定義微聊，微聊不僅僅是輕量聊天工具，也是助力各業務的全鏈接服務生態；作為中臺能力，除了為集團各業務提供標準化服務，高復用性、快速接入以外，還具備擴展性，支持業務自定義。

04 設計目標

為了讓產品更符合用戶預期，最大化滿足業務需求，針對PC端微聊方案改版，我們確定本次改版設計目標。

• 在業務層面：提高微聊連接率，進一步實現商業轉化；
• 從用戶角度：提升使用體驗，溝通更高效；
• 從設計內部角度：提升微聊品質感，讓微聊更具包容性和擴展性

05 設計實施

設計流程中 我們通過洞察問題點并挖掘多方訴求來尋找機會點，確定設計目標后并進行拆解落地，通過對數據驗證，從而展開后續的迭代規劃。

在改版前期 ，針對舊版頁面進行問題梳理，主要包括三個方面：

• 在視覺層界面-風格陳舊；圖標樣式不精細；干擾元素過多；
• 在交互層頁面信息結構不明確；信息獲取不夠高效；
• 在產品層頁面功能單一，易用性不足；產品缺少記憶點。

我們對設計目標進行拆解，從以下4個點切入設計目標并進行落地：

1. 視覺語言升級，強化品牌感知

視覺升級中，在保持微聊原有圖形不變的前提下，對微聊品牌色進行升級，在原有藍色系基礎上進行加深，使其更符合高效、工具性特點；

同時為了強化品牌，利用微聊圖形的特征，在功能圖標設計中使用相同的元素，加強品牌記憶點。在微聊界面頭部位置， 將圖形放大化作為背景，在潛移默化中加強用戶對微聊產品的感知。

2. 聚焦用戶場景 優化信息結構

在優化信息層級中，對原有信息層級進行梳理，并優化信息結構展示。減少溝通中干擾元素，增加信息強弱對比，強化重點內容。固定了消息通知模塊，使用戶瀏覽更聚焦；同時壓縮帖子信息和輸入區，來增加消息瀏覽空間，使閱讀更有效率；

3. 組件化設計，提升一致性

為保證業務接入更高效，我們對通用功能卡片組件化，增加親和力的同時兼顧信息主次對比，強化主體信息和視覺一致性。

如在文件發送卡片中，固定卡片信息結構，并列出文件縮略圖合集，方便適配各種文件發送場景；

同時在帖子信息卡片中， 通用視覺元素的合并抽離，形成豐富的組件庫，方便業務直接復用，有效控制視覺輸出的一致性。將卡片劃分為5個區域：標題、次要信息、價格、圖片、標簽 ；同時列舉出各種字段空缺時的正常展示樣式，保證視覺設計統一性，提高了模塊的易用性及后期延展性。

4. 支持自定義，打造沉浸式體驗

在產品層面，為滿足多業務的個性化需求、豐富多場景的溝通需求，在微聊布局中，我們創新提出預留自定義區域，在網頁端右側新增第三欄的布局結構，通過打造沉浸式體驗，讓用戶瀏覽更專注，溝通更高效；業務方可根據自身業務需求，選擇兩欄或三欄的展示形式，方便實現快速接入；

06 數據總結

改版上線后微聊回復閱讀比提升了3.95%，表明相比于之前的單向發送，上線后雙方建立鏈接率有提升。

本次PC端微聊改版是由設計側主動推動并落地的項目，我們通過體驗的視角去洞見機會點，以體驗設計的方案為業務賦能，在協同中臺業務全流程中，實現設計價值的最大化。

最后感謝全體項目組成員的辛苦付出：孫巧玲、李洋、劉靜頤、汪洋、劉辰

作者：張華，視覺設計師

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@張華

題圖來自 Unsplash，基于CC0協議。