有關表單篩選功能的思考

編輯導語：B端產品中經常會遇到表格的形式，篩選的存在對於整個表單來說是非常重要的，它可以幫助使用者，在表單茫茫多的資料當中進行快速的定位；本文作者分享了關於表單篩選功能的思考，我們一起來了解一下。

一、背景

在B端產品中，表格是最常出現的內容形式，在個人最近跟的一款交通客流資料的分析系統中，表格也被大量運用到系統中，這是一款匯聚了市級的交通刷卡資料、每天的資料增量達到千萬級別的平臺。

在我跟進的這款產品中，前人因為缺乏相關設計經驗，不瞭解使用者的業務場景，同時忽視了刷卡資料量龐大及表單欄位類型繁多的客觀情況，並未提供表單篩選功能，導致使用者在查詢諸如「2019年3月15日14點至15點，在A站的103閘機刷卡標識為刷出的所有資料」等具有相同特徵的塊狀資訊時，都需要使用者在平臺一條一條地人工篩選。

忽視業務場景的結果，就是粗暴地完成了使用者的初步需求後，讓使用者產生了新的問題：使用者需要從海量的表格中人工查詢塊狀資料，明知需要的結果就在這裡，卻只能一條一條地將它們找出來，付出大量人力和時間，耽誤業務進度，影響辦事效率，這是作為B端產品設計者的我們不願意看到的。

所以，當用戶需要在大量的資料中查詢具有相同特徵的資訊時，他會希望能夠儘快地找完資料，此時為其提供有效的資料篩選手段，替代原本費時費力的人工處理方式，幫助使用者在海量的資訊中快速定位資料以完成查詢任務，從而提升業務處理效率，實現產品服務使用者的價值。

二、什麼是篩選

討論功能前，需要先明確功能的定義。

篩選，也叫過濾器，是將資料中符合使用者需求條件的範圍內的資料快速地查詢並顯示出來，將範圍外的資料暫時對使用者不可見，是針對一個模糊的範圍，通過對資料特性設定兩種或以上的條件進行操作的功能。

經常有人混淆了篩選和搜尋的區別，實際上他們背後的差異是被動與主動的差別。

資料項中，某些資料項的內容是高度一致且不輕易變動的，如狀態、性別等，此類資料內容具備一致性，可以供使用者對內容進行局部提取。

篩選就是系統結合此類資料的特徵，主動將此類資料項預置給使用者，提供展示局部資料的渠道，把內容打碎成多個局部內容，使用者可以根據需要，對資料進行規則性的提取，更快捷地查找出特定內容，精確縮小資料的展示範圍，從而幫助使用者更快地找到需要的結果，此時使用者是被動的。

而搜尋，則是使用者帶有明確目標的尋找，系統提供可精確尋找的資料項，幫助使用者快速精確地找到想要的結果，此時使用者是主動的。

例如，手機品牌、機身顏色、通訊頻段等欄位是手機屬性中內容高度一致的資料項，此類資料項可以作為篩選項提供給使用者，實現平臺海量資料內容的局部展示。

當用戶想買一部華為的5G手機時，他可以在電商平臺增加品牌是華為，通訊頻段是5G的篩選條件，對平臺售賣的手機商品資料進行規則性的提取，這樣使用者就只能看到平臺所有在售的華為手機中支援5G的手機了，縮小了使用者的查詢範圍，這是篩選。

對於平臺而言，手機型號也是的常用屬性之一，但因為手機型號種類繁多且更新頻率快，所以這個欄位一般不是平臺人員定義，而是交由商家自定義錄入；又因為手機型號沒有統一的命名規範，商家填寫的內容五花八門，往往導致同一個手機型號，會有多種錄入結果。

基於這個現狀，如果把手機型號作為篩選項提供給使用者，一是會讓使用者為了同一個資訊進行大量的勾選操作；二是會因勾選不全面導致資訊篩選不全面，導致漏篩、錯篩的情況，所以手機型號並不適合作為篩選項。

因此，對上述這類資料項系統可以提供搜尋框，讓系統對關鍵字做語義理解分析處理，當用戶很明確的想買某一型號的手機，如mate 40，那麼使用者只需要在平臺搜尋框中輸入mate 40，即可以查詢出平臺上所以在售的mate 40。

