于B端用戶(hù)而言，待辦功能是相對(duì)常用的一個(gè)模塊，待辦模塊如果設(shè)計(jì)得不合理，則可能會(huì)降低整體的工作效率。這篇文章里，作者對(duì)待辦功能的設(shè)計(jì)優(yōu)化做了復(fù)盤(pán)總結(jié)，一起來(lái)看看吧。

待辦作為一個(gè)B端用戶(hù)常用的模塊，測(cè)試每天都需要在這里處理今天的全部任務(wù)，因此待辦對(duì)于測(cè)試的執(zhí)行者以及管理者而言具有提高工作效率的作用。通過(guò)任務(wù)清單、優(yōu)先級(jí)設(shè)定、進(jìn)度跟蹤等功能，可以更加清晰地了解自己的任務(wù)，及時(shí)完成任務(wù)，減少遺漏和延誤，從而提高整體工作效率。

一、業(yè)務(wù)場(chǎng)景以及難題

現(xiàn)有業(yè)務(wù)之中，待辦是測(cè)試執(zhí)行每天必看的板塊，但是現(xiàn)有的待辦出現(xiàn)了幾個(gè)問(wèn)題。

1. 空間布局擁擠，拓展性不足

現(xiàn)在業(yè)務(wù)之中待辦分類(lèi)是不斷地增加（現(xiàn)有6個(gè)），名字相對(duì)又很長(zhǎng)，最長(zhǎng)的有到7個(gè)字，再加上后面多語(yǔ)言要翻譯成英文在國(guó)外用戶(hù)使用，橫向空間完全不足。1920頁(yè)面的拓展性不足，小屏幕更佳難以使用。

2. 視覺(jué)平整，信息對(duì)比不強(qiáng)烈

現(xiàn)有的表格之中更多的是字和填充的按鈕呈現(xiàn)，整體的對(duì)比度較低，導(dǎo)致了用戶(hù)識(shí)別關(guān)鍵信息難度加大。

3. 表格復(fù)雜操作多，操作成本高

待辦針對(duì)的全部的測(cè)試角色，每個(gè)角色對(duì)于表格內(nèi)容的操作項(xiàng)的權(quán)限和需求都是不同的，既要查看到關(guān)鍵的信息，又要能快速的處理任務(wù)。

二、設(shè)計(jì)優(yōu)化

1. 優(yōu)化空間結(jié)構(gòu)，減去頂層統(tǒng)計(jì)

為了增加表格空間，刪除頂部統(tǒng)計(jì)卡片，將里面的統(tǒng)計(jì)信息總和信息以及環(huán)比信息放置到單選選項(xiàng)之中，提高表格的容量，降低用戶(hù)查找的成本。

2. 添加縱向展示，增加拓展性

在實(shí)際的業(yè)務(wù)之中，有的名字很長(zhǎng)（不算英文，有的6個(gè)7個(gè)字），再加上多語(yǔ)言版本還有統(tǒng)計(jì)數(shù)和提升的數(shù)字，導(dǎo)致了橫向空間會(huì)隨著設(shè)備的變化而變小，1920空間中最多只能承受6個(gè)內(nèi)容拓展性不足。

因此在橫向的基礎(chǔ)上添加了縱向展現(xiàn)切換模式，增強(qiáng)導(dǎo)航的內(nèi)容拓展性以及直觀性。

3. 導(dǎo)航多樣化元素，強(qiáng)化元素對(duì)比

不僅僅在交互形式之上做了優(yōu)化，也在不同的內(nèi)容之上適配不同的顏色還有圖標(biāo)，增強(qiáng)內(nèi)容的對(duì)比度的顏色圖標(biāo)與相關(guān)的任務(wù)進(jìn)行綁定，降低測(cè)試相關(guān)人員記憶與選擇的成本。

4. 表格元素樣式優(yōu)化，加強(qiáng)視覺(jué)對(duì)比

優(yōu)化前，表格主要使用的主色底的按鈕或者是藍(lán)色的字進(jìn)行鏈接呈現(xiàn)，表格內(nèi)容較多，呈現(xiàn)方式比較單一，內(nèi)容之間對(duì)比度很弱，用戶(hù)查看成本較高。因此先將所有的表格內(nèi)容進(jìn)行分類(lèi)：

1. 狀態(tài)：按照動(dòng)靜結(jié)合分為——階段結(jié)果（靜）和當(dāng)前所屬階段（動(dòng)）
2. 基礎(chǔ)信息：主要是測(cè)試要打達(dá)成的條件
3. 其他：設(shè)計(jì)到一些時(shí)間以及備注

這次的業(yè)務(wù)重點(diǎn)是優(yōu)化狀態(tài)顯示，除了擁有特別語(yǔ)義的顏色（黃，橙，紅，綠）外，其他的顏色的參考ANT Design的標(biāo)準(zhǔn)進(jìn)行呈現(xiàn)，還有關(guān)于臨期和逾期的事表達(dá)上遵循特殊語(yǔ)義顏色進(jìn)行表達(dá)。其他類(lèi)別中常見(jiàn)的進(jìn)度以進(jìn)度條的方式呈現(xiàn)。

5. 表格交互原話(huà)，減少操作距離

現(xiàn)有業(yè)務(wù)需求之中，測(cè)試相關(guān)人員要操作功能欄的內(nèi)容需要移動(dòng)到最右邊，為了用戶(hù)能更加快捷的使用。因此參考了用戶(hù)常用的單擊表格進(jìn)行郵件選擇操作，用戶(hù)可以點(diǎn)擊某個(gè)表格進(jìn)行相關(guān)的操作，這里在設(shè)計(jì)的時(shí)候需要考慮到用戶(hù)的操作權(quán)限，需要做好相關(guān)調(diào)研。

6. 自定義內(nèi)容，加強(qiáng)靈活性

業(yè)務(wù)中單個(gè)表格多達(dá)15到25個(gè)，單頁(yè)很長(zhǎng)放得下，全部看完需要滑動(dòng)多屏進(jìn)行查看。在交互上添加了自定義操作，用戶(hù)可以根據(jù)自己的喜好將表格定制為自己覺(jué)得合適的表格順序以及內(nèi)容。

7. 操作功能收納，增強(qiáng)功能區(qū)兼容性

現(xiàn)有的功能區(qū)是根據(jù)用戶(hù)權(quán)限做的顯示，常見(jiàn)的有4個(gè)至7個(gè)，導(dǎo)致了筆記本的適配效果以及功能的拓展性極差。所以，在交互上進(jìn)行了收納的操作，除了高頻的詳情以及編輯還有流程節(jié)點(diǎn)外，其余的由“更多”進(jìn)行收納，用戶(hù)點(diǎn)擊查看即可。

三、未來(lái)規(guī)劃

現(xiàn)有的右鍵原位操作只能支持單個(gè)，第二次迭代的會(huì)優(yōu)化群宇選擇優(yōu)化項(xiàng)。

四、效果驗(yàn)證

效果驗(yàn)證從主觀和客觀2個(gè)角度上進(jìn)項(xiàng)思考：

1. 主觀：?jiǎn)柧碚{(diào)研用戶(hù)滿(mǎn)意度提高12.3%。
2. 客觀：?jiǎn)雾?yè)表格容量從17提升到24，用戶(hù)編輯效率提高23.6%

總結(jié)

UX設(shè)計(jì)師工作時(shí)候除了要思考業(yè)務(wù)之外，更要思考用戶(hù)到底需要什么設(shè)計(jì)。最好的設(shè)計(jì)是“沒(méi)有設(shè)計(jì)”。