編輯導(dǎo)讀：文章作者對(duì)主導(dǎo)的一個(gè)中臺(tái)產(chǎn)品服務(wù)升級(jí)的過程進(jìn)行了梳理總計(jì)，從項(xiàng)目的基礎(chǔ)背景出發(fā)，到對(duì)目標(biāo)進(jìn)行拆解，復(fù)盤產(chǎn)品設(shè)計(jì)的邏輯推演過程，并對(duì)升級(jí)過后的版本進(jìn)行了介紹，與大家分享。

01 前言

中臺(tái)產(chǎn)品的基礎(chǔ)概念：中臺(tái)本質(zhì)是把一些公共、通用的部分從前臺(tái)業(yè)務(wù)中抽離出來，形成可復(fù)用的服務(wù)，讓前臺(tái)業(yè)務(wù)之間的信息形成互通和增強(qiáng)的能力；

其特點(diǎn)是業(yè)務(wù)或功能高度類似，高通用化。主要作用是為各接入方提供通用業(yè)務(wù)功能接口，幫助業(yè)務(wù)提升效率，為企業(yè)節(jié)約產(chǎn)研資源。

58微聊SDK是58集團(tuán)內(nèi)部的即時(shí)通訊工具，在業(yè)務(wù)中扮演的角色有客服、銷售、商家、經(jīng)紀(jì)人等。為全平臺(tái)提供快捷、穩(wěn)定、可定制的連接解決方案，全方位助力集團(tuán)業(yè)務(wù)發(fā)展。

02 背景

隨著集團(tuán)業(yè)務(wù)的擴(kuò)充和發(fā)展接入微聊的端口越來越多，58微聊SDK是整個(gè)集團(tuán)即時(shí)通訊工具的核心“出口”，SDK體驗(yàn)的好壞直接影響對(duì)應(yīng)業(yè)務(wù)的使用體驗(yàn)和發(fā)展。所以微聊SDK視覺交互體驗(yàn)升級(jí)至關(guān)重要。

微聊產(chǎn)品現(xiàn)狀分析：

1. 視覺交互樣式陳舊體驗(yàn)差、通用能力落后主流業(yè)務(wù)線能力同時(shí)缺少業(yè)務(wù)特色；
2. 高可定制化響應(yīng)效率低，需要接入方二次改造成本大，阻礙業(yè)務(wù)發(fā)展速度；
3. 高復(fù)用率，由于大多數(shù)新接入業(yè)務(wù)或平臺(tái)基于資源成本問題會(huì)直接復(fù)用，所以微聊SDK體驗(yàn)的好壞直接影響接入方的使用體驗(yàn)。

03 目標(biāo)

我們的產(chǎn)品目標(biāo)是打造體驗(yàn)一流、生態(tài)完善的全鏈接服務(wù)，對(duì)用戶使用體驗(yàn)直接負(fù)責(zé)，加強(qiáng)消息及提醒監(jiān)管；希望通過重構(gòu)各端微聊視覺交互，提升微聊整體視覺交互體驗(yàn)。

接下來將從中臺(tái)產(chǎn)品問題收集方法、主要界面框架，視覺語言升級(jí)，代碼整體升級(jí)以及沉淀通用組件庫等方面來說明本次升級(jí)的具體目標(biāo)：

• 提效：提升產(chǎn)品的復(fù)用性，節(jié)約產(chǎn)研資源；
• 一致性：提升體驗(yàn)一致性，降低用戶認(rèn)知成本；
• 易用性：符合使用者習(xí)慣與需求。

04 設(shè)計(jì)方法探索

首先了解下中臺(tái)產(chǎn)品的設(shè)計(jì)難點(diǎn)是什么？

中臺(tái)產(chǎn)品設(shè)計(jì)有兩大難點(diǎn)分別是：

• 需求分析難：場(chǎng)景多而廣，且不明確；很難找到精準(zhǔn)目標(biāo)用戶；設(shè)計(jì)目標(biāo)更加靈活多變
• 設(shè)計(jì)驗(yàn)證難：設(shè)計(jì)轉(zhuǎn)化提升？用戶反饋收集？

中臺(tái)產(chǎn)品前臺(tái)化過程

那么中臺(tái)產(chǎn)品面向前臺(tái)用戶產(chǎn)品化過程是？

