編者注：由于我們的疏忽，未經(jīng)@智銘桑 授權就用了他的插畫（https://dribbble.com/shots/4946856-Designer-s-Rhapsody）作為Banner 圖，經(jīng)溝通已取得作者諒解。再次向作者表達歉意：對不起。

篩選可以說是我們?nèi)粘Ｉ钪惺褂米疃嗟慕换ブ涣?，看電影時選擇喜歡的類型，外出吃飯時選擇附近的商圈，網(wǎng)購時選擇合適的價格區(qū)間等等。這些篩選無不幫助我們提高了使用的效率。

與to c產(chǎn)品不同，后臺系統(tǒng)中，篩選條件往往更多，并伴隨著復雜的邏輯關系。更重要的是，to c產(chǎn)品中的篩選往往是對搜索結(jié)果的進一步優(yōu)化，而后臺系統(tǒng)的篩選是工作流程中必不可少的一環(huán)，發(fā)揮著非常重要的作用。

一、篩選的作用

我用幾個比較典型的場景來描述后臺系統(tǒng)中「篩選」發(fā)揮的作用吧。

有經(jīng)驗的電銷同學在電話聯(lián)系客戶時，通常都有自己的小策略，比如先聯(lián)系近期注冊的客戶，或者先給等級高的客戶打電話等?！负Y選」可以幫助電銷同學按自己的優(yōu)先級來工作，提高轉(zhuǎn)化率。

客服同學需要找到在操作中遇到困難的客戶并給予幫助，可通過篩選出近三天內(nèi)有注冊行為，但無后續(xù)操作的客戶，電話聯(lián)系提供幫助。

另外，如果系統(tǒng)內(nèi)沒有任務模塊的話，「篩選」可以臨時頂替一下。例如，組長下達指令「撥打1個月內(nèi)注冊，但無投資行為的客戶」，電銷同學便可篩選出對應的客戶來撥打電話。

復雜多變的篩選條件，為使用系統(tǒng)的用戶提供了更加方便靈活的工作方法。

二、篩選——頁面布局

篩選的頁面布局可簡單地分為左右布局和上下布局，如圖：

△ 左右布局

△ 上下布局

我們在考慮篩選頁面的布局時，通常與整個網(wǎng)站的布局保持統(tǒng)一即可。但是兩種布局仍有一些微妙的差距：

• 左右布局能在同一頁面即時看到篩選后的結(jié)果，而上下布局在篩選條件過多的時候，通常需要滾屏才能看到篩選結(jié)果。
• 左右布局的橫向空間比較緊湊，在篩選條件過多的時候，表格本身需要左右滾動，在查閱信息的時候非常不友好。且左右布局下的表格通常長度也在一頁的范圍內(nèi)，所以單頁的信息密度低，需要頻繁翻頁。

一個小tip：如果表格字段過多，橫向空間比較緊湊，需要左右滾屏的話，我們通常會鎖定表頭前幾列的關鍵信息（例如客戶姓名，客戶ID），方便閱讀。同理，如果表格過長，單頁需展示的條數(shù)很多時，我們也可以鎖定表頭優(yōu)化體驗?？傊粝雰?yōu)化表單體驗，可以多多參考 Excel。

除了上述的兩種基本布局外，我們通常會使用 tab 來進行輔助。

例如某些高頻使用的篩選條件（可以理解為分類），我們可以單獨提出來，作為 tab 設計在表格上方。如圖：

tab設計可以根據(jù)實際情況，放置在不同的位置。

三、幾種常見的篩選設計

1. 所有篩選條件平鋪展示

所有篩選條件平鋪展示，最簡單粗暴的做法，問題也很明顯，看起來非常冗余，不利于快速定位目標。這種設計通常只適合應用于后臺權限系統(tǒng)做的比較精細，每個角色可見的篩選條件比較少的情況下。

優(yōu)點是選擇任何篩選條件時都只有一級，不需要跨層級操作。

如果選擇了平鋪展示的話，可以將篩選條件按邏輯或使用頻率分類，讓用戶對各個篩選條件的位置有預期。

