前言
在做 B端產(chǎn)品的設(shè)計(jì)過程中从媚，列表可能是用得最多的頁面了。B 端產(chǎn)品的特點(diǎn)是對列表的操作會很頻繁患整，尤其是對列表數(shù)據(jù)的篩選拜效，那么列表的篩選都有哪些好的交互形式呢？本篇我們就來對比3種不同的列表篩選形式各谚。
第1種：普通但簡單
我們先來看最為常見的列表篩選形式紧憾，那就是在列表頂部放置一個篩選表單區(qū)，所有篩選都通過表單操作完成昌渤「八耄考慮篩選表單可能占據(jù)太多的垂直方向空間，影響列表數(shù)據(jù)的可視范圍膀息，通常最多只展示1-2行表單般眉，更多的篩選需要通過展開操作來進(jìn)行。下面是具體的交互過程原型動圖潜支。
這種篩選的優(yōu)點(diǎn)是技術(shù)實(shí)現(xiàn)簡單甸赃，符合大多數(shù)列表的交互習(xí)慣；缺點(diǎn)是如果篩選項(xiàng)過多的話展開會占據(jù)比較大的垂直方向空間冗酿，導(dǎo)致列表數(shù)據(jù)可視區(qū)域高度比較小埠对，而B 端產(chǎn)品往往使用頻次高的列表會有比較多的篩選項(xiàng)。
第2種：表頭+表單組合篩選
這種方式將部分篩選放在了表頭裁替，通常是選項(xiàng)類的篩選會放在表頭鸠窗。這種交互和 Excel 的數(shù)據(jù)篩選習(xí)慣是一致的，因此對于財(cái)務(wù)類人員來說比較友好胯究，同時部分篩選移到了表頭稍计，也節(jié)省了篩選區(qū)的空間，因此是一種不錯的選擇裕循。缺點(diǎn)嘛臣嚣，就是技術(shù)實(shí)現(xiàn)難度稍微大那么一點(diǎn)净刮，不過也不是那么難（應(yīng)對技術(shù)的金句：這個需求很簡單，好多產(chǎn)品都實(shí)現(xiàn)了）硅则。下面是這種篩選方式的具體的交互動圖。
第3種：常用+高級篩選
先說一下怎虫，這種交互形式是我偶然接觸到一個做 HR SaaS 軟件看到的暑认，當(dāng)時覺得挺新穎的。這家篩選的理念是遵循了“米勒法則”大审。
米勒法則蘸际，從心理學(xué)的角度來看，人類處理信息的能力是有限度的徒扶。根據(jù)米勒(Miller粮彤，1956)的分析，人腦處理信息有一個魔法數(shù)字7(正負(fù)2)的限制姜骡，也就是說导坟，人的大腦最多同時處理5到9個信息(chunks)。原因是短期記憶儲存空間的限制圈澈，超過9個信息團(tuán)惫周，將會使得大腦出現(xiàn)錯誤的概率大大提高。
他們將常用的幾個篩選項(xiàng)在頂部簡化為一個個下拉表單形式康栈，以節(jié)省空間闯两，然后再通過一個高級篩選入口滿足復(fù)雜條件的篩選。下面是具體的交互動圖谅将。
這種方式最大的好處是節(jié)省了篩選區(qū)的空間漾狼，使得篩選區(qū)一行就能放得下。大部分情況下饥臂，使用基礎(chǔ)的篩選項(xiàng)即可滿足篩選需求逊躁，而高級篩選又能夠滿足低頻的復(fù)雜篩選需求。缺點(diǎn)的話隅熙，就是輸入類的篩選需要點(diǎn)開后才可以輸入稽煤，一定程度上增加了操作的步驟。當(dāng)然囚戚，技術(shù)上的復(fù)雜度也不低酵熙，彈層比較多，而且高級篩選需要和普通篩選的數(shù)據(jù)做聯(lián)動處理驰坊。
如何選擇匾二？
說實(shí)話，這三種篩選形式都可以用在實(shí)際的產(chǎn)品設(shè)計(jì)中，不存在特別的優(yōu)劣之分察藐，可以根據(jù)自身產(chǎn)品的用戶群體特征進(jìn)行選擇皮璧。
對于篩選表單不多的，可以使用第1種（如果B 端客戶的顯示器屏幕比較小那么不推薦）分飞；
對于財(cái)務(wù)類產(chǎn)品悴务，那么表頭篩選會是首選，比較財(cái)務(wù)人員和 Excel 打交道比較多譬猫，這種方式他們上手起來很輕松讯檐；
第3種方式，個人覺得比較適合客戶群體相對年輕化的產(chǎn)品染服，比較首次使用還是需要有個適應(yīng)過程别洪，但是適應(yīng)后體驗(yàn)感還是挺不錯的，而且產(chǎn)品形式容易標(biāo)準(zhǔn)化肌索。
總結(jié)
本篇介紹了三種列表的篩選形式蕉拢，可以看到特碳，不管哪種交互形式其實(shí)都是站在使用者角度去考慮的诚亚，只是不同的交互有不同的考慮細(xì)節(jié)。這也是 B 端產(chǎn)品經(jīng)理的一個基本的要求午乓，那就是要弄清楚客戶員工具體的使用環(huán)境（如顯示器尺寸站宗、色差）和使用習(xí)慣，然后再來確定產(chǎn)品的具體交互形式益愈。
