搜索是大家頻繁接觸的功能，作者就搜索框相關(guān)的一些特點(diǎn)和細(xì)節(jié)，為搜索框的設(shè)計(jì)師提供一些建議和思考，希望本篇文章能對(duì)大家有所幫助。

你可能認(rèn)為，搜索不就是一個(gè)矩形框+放大鏡圖標(biāo)再加一個(gè)占位符不就搞定了嗎？經(jīng)過(guò)多年的設(shè)計(jì)工作頻繁設(shè)計(jì)搜索功能后，我發(fā)現(xiàn)在不同類(lèi)型的產(chǎn)品中搜索框的交互方式、視覺(jué)樣式都有所不同，且用戶(hù)在搜索前、搜索中、搜索后都需要注意用戶(hù)在搜索各個(gè)流程中的可能操作，包括正向流程、反向流程。搜索框的設(shè)計(jì)并不簡(jiǎn)單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。

一、搜索的基本屬性

搜索是用戶(hù)將查詢(xún)的信息輸入搜索器中，搜索引擎就會(huì)在約定的規(guī)則下將獲取到的信息反饋給用戶(hù)的過(guò)程。搜索是 B 端產(chǎn)品中非常重要的一個(gè)功能模塊，通過(guò)搜索框用戶(hù)可以快速找到或者篩選出自己想要的內(nèi)容，在引導(dǎo)用戶(hù)走向方面起到了絕對(duì)性的作用。

1. 用戶(hù)分層

體驗(yàn)設(shè)計(jì)中有個(gè)概念叫用戶(hù)分層，即便是同一個(gè)頁(yè)面，我們也需要去細(xì)分不同的場(chǎng)景對(duì)用戶(hù)做分層，為不同的用戶(hù)做設(shè)計(jì)，搜索功能就是最好的為有明確目標(biāo)的用戶(hù)分層的設(shè)計(jì)。搜索功能的用戶(hù)分層可分為幾種場(chǎng)景：

• 有明確想搜的內(nèi)容并記得所有關(guān)鍵詞
• 有明確想搜的內(nèi)容但記不清所有關(guān)鍵詞
• 無(wú)明確想搜的內(nèi)容

搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱(chēng)？編號(hào)？等等…有明確目的型用戶(hù)在進(jìn)行了搜索這個(gè)行為后，便生成了搜索歷史。因此，我們可以通過(guò)挖掘用戶(hù)搜索行為背后的目的，來(lái)分析為什么使用不同的布局。模糊搜索使用的頻率居多，畢竟有時(shí)候用戶(hù)不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過(guò)也不是絕對(duì)的，兩者皆可選擇，可根據(jù)產(chǎn)品場(chǎng)景選擇。

2. 搜索的作用

2.1 降低用戶(hù)的行為門(mén)檻

搜索功能可以簡(jiǎn)單地輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶(hù)需求的內(nèi)容，將原有的用戶(hù)行為成本轉(zhuǎn)移給系統(tǒng)，從而讓使用體驗(yàn)更加快捷、輕松。

同時(shí)語(yǔ)音輸入和拍照搜索進(jìn)一步降低了用戶(hù)行為門(mén)檻。

2.2 減少用戶(hù)操作，縮短行為路徑

搜索功能可以幫助用戶(hù)快速定位信息，從而提高了用戶(hù)對(duì)內(nèi)容的觸達(dá)效率。常見(jiàn)的例子就是：bir 用戶(hù)有明確的購(gòu)物需求時(shí)，不需要一步步點(diǎn)擊商品分類(lèi)，選擇商品類(lèi)型、品牌等信息，就可以快速直達(dá)自己所需的商品。

所以，搜索框的體驗(yàn)如何，決定著B(niǎo)端產(chǎn)品解決問(wèn)題的能力、效率以及用戶(hù)的使用頻率。

好的搜索框一方面能幫助用戶(hù)節(jié)約時(shí)間成本，讓用戶(hù)在大量且復(fù)雜的信息中篩查所需目標(biāo)，提升用戶(hù)體驗(yàn)；另一方面，還能協(xié)助產(chǎn)品收集用戶(hù)行為目標(biāo)并做好數(shù)據(jù)埋點(diǎn)，為后期的更新迭代提供強(qiáng)有力的依據(jù)。

