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

最近B端一詞在互聯(lián)網(wǎng)中的呼聲很高，對于B端和C端而言，面向的用戶是不一樣的，常用的硬件設(shè)備也有所區(qū)分，C端移動端偏多，B端則是網(wǎng)頁端偏多，當(dāng)然也會有移動端的B端項目。

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

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

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

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

一、搜索和篩選的定義

搜索是用戶指定任意條件（文本、語音等），平臺對此條件進(jìn)行檢索后，展示對應(yīng)內(nèi)容。

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

二、搜索的使用場景

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

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

特定的頁面指的是在摸一個模塊加入搜索的功能，例如在數(shù)據(jù)列表頁面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確的搜索用戶想要的目標(biāo)信息。

案例分享：

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

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

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

2. 使用場景：全局搜索

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

案例分享：

下圖是一個關(guān)于B端系統(tǒng)全局搜索的界面，需求是根據(jù)關(guān)鍵詞搜索出所有權(quán)責(zé)清單中的事項，界面中搜索框作為顯眼的模塊，通過輸入的關(guān)鍵詞搜索出所有帶有關(guān)鍵詞的事項，事項分別處于不同的清單，采用標(biāo)簽區(qū)分，因為此項目中只對不同清單中的事項做搜索，所以沒有采用tab標(biāo)簽的形式。

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

（google）

（飛書文檔）

三、篩選的使用場景

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

1. 普通篩選

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

案例分享：

如下圖是關(guān)于人員管理的數(shù)據(jù)列表頁面，頁面中有“部門”和“狀態(tài)”兩個篩選條件，是通過點(diǎn)擊出現(xiàn)下拉框出現(xiàn)對應(yīng)的條件的值，當(dāng)選中對應(yīng)的條件值，列表中就會出現(xiàn)對應(yīng)的目標(biāo)值，這里的篩選和搜索功能是一起使用的，當(dāng)然也可以單獨(dú)分開使用，也是需要根據(jù)實際業(yè)務(wù)場景區(qū)分搭配使用搜索和篩選的功能。

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

2. 高級篩選

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

案例分享：

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

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

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

(飛書)

(飛書)

(黑帕云)

四、總結(jié)

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

隨著B端業(yè)務(wù)的復(fù)雜性增強(qiáng)，傳統(tǒng)的功能模式以及交互模式以及無法完全的滿足現(xiàn)有的需求，所以需要在原來的基礎(chǔ)上做更好的優(yōu)化，使其更好的滿足現(xiàn)有的需求，也是操作和管理更加簡單，使開發(fā)更簡單更容易維護(hù)。

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

本文由 @設(shè)計小余 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議