一、前言 / 項目背景

金山項目管理是為事務(wù)提供協(xié)作，為項目提供記錄、承載和集中管理的產(chǎn)品；

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

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

二、改版思路 / 步驟拆解

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

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

三、問題分析 / 總結(jié)歸納

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

1. 視覺層

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

金山項目管理 v1.0

根據(jù)頁面所示，我們總結(jié)了以下幾點來概括之前視覺呈現(xiàn)的不足

金山項目管理 v1.0

2. 交互層

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

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

四、設(shè)計目標 / 確定目標

根據(jù)以上問題歸納和分析，所以這次改版的目標明確為以下內(nèi)容：

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

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

根據(jù)問題的解決方法，從而得到設(shè)計目標

五、設(shè)計策略 / 問題攻克

1. 視覺觸達

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

①認知減負：構(gòu)建清晰的內(nèi)容視覺層級

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

于是，我們根據(jù)問題做了一系列的優(yōu)化：

針對標簽欄進行優(yōu)化調(diào)整

針對常用基礎(chǔ)控件「標簽」進行優(yōu)化調(diào)整

針對列表視圖「單元格表頭」進行優(yōu)化調(diào)整

②視覺統(tǒng)一：建立可復用資源的視覺一致性

在我們的產(chǎn)品矩陣中，還有其它項目形成了我們的業(yè)務(wù)體系，所以利用本次視覺升級，由金山項目管理牽引建立統(tǒng)一的視覺體驗。

在后續(xù)其它項目的研發(fā)中使用統(tǒng)一設(shè)計規(guī)范及視覺表達更能幫助設(shè)計師提升效率和用戶認知減負，并降低研發(fā)實現(xiàn)成本。

不同產(chǎn)品的表格視圖

不同產(chǎn)品的信息詳情頁

③視覺降噪：優(yōu)化信息展示助力視覺降噪

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

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

2. 體驗升維

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

①結(jié)構(gòu)清晰：功能入口層級重塑

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

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

②防錯容錯：任務(wù)編輯防誤觸

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

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

升級前：點擊一次后觸發(fā)對應操作

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

③內(nèi)容配置：建立可配置的模塊化內(nèi)容

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

在字段內(nèi)容的展示上，我們也做了結(jié)構(gòu)展示優(yōu)化。

左右展示結(jié)構(gòu)對于內(nèi)容展示存在一定的局限性，很容易造成視覺調(diào)理不清晰等情況；且標題和內(nèi)容之間的對比較弱；

因此我們也做了結(jié)構(gòu)和視覺層級的調(diào)整：

總結(jié) / 全盤回顧

通過本次視覺升級我們設(shè)計價值也體現(xiàn)在以下幾個方面：

建立規(guī)范——降本提效

制定基礎(chǔ)規(guī)范，并搭建了業(yè)務(wù)公共組件庫，為以后該業(yè)務(wù)范圍內(nèi)的產(chǎn)品提供了基礎(chǔ)指導，降本提效；

數(shù)據(jù)優(yōu)化——資源復用

協(xié)助研發(fā)完成新版視覺主頁面功能數(shù)據(jù)結(jié)構(gòu)優(yōu)化，為后續(xù)業(yè)務(wù)體系中其它產(chǎn)品搭建底層內(nèi)容框架；

解決問題——體驗升級

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

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

作者：CED設(shè)計團隊