除了設(shè)計(jì)方式外，搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則，受到算法精準(zhǔn)性、商業(yè)化干預(yù)程度的影響，設(shè)計(jì)師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶(hù)的精確搜索、模糊搜索需求，以從信息設(shè)計(jì)層面提升用戶(hù)體驗(yàn)。

二、搜索的流程

搜索流程，即搜索前、搜索中、搜索后的頁(yè)面跳轉(zhuǎn)以及搜索框形態(tài)的變化。

對(duì)應(yīng)的就有：搜索入口——搜索推薦頁(yè)——搜索聯(lián)想頁(yè)——搜索結(jié)果頁(yè)——搜索結(jié)果頁(yè)返回。

設(shè)計(jì)師想要設(shè)計(jì)流暢的搜索體驗(yàn)是無(wú)法避開(kāi)梳理搜索流程的，考慮完整的搜索鏈路和用戶(hù)關(guān)鍵體驗(yàn)路徑，并且設(shè)計(jì)出對(duì)應(yīng)的所有細(xì)節(jié)，將搜索功能的價(jià)值發(fā)揮到最大化。

對(duì)于搜索系統(tǒng)來(lái)說(shuō)，整個(gè)流程可以分為三步，分別是：

1. 理解用戶(hù)搜索意圖
2. 召回內(nèi)容
3. 排序內(nèi)容

三、搜索的 B 端應(yīng)用場(chǎng)景

B 端業(yè)務(wù)中搜索使用的場(chǎng)景有兩類(lèi)：一類(lèi)是全局搜索，一類(lèi)是頁(yè)面局部搜索（常見(jiàn)的有列表搜索、表單搜索）。

1. 全局搜索

對(duì)于B端系統(tǒng)中模塊分類(lèi)較多，所涉及到的內(nèi)容比較全面的，一般會(huì)選擇全局搜索，全局搜索是通過(guò)關(guān)鍵詞匹配全局范圍內(nèi)的信息來(lái)搜索的。

• 優(yōu)勢(shì)：無(wú)學(xué)習(xí)門(mén)檻，用戶(hù)無(wú)需考慮內(nèi)容對(duì)應(yīng)的分類(lèi)只需輸入關(guān)鍵詞；
• 劣勢(shì)：精準(zhǔn)度不夠高；搜索出來(lái)內(nèi)容泛；需用戶(hù)二次查找目標(biāo)內(nèi)容。

注意：設(shè)計(jì)全局搜索時(shí)要注意搜索后的結(jié)果展示邏輯，如果分類(lèi)較多，界面還可以根據(jù)分類(lèi)tab分別歸類(lèi)不同。

tips：搜索功能在頁(yè)面中的重要程度及搜索范圍，決定了搜索的位置和樣式。

目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：頁(yè)面居中、頁(yè)面頂部居中、頁(yè)面頂部右邊、頁(yè)面頂部左邊。

知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置，引導(dǎo)用戶(hù)進(jìn)行搜索，并且搜索框內(nèi)的占位文字根據(jù)算法會(huì)間隔一段時(shí)間改變，引導(dǎo)用戶(hù)發(fā)現(xiàn)新的內(nèi)容，促進(jìn)用戶(hù)在知乎上的使用時(shí)長(zhǎng)。

2. B 端全局搜索入口的樣式

2.1頂部導(dǎo)航欄搜索框

最常見(jiàn)的搜索方式之一，將搜索以輸入框的形式居于頁(yè)面頂部（狀態(tài)欄或標(biāo)題欄下方），在視覺(jué)上非常醒目，用戶(hù)進(jìn)入應(yīng)用即能快速找到，很符合用戶(hù)的視覺(jué)瀏覽動(dòng)線(xiàn)，也是 C 端產(chǎn)品提高轉(zhuǎn)化率的流量入口。

2.2 “放大鏡”圖標(biāo)入口

