體驗設(shè)計 | 金山文檔組件界面全新升級

時間：2023-06-04 16:48:02 | 來源：網(wǎng)站運營

時間：2023-06-04 16:48:02 來源：網(wǎng)站運營

體驗設(shè)計 | 金山文檔組件界面全新升級：經(jīng)常使用金山文檔的細心用戶可能已經(jīng)發(fā)現(xiàn)，金山文檔移動端組件的界面已經(jīng)悄悄煥然一新，下面帶大家了解一下組件界面改版的全流程：

1.項目背景

2.改版原因

3.設(shè)計目標

4.設(shè)計實施
















項目背景

金山文檔作為一款長期為客戶服務(wù)的云辦公、云協(xié)作平臺，始終致力于把最簡單高效的辦公體驗和服務(wù)帶給每個人、每個組織，幫助個人和企業(yè)組織更高效的運行與發(fā)展


年初，線上辦公突然成為熱門話題，隨著金山文檔用戶量的激增、功能不斷完善及拓展，原有的移動端視覺風(fēng)格和交互體驗已經(jīng)無法滿足用戶日益增長的體驗需求，因此，我們在此契機之下發(fā)起這次金山文檔移動端組件改版項目




本次2.0改版對視覺層和交互層進行全面升級，致力于為用戶提供更完善的使用體驗







為什么要進行改版







視覺層

整體視覺形象粗糙，設(shè)計語言陳舊，視覺信息傳達不明確；圖標尺寸過小且樣式不統(tǒng)一，已經(jīng)不適應(yīng)越來越高清的大屏幕設(shè)備；頁面充斥著大量線條元素導(dǎo)致視覺效果凌亂




交互層

組件之間同類功能布局不一致，整體功能分類缺乏統(tǒng)一邏輯，增加用戶學(xué)習(xí)成本；標題工具欄功能圖標過于密集，對核心的協(xié)作功能引導(dǎo)帶來一定干擾




效率層

缺乏統(tǒng)一的視覺和交互規(guī)范，無法實現(xiàn)開發(fā)組件庫落地，以至于所有頁面都是獨立頁面，影響產(chǎn)品設(shè)計開發(fā)效率







設(shè)計目標

在對項目進行改版之前，我們與產(chǎn)品經(jīng)理露慧、李石通過大量的競品分析，結(jié)合自身產(chǎn)品的目標導(dǎo)向和框架，確立如下設(shè)計目標：













1.視覺語言的全面升級

摒棄過去陳舊的視覺風(fēng)格，重新打造全新、統(tǒng)一的設(shè)計語言




2.完善統(tǒng)一交互體驗

統(tǒng)一交互框架布局，加入轉(zhuǎn)場動畫及操作微動效，提升用戶的操作體驗感




3.搭建規(guī)范化的設(shè)計開發(fā)系統(tǒng)

建立顏色變量庫、控件庫和圖標庫，搭建開發(fā)組件庫，為后續(xù)的更新迭代打好效率基礎(chǔ)







1.視覺語言的全面升級




1）確立視覺風(fēng)格：

通過對流行趨勢的分析，我們確立了三個關(guān)鍵詞：簡潔、輕、白




簡潔：化繁為簡，清晰展示

頁面中原本大量的線條元素，以色塊成組取而代之，減少多重視覺層級，使視覺效果簡潔化、模塊清晰化
















輕：視覺輕盈，點到為止

去掉頭部的主題色，僅用于點綴，整體使用視覺更輕量的白色，弱化產(chǎn)品的重量
















白：白紙黑字，專注內(nèi)容

純白背景和純黑圖標文字，突出產(chǎn)品的屬性，讓用戶更聚焦關(guān)注文檔內(nèi)容
















2）定義圖標細節(jié)：

項目過程中，圖標經(jīng)歷了2次迭代




第1版圖標實現(xiàn)的效果，在IOS端顯示尺寸偏小，視覺上不利于點擊；在安卓機上圖標線條顯得很粗大，與文字效果不匹配；內(nèi)直角的效果在轉(zhuǎn)折處會比別處顯細；完全填充的尺寸不利于后續(xù)拓展




針對第一版的問題，經(jīng)過不斷打磨，第二版細節(jié)效果最終出爐：
















2.完善統(tǒng)一交互體驗

1）突出產(chǎn)品的核心理念：云協(xié)作













頂部工具欄屬于全局、低頻操作，卻承載了過多的功能，導(dǎo)致圖標密集，極大削弱了成員協(xié)作的感知，經(jīng)過與產(chǎn)品反復(fù)討論，確定改版方向為：突出品牌、精簡功能，專注協(xié)作，低頻操作隱藏到「更多」里面，高頻操作直接加入底部工具欄







2）交互動效、反饋：










工具（protopie）

在細節(jié)上，加入適量的交互動效及操作反饋，為用戶提供更完善的交互體驗







3）新交互嘗試：













原本的上下文菜單，左右滑動增加的操作步驟，隱藏的常用功能曝光率太低




改版后的上下文菜單，以圖標和文字的組合，功能可以完全展示，也省去了左右滑動查找的不便






















3.搭建規(guī)范化的設(shè)計開發(fā)系統(tǒng)

1）顏色變量庫

前期定義好顏色的代號、色值，寫入開發(fā)控件庫，后期可快速全局統(tǒng)一調(diào)整顏色
















2）控件庫、圖標庫規(guī)范

工欲善其事，必先利其器
















設(shè)計實施

在項目實施落地的過程中，實現(xiàn)了即時響應(yīng)、快速迭代




金山文檔組件是純網(wǎng)頁平臺，可以實現(xiàn)頁面即改即查，即查即改




項目進展過程中，經(jīng)歷過圖標的二次迭代、背景色3次迭代，由于前期已搭建好完善的變量庫和控件庫，實現(xiàn)快速迭代的同時幾乎不增加開發(fā)成本







最后

本次改版過程中嘗試了設(shè)計思維的突破、以及高效的項目開發(fā)完整流程；新界面風(fēng)格收到用戶好評，編輯協(xié)作數(shù)據(jù)均有較大提升，相信未來會給用戶帶來更好的產(chǎn)品，與諸君共勉