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

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

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

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

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

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

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

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

三、解決措施

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

1周經(jīng)過對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)度以及父子級的關(guān)系。在這之前想過常規(guī)的甘特圖和日程看板形式，但是分析下來如果以橫縱坐標(biāo)軸將甘特圖和日程看板形式分別拆解成是：

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

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

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

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

2. 分層處理

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

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

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

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

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

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

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

4）上層-操作層

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

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

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

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

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

四、用戶反饋

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

五、后期展望

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

六、總結(jié)

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