編輯導(dǎo)語：在產(chǎn)品的迭代升級過程中，改版設(shè)計是常常會遇到的問題。文章對58集團(tuán)內(nèi)部協(xié)作平臺——美事的升級改版進(jìn)行了詳細(xì)的梳理，對遇到的一些問題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01?產(chǎn)品背景

美事作為58集團(tuán)的內(nèi)部溝通協(xié)作工具，服務(wù)全公司2萬多名員工，始終致力于把最簡單高效的辦公體驗和服務(wù)帶給每名員工、幫助個人和企業(yè)組織更高效的運(yùn)行與發(fā)展。

年初，因為疫情影響。線上辦公突然成為熱門話題。隨著企業(yè)內(nèi)部用戶量的激增、功能不斷完善及拓展，原有的PC端美事視覺風(fēng)格和交互體驗已經(jīng)無法滿足用戶日益增長的體驗需求。正值產(chǎn)品底層服務(wù)商更換為集團(tuán)自主研發(fā)的微聊之際。因此，我們在此契機(jī)之下發(fā)起這次美事PC端改版項目。

1. 舊版存在的問題

• 視覺語言陳舊：整體視覺形象粗糙，設(shè)計語言陳舊，視覺信息傳達(dá)不明確；圖標(biāo)尺寸過細(xì)且樣式不統(tǒng)一，已經(jīng)不適應(yīng)越來越高清的大屏幕設(shè)備。
• 信息獲取混亂：消息的閱讀體驗較低。左右結(jié)構(gòu)，頭像過大導(dǎo)致屏占比過高影響閱讀效率，次級信息視覺過重導(dǎo)致閱讀會受到視覺打擾。
• 協(xié)同效率較低：缺乏統(tǒng)一的視覺和交互規(guī)范，無法實現(xiàn)開發(fā)組件庫落地，以至于所有頁面都是獨(dú)立頁面，影響產(chǎn)品設(shè)計開發(fā)效率。

02 設(shè)計目標(biāo)

在對項目進(jìn)行改版之前，我們與產(chǎn)品經(jīng)理梁超、交互設(shè)計師菜頭同學(xué)通過過大量的競品分析，結(jié)合自身產(chǎn)品的目標(biāo)導(dǎo)向，確立如下設(shè)計目標(biāo)：

03 設(shè)計實施

1. 視覺升級強(qiáng)化品牌認(rèn)知

（1）品牌色：

品牌色的選取至關(guān)重要，新版PC延續(xù)美事的品牌橙，除了配合移動端的用色外也考慮到PC端的呈現(xiàn)效果。與移動端不同我們大量使用白色，增加產(chǎn)品輕盈感。

（2）圖標(biāo)：

改版前icon風(fēng)格各異，沒有按照使用場景進(jìn)行分類。改版后，將消息區(qū)icon弱化，降低視覺比重，統(tǒng)一為線狀icon，并且在黑色上也加入了藍(lán)色的色相更突顯辦公屬性。

（3）組件元素：

舊版美事界面中我們使用了全圓角按鈕，全圓角按鈕的優(yōu)點(diǎn)是能使產(chǎn)品圓潤有趣。隨著業(yè)務(wù)從工具到平臺化的訴求，全圓角的缺點(diǎn)也顯現(xiàn)出來，比如當(dāng)全圓角按鈕帶有可用的嵌套選項時。點(diǎn)擊區(qū)域就不如直角或半圓角體驗好，通過改變圓角幅度.不僅能在交互上體驗更好。還能向用戶傳遞嚴(yán)謹(jǐn)、安全的產(chǎn)品理念。

（4）網(wǎng)格布局：

在整個改版中我們使用4PX網(wǎng)格系統(tǒng)作為基礎(chǔ)UI元素定位，目的是為了保證頁面布局的靈活性、使模塊劃分更清晰從而提升閱讀效率。增加視覺呈現(xiàn)的節(jié)奏和韻律感。

2. 信息降噪消除信息過載

除了視覺上的打磨以外，在新版美事中我們還對IM溝通的基礎(chǔ)體驗進(jìn)行了優(yōu)化。在群聊中相同成員連續(xù)發(fā)出的信息，該用戶的頭像和名字只顯示在第一條信息上，這種形式讓整個聊天窗口看起來十分精簡，更像是一個記錄板。在單聊場景下也同樣摒棄了多余元素還原內(nèi)容本質(zhì)。讓內(nèi)容發(fā)聲，使用戶沉浸在內(nèi)容本身。

群聊場景

單聊場景

信息對齊充分是一個高效率組織、有活力組織的必要因素，我們每天要處理成百上千條信息，如何處理好這些有效信息，篩選出有價值的信息，其實是一件比較難的事。在溝通場景中每個角色、群組、通知、討論組他們本質(zhì)上都是信息源，他們創(chuàng)造、分享信息，所以在新版美事中我們希望用戶對這些不同的信息源提前進(jìn)行優(yōu)先級的判斷，并且給予不同的處理方式。

在新版PC聯(lián)系人列表中我們制定了新的置頂區(qū)域。當(dāng)頭像置頂后優(yōu)先級是最高的。用戶可以提前進(jìn)行優(yōu)先級判斷。

3. 完善交互引入動效框架

引導(dǎo)頁的價值不言而喻，即能把產(chǎn)品核心功能高度展示，也是用戶學(xué)習(xí)接受的第一步，另外還可以作為品牌的展示。為此我們使用組內(nèi)中臺插畫系統(tǒng)。配合AE動效。增加引導(dǎo)頁的趣味感和精細(xì)度。

在動效落地上我們聯(lián)合開發(fā)同學(xué)，加入了lottie動畫框架。我們計劃會在loading加載、tips提示、空數(shù)據(jù)界面、卡片等模塊加入微動效提升用戶體驗。

在動效制作過程中運(yùn)用AE插件保持動效運(yùn)動規(guī)律一致。本次引導(dǎo)頁的工程文件和所用到的插件，感興趣的朋友可以在文末掃碼添加小助理進(jìn)群獲取。

4. 建立設(shè)計系統(tǒng)提高開發(fā)設(shè)計效率

設(shè)計系統(tǒng)不僅僅只是界面設(shè)計的規(guī)范而已，更是團(tuán)隊的工作方式和團(tuán)隊所注重的核心價值。為此我們在改版中期就著手搭建PC組件庫。目的是幫助產(chǎn)品保持一致的設(shè)計語言和風(fēng)格，給用戶一致的產(chǎn)品體驗。

04 項目總結(jié)

企業(yè)服務(wù)產(chǎn)品與C端產(chǎn)品存在很多差異性。C端產(chǎn)品用戶可以自由選擇每個領(lǐng)域體驗最好的產(chǎn)品。因為他們的使用場景之間并不存在必然的關(guān)聯(lián)性。而企業(yè)服務(wù)產(chǎn)品除了產(chǎn)品體驗要好以外還要越來越走向集成化。

此次改版正是產(chǎn)品從工具走向平臺的第一步。以上就是我個人對本次PC改版的一些總結(jié)和思考，拋磚引玉，希望大家可以互相交流學(xué)習(xí)。

作者：朱超，視覺設(shè)計師

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

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