多數(shù)人在工作的時(shí)候會(huì)使用規(guī)則樹(shù)，對(duì)階段/節(jié)點(diǎn)和進(jìn)度很有效，下面這篇文章是筆者整理分享關(guān)于規(guī)則樹(shù)設(shè)計(jì)與業(yè)務(wù)的結(jié)合的相關(guān)內(nèi)容，想了解的同學(xué)可以進(jìn)來(lái)看看呀！

俗話說(shuō)的話：字不如表，表不如圖。圖在設(shè)計(jì)的表現(xiàn)中有很多種方式比如圖片數(shù)據(jù)概覽或者看板的方式，是一種通過(guò)視圖來(lái)表現(xiàn)的統(tǒng)稱。今天就講規(guī)則樹(shù)設(shè)計(jì)與業(yè)務(wù)的結(jié)合，希望對(duì)于讀者有所啟發(fā)。

一、業(yè)務(wù)情況

管理者需要自己屬下部門(mén)/相關(guān)類(lèi)型的每一個(gè)用例所處的節(jié)點(diǎn)以及狀態(tài)，對(duì)上要做匯報(bào)總結(jié)，對(duì)下要做KPI統(tǒng)計(jì)以及管理。

以前的路徑是就需要將用例所有相關(guān)的信息篩選出來(lái)進(jìn)行逐步的分析才能知道任務(wù)到達(dá)的進(jìn)度如何以及負(fù)責(zé)人是誰(shuí)，查看相對(duì)來(lái)講比較頻繁，因此信息的快速傳達(dá)比較關(guān)鍵。

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

現(xiàn)有業(yè)務(wù)場(chǎng)景中部門(mén)的管理者向上匯報(bào)前都要查詢和分析進(jìn)度，數(shù)據(jù)概覽也就是可視化數(shù)據(jù)部分只能從某個(gè)角度「整體項(xiàng)目/某一類(lèi)的項(xiàng)目等等」進(jìn)行分析，無(wú)法展現(xiàn)具體的具體達(dá)到的任務(wù)節(jié)點(diǎn)以及當(dāng)前節(jié)點(diǎn)/同屬節(jié)點(diǎn)的狀態(tài)，需要極長(zhǎng)的分析時(shí)間以及成本。大概把問(wèn)題分解為2個(gè)：

1. 數(shù)據(jù)操作復(fù)雜：現(xiàn)有業(yè)務(wù)中一個(gè)測(cè)試到計(jì)劃再到執(zhí)行中的用例，往往包含著幾百條數(shù)據(jù)，每條數(shù)據(jù)的詳情又有其自己的詳情要查看，就導(dǎo)致了內(nèi)容的左右橫跳。這只是查看還沒(méi)有算統(tǒng)計(jì)成本。
2. 信息呈現(xiàn)雜亂且層級(jí)不清：現(xiàn)有的表格是根據(jù)計(jì)劃/策略的優(yōu)先級(jí)以及時(shí)間進(jìn)行排序的，信息比較大（有的用戶要求加到一頁(yè)1000條之多）呈現(xiàn)上對(duì)于主管毫無(wú)規(guī)律?，F(xiàn)有的測(cè)試用例分別以5張表格進(jìn)行區(qū)分和收納，意味著每次都查看多張以上表格才能查看到完整的進(jìn)度，層級(jí)不夠明確。

三、解決措施

1. 為什么選擇規(guī)則樹(shù)？

1周經(jīng)過(guò)對(duì)20位主管進(jìn)行調(diào)研發(fā)現(xiàn)，主管更加關(guān)注的是節(jié)點(diǎn)進(jìn)度，至于負(fù)責(zé)人是需要進(jìn)行查看的，主要是確認(rèn)責(zé)任人。

總結(jié)一下就是以階段/節(jié)點(diǎn)為支撐/主干，呈現(xiàn)用例的進(jìn)度以及父子級(jí)的關(guān)系。在這之前想過(guò)常規(guī)的甘特圖和日程看板形式，但是分析下來(lái)如果以橫縱坐標(biāo)軸將甘特圖和日程看板形式分別拆解成是：

1. 甘特圖：X-資源消耗/資源名稱/任務(wù)進(jìn)度 Y-小時(shí)/天/星期
2. 日程看板：X-預(yù)約的事件 Y-天/周/月/年

