

通過用戶訪談和項目組線上內部討論,我們總結舊版美事的問題集中在以下三點:
品牌調性不清晰,缺乏品牌感;
協同辦公核心功能不突出;
辦公平台定位與內部運營框架混亂功能分散。
所以本次改版的主要設計手段為:
重新定義產品主色
舊版美事的品牌色為橙色,寓意:友善,溫暖,充滿活力。從最早以內部溝通為核心功能的產品,到如今的在線協同辦公平台,隨着業務不斷擴張和發展,我們的用戶往往每天都要長時間使用我們的產品,大面積的橙色占比往往使用戶更易疲勞。品牌色升級,從暖色系回歸冷色系,只為向我們的用戶傳達:高效、安全、穩定、可信任的產品使用感受。

品牌標識升級
每一個品牌升級都不可避免的從重繪 logo 開始。對於58員工而言,美事有着讓人印象深刻的橙子造型,所以我們保留這一份視覺」記憶「,希望可以延續用戶對美事最直接的品牌認知。我們在創意上保持克制的同時,將新的品牌心智注入進品牌形象中,結合「傳橙 收穫 成長 開放 」的新願景,進行logo的抽象化設計表達。

設計語言升級
伴隨美事6.0品牌升級,如何增強用戶在產品層面的感知成為品牌滲透中的重點。我們將更清爽、更高效、更靈活的設計理念引入美事的設計語言中。面對更為複雜的場景,需要框架性、整體性的思考,更需要在交互路徑上降低用戶使用門檻。

結合品牌升級中對美事品牌色的重新定義,延展出豐富的色彩體系,並應用於產品頁面設計中,最終構建出美事的色彩組件。通過對線上顏色統一運用提升產品的一致性和清爽度。
提高消息列表清爽度:通過提高文字梯度、降級輔助文字灰度,弱化分割線顏色等手段提高用戶辦公場景下的閱讀體驗,使關鍵信息更突出,便於用戶快速閱讀和信息速覽。
加大消息氣泡、文字字號,拉高底部輸入欄高度,強化icon顏色純度,提高用戶溝通場景界面的清爽度。
更高效
在新美事中使用更直觀更簡潔的圖標設計。只為讓用戶更關注內容本身,通過把握圖標核心辯識點降低用戶理解成本高效傳遞信息。
更靈活
為保證產品一致性,避免用戶在使用不同功能時產生割裂感,設計的規範、統一的組件、一致的設計語言就變得至關重要,我們力求每個組件的樣式多樣性以適應不同場景,同時也為產品後續的開放能力建設打好基礎。通過組件庫、規範文檔設計師可以直接基於典型頁面做設計、復用或者修改細節,極大提升設計和產品研發效率。


滿足個性需求-靈活可配置的導航
隨着產品功能的不斷豐富,為了應對用戶精準的差異化需求新版底部導航區支持自定義,通過這樣的自定義,讓用戶以最快的速度、最簡潔的操作進行快速跳轉從而減少用戶行為路徑提高產品易用性。
提升協同效率從愉悅溝通開始!人是要被鼓勵的,文檔的一個點讚或者在聊天中一個鼓掌的表情都會讓你在日復一日的平凡工作中感受到自己的價值。美事6.0新表情與品牌因子進行了融合,並針對辦公場景設計了全新emoji表情,只為用戶溝通更愉悅。另外我們對表情面板進行了優化,交互邏輯從左右翻頁升級為下拉滾動,減少了操作步長,提高了查找速度。
聚焦用戶場景-協同觸達更多樣
觸達1:從早期單純的IM溝通工具,美事不斷集成公司各類協作應用(例如:日曆、待辦、文檔、視頻會議、直播等),變身為多工具、多業務的數據互通的一體化的協同辦公平台。從「工具」到「平台」,我們將原來的「應用中心」升級為「全新工作檯」。新版工作檯涵蓋協同辦公領域數種功能,真正實現了企業內部各業務的高效協同。在視覺上,我們對100+應用圖標進行了重繪,在保留延續性的同時讓他們更符合界面場景。
觸達2:通過工具的變革,提升員工工作效率,讓企業運轉的更流暢。在新版設計中,用戶打開APP不用切換導航欄,即可從消息頁進入所有核心入口。另外,下拉二樓與待辦系統進行了數據打通,「今日待辦」讓用戶快速了解今日重要事。消息頁加號、下拉二樓、3Dtouch等多人口的加入,滿足用戶的各種使用習慣。

新發現:聚焦信息分發運營
新版的個人中心與美事勳章系統進行了數據打通,交互方式藉助手機陀螺儀功能,通過手機扭轉移動,勳章會在X軸水平位移滾動。此功能的設計,給用戶提供趣味性體驗,提升用戶心智,增加品牌傳播。另外新版電子工卡功能做了精細化打磨,加入了動效隱喻提高了視覺層級,增強了用戶點擊欲。

感謝您的閱讀,以上內容由58UXD團隊創作與設計,謝謝UXD團隊每一位設計師用心創作與支持~ 也期待您的加入。


