筆者通過調研B端后臺系統的篩選場景應用，總結歸納了幾種基礎篩選、高級篩選及組合篩選的場景，基于此對自身產品的篩選場景應用進行分析、歸納最終輸出優化設計方案，希望對你有所啟發。

一、篩選場景介紹

在B端后臺系統設計中，列表篩選的場景應用最為常見，篩選的作用一方面是為了幫助用戶從眾多信息中快速提取、定位，以提高效率為基準；另一方面是為了科學的概括列表所具備的功能，提供用戶以相同特征的分類信息。

近期在研究B端產品領域后臺系統的列表篩選場景設計，故希望通過此次設計分析，從產品易操作性角度展開設計優化實踐，從而達到提升用產品滿意度的目的。

二、篩選場景類型

篩選是將一類數據展示，同時一類數據隱藏。

常見的篩選形式有：分類篩選、關鍵字篩選（搜索）、條件篩選、組合篩選等。大體可分為基礎篩選、高級篩選通常是多個篩選條件的多維度組合，其實有別于單一的搜索和導航。

三、競品分析調研

1. 篩選的組成

圖（1）

舉例：騰訊云

圖（2）騰訊云負載均衡實例

• 場景：適用于簡單的查詢搜索場景，用戶快捷篩選，蘊含的邏輯是“且”
• 優點：搜索操作自如
• 缺點：不太適合復雜篩選場景

2. 高級篩選

圖（3）

• 篩選關系：有并級“且”、交級“或”的關聯關系
• 場景：滿足更多用戶場景，為用戶提供多字段、多層篩選關系、多個操作

3. 組合篩選

（1）平鋪型

平鋪就是將所有篩選條件全部列出，B端產品場景應用較少，在C端產品中較為常見，便于用戶直接獲取選項內容，減少操作步驟等。

舉例：在線購物類平臺

圖（4）京東在線購物商城

圖（5）當當在線購物商城

圖（6）騰訊云告警策略

• 應用場景：用戶搜索結果數據量大，搜索結果不能滿足用戶預期，需要通過篩選對數據進行再次過濾，達到滿足精準結果的目的
• 優點：引導用戶快速理解篩選項目，幫助用戶快速定位結果
• 缺點：控件占據頁面空間較大，需要占據大面積展示平鋪效果

通常為避免篩選項太多，會提供展開、收起操作，對應每個篩選條件進行收折

（2）收折型

舉例：阿里云、騰訊云

圖（7）阿里云云服務實例

圖（8）騰訊云數據遷移

• 場景：在B端產品中，下拉框展開（高級篩選）對于用戶而言認知成本較低，操作性強，較為簡單
• 優點：常用使用頻率較高的選項可優先快速篩選、減少頁面占用空間
• 缺點：信息量大時，頁面顯示冗雜且占頁面比例較大，平臺通用性較差

4. 表頭篩選型

是一種列表內置篩選形式，類似Excel表格的操作。點擊表單進行篩選按鈕，可以將篩選字段直接帶入。

舉例：阿里云、華為云、騰訊云等

圖（9）阿里云云盤

圖（10）來源華為云云監控

圖（11）騰訊云數據庫實例

• 優點：通過表頭，用戶更快捷進入篩選，一般情況下表單左側數據篩選頻次越高
• 缺點：篩選的圖標各平臺不一，對于首次使用者來說陌生，影響用戶對表頭的識別，交互形式需要學習成本

四、產品篩選場景設計優化實踐

根據現有平臺頁面梳理，梳理出涉及篩選場景的頁面，這里通過舉一個典型場景分析和優化。（由于實際頁面涉密，所以打馬了）

圖（12）模塊原頁面

第一步拆解：

頁面“隱藏“式篩選形式需要經過“篩選”按鈕點擊展開，可以發現默認展開時陳列信息的已選項均為全部。該場景中默認全部的數據量較大，篩選的作用是用于數據過濾，事先通過定義好的過濾值進行操作。

第二步分析：

根據以上過濾項目及過濾值的對應關系，可根據列表常見的篩選方式，歸納為列表上方篩選及表頭篩選。

第三步歸納：

表頭篩選

放置于列表表頭上的篩選，受到列表表頭信息的限制，篩選的內容僅限于特定、單次列的篩選。

對「故障告警」過濾項拆解時發現，有幾項分別能對應表頭信息，可通過放置在列表表頭標簽上進行單次下拉篩選，這里的場景是下拉多選，如圖（13）

圖（13）表頭篩選優化

列表上方篩選

篩選功能位于列表上方，與表頭篩選不同的是，可單次進行多列交叉篩選，過濾值不限于列表列的內容

搜索

搜索字段可靈活方便進行數據查詢。當數據量大時，通過搜索功能提升用戶查看數據的效率。對原頁面過濾項拆解時發現，其中兩項涉及輸入搜索，對于用戶記憶要求較低，通過模糊搜索來提升查找數據的效率。在使用這兩項搜索時發現，先通過某一項模糊搜索過濾得到第一版數據，基于該版數據，查看列表中的另一項信息，進行下一步精確搜索，最終得到用戶想要的數據?；蛲瑫r輸入兩項（以某種分隔符號分割）進行精確查詢，事半功倍提升用戶效率。如圖（14）

圖（14）搜索優化

日期時間

因為時間篩選一般是對某個時間段的查詢，需要開始時間和結束時間，所以這里對日期的篩選條件單獨做處理展示。經操作發現「全部時間」就是默認最開始時間-最新時間，其他幾個選項是設置的快速時間段，是平臺上對用戶最常用的時間段進行抽離作為選項。

由于日期選擇的條件多于5個，且自定義時間長度不固定，所以設計采用整體下拉框選擇的形式，時間選項都置于內側，選擇結果反饋與下拉框中。如圖（15）

圖（15）日期選擇器優化

按鈕

原按鈕形式過長，變換樣式成純文字或圖標加提示的形式，同時對主、次按鈕進行樣式區分。如圖（16）

圖（16）按鈕優化

最終優化方案見圖（17）、圖（18）

圖（17）優化方案（一）表頭篩選+平鋪式

圖（18）優化方案（二）表頭篩選+收折式

五、小結

通過調研產品平臺的篩選場景應用，總結歸納了幾種基礎篩選、高級篩選及組合篩選的應用場景，基于此對自身運維平臺的篩選場景進行分析、歸納最終輸出優化設計方案。

其實在設計優化過程中，產品的易操作性、信息層級、可拓展性都會促使設計需要結合場景思考問題。篩選功能當然也要滿足實際場景需求，需考慮如何設計才能是否滿足用戶的實際操作路徑，是否符合用戶認知，能否引導用戶使用該篩選功能等。設計之路道阻且長，如有不足之處，歡迎拍磚～

本文由@一時無兩 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash， 基于CC0協議