關(guān)于搜索功能設(shè)計,你需要知道的交互和細(xì)節(jié)

3 評論 15915 瀏覽 63 收藏 12 分鐘

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

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

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

一、搜索入口

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

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

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

搜索入口的放置主要是取決于產(chǎn)品本身的業(yè)務(wù)形態(tài)以及戰(zhàn)略方向,不同搜索入口的位置往往可以體現(xiàn)出該產(chǎn)品搜索功能的權(quán)重;像新浪微博這種將搜索入口作為一個菜單獨(dú)立出來的,搜索功能層級的優(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),從點(diǎn)擊搜索框、點(diǎn)擊搜索以及得到搜索結(jié)果;這整個過程需要快速完成,并且搜索結(jié)果更要精準(zhǔn)。

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

二、自動補(bǔ)全

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

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

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

三、歷史記錄

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

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

  • 在點(diǎ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)容本身特點(diǎn)進(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ì)上都是為了提升用戶搜索效率,從而提升用戶體驗(yàn);所以設(shè)計的時候圍繞著這個關(guān)鍵點(diǎn),就不會找不到方向了。

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我們的研發(fā)人員,對于搜索功能還要求性能,想問下,有常規(guī)要求嗎?

    來自浙江 回復(fù)
  2. 總結(jié)的不錯

    來自浙江 回復(fù)
  3. 干貨,學(xué)習(xí)了!

    來自廣東 回復(fù)