如何設(shè)計(jì)更懂用戶的搜索頁(yè)

2021-4-25    資深UI設(shè)計(jì)者

搜索模塊的邏輯原理
搜索模塊的功能及流程分析

“搜索”是目前互聯(lián)網(wǎng)產(chǎn)品中最常見(jiàn)也是最有必要的功能模塊,搜索一方面幫助用戶快速觸達(dá)自己想要商品/服務(wù)/咨詢等,另一方面作為平臺(tái)的重要數(shù)據(jù)入口可以獲取比較有價(jià)值的用戶信息。

目前大部分產(chǎn)品的搜索模塊后臺(tái)邏輯和前端設(shè)計(jì)大同小異,但是不同的品類的產(chǎn)品又存在一些差異,從產(chǎn)品邏輯上分析基本原理如下圖,

用戶輸入一個(gè)關(guān)鍵詞,搜索系統(tǒng)根據(jù)用戶的輸入的信息,篩選出系統(tǒng)認(rèn)為用戶感興趣的內(nèi)容,同時(shí)按照系統(tǒng)認(rèn)定的重要性進(jìn)行排序展示。簡(jiǎn)單而言,搜索可以分為三步。


Step1:對(duì)用戶輸入信息的過(guò)濾

用戶輸入的關(guān)鍵詞首先要經(jīng)過(guò)邏輯層進(jìn)行非法詞過(guò)濾,錯(cuò)詞糾錯(cuò),特定跳轉(zhuǎn)幾步操作

非法詞過(guò)濾顯而易見(jiàn)就是用戶輸入的敏感詞匯會(huì)根據(jù)后端的非法詞庫(kù)進(jìn)行判斷屏蔽,網(wǎng)上一般有現(xiàn)成的詞庫(kù)可以直接導(dǎo)入系統(tǒng),不滿足的后臺(tái)可以根據(jù)產(chǎn)品屬性及業(yè)務(wù)需求再進(jìn)行維護(hù)擴(kuò)充。錯(cuò)詞糾錯(cuò)輸入查詢關(guān)鍵詞,用戶可能會(huì)輸入成拼音、或者錯(cuò)別字,邏輯中有一套糾錯(cuò)詞處理,當(dāng)系統(tǒng)對(duì)比有錯(cuò)誤時(shí),會(huì)進(jìn)行糾錯(cuò)處理,最終輸出糾錯(cuò)后的結(jié)果進(jìn)行輸出。特定跳轉(zhuǎn)是后端將特定詞匯設(shè)置為特殊跳轉(zhuǎn),后端需要維護(hù)的映射庫(kù)。比如雙十一的時(shí)候,輸入雙十一可能會(huì)直接跳轉(zhuǎn)到活動(dòng)會(huì)場(chǎng),而不是具體的某個(gè)商品。 


Step2:根據(jù)用戶輸入信息對(duì)內(nèi)容進(jìn)行分析解讀

經(jīng)過(guò)三種異常詞庫(kù)的過(guò)濾后,關(guān)鍵詞會(huì)進(jìn)入常規(guī)搜索詞庫(kù)。搜索詞庫(kù)是有限的,但是用戶的輸入?yún)s是沒(méi)有限制的,怎么將無(wú)限制的搜索轉(zhuǎn)化為有限的詞庫(kù),并且匹配到對(duì)應(yīng)的結(jié)果呢?這里需要一個(gè)關(guān)鍵的步驟即分詞,分詞是將一個(gè)比較長(zhǎng)的關(guān)鍵字拆分成多個(gè)合理的比較短的關(guān)鍵字,經(jīng)過(guò)分詞非標(biāo)準(zhǔn)的關(guān)鍵詞就被轉(zhuǎn)化為標(biāo)準(zhǔn)的詞庫(kù),而這些詞就會(huì)對(duì)應(yīng)一些搜索目標(biāo)內(nèi)容,但這些目標(biāo)內(nèi)容并不全展示給用戶,展示給用戶的也不一定完全跟用戶搜索的相關(guān),這里就有兩個(gè)跟搜索相關(guān)的兩個(gè)關(guān)鍵指標(biāo)即準(zhǔn)確率和召回率,準(zhǔn)確率是指所有展示的內(nèi)容中與用戶搜索相關(guān)的內(nèi)容的占比,召回率是指所有與用戶搜索相關(guān)的內(nèi)容中被展示出來(lái)內(nèi)容的占比。準(zhǔn)確率和召回率是一對(duì)存在矛盾的指標(biāo),搜索后臺(tái)會(huì)有調(diào)和這兩個(gè)數(shù)據(jù)相關(guān)的目標(biāo)函數(shù),后臺(tái)搜索優(yōu)化的目標(biāo)就是提高準(zhǔn)確率和召回率,讓后臺(tái)與用戶搜索相關(guān)的內(nèi)容都能盡可能展示出來(lái)。