形態(tài)相對(duì)比較簡(jiǎn)單，通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角，視覺(jué)上不會(huì)過(guò)于突出，常用于搜索行為不是特別頻繁的場(chǎng)景，需點(diǎn)擊后才會(huì)跳轉(zhuǎn)至搜索框頁(yè)面。

Icon 搜索入口相較于上述提到的類(lèi)型在視覺(jué)引導(dǎo)方面略遜一籌，相對(duì)弱化了搜索功能，但節(jié)省了更多的導(dǎo)航欄空間，呈現(xiàn)位置比較靈活，可單獨(dú)呈現(xiàn)、也可與其多個(gè)其他功能 icon 并列組合展示。

3. 頁(yè)面局部搜索

指的是在頁(yè)面中的某個(gè)模塊加入搜索的功能。常見(jiàn)在數(shù)據(jù)列表頁(yè)面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確地搜索用戶(hù)想要的目標(biāo)信息。下圖是一個(gè)美團(tuán)商家后臺(tái)的列表頁(yè)面，此頁(yè)面加入了搜索的功能。

另外，B端常見(jiàn)在表單頁(yè)面加入搜索的功能，搜索的目標(biāo)只在表單選擇內(nèi)中進(jìn)行搜索，搜索的信息同樣具有局限性，可以通過(guò)控制某個(gè)字段或者某幾個(gè)字段的信息來(lái)展開(kāi)搜索。

4. 同一頁(yè)面多個(gè)搜索入口

B端業(yè)務(wù)中復(fù)雜的場(chǎng)景中存在同一個(gè)頁(yè)面中有多個(gè)搜索入口，設(shè)計(jì)前需梳理清楚每一個(gè)搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過(guò)程、搜索結(jié)果是否一致，在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。

四、搜索的類(lèi)別

1. 根據(jù)搜索結(jié)果分類(lèi)

1.1 模糊搜索

模糊搜索是用戶(hù)搜索意圖不明確時(shí)，將用戶(hù)的查詢(xún)與待檢索的內(nèi)容進(jìn)行模糊匹配。

模糊搜索無(wú)法精確理解用戶(hù)的查詢(xún)意圖，搜索結(jié)果可能有大批量用戶(hù)不想要的信息，使用模糊搜索時(shí)一定要結(jié)合實(shí)際場(chǎng)景，慎重使用。

優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)；

缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索186，把相關(guān)號(hào)碼也匹配出來(lái)。

1.2 精確搜索

精確搜索是指用戶(hù)在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。

根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找?？梢詭椭脩?hù)在巨大的信息池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。

優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。

缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索。

1.3 總結(jié)：

我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶(hù)的專(zhuān)業(yè)度和使用習(xí)慣來(lái)綜合決策使用哪一種方式更合適。如果側(cè)重查詢(xún)效率且用戶(hù)是有專(zhuān)業(yè)門(mén)檻的使用者時(shí)，可以?xún)?yōu)先考慮精確搜索；如果側(cè)重查詢(xún)結(jié)果的豐富度，可以?xún)?yōu)先考慮模糊搜索。

2. 根據(jù)搜索欄表現(xiàn)形式分類(lèi)

基于搜索欄的表現(xiàn)形式，可以分為以下四種類(lèi)型：?jiǎn)螌傩运阉鳌⑶袚Q屬性搜索、多屬性模糊搜索以及多屬性組合搜索。

類(lèi)型之間沒(méi)有優(yōu)劣之分，根據(jù)業(yè)務(wù)場(chǎng)景使用對(duì)應(yīng)的類(lèi)型即可。

2.1 單屬性搜索

單屬性精確搜索：通過(guò)某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶(hù)決策有意義的。

適用場(chǎng)景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)。

2.2 切換屬性搜索

切換屬性搜索也被稱(chēng)為定向搜索，是由用戶(hù)主動(dòng)選定搜索范圍后再進(jìn)行搜索；

優(yōu)勢(shì)：搜索精準(zhǔn)度高。

劣勢(shì)：增加了部分用戶(hù)的學(xué)習(xí)成本及操作步驟。

