前言

在做 B端產(chǎn)品的設(shè)計過程中，列表可能是用得最多的頁面了。B 端產(chǎn)品的特點是對列表的操作會很頻繁，尤其是對列表數(shù)據(jù)的篩選，那么列表的篩選都有哪些好的交互形式呢？本篇我們就來對比3種不同的列表篩選形式。

第1種：普通但簡單

我們先來看最為常見的列表篩選形式，那就是在列表頂部放置一個篩選表單區(qū)，所有篩選都通過表單操作完成?？紤]篩選表單可能占據(jù)太多的垂直方向空間，影響列表數(shù)據(jù)的可視范圍，通常最多只展示1-2行表單，更多的篩選需要通過展開操作來進行。下面是具體的交互過程原型動圖。

這種篩選的優(yōu)點是技術(shù)實現(xiàn)簡單，符合大多數(shù)列表的交互習(xí)慣；缺點是如果篩選項過多的話展開會占據(jù)比較大的垂直方向空間，導(dǎo)致列表數(shù)據(jù)可視區(qū)域高度比較小，而B 端產(chǎn)品往往使用頻次高的列表會有比較多的篩選項。

第2種：表頭+表單組合篩選

這種方式將部分篩選放在了表頭，通常是選項類的篩選會放在表頭。這種交互和 Excel 的數(shù)據(jù)篩選習(xí)慣是一致的，因此對于財務(wù)類人員來說比較友好，同時部分篩選移到了表頭，也節(jié)省了篩選區(qū)的空間，因此是一種不錯的選擇。缺點嘛，就是技術(shù)實現(xiàn)難度稍微大那么一點，不過也不是那么難（應(yīng)對技術(shù)的金句：這個需求很簡單，好多產(chǎn)品都實現(xiàn)了）。下面是這種篩選方式的具體的交互動圖。

第3種：常用+高級篩選

先說一下，這種交互形式是我偶然接觸到一個做 HR SaaS 軟件看到的，當時覺得挺新穎的。這家篩選的理念是遵循了“米勒法則”。

米勒法則，從心理學(xué)的角度來看，人類處理信息的能力是有限度的。根據(jù)米勒(Miller，1956)的分析，人腦處理信息有一個魔法數(shù)字7(正負2)的限制，也就是說，人的大腦最多同時處理5到9個信息(chunks)。原因是短期記憶儲存空間的限制，超過9個信息團，將會使得大腦出現(xiàn)錯誤的概率大大提高。

他們將常用的幾個篩選項在頂部簡化為一個個下拉表單形式，以節(jié)省空間，然后再通過一個高級篩選入口滿足復(fù)雜條件的篩選。下面是具體的交互動圖。

這種方式最大的好處是節(jié)省了篩選區(qū)的空間，使得篩選區(qū)一行就能放得下。大部分情況下，使用基礎(chǔ)的篩選項即可滿足篩選需求，而高級篩選又能夠滿足低頻的復(fù)雜篩選需求。缺點的話，就是輸入類的篩選需要點開后才可以輸入，一定程度上增加了操作的步驟。當然，技術(shù)上的復(fù)雜度也不低，彈層比較多，而且高級篩選需要和普通篩選的數(shù)據(jù)做聯(lián)動處理。

如何選擇？

說實話，這三種篩選形式都可以用在實際的產(chǎn)品設(shè)計中，不存在特別的優(yōu)劣之分，可以根據(jù)自身產(chǎn)品的用戶群體特征進行選擇。

對于篩選表單不多的，可以使用第1種（如果B 端客戶的顯示器屏幕比較小那么不推薦）；

對于財務(wù)類產(chǎn)品，那么表頭篩選會是首選，比較財務(wù)人員和 Excel 打交道比較多，這種方式他們上手起來很輕松；

第3種方式，個人覺得比較適合客戶群體相對年輕化的產(chǎn)品，比較首次使用還是需要有個適應(yīng)過程，但是適應(yīng)后體驗感還是挺不錯的，而且產(chǎn)品形式容易標準化。

總結(jié)

本篇介紹了三種列表的篩選形式，可以看到，不管哪種交互形式其實都是站在使用者角度去考慮的，只是不同的交互有不同的考慮細節(jié)。這也是 B 端產(chǎn)品經(jīng)理的一個基本的要求，那就是要弄清楚客戶員工具體的使用環(huán)境（如顯示器尺寸、色差）和使用習(xí)慣，然后再來確定產(chǎn)品的具體交互形式。