本文對(duì)于搜索功能進(jìn)行了拆解和細(xì)化，一起來看看吧~

“這有個(gè)搜索功能要加一下，樣式我給你?！?/p>

“好。”

“這搜索框連個(gè)提示也沒有怎么搜？歷史記錄呢？模糊匹配呢？還有…..balabala”

“你也沒說啊！”
——來自設(shè)計(jì)獅與程序猿的日常

搜索作為大部分互聯(lián)網(wǎng)產(chǎn)品都具備的功能，直接影響著產(chǎn)品的用戶體驗(yàn)。在進(jìn)行搜索功能的設(shè)計(jì)時(shí)要以簡(jiǎn)單、高效為核心目標(biāo)，每一步的細(xì)節(jié)設(shè)計(jì)都要反復(fù)驗(yàn)證是否脫離了需求和核心目標(biāo)。

根據(jù)搜索的行為，可將其拆分為五步：搜索入口-搜索觸發(fā)-內(nèi)容輸入-點(diǎn)擊搜索-反饋結(jié)果。

一、搜索入口

搜索入口具有提示和引導(dǎo)操作的作用，主要類型有四種：主頁(yè)搜索、搜索框、多條件搜索、搜索icon。

1. 主頁(yè)搜索

將搜索作為獨(dú)立的頁(yè)面，以搜索為導(dǎo)向，整個(gè)產(chǎn)品的使用圍繞搜索這一核心功能功能展開。比較典型的如百度、谷歌等，搜索框功能強(qiáng)大，用戶可以進(jìn)行各種嘗試。谷歌主頁(yè)中的手氣不錯(cuò)以及百度搜索的個(gè)性化推薦和新聞，為產(chǎn)品引進(jìn)更多的流量，增加了用戶黏性。

2. 搜索框

這種是在網(wǎng)頁(yè)中最為常見的，應(yīng)用也最廣泛，大多居于頁(yè)面內(nèi)容區(qū)域的上方，有的出于節(jié)省空間和搜索需求的考量，也內(nèi)嵌在導(dǎo)航欄中。搜索框內(nèi)會(huì)有文字的提示，提示用戶搜索的方式，還有一些產(chǎn)品在搜索框內(nèi)放置當(dāng)前的熱詞、活動(dòng)、新功能等，將搜索框做成了運(yùn)營(yíng)的入口。

搜索框的后面一般會(huì)伴有搜索按鈕或放大鏡的icon，可點(diǎn)擊按鈕和鍵盤回車進(jìn)行搜索。在頁(yè)面滑動(dòng)時(shí)，搜索框一般會(huì)固定在頁(yè)面的頂端，用以提示用戶目前搜索內(nèi)容，同時(shí)也方便重新搜索。

3. 多條件搜索

多條件搜索的方式常見于旅游、出行類的網(wǎng)站，如貓途鷹、攜程、東方航空等，需要輸入時(shí)間、地點(diǎn)、人員等信息，單一的搜索框不能滿足用戶的需求，多條件的搜索框一般置于頁(yè)面中較醒目的位置，引導(dǎo)用戶操作。

4. 搜索icon

頁(yè)面中僅僅展示搜索的icon，一般放在頁(yè)面的導(dǎo)航欄中偏右側(cè)的位置，點(diǎn)擊icon會(huì)拉出搜索框，典型的如站酷、UI中國(guó)等，還有的點(diǎn)擊icon會(huì)在頁(yè)面中喚醒搜索功能，如Behance。

搜索icon的形式雖然可以節(jié)約導(dǎo)航欄的空間，但相對(duì)搜索框來說對(duì)用戶的引導(dǎo)性較差，因此比較適合以搜索為輔助功能的產(chǎn)品。

二、搜索觸發(fā)

1. 搜索框觸

點(diǎn)擊搜索框或搜索icon，呈激活狀態(tài)，光標(biāo)在框內(nèi)閃動(dòng)，引導(dǎo)信息淡化或消失；有的搜索框還會(huì)伴隨彈出輔助區(qū)域，區(qū)域內(nèi)包含熱詞、搜索歷史等信息，典型如騰訊視頻、淘寶等。

2.?搜索形式

第一種是有搜索/確定按鈕或icon的搜索框，用戶輸入完成后可點(diǎn)擊按鈕進(jìn)行搜索，也可點(diǎn)擊鍵盤回車搜索；另一種是無(wú)搜索按鈕的搜索框，用戶需鍵盤回車搜索。

在網(wǎng)頁(yè)設(shè)計(jì)中，第一種應(yīng)用比較廣泛，第二種國(guó)外網(wǎng)站應(yīng)用較多，如dribbble等。還有一些搜索框內(nèi)添加了拍照、上傳圖片、語(yǔ)音輸入等功能，使得搜索方式更加多元化。

3. 輔助區(qū)域

輔助區(qū)域的信息主要有熱詞推薦和歷史記錄，用以提高搜索的效率和作為推廣的入口。

熱詞推薦：熱詞推薦主要為當(dāng)前時(shí)段內(nèi)比較熱點(diǎn)的詞匯或產(chǎn)品的新功能，能夠?yàn)楫a(chǎn)品帶來流量導(dǎo)入和收益，如電商類網(wǎng)頁(yè)中的熱詞一般為新產(chǎn)品或高銷量產(chǎn)品，視頻類網(wǎng)站的搜索熱詞一般為最新視頻或點(diǎn)擊量較高的影視劇。

歷史記錄：歷史記錄能夠在用戶重復(fù)搜索時(shí)提高效率，一般會(huì)在數(shù)目上做限制，騰訊視頻的歷史記錄最多展示10條，百度搜索最多展示9條，由于受頁(yè)面空間和時(shí)效性的限制，盡量不要展示10條以上。此外，考慮到用戶隱私的問題，歷史記錄還需要支持刪除。

