這是 B 端交互優(yōu)化的第二篇，今天要分享的案例也是比較常見(jiàn)的

—— 列表篩選表單設(shè)計(jì)

基本上教過(guò)的有工作經(jīng)驗(yàn)的學(xué)員都碰過(guò)在這個(gè)模塊上翻車(chē)的經(jīng)歷，表單設(shè)計(jì)得亂七八糟，各種狀態(tài)沒(méi)有考慮，功能沒(méi)有閉合，或者干脆就不知道怎么下手。

所以這次收集的案例中我們優(yōu)先挑了這個(gè)模塊來(lái)優(yōu)化，給大家打個(gè)樣，下圖是該學(xué)員目前的案例：

這個(gè)案例目前被需求方和用戶(hù)吐槽，上方的篩選模塊占比太大了，而且感覺(jué)內(nèi)容很多，下級(jí)的選項(xiàng)全部露出不方便使用。

所以，針對(duì)頁(yè)面的功能以及需求建議，我們一起來(lái)來(lái)看看優(yōu)化的方案。

Step1:模塊拆分

• “異常事件處理” 居然是整個(gè)頁(yè)面的標(biāo)題，而不是篩選模塊的標(biāo)題，所以我肯定要把它從模塊里獨(dú)立出去

• 大致確認(rèn)上方的模塊高度應(yīng)該控制在 300 左右，才能讓頁(yè)面顯示較完整，不會(huì)過(guò)度隱藏下方的列表

Step2:模塊內(nèi)部切割

這一步要理解整個(gè)組件包含的字段和層級(jí)，篩選的內(nèi)容顯然是可以做分類(lèi)的，所以我們分成了3個(gè)類(lèi)別，包含 “基本信息”、“事件信息”、“其它信息”

• 然后，每個(gè)分類(lèi)最多 4 個(gè)，那么我就對(duì)右側(cè)的表單區(qū)域進(jìn)行縱向切割，等分成4列，當(dāng)然如果考慮全局其它頁(yè)面的類(lèi)目數(shù)量，也可以適當(dāng)增加

• 同時(shí)，將搜索和重制按鈕獨(dú)立成一欄到下方去，不用和內(nèi)容硬擠

Step3：表單控件優(yōu)化

• 除了分類(lèi)標(biāo)題，每個(gè)表單作為一個(gè)篩選項(xiàng)，還包含：篩選標(biāo)題、篩選結(jié)果兩個(gè)部分，因?yàn)檫x框夠長(zhǎng)，所以做左右排列

• 在還沒(méi)選擇的前提下，我們的檢索目標(biāo)是通過(guò)標(biāo)題找到要調(diào)整的表單，所以標(biāo)題的權(quán)重肯定更高，這時(shí)候強(qiáng)化標(biāo)題顏色弱化默認(rèn) “全部” 的色彩

• 同時(shí)添加下方搜索的按鈕色，搜索按鈕默認(rèn)是不可點(diǎn)的，因?yàn)闆](méi)有修改表單

Step4：處理選中樣式

• 每個(gè)表單包含默認(rèn)、選中、選完三種狀態(tài)，我們對(duì)它進(jìn)行呈現(xiàn)。選中的情況，會(huì)有彩色的邊框，以及下拉彈窗

• 對(duì)日期彈窗進(jìn)行優(yōu)化，將快速選擇放進(jìn)下級(jí)菜單面板里，默認(rèn)使用 “自定義” 選項(xiàng)，可以通過(guò)點(diǎn)擊確認(rèn)來(lái)選擇單個(gè)方向日期

• 對(duì)選完的表單，修改表單邊緣和背景色，以及選中的文字信息，提升識(shí)別的效率

Step5：處理搜索結(jié)果

• 搜索結(jié)果需要點(diǎn)擊搜索按鈕才會(huì)發(fā)起請(qǐng)求更新，那么搜索結(jié)果就要和默認(rèn)有一定的區(qū)別，左下角空白處增加搜索結(jié)果條目的提示

• 重制按鈕是默認(rèn)清空選項(xiàng)但并不是清空同時(shí)刷新搜索結(jié)果，所以方便在搜索結(jié)果中回到默認(rèn)狀態(tài)，添加了 “清除選項(xiàng)” 文字按鈕

  
  

時(shí)間關(guān)系，樣式不會(huì)優(yōu)化得太完善，理解思路和交互即可。最終的結(jié)果可以看下圖：

篩選表單的情況多種多樣，今天我們只是展示了其中一種優(yōu)化方案，不知道大家有收獲沒(méi)有。

后續(xù)還會(huì)展示更多其它的處理方法，拓展交互的極限～

我們下篇再賤……

新一期B端產(chǎn)品設(shè)計(jì)全能班即將十一放假結(jié)束就開(kāi)課了，有提升需要的同學(xué)記得聯(lián)系我～