適用于注重搜索結(jié)果的精準(zhǔn)性或展示產(chǎn)品搜索能力等場(chǎng)景，定向搜索適用的幾種場(chǎng)景：

a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能，用戶(hù)對(duì)于搜索有明確目標(biāo)，定向可以幫助用戶(hù)提高搜索的精準(zhǔn)范圍和效率；

b、搜索時(shí)輸入的內(nèi)容無(wú)法通過(guò)同一套搜索交互方式和后臺(tái)計(jì)算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結(jié)果存在多樣性；

c、需外露產(chǎn)品亮點(diǎn)功能，有多個(gè)常用的搜索屬性，對(duì)于前置條件的數(shù)據(jù)計(jì)算能力和開(kāi)發(fā)成本更高。

常見(jiàn)的切換屬性搜索的三種設(shè)計(jì)形式：

2.2.1.下拉框型

明確并固定選項(xiàng)類(lèi)別，降低用戶(hù)操作難度。下拉篩選適合的選項(xiàng)類(lèi)別有限，不適合多類(lèi)別、復(fù)雜維度的分類(lèi)。

2.2.2. Tab 型

平鋪展示搜索條件內(nèi)容，每個(gè) Tab 標(biāo)簽代表一個(gè)篩選維度，操作便捷。Tab 標(biāo)簽的數(shù)量不宜過(guò)多。

2.2.3. 組合型

B 端類(lèi)產(chǎn)品數(shù)據(jù)量豐富，在實(shí)際使用時(shí)，簡(jiǎn)單的方式很難全面覆蓋到各個(gè)搜索場(chǎng)景，精準(zhǔn)定位搜索結(jié)果。所以通過(guò)多個(gè)篩選維度的結(jié)合，形成多屬性的組合搜索，能夠大幅提升搜索結(jié)果的準(zhǔn)確性。

切換屬性高級(jí)搜索

B 端系統(tǒng)還有一種比較常見(jiàn)的搜索類(lèi)型，是在定向搜索的基礎(chǔ)上，進(jìn)一步豐富了搜索選項(xiàng)，比如指定搜索的時(shí)間范圍、數(shù)據(jù)類(lèi)型等，設(shè)置的選項(xiàng)越詳細(xì)越能夠提升搜索結(jié)果的效果和準(zhǔn)確性。

在設(shè)計(jì)時(shí)需要注意，B 端系統(tǒng)用戶(hù)角色多，層次不同，所以更加需要注重搜索前的引導(dǎo)，針對(duì)搜索規(guī)則、搜索限制等，應(yīng)該適時(shí)的以簡(jiǎn)練易懂的語(yǔ)言提示。

2.3 多屬性模糊搜索

多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對(duì)數(shù)據(jù)的精確度較高。

適用場(chǎng)景：業(yè)務(wù)類(lèi)型多樣用戶(hù)可能記憶不精確且有多個(gè)數(shù)據(jù)特征，對(duì)搜索的便捷性要求高精確性要求低。

2.4 多屬性組合搜索

多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對(duì)空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。

適用場(chǎng)景：綜合篩選項(xiàng)，對(duì)空間的利用率高，多標(biāo)簽組合搜索可以得到較為精準(zhǔn)的搜索結(jié)果。

搜索欄設(shè)計(jì)

聊了這么多搜索內(nèi)容，與設(shè)計(jì)師密切相關(guān)且對(duì)外輸出的首要就是搜索欄設(shè)計(jì)。

對(duì)于用戶(hù)來(lái)說(shuō)，搜索是為了解決用戶(hù)明確或者不明確的搜索需求，讓用戶(hù)能夠快速準(zhǔn)確搜到想搜的內(nèi)容。設(shè)計(jì)欄設(shè)計(jì)的目的就是，讓搜索能夠提高用戶(hù)獲取信息、內(nèi)容的效率。

3. 常見(jiàn)搜索框設(shè)計(jì)樣式

