為了降低業(yè)務(wù)人員的操作和使用成本，設(shè)計團隊往往需要做好設(shè)計優(yōu)化。這篇文章里，作者就結(jié)合具體案例，總結(jié)了自己的設(shè)計思路，一起來看看，或許會對你有所啟發(fā)。

前言

項目前期，工作中常遇到整個功能進行迭代的情形，工作量會較大。接下來以一個工作中一個模塊整體為例，分享筆者的設(shè)計思路，如果有不同想法和意見的，隨時可以交流。

一、業(yè)務(wù)場景

再說測試中按照形式分為：手動和自動。自動需要機器測試用例之后將結(jié)果返回到之中進行?，F(xiàn)在大部分業(yè)務(wù)之中，很少有自動統(tǒng)一全流程，一般是由自動測試完成之后測試工程師進行修正的過程。

二、業(yè)務(wù)難點

1. 內(nèi)容層級多且雜，查看成本高

優(yōu)化前分層簡單：表格展示與詳情，但是在詳情之中不僅僅是嵌套的測試逐步的諸多流程結(jié)果，還有里面的詳情信息表格，還要嵌套著詳情頁。

就像一個樹選擇一樣，層級少，但是內(nèi)容深度過深。內(nèi)容場景復(fù)雜，信息查看成本高。

2. 操作選項多，用戶操作成本高

優(yōu)化前一鍵下發(fā)堆積操作達到24個，測試主管查看成本高。心理預(yù)期壓力大，填入過長時間拉長。

3. 詳情信息拓展不足，無法繼續(xù)承載業(yè)務(wù)需求

業(yè)務(wù)需求拓展，需要添加業(yè)務(wù)部門新增的測試步驟展示，以及每個收集的測試情況的拓展?，F(xiàn)有空間已經(jīng)達到了內(nèi)容查看的閾值，無法再承載新的業(yè)務(wù)部門需求。

4. 詳情信息不夠直觀，查看效率低

多個業(yè)務(wù)團隊反饋現(xiàn)有信息過多，無法直觀的查看單個流程測試結(jié)果以及多少輪次數(shù)。而現(xiàn)在的功能無法支撐查看場景。

5. 用例布局不合理，內(nèi)容信息首屏曝光率低

單次詳情優(yōu)化前自上而下的分布，上部詳情部分過高以及設(shè)備列表橫排展現(xiàn)，導(dǎo)致用首屏曝光率過低，底部的操作區(qū)域即使是大屏也要滑動到第二屏，操作成本也高。

6. 頁面架構(gòu)曖昧，區(qū)分度不高

優(yōu)化前頁面基礎(chǔ)信息以及設(shè)備列表沒有明顯的分割，而設(shè)備列表與設(shè)備信息的分割由一個篩選進行分割，無法在信息上進行直觀的對應(yīng)，識別難度難度較大。

三、優(yōu)化措施

1. 拆解空間，明確用戶所在

優(yōu)化后將空間拆分成：“總（抽屜）-分（首飾盒）-詳（首飾）”，內(nèi)容拆分，測試工程師通過內(nèi)容快速定位當前的位置，緩解導(dǎo)航迷茫。

2. 信息層級歸類，樹形態(tài)清晰展示

業(yè)務(wù)部門添加團隊架構(gòu)顯示需求，在設(shè)計采用樹結(jié)構(gòu)呈現(xiàn)，用戶快速定位到自己所在的團隊。

3. 分步拆解操作，快速下發(fā)任務(wù)

一鍵下任務(wù)操作復(fù)雜，需要完成24項內(nèi)容。優(yōu)化后將所有的操作分為：測試準備和資源準備2步進行分發(fā)完成。并且細化操作將專項的的三級選擇以級聯(lián)選擇呈現(xiàn)，用戶減少操作流程，提高選擇效率。

4. 拆解信息，明確層級

將測試流程以及結(jié)果自上而下流程化展現(xiàn)，并且以手風(fēng)琴的交互方式提高頁面內(nèi)容的承載力。

5. 多樣化展示，流程可視化展現(xiàn)階段測試結(jié)果

相對于表格數(shù)據(jù)的復(fù)雜，規(guī)則樹的可視化的呈現(xiàn)方式更直接的呈現(xiàn)每項測試在每個環(huán)節(jié)的結(jié)果。在交互上參考VSod開發(fā)軟件的縮略圖的交互方式，降低用戶的操作成本，也更加符合程序開發(fā)人員的軟件操作習(xí)慣。

6. 明確分類，基礎(chǔ)與詳情區(qū)分

子詳情優(yōu)化后，打破內(nèi)容之間的曖昧，將基礎(chǔ)信息和設(shè)備詳情解耦，設(shè)備列表與測試詳情強化耦合性進行1V1的強綁定。

7. 信息快速匹配，設(shè)備與詳情左右映射

在設(shè)備詳情部分，采用列表與詳情左右分布，采用金店或者是首飾店中首飾與標簽的方式實現(xiàn)設(shè)備與測試內(nèi)容對的強信息綁定。

一點點思考

線上反映線下的場景，很多場景或者是產(chǎn)品設(shè)計可以參考線下的場景或者是產(chǎn)品?；蛟S也是一種新的解決方式，這種設(shè)計方式或許有一些奇怪，期待與讀者的交流與溝通。