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

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

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

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

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

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

一、搜索和篩選的定義

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

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

二、搜索的使用場(chǎng)景

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

1. 使用場(chǎng)景：在特定的頁(yè)面搜索

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

案例分享：

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

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

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

2. 使用場(chǎng)景：全局搜索

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

案例分享：

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

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

（google）

（飛書(shū)文檔）

三、篩選的使用場(chǎng)景

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

1. 普通篩選

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

案例分享：

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

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

2. 高級(jí)篩選

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

案例分享：

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

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

這類(lèi)高級(jí)篩選的實(shí)際案例中也有很多，例如飛書(shū)里面的篩選、黑帕云里面的篩選等等。

(飛書(shū))

(飛書(shū))

(黑帕云)

四、總結(jié)

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

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

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

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

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