一、前言 / 項(xiàng)目背景

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

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

解決以上這些問(wèn)題，成了我們此次視覺(jué)升級(jí)的一個(gè)出發(fā)點(diǎn)，因此我們進(jìn)行了系統(tǒng)的排查或分類 ，針對(duì)問(wèn)題進(jìn)行逐一解決。

二、改版思路 / 步驟拆解

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

對(duì)此我們將此次視覺(jué)改版問(wèn)題拆分一下步驟：

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

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

1. 視覺(jué)層

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

金山項(xiàng)目管理 v1.0

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

金山項(xiàng)目管理 v1.0

2. 交互層

在 1.0 版本中成員入口層級(jí)模糊，對(duì)用戶的理解帶來(lái)了一定的困擾，同時(shí)也不利于功能的擴(kuò)展；

主要視圖「列表視圖」的信息內(nèi)容編輯容易造成誤觸，用戶體驗(yàn)較為不友好。因?yàn)槊芗男畔⒄故句仢M屏幕，用戶操作需精準(zhǔn)對(duì)應(yīng)相關(guān)內(nèi)容，易造成用戶緊張的心理情緒，所以提供更加便捷、容錯(cuò)率高的交互體驗(yàn)才更能滿足用戶的基本訴求。

四、設(shè)計(jì)目標(biāo) / 確定目標(biāo)

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

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

從而設(shè)計(jì)目標(biāo)最終達(dá)到：視覺(jué)觸達(dá)、體驗(yàn)升維；

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

五、設(shè)計(jì)策略 / 問(wèn)題攻克

1. 視覺(jué)觸達(dá)

金山項(xiàng)目管理承載著大量的產(chǎn)品信息，信息展示密度較大。通過(guò)明確視覺(jué)層級(jí)、視覺(jué)符號(hào)一致性等來(lái)幫助用戶認(rèn)知減負(fù)。

①認(rèn)知減負(fù)：構(gòu)建清晰的內(nèi)容視覺(jué)層級(jí)

在 1.0 版本中存在視覺(jué)混亂、視覺(jué)層級(jí)不清晰等情況，用戶在理解層面上存在一定的負(fù)擔(dān)；其中列表視圖是用戶使用場(chǎng)景最多的一個(gè)場(chǎng)景視圖。

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

針對(duì)標(biāo)簽欄進(jìn)行優(yōu)化調(diào)整

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

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

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

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

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

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

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

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

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

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

2. 體驗(yàn)升維

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

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

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

所以我們?cè)?2.0 升級(jí)中將成員入口提取出來(lái)，和項(xiàng)目的任務(wù)搜索功能放置一處，并取消了項(xiàng)目本身多余的 Tab 入口展示。

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

列表視圖是用戶管理任務(wù)使用場(chǎng)景時(shí)間最長(zhǎng)的一個(gè)視圖，用戶在信息量巨大的頁(yè)面上很容易觸發(fā)操作，導(dǎo)致用戶在該視圖中"小心翼翼"，往往會(huì)給用戶帶來(lái)壓迫感。

因此我們采用單元格二次點(diǎn)擊的交互操作來(lái)防止用戶誤觸發(fā)，即鼠標(biāo)點(diǎn)擊第一次選中單元格，鼠標(biāo)點(diǎn)擊第二次才可觸發(fā)對(duì)應(yīng)的功能操作。

升級(jí)前：點(diǎn)擊一次后觸發(fā)對(duì)應(yīng)操作

升級(jí)后：點(diǎn)擊一次后觸發(fā)鎖定，點(diǎn)擊兩次后觸發(fā)對(duì)應(yīng)操作

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

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

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

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

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

總結(jié) / 全盤(pán)回顧

通過(guò)本次視覺(jué)升級(jí)我們?cè)O(shè)計(jì)價(jià)值也體現(xiàn)在以下幾個(gè)方面：

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

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

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

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

解決問(wèn)題——體驗(yàn)升級(jí)

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

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

作者：CED設(shè)計(jì)團(tuán)隊(duì)