編輯導(dǎo)讀：在產(chǎn)品的迭代升級(jí)過(guò)程中，改版設(shè)計(jì)是常常會(huì)遇到的問(wèn)題。文章對(duì)58集團(tuán)內(nèi)部即時(shí)通訊工作——微聊的升級(jí)改版進(jìn)行了詳細(xì)的梳理，對(duì)遇到的一些問(wèn)題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01 前言

如今，社交產(chǎn)品根據(jù)不同的需求和定位，已深入互聯(lián)網(wǎng)更多細(xì)分領(lǐng)域。按功能屬性可被劃分為通訊工具和社交平臺(tái)。除了能滿足人們?nèi)粘Ｉ钪屑磿r(shí)聊天的需求，最主要的是可以將網(wǎng)站信息與聊天用戶直接聯(lián)系在一起，滿足人們的公共社交需求。

02 背景

微聊是集團(tuán)內(nèi)部的高效即時(shí)通訊工具，連接了用戶、商家、客服等不同角色。最為接入業(yè)務(wù)數(shù)最多的中臺(tái)能力，是實(shí)現(xiàn)業(yè)務(wù)連接 、商業(yè)轉(zhuǎn)化的有力支撐。

微聊接入業(yè)務(wù)近幾年，隨著公司業(yè)務(wù)的不斷增長(zhǎng)、產(chǎn)品結(jié)構(gòu)復(fù)雜化，微聊在承接業(yè)務(wù)過(guò)程中收到用戶及業(yè)務(wù)方的反饋：微聊風(fēng)格陳舊、各端體驗(yàn)不一致，且微聊回復(fù)率低，擴(kuò)展性較差。

目前同城業(yè)務(wù)已經(jīng)覆蓋包括App端、M端、小程序等平臺(tái)，但仍有大量用戶習(xí)慣使用網(wǎng)頁(yè)端58，這些用戶的使用體驗(yàn)仍是我們需要重點(diǎn)關(guān)注的。

03 重新定義

58同城正在從“流量型”平臺(tái)轉(zhuǎn)向“服務(wù)型”平臺(tái)。新技術(shù)的應(yīng)用加大了用戶與商戶之間的連接數(shù)量和連接效率，促進(jìn)交易的發(fā)生。我們的產(chǎn)品目標(biāo)是打造體驗(yàn)一流、生態(tài)完善的全鏈接服務(wù)，幫助集團(tuán)全業(yè)務(wù)發(fā)展。面對(duì)現(xiàn)有的訴求點(diǎn) ，我們發(fā)起了對(duì)網(wǎng)頁(yè)端微聊改版項(xiàng)目。

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

結(jié)合中臺(tái)業(yè)務(wù)特點(diǎn)，我們重新定義微聊，微聊不僅僅是輕量聊天工具，也是助力各業(yè)務(wù)的全鏈接服務(wù)生態(tài)；作為中臺(tái)能力，除了為集團(tuán)各業(yè)務(wù)提供標(biāo)準(zhǔn)化服務(wù)，高復(fù)用性、快速接入以外，還具備擴(kuò)展性，支持業(yè)務(wù)自定義。

04 設(shè)計(jì)目標(biāo)

為了讓產(chǎn)品更符合用戶預(yù)期，最大化滿足業(yè)務(wù)需求，針對(duì)PC端微聊方案改版，我們確定本次改版設(shè)計(jì)目標(biāo)。

• 在業(yè)務(wù)層面：提高微聊連接率，進(jìn)一步實(shí)現(xiàn)商業(yè)轉(zhuǎn)化；
• 從用戶角度：提升使用體驗(yàn)，溝通更高效；
• 從設(shè)計(jì)內(nèi)部角度：提升微聊品質(zhì)感，讓微聊更具包容性和擴(kuò)展性

05 設(shè)計(jì)實(shí)施

設(shè)計(jì)流程中 我們通過(guò)洞察問(wèn)題點(diǎn)并挖掘多方訴求來(lái)尋找機(jī)會(huì)點(diǎn)，確定設(shè)計(jì)目標(biāo)后并進(jìn)行拆解落地，通過(guò)對(duì)數(shù)據(jù)驗(yàn)證，從而展開后續(xù)的迭代規(guī)劃。

在改版前期 ，針對(duì)舊版頁(yè)面進(jìn)行問(wèn)題梳理，主要包括三個(gè)方面：

