一文秒會(huì)｜搜索功能模塊設(shè)計(jì)
用戶使用產(chǎn)品，享受功能服務(wù)前首先要學(xué)會(huì)在產(chǎn)品里學(xué)會(huì)如何獲取信息，而信息的獲取入口是搜索。新用戶是簡單瀏覽和消費(fèi)內(nèi)容，而老用戶對(duì)搜索的需求會(huì)越來越高。
一個(gè)用戶從剛接觸產(chǎn)品到頻繁的使用產(chǎn)品最終成為忠實(shí)用戶
一個(gè)搜索功能分為前后端，復(fù)雜的搜索功能還有算法介入。由于搜索是用戶的集中必經(jīng)路徑，不少產(chǎn)品經(jīng)理都會(huì)把搜索當(dāng)作一個(gè)廣告轉(zhuǎn)化入口落地頁。
如下是搜索功能背后的邏輯和用戶路徑。
可以通過上圖看到，在不同的產(chǎn)品形態(tài)上，用戶在搜索功能展示的結(jié)果沒有區(qū)別。但操作、邏輯、功能復(fù)雜度是有區(qū)別。比如app和pc展示的信息數(shù)量就有非常大的區(qū)別，用戶操作也是十分不同，手指與移動(dòng)端的交互需要更加寬度區(qū)域，而鼠標(biāo)則可以進(jìn)入到區(qū)域小的面積進(jìn)行操作。
拋開產(chǎn)品形態(tài)，產(chǎn)品經(jīng)理還需要抓住用戶搜索下的場景列舉，這里我會(huì)分4個(gè)部分來講解。只要一個(gè)搜索功能滿足了這4部分就算以一個(gè)簡簡單且實(shí)用的搜索功能。
搜索功能的場景：
- 用戶在搜索功能的使用中，會(huì)出現(xiàn)3個(gè)場景，搜索前、搜索中、搜索結(jié)果頁、搜索數(shù)據(jù)記錄4個(gè)緯度。分別對(duì)應(yīng)的是：提問題、找答案、閱讀答案、系統(tǒng)記錄。
app、PC端的搜索前端設(shè)計(jì)
以下在各個(gè)形態(tài)下如何完成簡易設(shè)計(jì)。
APP的前端設(shè)計(jì)：
- 在app里一個(gè)搜索也會(huì)有前面的3個(gè)場景。
1.搜索前
這個(gè)場景是解決用戶如何高效提問、解決問題的場景
搜索入口是用戶訪問搜索的關(guān)鍵，同時(shí)適當(dāng)給予用戶提供搜索關(guān)鍵詞引導(dǎo)。
搜索入口分為：直接展示、功能布店、獨(dú)立tab、特殊類型
以下圖中 Amazon 為例。搜索功能以輸入框的形式直接展示在屏幕中。這是最為常見的一種設(shè)計(jì)方式，也是大型電商類應(yīng)用通常會(huì)采用的形式。
功能布點(diǎn)，以下圖蝦米音樂為例。它與功能外露型類似，只不過是將搜索功能弱化成了一個(gè) icon，點(diǎn)擊后才會(huì)展成搜索框。
獨(dú)立 Tab，以下圖 Snapguide 為例。它是將搜索功能放得最重的一種形式，很多應(yīng)用會(huì)把它命名為 Discover 或 Explore。這個(gè) tab 除了包含基礎(chǔ)的搜索功能，還增加了很多運(yùn)營的內(nèi)容在里面。
特殊類型，以下圖中 Airbnb 為例。搜索功能會(huì)作為一個(gè) icon 放在頁面中間，在 Android 的設(shè)計(jì)中經(jīng)常會(huì)作為 FAB 出現(xiàn)在屏幕右下角。
如下案例在搜索功能直接提供了引導(dǎo)版塊，面對(duì)新用戶在搜索頁面可以增加toast引導(dǎo)，或直接增加固定搜索導(dǎo)航欄，完成引導(dǎo)。
如果用戶有過歷史數(shù)據(jù)，還能基于數(shù)據(jù)維度提供搜索引導(dǎo)，增加用戶搜索轉(zhuǎn)化。或者運(yùn)營推進(jìn)相關(guān)搜索關(guān)鍵詞
2.搜索中
這個(gè)過程是為用戶快速匹配想要的具體內(nèi)容，減少用戶輸入的痛點(diǎn)
搜索中是用戶正在輸入內(nèi)容場景，有的產(chǎn)品會(huì)提前在用戶輸入中場景下可以提前給與搜索結(jié)果展示。比如在百度搜索中，提前判斷出用戶需要的搜索結(jié)果，可以減少用戶查找內(nèi)容的時(shí)間成本，同時(shí)快速匹配系統(tǒng)中最合適搜索的答案。
基于用戶實(shí)時(shí)輸入提供搜索結(jié)果，需要有數(shù)據(jù)、系統(tǒng)架構(gòu)支撐，不僅是產(chǎn)品經(jīng)理做產(chǎn)品設(shè)計(jì)的問題，還有業(yè)務(wù)需要、用戶規(guī)模的要求。
在app里，有先天然的系統(tǒng)體驗(yàn)優(yōu)勢，所以可以為用戶提供選擇單獨(dú)的搜索內(nèi)容輸入頁面;但搜索中到底是單獨(dú)切換一個(gè)頁面、還是直接在搜索輸入框中展示，實(shí)際上還是產(chǎn)品經(jīng)理需要根據(jù)用戶畫像、用戶需求來定。但在簡易設(shè)計(jì)中，我建議不要糾結(jié)，任意選一個(gè)方案就可以了，因?yàn)橹攸c(diǎn)是提供內(nèi)容查找的入口。
在搜索框輸入適合短的內(nèi)容搜索，在單獨(dú)的搜索頁面適合長內(nèi)容搜索。
3.搜索結(jié)果頁
內(nèi)容篩選、重要信息展示成為這一環(huán)節(jié)產(chǎn)品設(shè)計(jì)的重中之重。比如搜索結(jié)果的排序、關(guān)鍵詞的匹配、同時(shí)搜索的內(nèi)容類型分類也是相當(dāng)重要的。
比如在搜狗、頭條app的搜索結(jié)果頁首先展示內(nèi)容分類、再展示結(jié)果順序。同時(shí)結(jié)果里突出了匹配關(guān)鍵詞，方便用戶方便篩選搜搜索結(jié)果。
搜索結(jié)果也要因?yàn)閮?nèi)容類型做單獨(dú)設(shè)計(jì)，比如視頻類的搜索結(jié)果，如抖音的搜索結(jié)果頁，會(huì)直接播放短視頻;在簡書、知乎上的搜索結(jié)果頁，基于文本內(nèi)容特點(diǎn)做搜索關(guān)鍵詞的匹配，再匹配內(nèi)容類型。默認(rèn)優(yōu)先匹配全部內(nèi)容類型。
在web端形態(tài)設(shè)計(jì)
在web端搜索由于PC屏幕較大，在同樣搜索前、搜索中、搜索后3個(gè)場景下相比app就會(huì)有較大的不同。
1.搜索前
和app一樣，同樣目的是要增加搜索的點(diǎn)擊、轉(zhuǎn)化率，因此常見的產(chǎn)品設(shè)計(jì)方法是增加搜索引導(dǎo)。
文案引導(dǎo)可以增加活動(dòng)文案、以及曝光搜索內(nèi)容優(yōu)勢，來顯示活動(dòng)。
2.搜索中
PC端有足夠大的操作展示區(qū)域，可以在搜索框直接展示搜索內(nèi)容的答案即可。如果有數(shù)據(jù)、系統(tǒng)架構(gòu)支持可以展示實(shí)時(shí)結(jié)果。
和app一樣，搜索需要突出搜索中的交互狀態(tài)，包括按鈕點(diǎn)擊、內(nèi)容輸入、內(nèi)容為空的狀態(tài)。
3.搜索結(jié)果頁
搜索結(jié)果頁仍然是以展示重要內(nèi)容、信息篩選快速、內(nèi)容展示簡單。PC因?yàn)槊娣e大，可以展示的結(jié)果數(shù)量相比app多;但沒有結(jié)果時(shí)候頁面體驗(yàn)也要更差，需要產(chǎn)品經(jīng)理設(shè)計(jì)。
4.數(shù)據(jù)采集
做搜索功能還是要做埋點(diǎn)，方便做搜索的數(shù)據(jù)迭代需求。同時(shí)我建議在產(chǎn)品邏輯上，建立每一次搜索都要采集用戶數(shù)據(jù)ID的機(jī)制，比如要在搜索前建立用戶登錄注冊條件判斷，用戶登錄后才能使用搜索功能
▲ 搜索背后的數(shù)據(jù)關(guān)聯(lián)設(shè)計(jì)
搜索系統(tǒng)有詞典和內(nèi)容索引庫(數(shù)據(jù)庫)，詞典里的詞關(guān)聯(lián)匹配內(nèi)容索引庫。當(dāng)用戶輸入關(guān)鍵詞后，如果詞典里有這個(gè)詞，線上會(huì)快速召回內(nèi)容文檔。如果詞典里沒有這個(gè)詞，那這次的搜索行為就沒有結(jié)果。
假設(shè)內(nèi)容索引庫一共只有3個(gè)內(nèi)容文檔，分別是：
- doc1:站內(nèi)搜索從0到1全流程設(shè)計(jì)
- doc2:搜索應(yīng)該怎么設(shè)計(jì)才是對(duì)的
- doc3:產(chǎn)品小白怎么入門站內(nèi)搜索設(shè)計(jì)
用戶輸入關(guān)鍵詞“怎么設(shè)計(jì)站內(nèi)的搜索”，經(jīng)過分詞后，詞典里有這個(gè)詞，系統(tǒng)會(huì)召回對(duì)應(yīng)的索引文檔。索引庫如下圖所示。
同時(shí)用戶每次輸入的關(guān)鍵詞做高頻詞記錄，詞語范圍、違規(guī)詞處理都是可以利用后臺(tái)來采集。
搜索頁面的點(diǎn)擊、停留時(shí)間、訪問次數(shù)，同時(shí)需要統(tǒng)計(jì)，如果在搜索中增加了第三方廣告位那么搜索還需要打通業(yè)務(wù)轉(zhuǎn)化。
漏斗圖、時(shí)間柱狀圖展示數(shù)據(jù)可視化，觀察用戶使用搜索功能的規(guī)律以及喜好再優(yōu)化搜索功能。