那麼，篩選功能會在什麼場景下會起作用呢？

三、篩選的使用場景

B端產品解決的是業務場景需求，滿足使用者的職能要求即可，而我跟進的這款產品，篩選的場景，主要是協助使用者查詢塊狀資料：

業務部門經常因為各種原因，需要查詢一些具有相同特徵的資料明細，例如：「2019年3月15日14點至15點」，在「A站」的「103閘機」刷卡標識為「刷出」的所有刷卡資料明細。

這時時間、站點、裝置、刷卡標識等資料項就可以作為篩選項幫助使用者快速找出資料，但是系統沒有篩選功能，使用者就只能人工地在海量的資料中一條一條排查出符合特徵要求的刷卡資料。

同時我們可以預見到使用者接下來的行動：因為平臺沒有篩選的功能，人工篩選費時費力，為了快速完成任務，只好從平臺匯出全量資料到execl檔案中，使用篩選功能，以達到查詢目標資料的目的。

所以，使用者的痛點在哪裡？

1. 問題分析

從場景中提煉問題，我們能夠發現，核心的問題就一個：使用者在平臺的海量資料中提取塊狀資料，篩選效率低下，如果任務時間緊急，將迫使使用者尋求其他手段完成目標。

這會帶來什麼影響呢？

影響業務辦理。系統無法快速定向展示局部資料，需要使用者憑肉眼尋找目標資料，對比系統篩選，註定效率低下，而且為避免人工篩選過程中出現遺漏的情況，經常會安排人員進行二次檢查確認，耗時加倍。

資料篩選效率低下必然影響需要這些資料進行業務處理的工作，特別是時效性要求較高的工作，可能會導致錯過業務辦理的最佳時間，例如，處理客服工作緩慢可能會使市民更加不滿而直接投訴，協助有關部門偵查案件可能會貽誤戰機導致嫌疑人漏網。

由此我們可以發現，如果平臺能夠提供表單的篩選功能，能有效提高資料篩選效率，協助提升業務辦理效率。

那篩選功能要如何設計呢？

2. 篩選功能設計

完整的篩選功能分為篩選項選擇、優先順序排序、篩選項設計和篩選項間關係三部分組成，下面我們將逐個討論。

1）篩選項選擇

作為功能設計者，我們需要先梳理資料中符合成為篩選項條件的資料項，只有先摸清可以提供的資料項，後續才好結合資料特徵設計篩選項的提供方式。

個人總結的適合成為篩選的資訊有以下三個特徵：

資料在系統中是獨立的欄位，而不是由多個欄位拼湊而成的。

有時候我們會將一些獨立欄位拼湊成一個欄位展示給使用者，比如手機商城的「商品名稱：華為mate40pro 5G手機 亮黑色 8+256G全網通」，但使用者是不知道的，會認為這是一個欄位，就算技術上可以對拼湊的欄位內容同時進行多個原始欄位的組合篩選，可在使用者的認知中，無法理解為什麼我篩選的是欄位A，檢視結果的欄位是內容B，這將是無效的篩選，所以篩選項建議是獨立的欄位；

資料內容高度一致，數量較少。

作為功能的提供者，我們需要考慮使用者在使用時的使用場景，試想一下，如果一個篩選項中的內容過多，那麼使用者將很難在大量的內容中快速地找到目標內容，也就無法選擇，所以建議篩選項的內容的數量要少。

資料更新頻率低，易於平臺維護。

由於篩選項是系統提供的功能，我們需要考慮平臺的運營人員的場景出發，高頻地更新內容，對平臺資訊維護的及時性和準確性都是極大的挑戰，提供錯誤的資訊會降低使用者對平臺的信任，因此更新頻率低的欄位更適合作為篩選項。

比如，手機品牌符合篩選項的條件，首先它在系統中是一個獨立的欄位，然後手機市場的知名品牌已經形成且更新頻率低，所以手機品牌這個欄位適合成為手機商城的篩選項。

而商品名稱這個欄位就不適合作為篩選項，分析後我們知道，它是由商品多個屬性內容拼湊而成的，包括品牌、記憶體、電池容量、攝像頭數量等等，且各屬性內容由商家填寫，五花八門，可隨意修改，就不適合做篩選項了。