隨著用戶體驗(yàn)的不斷優(yōu)化，歷史記錄衍生出了收藏、訂閱、關(guān)注等功能，讓用戶免于搜索，可持續(xù)接收關(guān)注的內(nèi)容。

三、內(nèi)容輸入

1. 輸入觸發(fā)的交互

輸入內(nèi)容時(shí)，引導(dǎo)信息消失，有的還會(huì)伴隨在搜索框中出現(xiàn)清除的icon，清除的icon主要方便用戶進(jìn)行二次搜索時(shí)一鍵清空當(dāng)前信息，省去了逐字刪除的麻煩；根據(jù)輸入內(nèi)容，進(jìn)行關(guān)鍵詞的匹配。

匹配形式一般有兩種，一種是正常的關(guān)鍵詞匹配，按照一定的規(guī)則進(jìn)行推薦并排序；還有一種是包含歷史記錄的匹配，會(huì)將包含關(guān)鍵詞的歷史記錄置頂，與正常的匹配做區(qū)別并支持刪除（如淘寶）。

2. 關(guān)鍵詞匹配的作用?

關(guān)鍵詞匹配的作用主要有三個(gè)：引導(dǎo)、糾錯(cuò)和高效。

• 引導(dǎo)：在用戶無(wú)法準(zhǔn)確記憶搜索的名稱時(shí)，關(guān)鍵詞可以作為引導(dǎo)，幫助用戶完成搜索；
• 糾錯(cuò)：減少用戶輸入的錯(cuò)誤，會(huì)自動(dòng)在匹配區(qū)域更正；
• 高效：用戶直接點(diǎn)擊匹配出的結(jié)果，減少輸入，提高搜索效率。

3. 關(guān)鍵詞匹配的條數(shù)

各產(chǎn)品匹配條數(shù)上限不一致，淘寶為10條，愛奇藝為10條，一般來說不會(huì)超過10條，過多的選擇會(huì)給用戶造成記憶負(fù)擔(dān)，并且占據(jù)空間，有損用戶體驗(yàn)。

四、點(diǎn)擊搜索

點(diǎn)擊搜索一般有兩種機(jī)制：

• 一種是輸入完成后，點(diǎn)擊搜索按鈕、鍵盤回車進(jìn)行搜索；
• 一種是邊輸入邊顯示搜索結(jié)果，每輸入一個(gè)字符即進(jìn)行一次數(shù)據(jù)檢索并將結(jié)果展示出來，這種搜索方式也被稱為“即時(shí)搜索”。

即時(shí)搜索的方式簡(jiǎn)化了搜索的操作路徑，更快的引導(dǎo)用戶查詢到結(jié)果，能夠給用戶帶來良好的體驗(yàn)。

但即時(shí)搜索對(duì)服務(wù)器的運(yùn)算能力要求較高，如果服務(wù)器運(yùn)算能力跟不上，會(huì)出現(xiàn)較長(zhǎng)時(shí)間的等待，有損用戶體驗(yàn)，因此這種搜索機(jī)制在產(chǎn)品中并不多見。

五、反饋結(jié)果

觸發(fā)搜索之后，搜索框失去焦點(diǎn)，框內(nèi)保留搜索關(guān)鍵詞，顯示多條搜索結(jié)果，每條搜索結(jié)果中對(duì)搜索的內(nèi)容飄紅展示。如何能讓搜索結(jié)果更清晰的展示，讓用戶更快的找到所需，針對(duì)搜索結(jié)果的交互設(shè)計(jì)需要注意以下幾個(gè)問題：

1. 結(jié)果分類

將搜索到的結(jié)果進(jìn)行分類處理，一般采用Tab的樣式進(jìn)行歸類，如谷歌搜索“設(shè)計(jì)”，將搜索結(jié)果按照“全部”“圖片”“視頻”“新聞”“更多”等進(jìn)行了分類。

2. 排序篩選

排序與篩選的維度因產(chǎn)品性質(zhì)而異，常見的排序方式有時(shí)間、價(jià)格、銷量、距離、好評(píng)等；篩選可以算做個(gè)性化的需求，不同產(chǎn)品間存在較大差異。排序和篩選的功能一般放置在搜索和結(jié)果之間，一是符合用戶的認(rèn)知和使用習(xí)慣，再者便于用戶切換。尤其在電商類網(wǎng)站中，排序和篩選功能尤為重要，占到了首屏空間的三分之一。

3.?自動(dòng)糾錯(cuò)

用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過判斷后會(huì)展示正確詞匯的搜索結(jié)果給用戶，并友好的告知用戶正確的搜索方式。

4.?特殊狀態(tài)

特殊狀態(tài)包含無(wú)結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。

出現(xiàn)無(wú)結(jié)果的狀態(tài)可能是：

• 用戶輸入錯(cuò)誤；
• 搜索結(jié)果無(wú)。

針對(duì)第一種情況，可以提示用戶正確的搜索方式，并自動(dòng)幫用戶糾錯(cuò)；對(duì)于第二種，需要有好的提示用戶無(wú)搜索結(jié)果，嘗試其他搜索方式或者更換關(guān)鍵詞等。

六、結(jié)語(yǔ)

以上對(duì)于搜索功能進(jìn)行了拆解和細(xì)化，設(shè)計(jì)師在進(jìn)行搜索功能要根據(jù)產(chǎn)品的定位以及目標(biāo)用戶、應(yīng)用場(chǎng)景、業(yè)務(wù)需求等因素進(jìn)行設(shè)計(jì)，仔細(xì)推敲交互的每一個(gè)細(xì)節(jié)，提升產(chǎn)品的用戶體驗(yàn)。

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

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