在任意一個B端系統中，都會涉及到數據篩選模塊的應用。那么如何設計，才能保證該模塊在實際使用場景中的適用性呢？本文作者分析了“數據篩選”模塊的設計思路，一起來看一下吧。

在任意一個B端系統中，必然都會涉及到數據篩選模塊的應用。

那么如何設計，才能保證該模塊在實際使用場景中的適用性？

“用戶需求”“需求匹配”。

透過現象看本質，數據篩選模塊的本質就是一個工具。

而對于一個工具適用性的判斷，最直接的標準，就是看是否能解決對應的問題。

對應到模塊設計中，就是看能否解決用戶的需求，所以用戶需求的確定是我們設計時的首要任務。

在了解了用戶的需求后，接下來需要做的就是需求匹配。

現階段對于需求的匹配一般會采用兩種方法：新工具的創造，老工具的適配。

新工具的創造，就是根據用戶當前的需求，從0到1設計出一個可以解決當前問題的產品。

老工具的適配，就是通過對于現有工具的評估篩選，從而選出可以解決當前用戶需求的產品。

一、用戶需求

在數據篩選模塊的使用場景下，用戶的需求是什么？

進行信息的查詢？

對于信息進行分類查看？

還是需要對信息進行排列組合？

以上這些“需求”，只是在用戶需求實現過程中，所采用的不同的實現方法。

若是對這些方法進行歸納總結就可以發現，其背后存有一個共同目標：“信息的獲取”。

在探析用戶需求時，需要透過現象看本質，從表面的需求中，抽象出更為本質性的需求。

二、需求匹配

在了解了用戶本質性需求后，需要做的就是針對這一需求，給出對應的解決方案。

對于“信息獲取”來說，市面上的解決方案已經比較成熟。

所以在實際設計時，我們需要做的就是去衡量現有方案與用戶需求的適配度。

市面上的解決方案可以大致分成兩大類：搜索模塊、篩選模塊。

1. 搜索模塊

定義：用戶輸入任意條件后，將輸入的條件與數據庫中已有的數據進行檢索對比，從而給出一個精確的搜索結果。

特點：支持信息的精確定位，過程簡潔高效。

適用場景：信息點明確，目標感強，有短時間內獲取到對應信息需求。

對于習慣通過搜索模塊獲取信息的用戶，可以將其畫像概括為“上街購物的男生”：

需求清晰，目標明確，到了商場就會直奔對應的店鋪進行商品的購買。整個過程簡潔明了，不會有多余的動作。

2. 篩選模塊

定義：通過各種條件對于數據進行分類，通過一步步的分類篩選，最終給出一個范圍性結果。

特點：可供用戶進行篩選的維度多，篩選過程較復雜。

適用場景：對于信息有獲取的需求但信息點不明確，需要借助外界已有的一些規則進行信息點的進一步篩選，從而才能做出對應的選擇。

對于習慣通過篩選模塊進行信息獲取的用戶，其用戶畫像可以概括成“逛街的女生”：

有整體大的方向，但沒有明確的目的。最終是否要購買，是在不斷的篩選嘗試后，才做出的決定。

三、可優化點

需求的匹配，只是幫助我們確定了一個概括性的解決方案。

在具體設計時，根據用戶需求點的不同，還可以對于解決方案進行更細致的優化。

1. 篩選項的折疊問題

篩選項的外在顯露，目的是為了讓用戶可以第一時間對于篩選項進行操作，減少用戶使用路徑。

但如果用戶所需要篩選的篩選項較多，在設計時就需要考慮篩選項的折疊問題。

篩選項顯示的越多，用戶通過篩選模塊所獲取的結果就會越精確。

但更多的篩選項同時也意味著，需要更多的空間進行排列展示，這樣屏效性就會直線下降。

如何對于用戶需求與用戶體驗做出平衡？這就需要產品經理進行決策。

這里先行給出我自己的一下見解供大家參考：

• 對于所有的篩選項，按照用戶使用頻率、篩選項重要程度進行優先級排序，之后再結合整體UI樣式以及屏占比，優先平鋪展示那些優先級高的篩選項
• 對于排序較低的篩選項，可以將其折疊，待點擊后再次展開
• 如果初始狀態有默認選中的篩選項，優先外露這些篩選項

2. 篩選結果的展示

對于篩選結果的展示，一般有兩種交互方式：手動篩選、實時自動篩選。

（1）手動篩選

用戶完成選項選擇后，手動點擊查詢按鈕，從而顯示對應的篩選結果。

手動篩選最大的特點，在其結果的穩定性與確定性。

用戶是在確認了一個或幾個篩選條件進行的檢索，其結果必然更為精確，更符合用戶心理預期。

（2）實時自動篩選

用戶在選擇任意一個篩選項，篩選結果都會進行同步更新。

實時自動篩選最大的特點，就在其最終結果的遞進性。

用戶經過一層層的選項確認，一個個商品的篩選后，才決定自己最終目標。

Tips：

• 手動篩選適合對于自己需求非常明確的用戶
• 實時自動篩選適合哪些有信息獲取需求，但對于信息又不是十分明確的用戶
• 兩種方式在后端實現上大差不差，而在前端實現上，實時的自動篩選每次都需要調用對應的接口，如果數據量較大，就會造成頁面的卡頓

3. 篩選項的突出

將已選的選項突出展示，方便用戶對于選項的尋找與查詢，優化用戶使用體驗。

同時將已選項突出展示，也可以提高屏幕的屏效性，方便篩選結果的展示。

4. 重置按鈕的設置

重置按鈕的添加，目的是對于已選項進行一鍵清理，從而是用戶可以更為快速的開始新一輪的篩選，減少整個篩選過程的時間。