• 1、填充色：通常選用與頁(yè)面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶(hù)查找。
• 2、線(xiàn)框：多用于干凈簡(jiǎn)潔的背景頁(yè)面。
• 3、投影：常用于風(fēng)格簡(jiǎn)潔輕量的風(fēng)格頁(yè)面，同時(shí)搜索功能級(jí)別較高的場(chǎng)景。
• 4、透明度：常用于背景色復(fù)雜的場(chǎng)景，目的是為不破壞背景頁(yè)面的整體效果，在視覺(jué)上更和諧。無(wú)外框：用于風(fēng)格簡(jiǎn)潔的大留白的頁(yè)面。

五、搜索的交互

完整的搜索流程包含了各種細(xì)節(jié)：例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過(guò)程包含很多交互的細(xì)節(jié)設(shè)計(jì)，下面從激活搜索欄、輸入反饋、觸發(fā)方式來(lái)展開(kāi)說(shuō)明。

1. 激活搜索欄

搜索激活指用戶(hù)激活搜索框時(shí)出現(xiàn)的搜索下拉面板，B 端業(yè)務(wù)中搜索激活內(nèi)容常見(jiàn)以下三種：

1.1 搜索歷史

搜索記錄通常以標(biāo)簽或列表的形式顯示，以時(shí)間順序從新到舊排列，一般不會(huì)完全展示，可以滑動(dòng)查看更多，或者折疊展開(kāi)。

注意：搜索記錄會(huì)涉及對(duì)用戶(hù)行為的記錄，關(guān)系到用戶(hù)的搜索隱私，所以應(yīng)當(dāng)允許用戶(hù)手動(dòng)刪除。

在 PC 端產(chǎn)品具有頁(yè)面空間優(yōu)勢(shì)，用戶(hù)的搜索過(guò)程完全是通過(guò)搜索欄完成的。

搜索欄中會(huì)增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶(hù)快速完成搜索。同時(shí)也可以喚醒用戶(hù)對(duì)某些商品的興趣和記憶，從而挖掘用戶(hù)潛在的搜索需求，這一點(diǎn)電商產(chǎn)品用得偏多。

在面板中展示“搜索歷史”和“最近瀏覽”，增加相關(guān)內(nèi)容曝光，去給用戶(hù)提供更多選擇以觸達(dá)目標(biāo)內(nèi)容，該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。

1.2 搜索發(fā)現(xiàn)

搜索發(fā)現(xiàn)是系統(tǒng)基于用戶(hù)的搜索記錄，依據(jù)算法向用戶(hù)展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。常規(guī)的c端產(chǎn)品上用得多，B 端產(chǎn)品用得少。由于搜索發(fā)現(xiàn)也涉及用戶(hù)隱私，但應(yīng)用一般不會(huì)讓用戶(hù)直接刪除，所以應(yīng)當(dāng)允許用戶(hù)對(duì)搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶(hù)的反感。淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶(hù)進(jìn)行關(guān)閉/顯示的操作。

1.3 熱門(mén)搜索

熱門(mén)推薦是搜索推薦頁(yè)里面內(nèi)容推薦的總稱(chēng)，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動(dòng)”等，熱門(mén)搜索是應(yīng)用商業(yè)化的重要手段，許多應(yīng)用都有這種模塊，并且內(nèi)容形式多樣。

知乎的熱搜就是結(jié)合熱搜、時(shí)事熱點(diǎn)等進(jìn)行推薦。

2. 搜索輸入反饋

搜索反饋指用戶(hù)輸入本文時(shí)未確認(rèn)搜索執(zhí)行的中間過(guò)程狀態(tài)。在 B 端場(chǎng)景下搜索反饋具備很強(qiáng)的引導(dǎo)作用給予用戶(hù)當(dāng)下的狀態(tài)提示。

2.1 關(guān)鍵詞聯(lián)想

是通過(guò)已輸入的關(guān)鍵詞來(lái)預(yù)測(cè)可以找到的搜索結(jié)果，為用戶(hù)創(chuàng)造更加便捷的體驗(yàn)。搜索聯(lián)想承載的不止顯性的設(shè)計(jì)呈現(xiàn)，還有背后的算法邏輯；例如是否可以識(shí)別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍，都需要提前確認(rèn)落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則，并在產(chǎn)品中的所有搜索場(chǎng)景中保持相同的交互邏輯。

