一、前言 / 項目背景

金山項目管理是為事務提供協作，為項目提供記錄、承載和集中管理的產品；

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

解決以上這些問題，成了我們此次視覺升級的一個出發點，因此我們進行了系統的排查或分類 ，針對問題進行逐一解決。

往期改版案例：

二、改版思路 / 步驟拆解

針對功能龐大、邏輯復雜的產品，我們要怎么去解決當前存在的問題？改動影響面是否超出預期？

對此我們將此次視覺改版問題拆分一下步驟：

三、問題分析 / 總結歸納

當前金山項目管理存在的問題更多是視覺和交互問題，解決這些問題的意義是在于功能信息的視覺及交互是每個產品的生存基礎。

1. 視覺層

金山項目管理 v1.0 其問題在于風格呆板，視覺層級混亂、視覺元素跳躍等，難以高效幫助用戶快速理解或接收產品信息，支持用戶高效操作。

金山項目管理 v1.0

根據頁面所示，我們總結了以下幾點來概括之前視覺呈現的不足

金山項目管理 v1.0

2. 交互層

在 1.0 版本中成員入口層級模糊，對用戶的理解帶來了一定的困擾，同時也不利于功能的擴展；

主要視圖「列表視圖」的信息內容編輯容易造成誤觸，用戶體驗較為不友好。因為密集的信息展示鋪滿屏幕，用戶操作需精準對應相關內容，易造成用戶緊張的心理情緒，所以提供更加便捷、容錯率高的交互體驗才更能滿足用戶的基本訴求。

四、設計目標 / 確定目標

根據以上問題歸納和分析，所以這次改版的目標明確為以下內容：

1. 內容呈現上：做到認知減負，引導抉擇，并且達到視覺資源可復用的目的；
2. 功能操作上：要防錯容錯，結構清晰，且字段內容展示可配置原則；

從而設計目標最終達到：視覺觸達、體驗升維；

根據問題的解決方法，從而得到設計目標

五、設計策略 / 問題攻克

1. 視覺觸達

金山項目管理承載著大量的產品信息，信息展示密度較大。通過明確視覺層級、視覺符號一致性等來幫助用戶認知減負。

①認知減負：構建清晰的內容視覺層級

在 1.0 版本中存在視覺混亂、視覺層級不清晰等情況，用戶在理解層面上存在一定的負擔；其中列表視圖是用戶使用場景最多的一個場景視圖。

于是，我們根據問題做了一系列的優化：

針對標簽欄進行優化調整

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

針對列表視圖「單元格表頭」進行優化調整

②視覺統一：建立可復用資源的視覺一致性

在我們的產品矩陣中，還有其它項目形成了我們的業務體系，所以利用本次視覺升級，由金山項目管理牽引建立統一的視覺體驗。

在后續其它項目的研發中使用統一設計規范及視覺表達更能幫助設計師提升效率和用戶認知減負，并降低研發實現成本。

不同產品的表格視圖

不同產品的信息詳情頁

③視覺降噪：優化信息展示助力視覺降噪

在 1.0 版本中，看板視圖的視覺表達并不是很清晰，內容過多，整體視覺信息層級較弱，容易帶給用戶雜亂的視覺體驗。

在 2.0 改版中我們將字段進行了優先級分類，字段名稱和內容則按照上下結構的方式進行展示，從一定程度上為用戶做了視覺排序。

2. 體驗升維

在 1.0 版本中，列表視圖單元格編輯或功能入口等都存在會困擾用戶的問題，我們在 2.0 中有效的解決了這些影響較大的問題。

①結構清晰：功能入口層級重塑

在 1.0 版本中「成員」和「項目」合并成了兩個獨立的入口在 Tab。這一處理方式會造成功能關系歸屬混亂；

所以我們在 2.0 升級中將成員入口提取出來，和項目的任務搜索功能放置一處，并取消了項目本身多余的 Tab 入口展示。

②防錯容錯：任務編輯防誤觸

列表視圖是用戶管理任務使用場景時間最長的一個視圖，用戶在信息量巨大的頁面上很容易觸發操作，導致用戶在該視圖中“小心翼翼”，往往會給用戶帶來壓迫感。

因此我們采用單元格二次點擊的交互操作來防止用戶誤觸發，即鼠標點擊第一次選中單元格，鼠標點擊第二次才可觸發對應的功能操作。

升級前：點擊一次后觸發對應操作

升級后：點擊一次后觸發鎖定，點擊兩次后觸發對應操作

③內容配置：建立可配置的模塊化內容

任務詳情頁是聚焦展示某一個任務的相關內容信息。在詳情頁的升級中，我們將字段進行了分類處理，將信息進行模塊化展示，不僅可以快速幫助用戶獲取信息，也可以為后續的功能展示做配置化處理；

在字段內容的展示上，我們也做了結構展示優化。

左右展示結構對于內容展示存在一定的局限性，很容易造成視覺調理不清晰等情況；且標題和內容之間的對比較弱；

因此我們也做了結構和視覺層級的調整：

總結 / 全盤回顧

通過本次視覺升級我們設計價值也體現在以下幾個方面：

建立規范——降本提效

制定基礎規范，并搭建了業務公共組件庫，為以后該業務范圍內的產品提供了基礎指導，降本提效；

數據優化——資源復用

協助研發完成新版視覺主頁面功能數據結構優化，為后續業務體系中其它產品搭建底層內容框架；

解決問題——體驗升級

清晰的視覺效果及較為友好的交互體驗也助力產品在未來的發展道路上更上一層樓。

以上則是我們做的一些階段性成果，而這僅僅是一個開始，后續我們也將會不斷完善產品中的不足，為用戶營造更好的產品使用體驗。

歡迎關注作者微信公眾號：「CED設計團隊」