通過以上問題分析，我們本次收集方法的重點(diǎn)就是“集中力量”只有集中各個(gè)業(yè)務(wù)方的交互、視覺、產(chǎn)品共同的力量，才能提供更貼近用戶的產(chǎn)品，從而符合用戶的使用體驗(yàn)，因此我們?cè)谇捌谡{(diào)研過程中做了下面幾件事：

1. 機(jī)制建立

首先2020年3月份我們成立了前臺(tái)中臺(tái)體驗(yàn)升級(jí)小分隊(duì)，集合團(tuán)隊(duì)的力量進(jìn)行問題收集及反饋，同時(shí)我們建立單周會(huì)、雙周會(huì)的會(huì)議機(jī)制保證我們各方信息可以及時(shí)同步達(dá)到一致；同時(shí)我們也對(duì)前臺(tái)業(yè)務(wù)的微聊產(chǎn)品經(jīng)理發(fā)起了功能調(diào)研。

最終我們對(duì)調(diào)研和走查結(jié)果進(jìn)行匯總，共發(fā)現(xiàn)53個(gè)體驗(yàn)問題和19個(gè)產(chǎn)品功能需求，更加明確了本次需求改版的的痛點(diǎn)。主要有：

（1）提升框架擴(kuò)展性

通過前期業(yè)務(wù)體驗(yàn)及產(chǎn)品功能調(diào)研，發(fā)現(xiàn)SDK的框架擴(kuò)展存在一定的局限性不利于產(chǎn)品長(zhǎng)期發(fā)展，通過高危提醒、吸頂卡片、表情擴(kuò)展、通用卡樣式等的增加來提升整體框架的擴(kuò)展性。

（2）縮短發(fā)送圖片路徑

增加圖片快捷發(fā)送，5步變3步，提升圖片發(fā)送效率。

2. 視覺升級(jí)

微聊產(chǎn)品本次視覺升級(jí)的目標(biāo)是強(qiáng)化產(chǎn)品的工具特性、親和力，同時(shí)提升用戶的使用識(shí)別效率和一致性。同時(shí)針對(duì)當(dāng)前版本存在的主要問題版本低-視覺陳舊、品牌感弱-獨(dú)立品牌感及與主品牌58的關(guān)聯(lián)性較弱、缺少業(yè)務(wù)特色-業(yè)務(wù)關(guān)聯(lián)性弱業(yè)務(wù)場(chǎng)景欠缺等問題進(jìn)行了以下優(yōu)化：

（1）品牌色優(yōu)化，強(qiáng)化品牌工具特性：

我們重新定義了微聊的品牌色，用戶進(jìn)入產(chǎn)品界面最直觀的就是色彩感知，通過對(duì)原本品牌色值、色相、飽和度的調(diào)整，讓產(chǎn)品更顯穩(wěn)重，凸顯產(chǎn)品的工具型特質(zhì)。

（2）大圓角設(shè)計(jì)，增加產(chǎn)品親和力：

通過對(duì)微聊界面的主要圖形元素、對(duì)話卡片、通用卡片、頭像、icon等視覺元素的圓角大小進(jìn)行整體調(diào)整控制，讓產(chǎn)品更加年輕有活力，同時(shí)更加適應(yīng)我們業(yè)務(wù)陌人生、強(qiáng)利益關(guān)系的場(chǎng)景，增加產(chǎn)品整體的親和力。

（3）簡(jiǎn)化視覺元素，減少溝通干擾：

為了減少使用雙方溝通過程中的干擾元素，增加信息顏色強(qiáng)弱對(duì)比，強(qiáng)化主要內(nèi)容，通過減少非必要視覺元素如線條的使用，降低使用者的識(shí)別成本，通過元素大小和間距的把控讓內(nèi)容呈現(xiàn)更加有層次感和空間感。

（4）通用卡片重構(gòu)，強(qiáng)化一致性：

通用卡片樣式陳舊，信息層次弱，且不能滿足當(dāng)前業(yè)務(wù)的快速迭代與發(fā)展，本次信息卡片重構(gòu)，增加親和力的同時(shí)兼顧信息主次對(duì)比，強(qiáng)化主體信息和視覺一致性。

3. 組件沉淀

微聊產(chǎn)品包含信息列表、會(huì)話、群管理、搜索等主要框架頁面，我們通過對(duì)主體框架的組件沉淀，通用視覺元素的合并抽離，形成豐富的組件庫，方便業(yè)務(wù)直接復(fù)用，有效控制視覺輸出的一致性。

4. 代碼升級(jí)

為了提升業(yè)務(wù)接入和二次改造的效率、節(jié)約產(chǎn)研資源，以視覺各平臺(tái)方聯(lián)合打造的視覺規(guī)范為基礎(chǔ)，技術(shù)層面對(duì)整體SDK代碼層面進(jìn)行同步優(yōu)化，讓代碼接入更高效，更好的保證集團(tuán)微聊產(chǎn)品的視覺一致性。

05 新版預(yù)告

微聊SDK預(yù)計(jì)9月底全面上線目前微聊產(chǎn)品支持的端口多達(dá)200+，包含了4大主流端口，分別為移動(dòng)端、網(wǎng)頁端、M端、小程序端。

四大優(yōu)勢(shì)

1. 功能全面-基礎(chǔ)聊天功能、業(yè)務(wù)特色拓展、及時(shí)響應(yīng)新需求；
2. 高效穩(wěn)定-單日千萬級(jí)消息收發(fā)，加密傳輸，離線推送；
3. 接入簡(jiǎn)單-快速對(duì)接、UI集成、專業(yè)技術(shù)服務(wù)、豐富的經(jīng)驗(yàn)積累；
4. 數(shù)據(jù)反饋-核心數(shù)據(jù)報(bào)表、自定義數(shù)據(jù)報(bào)表、消息總線實(shí)時(shí)同步。

六大能力

1. 會(huì)話模式支持單聊、群聊、客服、公眾號(hào)；
2. 消息類型支持文字消息、語音消息、圖片消息、表情、位置消息、文件消息、視頻消息、視頻消息及自定義消息；
3. 音視頻通話支持音頻通話、視頻通話及IP電話；
4. 會(huì)話管理支持會(huì)話列表、刪除會(huì)話、會(huì)話置頂、會(huì)話新消息提醒、會(huì)話未讀、消息數(shù)、繪畫消息提醒免打擾；
5. 消息功能支持消息撤回、消息閱讀回執(zhí)、群@消息、消息刪除；
6. 還有用戶資料同步、敏感詞過濾、離線推送、禁言。

最后感謝全體項(xiàng)目組成員的辛苦付出：張莉、孫巧玲、李洋、張華、李建、汪洋、申玉姝

作者：劉靜頤，視覺設(shè)計(jì)師

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

題圖來自Unsplash，基于CC0協(xié)議