Step3:對(duì)解讀后的結(jié)果進(jìn)行排序

搜索系統(tǒng)標(biāo)準(zhǔn)詞庫(kù)都有與之現(xiàn)關(guān)聯(lián)的具體內(nèi)容,每個(gè)具體內(nèi)容是否包含關(guān)鍵詞決定是否展示這些內(nèi)容,同時(shí)根據(jù)關(guān)鍵詞的權(quán)重給展示的內(nèi)容一個(gè)分?jǐn)?shù),最終根據(jù)每個(gè)內(nèi)容的分?jǐn)?shù)進(jìn)行排序,不同平臺(tái)的關(guān)鍵詞權(quán)重不一樣,這屬于平臺(tái)運(yùn)營(yíng)的機(jī)密,權(quán)重的高低直接影響目標(biāo)內(nèi)容的排序,也直接影響平臺(tái)的銷售額和用戶體驗(yàn)。


在前端設(shè)計(jì)看來(lái)一個(gè)簡(jiǎn)單的搜索框,但是后端卻需要多層邏輯的判斷和輸出,最終實(shí)現(xiàn)業(yè)務(wù)與體驗(yàn)的最優(yōu)化。以上只是作為設(shè)計(jì)人員的簡(jiǎn)單總結(jié),方便我們做設(shè)計(jì)的時(shí)候更好跟研發(fā)人員溝通。 


從前端功能流程上分析搜索模塊可以拆分為啟動(dòng)搜索-輸入內(nèi)容-獲取結(jié)果

啟動(dòng)搜索

目前大部分的搜索入口分為頂部搜索框/底部導(dǎo)航/局部圖標(biāo),產(chǎn)品的屬性決定搜索功能的重要級(jí),從而影響搜索入口的樣式,另外需要明確搜索在當(dāng)前頁(yè)面中的的優(yōu)先級(jí)從而明確搜索的樣式,底部是app的一個(gè)最重要位置,將搜索功能放在底部導(dǎo)航一方面突出搜索功能的重要級(jí)別,但相對(duì)于放在首頁(yè)頂部又不至于影響首頁(yè)的流量分發(fā)。頁(yè)面局部設(shè)置搜索圖標(biāo),相對(duì)搜索功能的重要級(jí)會(huì)低一些。頂部搜索一般是吸頂懸停,用戶對(duì)搜索的依賴性很高,此類搜索入口的功能也最完整,對(duì)設(shè)計(jì)的要求也最高。 


完整的搜索框從功能點(diǎn)上分包括,掃碼/語(yǔ)音/圖片/文本等幾種搜索能力,設(shè)計(jì)時(shí)需明確搜索框自帶的功能點(diǎn)有哪些,功能點(diǎn)的優(yōu)先級(jí)和關(guān)聯(lián)性,總結(jié)發(fā)現(xiàn)一般電商類服務(wù)類產(chǎn)品會(huì)比社交信息類產(chǎn)品的搜索更為明顯且搜索的功能點(diǎn)更多一些。


輸入內(nèi)容

