編輯導語：隨著B端項目越來越普及，企業也逐漸意識到產品的視覺效果、功能的好用性及用戶體驗的友好性等等。本文作者通過自身在工作中的實戰經驗，分享了關于B端產品中的搜索及篩選的不同使用場景，一起來看一下吧。

最近B端一詞在互聯網中的呼聲很高，對于B端和C端而言，面向的用戶是不一樣的，常用的硬件設備也有所區分，C端移動端偏多，B端則是網頁端偏多，當然也會有移動端的B端項目。

我在B端行業中實戰多年，也見證了B端產品在各個方面發生了很多的變化，比如從原本B端產品比較注重功能的實現，只要功能能使用，在頁面的視覺上以及功能是否好用上都沒有看得很重。

而現在隨著B端項目越來越普及，企業也逐漸意識到產品的視覺效果、功能的好用性以及用戶體驗的友好性等等，多方面地考慮一個產品的實現，從多維度做好產品，使用戶使用達到能用性、好用性、易用性的效果。

B端項目更多的是針對實際業務情況而展開設計和研發的，所以一個需求的制定是會提前與對應的客戶討論，一個需求的開發是需要多次確認需求后而進行的。定制化開發的需求，對于用戶來說，自己也會有一個預期的結果；而對于企業研發的普遍使用的B端項目而言，需求是需要通過用戶調研以及市場調研等多方面考量。

今天我將會通過自身在工作中的實戰經驗，分享關于B端產品中的搜索以及篩選的不同使用場景，看似簡單的功能，實際上也并不簡單，下面我們一起來看看吧！

一、搜索和篩選的定義

搜索是用戶指定任意條件（文本、語音等），平臺對此條件進行檢索后，展示對應內容。

篩選是平臺為用戶提供指定條件，用戶可以選擇查看符合一類或多類條件下的內容。

二、搜索的使用場景

搜索功能一般來說是用戶在自己有目標的情況下，知道想要查詢的目標（準確的目標或者模糊的目標），通過輸入文本關鍵詞實現查詢目標。搜索的樣式基本一致，只是在交互上會略有不同，使用的場景有兩類。

1. 使用場景：在特定的頁面搜索

特定的頁面指的是在摸一個模塊加入搜索的功能，例如在數據列表頁面加入搜索的功能，搜索的目標只在該模塊該內容中進行搜索，搜索的信息具有局限性，當然也是更加準確的搜索用戶想要的目標信息。

案例分享：

下圖是一個關于部門管理的列表頁面，此頁面加入了搜索的功能，搜索是通過輸入部門關鍵詞，這里的搜索有限定輸入特定的字段信息，對于列表中的字段類型會有很多，在搜索的時候，可以通過控制某個字段或者某幾個字段的信息來展開搜索。

交互場景01：搜索后面帶有“搜索”按鈕，代表輸入關鍵詞信息后，需要點擊“搜索”按鈕，列表中的數據才會發生變化，才會真正的搜索目標信息，這種情況對于列表數據多的情況下會采用。

交互場景02：搜索只有一個文本輸入框，沒有按鈕可點擊，這樣的搜索交互是通過輸入關鍵詞后，列表中的信息會根據輸入的關鍵詞實時查詢，搜索結果更快更及時，這種交互一般對于數據信息比較少的情況下會比較友好，加載的速度更快。

2. 使用場景：全局搜索

對于系統中模塊分類較多，所涉及到的內容比較全面的，B端系統也會選擇全局搜索，全局搜索在C端很常見，只需要在全局搜索框中輸入自己模糊的目標信息，系統會根據輸入的關鍵信息搜索出各個模塊所對應的目標字段，如果分類較多，界面還可以根據分類tab分別歸類不同模塊的內容。

案例分享：

下圖是一個關于B端系統全局搜索的界面，需求是根據關鍵詞搜索出所有權責清單中的事項，界面中搜索框作為顯眼的模塊，通過輸入的關鍵詞搜索出所有帶有關鍵詞的事項，事項分別處于不同的清單，采用標簽區分，因為此項目中只對不同清單中的事項做搜索，所以沒有采用tab標簽的形式。

帶有tab分類的搜索結果案例也有很多，例如google、百度搜索，以及飛書里面的全文檢索等等。

（google）

（飛書文檔）

三、篩選的使用場景

我們最常見的篩選是給出特定的條件，用戶直接選擇對應的條件即可實現篩選，也就是現在常用的普通篩選，但是隨著B端業務的復雜性逐漸增強，簡單的篩選已經無法滿足現在復雜的業務需求了，后面開始引進高級篩選的功能，在不同的需求情況下會選擇采用不同的篩選模式，以便于更好地實現功能，滿足用戶的不同需求。

1. 普通篩選

普通的篩選是直接給出固定的條件，用戶只需要選擇一個條件或者多個條件，實現數據篩選的目的。所給的條件是數據中一些特定的值，是用戶高頻篩選的值，客戶也會提出對某類條件進行篩選的功能，在B端項目中，這些篩選條件客戶本身是更熟悉需求的，所以這類條件一般由客戶提供。

案例分享：

如下圖是關于人員管理的數據列表頁面，頁面中有“部門”和“狀態”兩個篩選條件，是通過點擊出現下拉框出現對應的條件的值，當選中對應的條件值，列表中就會出現對應的目標值，這里的篩選和搜索功能是一起使用的，當然也可以單獨分開使用，也是需要根據實際業務場景區分搭配使用搜索和篩選的功能。

注意：搜索和篩選多種功能同時使用時，需要考慮所過濾后的數據是求并集還是交集的問題。

2. 高級篩選

高級篩選是在基礎篩選的基礎上加入了自定義的功能，原理都是在特定的條件下選擇目標值進行篩選，只是通過用戶自定義需要添加的篩選的條件，這樣的篩選方式更加靈活，可以滿足很多復雜的篩選需求，并且一次開發，長久使用，后續新增篩選條件只需要在篩選中加入特定的條件即可，并且篩選的操作達到了一致性，操作位置集中管理，方便用戶使用。

案例分享：

如下圖（底部具體的清單詳情頁面我做了處理，不方便透露項目）在對應的功能模塊添加一個篩選的按鈕，點擊篩選按鈕出現設置篩選條件的下拉框，默認狀態只有一個“添加條件”的按鈕，點擊“添加條件”上面會出現選擇條件的框，會有不同的篩選值可選擇，前后一一對應結果，且可以添加多個條件。

并且可選擇|所選值包含與不包含的關系，在添加多個條件后，右上角有一個外加的篩選條件“符合以下——所有條件/任一條件”也就是對所設置的篩選的條件取值的關系，是選擇取并集還是交集的。

這類高級篩選的實際案例中也有很多，例如飛書里面的篩選、黑帕云里面的篩選等等。

(飛書)

(飛書)

(黑帕云)

四、總結

在B端項目中，搜索和篩選基本上可以說是必不可少的功能，B端產品中大多數是對功能和數據的管理，數據一般會比較豐富，所以這兩個功能常被使用。

隨著B端業務的復雜性增強，傳統的功能模式以及交互模式以及無法完全的滿足現有的需求，所以需要在原來的基礎上做更好的優化，使其更好的滿足現有的需求，也是操作和管理更加簡單，使開發更簡單更容易維護。

以上是我對近期所做的項目中所遇到的搜索和篩選功能的總結與分享，希望對處于B端的設計小伙伴有所幫助，也希望大家指出文章中的不足之處，期待和大家一起學習進步！

本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議