• 在視覺(jué)層界面-風(fēng)格陳舊；圖標(biāo)樣式不精細(xì)；干擾元素過(guò)多；
• 在交互層頁(yè)面信息結(jié)構(gòu)不明確；信息獲取不夠高效；
• 在產(chǎn)品層頁(yè)面功能單一，易用性不足；產(chǎn)品缺少記憶點(diǎn)。

我們對(duì)設(shè)計(jì)目標(biāo)進(jìn)行拆解，從以下4個(gè)點(diǎn)切入設(shè)計(jì)目標(biāo)并進(jìn)行落地：

1. 視覺(jué)語(yǔ)言升級(jí)，強(qiáng)化品牌感知

視覺(jué)升級(jí)中，在保持微聊原有圖形不變的前提下，對(duì)微聊品牌色進(jìn)行升級(jí)，在原有藍(lán)色系基礎(chǔ)上進(jìn)行加深，使其更符合高效、工具性特點(diǎn)；

同時(shí)為了強(qiáng)化品牌，利用微聊圖形的特征，在功能圖標(biāo)設(shè)計(jì)中使用相同的元素，加強(qiáng)品牌記憶點(diǎn)。在微聊界面頭部位置， 將圖形放大化作為背景，在潛移默化中加強(qiáng)用戶對(duì)微聊產(chǎn)品的感知。

2. 聚焦用戶場(chǎng)景 優(yōu)化信息結(jié)構(gòu)

在優(yōu)化信息層級(jí)中，對(duì)原有信息層級(jí)進(jìn)行梳理，并優(yōu)化信息結(jié)構(gòu)展示。減少溝通中干擾元素，增加信息強(qiáng)弱對(duì)比，強(qiáng)化重點(diǎn)內(nèi)容。固定了消息通知模塊，使用戶瀏覽更聚焦；同時(shí)壓縮帖子信息和輸入?yún)^(qū)，來(lái)增加消息瀏覽空間，使閱讀更有效率；

3. 組件化設(shè)計(jì)，提升一致性

為保證業(yè)務(wù)接入更高效，我們對(duì)通用功能卡片組件化，增加親和力的同時(shí)兼顧信息主次對(duì)比，強(qiáng)化主體信息和視覺(jué)一致性。

如在文件發(fā)送卡片中，固定卡片信息結(jié)構(gòu)，并列出文件縮略圖合集，方便適配各種文件發(fā)送場(chǎng)景；

同時(shí)在帖子信息卡片中， 通用視覺(jué)元素的合并抽離，形成豐富的組件庫(kù)，方便業(yè)務(wù)直接復(fù)用，有效控制視覺(jué)輸出的一致性。將卡片劃分為5個(gè)區(qū)域：標(biāo)題、次要信息、價(jià)格、圖片、標(biāo)簽 ；同時(shí)列舉出各種字段空缺時(shí)的正常展示樣式，保證視覺(jué)設(shè)計(jì)統(tǒng)一性，提高了模塊的易用性及后期延展性。

4. 支持自定義，打造沉浸式體驗(yàn)

在產(chǎn)品層面，為滿足多業(yè)務(wù)的個(gè)性化需求、豐富多場(chǎng)景的溝通需求，在微聊布局中，我們創(chuàng)新提出預(yù)留自定義區(qū)域，在網(wǎng)頁(yè)端右側(cè)新增第三欄的布局結(jié)構(gòu)，通過(guò)打造沉浸式體驗(yàn)，讓用戶瀏覽更專注，溝通更高效；業(yè)務(wù)方可根據(jù)自身業(yè)務(wù)需求，選擇兩欄或三欄的展示形式，方便實(shí)現(xiàn)快速接入；

06 數(shù)據(jù)總結(jié)

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

本次PC端微聊改版是由設(shè)計(jì)側(cè)主動(dòng)推動(dòng)并落地的項(xiàng)目，我們通過(guò)體驗(yàn)的視角去洞見(jiàn)機(jī)會(huì)點(diǎn)，以體驗(yàn)設(shè)計(jì)的方案為業(yè)務(wù)賦能，在協(xié)同中臺(tái)業(yè)務(wù)全流程中，實(shí)現(xiàn)設(shè)計(jì)價(jià)值的最大化。

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

作者：張華，視覺(jué)設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@張華

題圖來(lái)自 Unsplash，基于CC0協(xié)議。