2.2 自動(dòng)糾錯(cuò)

用戶(hù)在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過(guò)判斷后會(huì)展示正確詞匯的搜索結(jié)果給用戶(hù)，并友好地告知用戶(hù)正確的搜索方式。特殊狀態(tài)包含無(wú)結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。

3. 搜索觸發(fā)方式

3.1 實(shí)時(shí)搜索

實(shí)時(shí)搜索+實(shí)時(shí)顯示；搜索只有一個(gè)文本輸入框，沒(méi)有按鈕可點(diǎn)擊，這樣的搜索交互是通過(guò)輸入關(guān)鍵詞后，系統(tǒng)自動(dòng)檢測(cè)所有內(nèi)容中符合關(guān)鍵詞的目標(biāo)信息，隨著關(guān)鍵詞的持續(xù)輸入，與之相匹配的結(jié)果會(huì)逐漸減少、直至找到目標(biāo)，類(lèi)似自定義篩選功能。

這種交互一般對(duì)于數(shù)據(jù)信息比較少的情況下會(huì)比較友好，加載的速度更快，避免服務(wù)器的壓力太大、影響反饋效率，例如地址搜索、查找聯(lián)系人等。

3.2 觸發(fā)搜索

關(guān)鍵詞輸入完成后，需要手動(dòng)點(diǎn)擊搜索按鈕向服務(wù)器發(fā)送指令才會(huì)得到相應(yīng)的搜索結(jié)果，這種方式適合大部分表格場(chǎng)景，更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場(chǎng)景。

六、搜索的結(jié)果設(shè)計(jì)

搜索結(jié)果頁(yè)是用戶(hù)搜索的落腳點(diǎn)，在這個(gè)頁(yè)面，用戶(hù)會(huì)有目的性地瀏覽搜索結(jié)果。搜索結(jié)果中隱含著搜索邏輯，全局搜索場(chǎng)景下多數(shù)為模糊搜索，即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁(yè)反饋出來(lái)，匹配度低，需要花時(shí)間對(duì)結(jié)果二次篩選。B 端中對(duì)數(shù)據(jù)結(jié)果的篩選重結(jié)果查看與數(shù)據(jù)操作，具有以下場(chǎng)景需求：

1. 快速瀏覽數(shù)據(jù)，并能夠準(zhǔn)確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢(xún)數(shù)據(jù)，對(duì)查詢(xún)結(jié)果精準(zhǔn)定位。這就需要搜索結(jié)果后，不要清除用戶(hù)的查詢(xún)內(nèi)容。
3. 對(duì)數(shù)據(jù)進(jìn)行操作，如收藏、刪除、下載等。

不同的內(nèi)容需要不同的頁(yè)面布局來(lái)支撐的，b端場(chǎng)景中最常見(jiàn)的兩種布局，篩選上下布局和左右布局，當(dāng)然內(nèi)容部分又分列表布局和柵格布局。搜索結(jié)果注意點(diǎn)

1. 凸顯關(guān)鍵信息：

為了便于用戶(hù)找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁(yè)狀態(tài)時(shí)，當(dāng)用戶(hù)輸入的信息足夠清晰可預(yù)測(cè)，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶(hù)的注意力，在進(jìn)入搜索結(jié)果頁(yè)之前就可以提升轉(zhuǎn)化的可能性。此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。

2. 沒(méi)有結(jié)果，如何設(shè)計(jì)

搜索沒(méi)有結(jié)果會(huì)讓用戶(hù)感到非常沮喪的，尤其是當(dāng)用戶(hù)進(jìn)行了好幾次搜索之后，依然沒(méi)有結(jié)果，應(yīng)當(dāng)為他們提供有價(jià)值的替代品。一般出現(xiàn)無(wú)結(jié)果的狀態(tài)有兩種情況：

a. 用戶(hù)輸入錯(cuò)誤，一般會(huì)提用戶(hù)正確的搜索方式，并且自動(dòng)幫助用戶(hù)糾錯(cuò)；