2）篩選項優先順序排序

篩選項優先順序排序指的是評估已有可成為篩選項欄位的優先順序，評估出需要實現哪些篩選項，哪些不實現，哪些優先實現，哪些靠後實現等。

因為，不是所有的篩選欄位都是使用者需要的，不同的欄位在業務中的重要程度也是不一樣的，因此在掌握可以成為篩選項的資料欄位後，我們需要結合各欄位在業務中的重要程度，對所有可成為篩選項的欄位做優先順序排序，甚至是排除一些在使用過程中不會用到的篩選欄位，這也是為後一步篩選功能設計做設計依據。

如果不對篩選項進行優先順序排序，而是在介面中一股腦地、一視同仁地隨機排序提供篩選項，對於從來不需要的欄位我們提供了無效的功能，對於高頻的欄位我們增加了使用者的查詢時間，得不償失。

還是以手機商城為例，手機品牌、CPU型號、是否曲面屏、作業系統、機身顏色、上市時間等資訊均可以作為篩選項，但品牌、CPU型號、是否曲面屏等篩選項是高頻的篩選欄位；而對另外三項篩選頻率較低，所以我們可以將品牌、CPU型號等資訊的篩選項放在明顯的位置，且提供易選擇的互動方式；而將其他欄位靠後放置，甚至摺疊起來。

3）篩選項設計

整理完系統將要提供的篩選項欄位後，需要根據資料內容的特徵，對篩選項進行分類並設計。

B端產品資料表單的篩選功能不能太複雜，同時不能佔用頁面過多的有效面積，所以基於個人經驗，可以將可成為篩選項的資料欄位分為以下三種類型。

日期：

日期是表格中常見的欄位類型，而場景事件的觸發離不開時間選擇，比如站時間、出站時間等，所以日期選擇是最常見的篩選項之一。

日期選擇器是讓使用者在應用中選擇日期或時間段的一類控制項，用於查詢過往時間發生的事情，可以根據使用者習慣定義預設時間，如最近7天，也可以根據場景特徵增加快捷選項，如最近一個月/三個月等設計。

字典類：

字典類是對錶格欄位中，使用者通過選擇的方式完成資訊錄入的、系統可以預先配置篩選項內容的欄位的統稱，如狀態類欄位：已進站/已安檢/已出站，標籤類欄位：性別男/女，組織架構類欄位：省-市-區等等，是表單篩選項中常客。

字典類欄位的內容更新頻率低、涵蓋範圍廣，通過讓使用者選擇範圍而不是自定義的形式進行篩選，可降低學習成本，給使用者以確定性內容，能提高篩選命中率，從而提升業務效率。

文字/數值：

文字類和數值類的欄位內容，是表單中常見的欄位類型，但想要篩選這一類欄位的內容，往往無法精確定位，需要提供含有運算符的篩選操作，常見的篩選操作有：大於、小於、是、否、包含、不包含、為空、不為空等等。

此類篩選操作可以滿足更多的使用者場景，為使用者多條件多欄位篩選提供有利保障。

4）篩選項間關係

上面我們討論了針對常見的不同欄位類型的篩選項設計，這一部分簡單溝通下不同篩選項間關係的設計，畢竟多數情況下的表單篩選都是多維度的，需要考慮不同篩選項間的關係，很少見到一個表單只有一個篩選項的情況。

「或」關係：

對於同一表格下的相同欄位的篩選項，一般使用「或」關係進行篩選，常見的是對字典類多選內容的處理。

如：查詢2021年3月28日在草埔站、布吉站或木棉灣站存在刷卡記錄的票卡卡號，這樣我們就能對同一資料項的多個站點資料進行篩選。

「且」關係：

對於同一表格下的不同欄位篩選項，一般使用「且」關係處理，如：2021年3月28日存在刷卡記錄，且在草埔站進站的票卡卡號。

簡單總結一下，採用何種篩選形式，取決於業務邏輯/場景和表單內容本身，本質都是希望能協助使用者對資料內容進行快速定位，找到使用者想要的內容。

以上就是個人對篩選功能的一些思考，個人也是希望通過對使用者場景的深化分析，加深對使用者需求的理解。

本文由 @伯安 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議