後臺系統的篩選設計

篩選可以說是我們日常生活中使用最多的交互之一了，看電影的時選擇喜歡的類型，外出喫飯時選擇附近的商圈，網購時選擇合適的價格區間等等。這些篩選無不幫助我們提高了使用的效率。

與to c產品不同，後臺系統中，篩選條件往往更多，並伴隨著複雜的邏輯關係。更重要的是，to c產品中的篩選往往是對搜索結果的進一步優化，而後臺系統的篩選是工作流程中必不可少的一環，發揮著非常重要的作用。

篩選的作用

我用幾個比較典型的場景來描述後臺系統中「篩選」發揮的作用吧。

有經驗的電銷同學在電話聯繫客戶時，通常都有自己的小策略，比如先聯繫近期註冊的客戶，或者先打等級高的客戶等。「篩選」可以幫助電銷同學按自己的優先順序來工作，提高轉化率。

客服同學需要找到在操作中遇到困難的客戶給予幫助，可通過篩選出近三天內有註冊行為，但無後續操作的客戶，電話聯繫提供幫助。

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

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

篩選——頁面佈局

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

左右佈局

上下佈局

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

1.左右佈局能在同一頁面即時看到篩選後的結果，而上下佈局在篩選條件過多的時候，通常需要滾屏才能看到篩選結果。

2.左右佈局的橫向空間比較緊湊，在篩選條件過多的時候，表格本身需要左右滾動，在查閱信息的時候非常不友好。且左右佈局下的表格通常長度也在一頁的範圍內，所以單頁的信息密度低，需要頻繁翻頁。

一個小tip：如果表格欄位過多，橫向空間比較緊湊，需要左右滾屏的話，我們通常會鎖定表頭前幾列的關鍵信息（例如客戶姓名，客戶ID），方便閱讀。同理，如果表格過長，單頁需展示的條數很多時，我們也可以鎖定表頭優化體驗。總之，若想優化表單體驗，可以多多參考Excel～～

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

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

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

幾種常見的篩選設計

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

最簡單粗暴的做法，問題也很明顯，看起來非常冗餘，不利於快速定位目標。這種設計通常只適合應用於後臺許可權系統做的比較精細，每個角色可見的篩選條件比較少的情況下。優點是選擇任何篩選條件時都只有一級，不需要跨層級操作。

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

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

這是一種比較通用的辦法。關於這個我有一個腦洞。我曾經設想，針對「賬號ID」「手機號」「身份證號碼」這類的精準篩選的條件，統一做成一個搜索。根據輸入的格式去匹配欄位，再在欄位內進行篩選。這樣可以將幾個篩選條件整合為一個，節約了空間，（某種程度上來說）提升了體驗。但是在諮詢了小夥伴之後，發現有以下幾個問題：通用性可能差一點，不同table的條件不一樣，就要寫不同的判斷格式的方法（我們在界面上看起來是一張表，但在資料庫中是由很多張互相關聯的表組成的）；不同欄位的格式可能是相同的，比如客戶ID和訂單ID；最後，一般系統已有了全局搜索，這種替代篩選的精準搜索似乎是重複勞動。

3. 默認只展示篩選條件，不展示內容，check後顯示內容。如圖：