在輸入內(nèi)容這個(gè)階段,用戶可能進(jìn)行的操作是是輸入(語(yǔ)音/文本/圖片等)功能,選擇聯(lián)想關(guān)鍵詞,清除/修改文本功能信息展示上一般有搜索歷史,搜索維度,推薦搜索,默認(rèn)提示詞等,歸納起來(lái)基本為關(guān)聯(lián)搜索,引導(dǎo)搜索,細(xì)分搜索這三種,目的都是一方面為了滿足用戶高效搜索的需求,另一方面實(shí)現(xiàn)平臺(tái)營(yíng)銷策略。設(shè)計(jì)要兼顧這兩點(diǎn),在滿足業(yè)務(wù)的同時(shí)給用戶更好的搜索體驗(yàn)。

以上搜索返回流程中兩大主流平臺(tái)有一些差異的原因

第一種:搜索結(jié)果頁(yè)—搜索啟動(dòng)頁(yè)-搜索入口,可能的原因:

            符合移動(dòng)端的流程可逆的操作習(xí)慣

            營(yíng)銷需要,返回至搜索推薦頁(yè),多一層頁(yè)面的曝光機(jī)會(huì)

            便于用戶觸發(fā)再次搜索的行為

第二種:搜索結(jié)果頁(yè)—搜索入口,可能的原因:

            用戶用取消操作,表達(dá)的是取消搜索模塊,故返回入口,同時(shí)也能再次調(diào)起

            縮短返回路徑,更加高效,注重高效的操作體驗(yàn) 


獲取結(jié)果

平臺(tái)屬性不同搜索結(jié)果頁(yè)的目標(biāo)內(nèi)容會(huì)有區(qū)別,除了目標(biāo)內(nèi)容的輸出外,搜索結(jié)果頁(yè)會(huì)對(duì)應(yīng)的展示篩選條件和推薦,此時(shí)需要做到的是篩選維度清晰,業(yè)務(wù)核心明確,平臺(tái)特點(diǎn)突出

在這個(gè)階段用戶的目的是在目標(biāo)信息/商品/服務(wù)中進(jìn)行對(duì)比選擇,獲得自己最想要(從平臺(tái)角度則是推薦給用戶)的。在設(shè)計(jì)搜索結(jié)果頁(yè)的目標(biāo)內(nèi)容時(shí),需要注意信息層級(jí)的展示,比如電商平臺(tái)最突出價(jià)格,而咨詢分享類產(chǎn)品可能要突出關(guān)注度熱度等。

大部分平臺(tái)都有自己的rank邏輯,rank邏輯是根據(jù)商品的相關(guān)因素綜合起來(lái)形成的一種排序邏輯,比如電商產(chǎn)品中的轉(zhuǎn)化率/銷量/點(diǎn)擊率等,而且會(huì)根據(jù)產(chǎn)品的不同階段去優(yōu)化升級(jí),目的是可以輸出更符合用戶心理的排序,從而更精準(zhǔn)高效的滿足用戶,提升產(chǎn)品體驗(yàn)。


搜索異常狀態(tài)

搜索異常的狀態(tài)一般有三種,1.搜索結(jié)果為空;2.智能糾錯(cuò);3.網(wǎng)絡(luò)異常等,

搜索結(jié)果為空時(shí)一般需要空態(tài)圖和文案說(shuō)明和引導(dǎo),緩解用戶需求沒(méi)有達(dá)成的心情。智能糾錯(cuò),是在用戶輸入內(nèi)容上的一種提示或糾正,如果用戶輸入的內(nèi)容有問(wèn)題或不夠標(biāo)準(zhǔn),在搜索結(jié)果中會(huì)能給最貼切的搜索結(jié)果。網(wǎng)絡(luò)異常,需要考慮的是提示是在哪個(gè)階段告知用戶,用戶在沒(méi)有網(wǎng)絡(luò)的情況下仍然可以調(diào)起搜索啟動(dòng)頁(yè),此時(shí)提示用戶網(wǎng)絡(luò)異常會(huì)比在搜索結(jié)果頁(yè)告知用戶的體驗(yàn)要好。


文章來(lái)源:站酷  作者:周沐Zhoumu 

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