b.搜索結(jié)果無(wú)，這種情況一般設(shè)計(jì)會(huì)以空狀態(tài)提示用戶(hù)，采用友好的方式提醒用戶(hù)更換關(guān)鍵詞。

七、搜索的設(shè)計(jì)注意點(diǎn)

在使用中，搜索本身應(yīng)該是 0 思考成本的，否則就失去了索引的核心價(jià)值，基于此，總結(jié)以下 5 個(gè)設(shè)計(jì)注意點(diǎn)：

1. 保留搜索文字

當(dāng)用戶(hù)輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁(yè)流程，此時(shí)搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶(hù)明確搜索的內(nèi)容（不要依賴(lài)用戶(hù)的記憶力），同時(shí)，也便于用戶(hù)再次編輯搜索文本。

考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶(hù)的操作成本。

2. 搜索項(xiàng)多時(shí)，分類(lèi)展示

搜索項(xiàng)目不可避免的比較多時(shí)，可以進(jìn)行分類(lèi)展示，降低尋找成本，常用的有兩種分類(lèi)方式：

①信息維度：常見(jiàn)的有列表信息自有屬性維度的分類(lèi)和任務(wù)屬性維度的分類(lèi)。

②條件類(lèi)別維度：按照時(shí)間類(lèi)、名稱(chēng)類(lèi)、狀態(tài)類(lèi)等的分類(lèi)。

3. 使用有效的自動(dòng)建議

無(wú)效的自動(dòng)建議讓整個(gè)搜索體驗(yàn)降低，而精準(zhǔn)的自動(dòng)建議會(huì)讓整個(gè)體驗(yàn)好上許多，它會(huì)根據(jù)用戶(hù)用戶(hù)的輸入內(nèi)容（詞匯詞根和后臺(tái)數(shù)據(jù)）為用戶(hù)提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶(hù)提高搜索過(guò)程的精準(zhǔn)度，提升整個(gè)搜索體驗(yàn)。

4. 內(nèi)容糾錯(cuò)

輸入錯(cuò)誤絕對(duì)是最常見(jiàn)的錯(cuò)誤，如果用戶(hù)錯(cuò)誤地輸入某個(gè)關(guān)鍵詞，而你的檢測(cè)到了，并且針對(duì)錯(cuò)誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因?yàn)殄e(cuò)誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶(hù)也不用再次進(jìn)行搜索了。

5.保留最近的用戶(hù)查詢(xún)

即使用戶(hù)熟知搜索引擎的全部功能，也需要借助大腦記憶來(lái)挑選關(guān)鍵詞，進(jìn)行搜索。

想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶(hù)需要結(jié)合他們的搜索方向，最近的查詢(xún)，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，使搜索體驗(yàn)更便捷流暢。

八、總結(jié)

搜索是我們?nèi)粘Ｖ蓄l繁接觸的功能，看似簡(jiǎn)單，背后都隱藏了很多流程與邏輯，不建議設(shè)計(jì)師盲目遵從原型依葫蘆畫(huà)瓢。

設(shè)計(jì)師更應(yīng)該在設(shè)計(jì)之初從業(yè)務(wù)類(lèi)型、功能定位、使用場(chǎng)景等多維度綜合分析選擇，從交互體驗(yàn)層面去深思搜索功能，因?yàn)樗阉鞒藬?shù)據(jù)匹配精準(zhǔn)度、搜索內(nèi)容廣度之外，搜索體驗(yàn)的便捷性也會(huì)影響用戶(hù)搜索的感受。

每一處細(xì)節(jié)背后的設(shè)計(jì)思路就變得尤為重要。

本文總結(jié)梳理了搜索功能，從搜索基本屬性、應(yīng)用場(chǎng)景，到搜索分類(lèi)，再到搜索欄設(shè)計(jì)，都進(jìn)行了闡述，最后再總結(jié)了搜索設(shè)計(jì)的一些注意點(diǎn)。希望你能夠幫忙理解搜索功能的設(shè)計(jì)。