編輯導(dǎo)語：在互聯(lián)網(wǎng)產(chǎn)品中，搜索是一個十分常見而且需求量很大的功能；搜索本質(zhì)其實是一個需求匹配的過程，需求方即用戶在前端頁面上輸入需要檢索的信息，然后經(jīng)過后臺處理得到檢索結(jié)果的反饋；本文作者分享了關(guān)于搜索功能設(shè)計的交互和細(xì)節(jié)，我們一起來看一下。

優(yōu)秀的搜索功能設(shè)計往往能夠提升用戶在使用產(chǎn)品過程中的體驗，能夠給產(chǎn)品帶來正向的作用，反之亦然。

所以這個時候關(guān)于搜索設(shè)計的一些交互和細(xì)節(jié)顯得尤為重要，下面就細(xì)談一下自動補(bǔ)全、歷史記錄、篩選、排序等這些需要注意的搜索細(xì)節(jié)，希望能夠幫助到大家。

一、搜索入口

產(chǎn)品的搜索入口該怎么放，放哪里，這其實是個細(xì)微但又不能忽視的問題，搜索作為產(chǎn)品的一個輔助功能，設(shè)計應(yīng)該遵循主次分明的原則，首先搜索入口要放在醒目的位置，要讓用戶能夠快速進(jìn)行搜索操作，但又不宜占用過多的空間，影響頁面主體層級。

目前比較常見的搜索入口主要有這幾類：

1. 單獨設(shè)置一個底部菜單作為搜索入口；
2. 頁面頂部設(shè)置搜索框；
3. 左上角或者右上角設(shè)置搜索圖標(biāo)按鈕；

搜索入口的放置主要是取決于產(chǎn)品本身的業(yè)務(wù)形態(tài)以及戰(zhàn)略方向，不同搜索入口的位置往往可以體現(xiàn)出該產(chǎn)品搜索功能的權(quán)重；像新浪微博這種將搜索入口作為一個菜單獨立出來的，搜索功能層級的優(yōu)先級極高，單個頁面承載的信息量以及內(nèi)容是十分豐富的；一般頁面都涵蓋個性化推薦、熱門推薦等多個欄目，為頁面持續(xù)導(dǎo)入流量，體現(xiàn)出產(chǎn)品戰(zhàn)略的核心與發(fā)展方向。

第二種將搜索框設(shè)置在頁面頂部的，這類型產(chǎn)品的搜索框占大多數(shù)，搜索優(yōu)先級較高；這類產(chǎn)品內(nèi)容類型與體量相對來說比較大，用戶側(cè)一般有明確的搜索目標(biāo)，從點擊搜索框、點擊搜索以及得到搜索結(jié)果；這整個過程需要快速完成，并且搜索結(jié)果更要精準(zhǔn)。

第三類則是將搜索圖標(biāo)設(shè)置在右上角或者左上角，這類產(chǎn)品相對來說弱化了搜索功能；旨在提升用戶瀏覽當(dāng)前頁面內(nèi)容的意愿，比如大家常見的抖音就是用這種搜索入口方式。

二、自動補(bǔ)全

所謂自動補(bǔ)全就是用戶在搜索框輸入關(guān)鍵詞時，搜索框會下拉顯示包含該關(guān)鍵詞的其他候選詞，供用戶自行選擇；這樣設(shè)置的好處是在很大程度上能夠減少用戶的操作成本，提升用戶體驗。

候選詞一般來源于歷史搜索詞或者是本地詞庫，然后按照搜索量的高低進(jìn)行排序；另外，候選詞與輸入的關(guān)鍵詞一般有兩種包含關(guān)系：

• 候選詞頭部必然是輸入的關(guān)鍵詞，如下圖1（斗魚直播）；
• 候選詞只需要包含輸入的關(guān)鍵詞，組合順序沒有特別的要求，如下圖2（虎牙直播）；

三、歷史記錄

為了能讓用戶快速完成整個搜索操作，設(shè)置歷史記錄是必不可少的，也是通過減少輸入成本來提升用戶體驗一個很好的方式。

常見的歷史記錄展現(xiàn)的位置一般有兩種：

• 在點擊輸入框輸入關(guān)鍵詞的時候，下拉列表顯示搜索的歷史記錄，如下1圖（新浪微博）；
• 最普遍的一種方式，直接在搜索頁面設(shè)置一個歷史記錄欄目（我搜過的、歷史搜索），如下2、3、4圖（虎牙直播、抖音、蝦米音樂）。

除了歷史記錄，搜索的頁面一般還設(shè)置其他的欄目如熱門搜索、熱門推薦等來豐富整個搜索頁面，使頁面更加飽滿；同時用戶可以快速觸達(dá)某些頁面，從而提高了用戶的操作效率。

四、模糊搜索

模糊搜索指的是輸入關(guān)鍵詞后，顯示的搜索結(jié)果是一些包含該關(guān)鍵詞的信息和數(shù)據(jù)又或者說跟關(guān)鍵詞相關(guān)的信息。

模糊搜索在互聯(lián)網(wǎng)產(chǎn)品中是十分常見的，一般都會默認(rèn)使用這種搜索模式，這樣可以盡可能的將搜索結(jié)果豐富起來，給用戶帶來更多的選擇。

