最近又有一個(gè)新的同學(xué)的在篩選表單上陷入糾結(jié)過來求助，我根據(jù)原來的內(nèi)容做了一次調(diào)整。

這次的改動(dòng)和上回不同，上次改版根據(jù)業(yè)務(wù)需要翻新了整個(gè)表單的形式，將所有選項(xiàng)露出的設(shè)計(jì)做成隱藏的。有很多爭(zhēng)議，因?yàn)楹芏嗤瑢W(xué)不看實(shí)際業(yè)務(wù)需求只盯著界面發(fā)表意見。

上篇文章傳送門：被領(lǐng)導(dǎo)痛批的篩選表單，優(yōu)化方案來了！

這次的改動(dòng)比較直接，就只針對(duì)交互和視覺的樣式做調(diào)整，下面是原圖。

該學(xué)員做完以后覺得整個(gè)篩選模塊看起來都很別扭，好像每個(gè)元素都做進(jìn)去了，但又覺得哪里不對(duì)，不知道該怎么改。

為了防止一些不必要的爭(zhēng)論，優(yōu)先定位出當(dāng)前版本的問題，我的所有改動(dòng)演示皆以這些問題為基礎(chǔ)做優(yōu)化。

• 問題1：篩選內(nèi)容層級(jí)不清晰，內(nèi)容上下級(jí)視覺識(shí)別性弱。

• 問題2：右上角3個(gè)按鈕本質(zhì)上和這個(gè)篩選表格無關(guān)，點(diǎn)擊是操作其它內(nèi)容。

• 問題3：下級(jí)選項(xiàng)選中不直接搜索結(jié)果（服務(wù)器性能問題），需要點(diǎn)擊查詢按鈕

• 問題4：子選項(xiàng)內(nèi)容上下沒有對(duì)齊，看起來很凌亂。

• 問題5：選取和下拉菜單較多，和文字選項(xiàng)混合后識(shí)別難度更高。

針對(duì)這些問題，我首先重構(gòu)的是層級(jí)框架。

• 將1、2級(jí)選項(xiàng)標(biāo)簽的樣式做出明確的區(qū)分，讓面板的層級(jí)歸屬更清晰

• 將全局按鈕移動(dòng)到右上角，作為妥協(xié)放置的元素不能放在面板內(nèi)部，所以必須在最高層級(jí)欄內(nèi)

• 簡(jiǎn)化一級(jí)篩選項(xiàng)，去掉不必要的文字，同時(shí)讓操作 “重制”、“查詢”、“更多” 按鈕右對(duì)齊

• 點(diǎn)擊更多展開下級(jí)全部篩選項(xiàng)，展開面板和上級(jí)面板之間使用通欄分割線做層級(jí)示意

再然后，進(jìn)一步優(yōu)化二級(jí)選項(xiàng)內(nèi)容，減少輸入框的數(shù)量，同時(shí)優(yōu)化對(duì)其方式。大致呈現(xiàn)效果如下。

為了保證上下子選項(xiàng)的做對(duì)齊一致，我使用了格線系統(tǒng)，確定每列寬度和間距，選項(xiàng)內(nèi)容可以使用1、2、3 列的寬度。

最后，再進(jìn)一步細(xì)化視覺元素，我用虛線區(qū)分了二級(jí)篩選內(nèi)不同的類型，完成了最終的修改。

如果感覺不出來和前面的版本有什么區(qū)別，可以看下方的對(duì)比圖。

最后，分享一個(gè)經(jīng)驗(yàn)點(diǎn)，關(guān)于實(shí)時(shí)篩選查詢的功能。

網(wǎng)上C端網(wǎng)站里，篩選項(xiàng)點(diǎn)擊了就實(shí)時(shí)刷新出結(jié)果，天經(jīng)地義了。但是，這是基于這些項(xiàng)目專業(yè)的數(shù)據(jù)庫設(shè)計(jì)（數(shù)據(jù)遍歷效率高）和充足的服務(wù)器資源分配（性能滿足秒刷新需要）。

這兩條件在小網(wǎng)站、B端項(xiàng)目要同時(shí)實(shí)現(xiàn)是非常困難的。當(dāng)篩選數(shù)據(jù)條目上萬，甚至幾十萬條的時(shí)候，數(shù)據(jù)查詢、篩選會(huì)變得異常的艱難。

尤其是多數(shù)情況下是由后端開發(fā)本身經(jīng)驗(yàn)不足，或沒有足夠的時(shí)間設(shè)計(jì)數(shù)據(jù)庫引起，而讓查詢流程異常的臃腫。

原版項(xiàng)目的真實(shí)查詢等待時(shí)間約為每次半分鐘，所以不可能使用實(shí)時(shí)場(chǎng)景。必須要考慮真實(shí)的性能效率，并對(duì)此做出優(yōu)化。

以上就是今天的分享，感謝大家收看！

我們下篇再賤～

B端產(chǎn)品設(shè)計(jì)全能班持續(xù)招生中，有提升需要的同學(xué)記得聯(lián)系我～