從時(shí)間上講，每個(gè)策略在業(yè)務(wù)中的確能到3月到半年的強(qiáng)度，但是分到每一個(gè)測(cè)試用例可能才幾分鐘左右，著中時(shí)間跨度過(guò)大。從資源上講，項(xiàng)目中更加消耗的是人力資源，但是不是每個(gè)人都要參與到全流程，大部分人都只是做自己節(jié)點(diǎn)上的事情，所以并不適合。

從核心需求講，階段/節(jié)點(diǎn)和進(jìn)度尤其關(guān)鍵，而不是人力。因此我們選擇了規(guī)則樹(shù)的呈現(xiàn)方式。

2. 分層處理

1）底層-點(diǎn)狀背景，降低視覺(jué)疲勞

頁(yè)面需要用戶長(zhǎng)時(shí)間查看，純色無(wú)論是選擇白色還是灰色都會(huì)導(dǎo)致用戶視覺(jué)疲勞，從而降低查看的成本。同時(shí)也是引用了測(cè)試常見(jiàn)的“點(diǎn)點(diǎn)操作”，增加了行業(yè)屬性。
2）中層-固定分區(qū)，增強(qiáng)安全性

先將內(nèi)容區(qū)分成注釋區(qū)與樹(shù)選擇內(nèi)容，注釋置放在左上角呈現(xiàn)，內(nèi)容放到底部呈現(xiàn)。內(nèi)容再根據(jù)5個(gè)階段分成5個(gè)階段，從左到右進(jìn)行呈現(xiàn)，展現(xiàn)4級(jí)，收起第5級(jí)。

再講內(nèi)容分為：規(guī)則樹(shù)與詳情區(qū)域

為什么收起第5級(jí)？前4級(jí)數(shù)據(jù)相對(duì)來(lái)講比較固定會(huì)超過(guò)20，但是最后一級(jí)的用例執(zhí)行層，單條的同級(jí)可能有上百條，內(nèi)容量較大，頁(yè)面承載量較大，頁(yè)面承載壓力大，刷新速度慢。因?yàn)檫€有收縮的操作，數(shù)據(jù)數(shù)量激增的話，頁(yè)面的安全性就會(huì)降低。

3）收納內(nèi)容，增加安全性

將最后一級(jí)別固定到右邊的詳情頁(yè)內(nèi)容，并且以表格形式展現(xiàn)，可以容納幾百條測(cè)試用例信息，同時(shí)采用懶加載或者是分頁(yè)的交互方式提高頁(yè)面的數(shù)據(jù)加載速度，降低同時(shí)產(chǎn)生的數(shù)據(jù)朗以及收縮數(shù)據(jù)呈現(xiàn)的時(shí)間。

4）上層-操作層

操作分成2種：鼠標(biāo)的滾輪與左鍵的點(diǎn)擊

①鼠標(biāo)的滾輪-放棄放大縮小，采用左右滑動(dòng)

滾輪的放大縮小是現(xiàn)在常見(jiàn)的交互方式，尤其是在規(guī)則樹(shù)這種交互頁(yè)面之上。產(chǎn)品有他自己的特殊性，一旦全局放大縮小，表頭節(jié)點(diǎn)的分區(qū)就會(huì)一起跟著放大與縮小，就會(huì)導(dǎo)致識(shí)別苦難的場(chǎng)景，因此在交互上做了限制將放大縮小換成左右滑動(dòng)方便查看。

②鼠標(biāo)點(diǎn)擊-查看縮略圖，降低查看成本

針對(duì)小屏幕，在內(nèi)容較多的場(chǎng)景進(jìn)行適配發(fā)現(xiàn)，很難一次性顯示出來(lái)，因此采用了團(tuán)隊(duì)中程序員常用的工具：VIS Code(我自己日常也會(huì)一些代碼，所以我自己也會(huì)用)中查看代碼縮略圖交互方式，來(lái)降低用戶拖拽交互的成本。

四、用戶反饋

灰度上線一個(gè)月后，用戶滿意度提高7.8%。

五、后期展望

現(xiàn)在的交互還不夠完善，比如：放大縮小等等。因?yàn)楹笃谶€需要再完善與跟進(jìn)。還有這種看板在制作的時(shí)候，最好多跟前端盡心溝通，很多時(shí)候設(shè)計(jì)師心理和觀念是好的，但是會(huì)導(dǎo)致開(kāi)發(fā)成本過(guò)高。

六、總結(jié)

以上就是業(yè)務(wù)到設(shè)計(jì)進(jìn)行的拆解分享，B端設(shè)計(jì)師核心訴求還是要滿足才是根本，希望能對(duì)讀者，謝謝觀看。有不同的觀念可以隨時(shí)溝通。