當(dāng)然，也不是所有場景模糊搜索都適用，在很多B端產(chǎn)品中搜索特定ID例如內(nèi)容ID、用戶ID的時候模糊搜索就顯得沒有必要，這個時候用戶需要一個精確的搜索結(jié)果；因此，在做搜索設(shè)計的時候一定要考慮產(chǎn)品或者搜索內(nèi)容本身的特性去衡量是否需要模糊搜索還是精確搜索。

五、搜索結(jié)果分類

在同一個搜索的反饋結(jié)果過程中，往往包含多個不同類型搜索結(jié)果，從用戶輸入的關(guān)鍵字來看，往往存在很強(qiáng)的主觀性，但是系統(tǒng)很難判斷出用戶到底想搜索的類型是什么；因此，在做搜索結(jié)果頁面設(shè)計的時候要考慮是否將搜索結(jié)果進(jìn)行分類，不同類型的類別應(yīng)該有哪些？

分類的依據(jù)應(yīng)當(dāng)按照產(chǎn)品本身的特性去分析，不同類型的產(chǎn)品所包含的內(nèi)容存在很大的差異，相同類型的產(chǎn)品搜索結(jié)果的分類也有細(xì)微差異。

如下圖1（蝦米音樂），搜索結(jié)果的分類依次是：歌曲、專輯、藝人、歌單、MV、用戶，分類比較常規(guī)。

而圖2（酷狗音樂）的分類則比較全面，分別有：綜合、單曲、視頻、歌單、電臺、專輯、K歌、超人、歌詞，可見酷狗對于音樂的生態(tài)和布局還是比較完善的。

六、搜索結(jié)果篩選和排序

在搜索結(jié)果反饋的頁面中，遇到搜索結(jié)果的內(nèi)容體量和內(nèi)容屬性比較豐富時，這時對于用戶來說難以快速找到自己想要搜索的內(nèi)容；為了縮小內(nèi)容列表規(guī)模和提升用戶搜索效率，通常會在搜索結(jié)果頁面設(shè)置篩選和排序功能。

搜索結(jié)果篩選通常要根據(jù)內(nèi)容本身特點進(jìn)行篩選條件分類，首先要確定哪些內(nèi)容字段為可篩選字段，然后選取部分合適的能夠嚴(yán)格區(qū)分不同內(nèi)容的字段作為篩選條件，沒有必要將所有可篩選的字段都列出來。

另外篩選條件也有常規(guī)通用和特定兩個類型，例如一般電商產(chǎn)品搜索結(jié)果可篩選通用的類型有品牌、折扣、價格區(qū)間、發(fā)貨地等；外賣平臺通用的篩選條件也一般有價格、配送速度、品質(zhì)等，這些條件對于用戶來說都是可以很好的去區(qū)分不同內(nèi)容的。

當(dāng)然除了這些通用的篩選條件，有時候不同商品之間的篩選條件也會有差異，比如說鞋可以選擇碼數(shù)、類型、款式甚至顏色等，這個還是根據(jù)自身產(chǎn)品和內(nèi)容的特性去設(shè)計。

搜索結(jié)果排序也是一個十分需要關(guān)注的地方，排序往往與篩選同時存在，相輔相成，其目的都是為了讓用戶快速找到自己想要的東西。

常見的排序一般是價格排序、銷量排序、距離排序、評分排序、評分排序等一些可以量化的排序維度，并且是由用戶去主動觸發(fā)的，帶有很強(qiáng)的主觀性；所以能夠?qū)⒂脩羝谕膬?nèi)容優(yōu)先展示出來是排序的關(guān)鍵與核心。

除了這類基本的排序維度外，還有一個用得比較多而且一般默認(rèn)展示的是綜合排序，所謂綜合排序就是綜合多個排序類型比如價格、評分、銷量、時間、廣告等進(jìn)行的一次多維度內(nèi)容排列重組——其主要原理是賦予各種排序類型一定的權(quán)重，然后在此基礎(chǔ)下綜合計算每個內(nèi)容的權(quán)重分值，然后將分值高的優(yōu)先顯示在搜索列表前面；當(dāng)然里面還涉及一些比較復(fù)雜的算法和排序策略，在這就不做深究了。

七、高亮提醒

很多時候，在搜索結(jié)果反饋列表中，會對內(nèi)容中的用戶輸入的關(guān)鍵詞做特殊處理，大多數(shù)是改變字體或者字體顏色，將輸入的關(guān)鍵詞與其他內(nèi)容區(qū)分開來；這樣做的目的主要是減少用戶的選擇成本，讓用戶能夠快速獲得自己所期望的搜索結(jié)果。

主要用在一些純文本的內(nèi)容，比如說新聞、說說、動態(tài)等。

八、總結(jié)

對于搜索功能的設(shè)計，雖說涉及到很多不同的交互細(xì)節(jié)，但本質(zhì)上都是為了提升用戶搜索效率，從而提升用戶體驗；所以設(shè)計的時候圍繞著這個關(guān)鍵點，就不會找不到方向了。

當(dāng)然前提還是需要理解搜索功能的原理以及邏輯，同時能夠應(yīng)對不同場景給出不同的解決方案，這樣在能力上也會有一個很好的提升。

本文由 @張偉賢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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