表格如何增加篩選選項
在實際的工作中，可能會遇到各種篩選型別，不同的篩選型別對應的排版佈局各不相同，實際業務中的使用場景也具有差異。本文作者透過不同型別列舉不同的場景案例，全面地總結了關於B端產品中的篩選，一起來看一下吧。
這一期主要是全面地總結了關於B端產品中的篩選，之前也有總結一篇簡潔版的關於篩選的文章【TO B 搜尋和篩選的多種使用場景】，回頭檢視原來總結的文章時才發現確實之前總結得有點太過簡潔，很多篩選型別和使用場景都考慮得不夠全面。
這也是之前對該功能不夠了解，侷限於自己在工作中常見的場景，對於不瞭解的場景自然就不清楚。由於接觸得比較片面，瞭解得不夠全面，導致之前總結的也不夠完整。
當然產品本身也是隨著實際業務場景的變化，從而考慮設計不同的形式來達到該功能的使用。產品需要最佳化，互動和佈局同樣需要最佳化，所以在B端產品中並不是一個同樣的功能就僅限於只有一種解決方案。
對於產品而言，只有參與的專案越多，設計和思考的場景越全面，瞭解的產品越多，才能更好地掌握一個功能的多種型別和使用場景，這一次能夠在原來的基礎上更加全面地總結同一個功能的型別和場景，主要是在工作中也有遇到類似的業務場景，加上對其他產品的體驗，從而讓我更加全面的瞭解到該功能的多樣性。
01 篩選的多種型別及排版佈局使用場景
以下我對自己在實際工作中運用到的多種篩選型別再次做了總結，不同的篩選型別對應的排版佈局各不相同，並且在實際業務中的使用場景也具有差異，下面我還是會透過不同的型別列舉不同的場景案例，便於理解和運用到實際工作業務中。
現在總結文章的習慣是將需要總結的文章透過思維導圖的形式畫出整體的導線，這樣讓自己的腦海裡面形成一個大致的方向，也是一個整體的構思，後期只需要根據導線一步一步往下描述具體的內容和案例即可。這個總結方式也可以運用到工作任務中，例如：當接到一個設計任務時，先理解該任務的整體方向，再細化每一個細節展開設計，這樣能避免遺漏也能讓自己對整體的把握更明確。
篩選的型別我分為以下四大類：
篩選的排版佈局我分為以下三大類：
篩選的型別是根據業務場景而定，篩選的排版佈局是根據篩選的型別而定，篩選的使用場景是根據實際業務場景而定，所以首先我們需要理解清楚真實的業務場景，再透過分析選擇適合的篩選型別。當已經知道了篩選型別，我們只需要根據篩選的條件和頁面的互動及空間利用情況選擇合適的佈局方式即可。
1. 常規搜尋篩選
常規的搜尋篩選不難理解，即常見的搜尋框，根據輸入文字關鍵詞進行模糊搜尋或者根據記憶準確輸入完整的資訊，精準搜尋。文字關鍵詞搜尋需要透過使用者的記憶來完成，只有當用戶對需要搜尋的內容（關鍵詞）有記憶才能完成搜尋篩選，搜尋的結果範圍根據關鍵詞的精準度而定。
當搜尋的關鍵詞少且模糊時，搜尋的結果數量就會很多，需要使用者在眾多的結果中再次查詢自己的目標值，難度較大。而如果搜尋的關鍵詞多且準確時，搜尋的結果數量就會較少，使用者只需要在少量的結果集中查詢自己的目標值，難度較小。
（注意：搜尋結果的數量也會受到原本資料量的影響。）
例如在微信公眾號發表記錄中的搜尋，當只輸入“設計”關鍵詞時，搜尋結果一共有202條，需要在這202條資料中找到自己的目標值是比較難的。
當我將關鍵詞改為“設計來源於生活”後，搜尋結果只有14條，這樣我在查詢我的目標值時就變得容易很多。所以如果使用者具有更深的記錄，能夠輸入更多的關鍵資訊，就可以縮短查到的時間，能更快的找到自己的目標值。
案例實操：
下面我再列舉一個關於搜尋篩選在B端產品中的運用。（此例子將運用到後面所有案例，以下案例只作為簡單舉例，總資料量為10條，實際業務根據真實業務資料量而定）
需求背景：客戶A需要在檔案清單表格中，根據清單名稱查詢目標值。
設計要點：如果只需要在清單中透過清單名稱來檢視目標值的話，這裡就可以選擇直接使用搜索篩選來完成，因為清單名稱複雜不清晰，是不確定的值。所以直接在表單上方加一個搜尋框，使用者只需要輸入關鍵詞即可完成搜尋。
當輸入關鍵詞“策略”後，我們得到了三條名稱帶有關鍵詞“策略“的資料結果，減小了資料範圍，讓使用者在查詢目標值時更加容易。
（注：搜尋按鈕根據資料量的多少決定是否需要，當資料量較多時，列表重新整理負荷較大，建議增加搜尋按鈕，反之則不加）
2. 按條件篩選
按照條件篩選是對於資料內具有明確的條件分類，在篩選條件中將這些類單獨作為篩選的條件，當選擇某一個選項作為篩選條件時，篩選出現的資料結果集將是同類資料。篩選型別又分多種選擇方式：下拉框選項篩選、平鋪選框篩選、表頭篩選、組合篩選。
1）下拉框選項篩選
類別選項篩選，根據具體的選項在小範圍內篩選。
下拉框選項展示提前預設好的選項，使用者只需要選擇需要篩選的型別，即可快速篩選出這類資料的資料結果集。此類篩選優點在於能快速篩選同類資料，不需要使用者過多的記憶。缺點是無法快速達到精準篩查的效果，如果需要達到精準篩選的效果需要同時選擇多項。
案例實操：
需求背景：客戶A想要快速篩選檔案清單中釋出狀態為“審批中”的資料，能夠快速統計審批中的資料量，並且完成後續任務操作。
設計要點：客戶需要根據檔案清單的狀態快速篩選資料，檔案的狀態一共分為三類：已釋出、審批中、未釋出，雖然客戶只說需要篩選審批中的資料，但是另外兩個狀態的資料也同樣有篩選的場景，所以我們直接將狀態型別作為選項，客戶使用時只需要選擇狀態型別即可快速完成篩選。
2）平鋪選框篩選
下拉框選項篩選的另外一種展示形式，將選項平鋪展示，類別選項篩選，根據具體的選項在小範圍內篩選。
案例實操：
需求背景：客戶A想要快速篩選檔案清單中釋出狀態為“審批中”的資料，希望能夠直接看到檔案的狀態型別，快速選擇型別。
設計要點：這次客戶的需求點是在上一個方案中提出的最佳化，由於上個方案是將狀態選項放在下拉框中的，導致客戶不能直觀的看到狀態選項，需要點選下拉框後才能看到，原操作路徑為：點選展開下拉框➡️選擇審批中選項➡️點選搜尋。
為解決狀態選項不直觀的問題，我選擇將狀態選項直接平鋪展示在外面，這樣客戶就可以直觀的看到所有的選項。並且操作路徑變成了：勾選審批中選項➡️搜尋，操作路徑和操作步驟也得到了最佳化。
3）表頭篩選
將篩選選項內建在表頭中（更好地利用頁面空間，隱蔽不直觀）。當頁面空間有限時，可以考慮此方案。另外當表格表頭欄位資料較多時，需要橫向滑動檢視資料時，建議還是直接將篩選條件單獨放在外面。或者當需要篩選的選項太多時，表頭欄位都能篩選時，也可以考慮放在表頭中。
案例實操：
需求背景：客戶希望介面更加乾淨、整潔，並且能夠達到根據狀態篩選的功能。
設計要點：平鋪選項的方案直觀，但是平鋪與後面的搜尋框排版在一起時，整體頁面看著比較零散。將篩選選項直接放在表頭欄位後，透過hover展示下拉框，點選選項後不需要再次點選搜尋按鈕，直接進入搜尋。操作路徑為：圖示hover➡️選擇選項。
這個方案缺點在於篩選的選項不直觀，但是操作點選步驟只有一步。
4）組合篩選
多種篩選型別組合為篩選組，組合篩選一般是是篩選的條件較多，選項較多時，將不同型別的篩選元件結合為一個篩選組。使用者在使用時，只需要將所有的條件輸入/選擇後，點選搜尋即可完成篩選，得到的結果將是多個條件組合後的並集/合集的值。
案例實操：
需求背景：客戶需要同時滿足根據名稱和編號關鍵詞搜尋篩選、狀態型別篩選、責任人/責任部門篩選、型別和時間區間篩選。也就是說客戶想要將表格中所有的表頭欄位作為篩選條件。
設計要點：由於這裡包含多種篩選型別，名稱和編號是關鍵詞篩選，釋出狀態和、責任人、責任部門、型別是選項篩選，釋出日期是時間區間篩選。所以我們需要採用組合篩選的模式。
（右側箭頭：組合篩選佔據空間較大，可考慮展開和收起篩選元件）
延展思考：
這裡的篩選條件都來自於表頭，並且表頭欄位一屏能展示完整，我們也可以將表頭部分欄位篩選直接放在表頭中，採用搜尋篩選+表頭篩選的模式組合。
（注：篩選型別選擇需要根據實際業務場景而定，選擇適合真實業務場景的，此處只是舉例延展）
3. 分類tab篩選
分類tab篩選在軟體中一般是作為系統的全域性搜尋才會使用到，主要是透過搜尋關鍵詞後，分類展示不同類別下帶有該關鍵詞的資料資訊。等同於全域性搜尋是一個大的漏篩，透過輸入關鍵詞後，將符合該範圍內的資料篩選出來，並且分類展示，使用者再到每個分類下再次透過其他條件篩選，從而得到自己的目標值。
（此型別案例不適用，另舉例說明）
例如：在飛書文件中，透過搜尋關鍵詞後，分別展示該關鍵詞在文件、表格、多維表格、思維筆記、檔案五大類別中展示結果集，使用者透過類別區分，再縮小範圍尋找目標值。
4. 高階篩選
篩選條件自定義組合（靈活且佔空間小）。高階篩選佔用空間比較小，使用者可以根據需要自定義篩選條件，不必將所有篩選條件都展示在介面中。使用更靈活，介面更美觀。
案例實操：
需求背景：客戶需要同時滿足根據名稱和編號關鍵詞搜尋篩選、狀態型別篩選、責任人/責任部門篩選、型別和時間區間篩選。並且頁面簡潔，篩選靈活度高。
設計要點：篩選的條件較多，並且還需要介面能夠簡潔，篩選靈活度較高，所以我們可以選擇高階篩選模式，雖然這裡可以直接用表頭篩選，但是表頭篩選的入口太多，不易查詢，所以就採用高階篩選統一入口。如下圖：
方案一：下拉選擇式
透過下拉展示可篩選的條件型別，再根據型別選擇具體的篩選條件，從而得到結果值。
互動細節：點選篩選➡️選擇需要篩選的條件型別➡️選擇具體的值。
方案二：條件組合式
透過自定義條件，並且自定義篩選結果值。
當選擇釋出狀態等於審批中時，篩選的結果為資料中所有釋出狀態為審批中的資料。
當選擇釋出狀態不等於審批中時，選的結果的資料中不包含狀態為審批中的資料，只包含已釋出和未釋出的資料。
02 結語
此次案例並非真實案例，只是為了方便大家理解每一種篩選型別而列舉的簡單案例，實際工作需要根據實際需求及業務場景而選擇最適合需求的型別。
本文由 @設計小余 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。