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

01?產品背景

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

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

1. 舊版存在的問題

• 視覺語言陳舊：整體視覺形象粗糙，設計語言陳舊，視覺信息傳達不明確；圖標尺寸過細且樣式不統一，已經不適應越來越高清的大屏幕設備。
• 信息獲取混亂：消息的閱讀體驗較低。左右結構，頭像過大導致屏占比過高影響閱讀效率，次級信息視覺過重導致閱讀會受到視覺打擾。
• 協同效率較低：缺乏統一的視覺和交互規范，無法實現開發組件庫落地，以至于所有頁面都是獨立頁面，影響產品設計開發效率。

02 設計目標

在對項目進行改版之前，我們與產品經理梁超、交互設計師菜頭同學通過過大量的競品分析，結合自身產品的目標導向，確立如下設計目標：

03 設計實施

1. 視覺升級強化品牌認知

（1）品牌色：

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

（2）圖標：

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

（3）組件元素：

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

（4）網格布局：

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

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

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

群聊場景

單聊場景

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

在新版PC聯系人列表中我們制定了新的置頂區域。當頭像置頂后優先級是最高的。用戶可以提前進行優先級判斷。

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

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

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

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

4. 建立設計系統提高開發設計效率

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

04 項目總結

企業服務產品與C端產品存在很多差異性。C端產品用戶可以自由選擇每個領域體驗最好的產品。因為他們的使用場景之間并不存在必然的關聯性。而企業服務產品除了產品體驗要好以外還要越來越走向集成化。

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

作者：朱超，視覺設計師

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

題圖來自Unsplash，基于CC0協議