2. 保留高頻的篩選條件，將復雜的篩選項隱藏在「高級篩選」中

保留高頻的篩選條件，將復雜的篩選項隱藏在「高級篩選」中。這是一種比較通用的辦法。

關于這個我有一個腦洞。我曾經(jīng)設想，針對「賬號ID」「手機號」「身份證號碼」這類的精準篩選的條件，統(tǒng)一做成一個搜索。根據(jù)輸入的格式去匹配字段，再在字段內(nèi)進行篩選。這樣可以將幾個篩選條件整合為一個，節(jié)約了空間，（某種程度上來說）提升了體驗。

但是在咨詢了小伙伴之后，發(fā)現(xiàn)有以下幾個問題：通用性可能差一點，不同 table 的條件不一樣，就要寫不同的判斷格式的方法（我們在界面上看起來是一張表，但在數(shù)據(jù)庫中是由很多張互相關聯(lián)的表組成的）；不同字段的格式可能是相同的，比如客戶ID和訂單ID；最后，一般系統(tǒng)已有了全局搜索，這種替代篩選的精準搜索似乎是重復勞動。

3. 默認只展示篩選條件，不展示內(nèi)容，check后顯示內(nèi)容

默認只展示篩選條件，不展示內(nèi)容，check后顯示內(nèi)容。如圖：

△ 截圖來自zoho crm

△ 截圖來自網(wǎng)易七魚

這種設計最大的優(yōu)點就是省空間。尤其是一些 Saas化的后臺系統(tǒng)（簡單來說就是對外出售服務的，不是公司內(nèi)部使用的后臺系統(tǒng)），無法針對某類客戶做設計，所以篩選項大而全，使用這種設計可以使頁面干凈高效。

另外，可以記錄登錄用戶的使用習慣，將高頻篩選條件顯示在頂部。或支持手動調(diào)整順序。當然，為每個用戶記錄不同的篩選也是成本很高的做法了，需要結(jié)合具體情況和開發(fā)同學溝通清楚再做定奪。

以上三種設計，都可以再附加一個功能——快捷篩選。

4. 快捷篩選

如我們之前所說，一個用戶在使用篩選的時候，通常是有固定流程的。如果把這些操作綁定，儲存為快捷篩選，可以節(jié)約用戶很多時間。舉個例子，交互如圖：

高清大圖戳 →?https://share.weiyun.com/55UaCt7

四、篩選的邏輯關系

當篩選的可能性較復雜的時候，我們就需要考慮篩選條件的多種邏輯關系。比如我們在篩選「金額」字段的時候，有多種可能性「大于」「小于」「介于某個區(qū)間」等等；在篩選「所屬銷售」字段的時候，可能「是某人」，「除某人以外」，以及并列選幾個人名的情況。

這種情況尤其會出現(xiàn)于需要自定義字段的系統(tǒng)中，在用戶自定義字段的時候，就需要為不同的字段類型配置全面的篩選邏輯。例如，對于「數(shù)值字段」，對應的邏輯關系可能是「大于」「小于」「介于某個區(qū)間」；對于「純文本字段」，對應的可能是「是」「否」「包含」「不包含」「為空」「不為空」等。

寫在最后

雖然這篇文章寫的是后臺系統(tǒng)的篩選設計，但是to c，甚至說移動端的篩選設計，有很多都是可以借鑒過來的，尤其是在優(yōu)化體驗的時候，想一想我們平時經(jīng)常用的篩選控件，會有很多新的靈感。

另外，篩選作為表單的一部分，在 Excel中已經(jīng)有各種各樣的用法了。如果覺得自己一頭霧水，可以想一下我們在 Excel中通常會怎么做，也許就豁然開朗了。

以上是對自己在后臺系統(tǒng)設計中的一點點總結(jié)，歡迎大家一起交流討論。

圖片素材作者：Ramy Wafaa

「篩選功能細節(jié)設計」

• 《交互基礎小課堂！全面的篩選功能設計總結(jié)》
• 《如何設計更高效的篩選器？來看網(wǎng)易設計師的總結(jié)！》
• 《搜索和篩選有什么區(qū)別？來看順豐UED 的總結(jié)！》