
當前金山項目管理功能迭代迅速,基礎功能仍在完善。在短時間內優先滿足基礎功能可使用的前提下,其滯留的視覺、交互、體驗等多方面的問題,會造成用戶使用體驗下降。

●視覺層

▲ 金山項目管理v1.0
根據頁面所示,我們總結了以下幾點來概括之前視覺呈現的不足

◑設計目標/ 確定目標
從而設計目標最終達到:視覺觸達、體驗升維;

▲ 根據問題的解決方法,從而得到設計目標
◑設計策略/問題攻克
●視覺觸達
金山項目管理承載着大量的產品信息,信息展示密度較大。通過明確視覺層級、視覺符號一致性等來幫助用戶認知減負。
01 認知減負:構建清晰的內容視覺層級
在1.0版本中存在視覺混亂、視覺層級不清晰等情況,用戶在理解層面上存在一定的負擔;其中列表視圖是用戶使用場景最多的一個場景視圖。
於是,我們根據問題做了一系列的優化:
▲ 針對標籤欄進行優化調整

▲ 針對常用基礎控件「標籤」進行優化調整

在我們的產品矩陣中,還有其它項目形成了我們的業務體系,所以利用本次視覺升級,由金山項目管理牽引建立統一的視覺體驗。
在後續其它項目的研發中使用統一設計規範及視覺表達更能幫助設計師提升效率和用戶認知減負,並降低研發實現成本。
▲ 不同產品的表格視圖
03 視覺降噪:優化信息展示助力視覺降噪
在1.0版本中,看板視圖的視覺表達並不是很清晰,內容過多,整體視覺信息層級較弱,容易帶給用戶雜亂的視覺體驗。
在2.0改版中我們將字段進行了優先級分類,字段名稱和內容則按照上下結構的方式進行展示,從一定程度上為用戶做了視覺排序。
●體驗升維
在1.0版本中,列表視圖單元格編輯或功能入口等都存在會困擾用戶的問題,我們在2.0中有效的解決了這些影響較大的問題。
所以我們在2.0升級中將成員入口提取出來,和項目的任務搜索功能放置一處,並取消了項目本身多餘的Tab入口展示。
▲ 升級前:點擊一次後觸發對應操作

▲ 升級後:點擊一次後觸發鎖定,點擊兩次後觸發對應操作
任務詳情頁是聚焦展示某一個任務的相關內容信息。在詳情頁的升級中,我們將字段進行了分類處理,將信息進行模塊化展示,不僅可以快速幫助用戶獲取信息,也可以為後續的功能展示做配置化處理;
在字段內容的展示上,我們也做了結構展示優化。

◑總結/ 全盤迴顧
●建立規範——降本提效
清晰的視覺效果及較為友好的交互體驗也助力產品在未來的發展道路上更上一層樓。
以上則是我們做的一些階段性成果,而這僅僅是一個開始,後續我們也將會不斷完善產品中的不足,為用戶營造更好的產品使用體驗。
----------------------------
關注我們,下期內容更精彩~
