搜(sou)索作為大部分互聯(lian)網產品都(dou)具(ju)備的(de)功能，直接(jie)影響著產品的(de)用戶(hu)體驗(yan)。在進行搜(sou)索功能的(de)設計時要以(yi)簡單(dan)、高效(xiao)為核心目(mu)標，每一步的(de)細節設計都(dou)要反復驗(yan)證是否脫離了需求和核心目(mu)標。

根據搜索(suo)(suo)的行為，可將其拆(chai)分(fen)為五步(bu)：搜索(suo)(suo)入(ru)口(kou)-搜索(suo)(suo)觸發-內容輸(shu)入(ru)-點擊搜索(suo)(suo)-反饋結果。

一(yi)、搜(sou)索入口搜(sou)索入口具有提示(shi)和引導操(cao)作的作用(yong)，主(zhu)要類型有四(si)種：主(zhu)頁(ye)搜(sou)索、搜(sou)索框、多(duo)條件(jian)搜(sou)索、搜(sou)索icon。

1. 主頁搜(sou)索

將搜(sou)(sou)索(suo)作為(wei)獨立的頁(ye)面，以(yi)搜(sou)(sou)索(suo)為(wei)導(dao)向，整個產(chan)(chan)品的使用(yong)(yong)圍繞搜(sou)(sou)索(suo)這一核心功能(neng)功能(neng)展(zhan)開(kai)。比較(jiao)典(dian)型的如(ru)百度、谷歌等(deng)，搜(sou)(sou)索(suo)框功能(neng)強大，用(yong)(yong)戶(hu)可以(yi)進行(xing)各種嘗(chang)試。谷歌主頁(ye)中(zhong)的手氣不錯以(yi)及(ji)百度搜(sou)(sou)索(suo)的個性(xing)化推薦(jian)和新聞，為(wei)產(chan)(chan)品引(yin)進更多的流量(liang)，增加了用(yong)(yong)戶(hu)黏性(xing)。

2. 搜索框

這種是在(zai)網頁(ye)中(zhong)最為常見的(de)，應用也(ye)(ye)最廣泛，大(da)多居于頁(ye)面內容區域(yu)的(de)上方，有的(de)出于節省空間和搜索(suo)需求的(de)考量，也(ye)(ye)內嵌在(zai)導(dao)航欄中(zhong)。搜索(suo)框內會有文字的(de)提示(shi)，提示(shi)用戶搜索(suo)的(de)方式，還有一些產品在(zai)搜索(suo)框內放置當前的(de)熱詞、活動(dong)、新功能等，將搜索(suo)框做成了運營的(de)入口(kou)。

搜索(suo)框的后面(mian)一(yi)(yi)般會伴有搜索(suo)按鈕(niu)或放大(da)鏡的icon，可(ke)點擊按鈕(niu)和鍵盤回(hui)車進(jin)行搜索(suo)。在頁(ye)面(mian)滑動(dong)時，搜索(suo)框一(yi)(yi)般會固定在頁(ye)面(mian)的頂端(duan)，用以(yi)提示用戶目前搜索(suo)內容，同時也方便重新搜索(suo)。

3. 多條件搜索

多(duo)條件(jian)(jian)搜(sou)索的(de)方(fang)式常(chang)見于(yu)旅(lv)游、出行類的(de)網(wang)站，如貓途(tu)鷹、攜程、東(dong)方(fang)航空等，需要輸入時間、地點(dian)、人員等信息，單(dan)一(yi)的(de)搜(sou)索框不(bu)能滿足用戶的(de)需求，多(duo)條件(jian)(jian)的(de)搜(sou)索框一(yi)般置(zhi)于(yu)頁面中較(jiao)醒目的(de)位(wei)置(zhi)，引(yin)導用戶操作(zuo)。

4. 搜(sou)索icon

頁面(mian)中(zhong)僅僅展示搜索的(de)(de)icon，一般放在頁面(mian)的(de)(de)導航欄中(zhong)偏右(you)側的(de)(de)位置，點擊icon會(hui)拉出搜索框，典型的(de)(de)如站酷、UI中(zhong)國等(deng)，還有的(de)(de)點擊icon會(hui)在頁面(mian)中(zhong)喚醒搜索功能，如Behance。

搜索(suo)(suo)icon的形式雖然可以節(jie)約導航(hang)欄的空間，但(dan)相對搜索(suo)(suo)框來說對用戶的引導性較差，因此(ci)比較適合以搜索(suo)(suo)為(wei)輔助功能的產品

二、搜索觸發

1. 搜索框(kuang)觸

點擊(ji)搜(sou)索(suo)框或搜(sou)索(suo)icon，呈激活狀(zhuang)態，光(guang)標在框內(nei)閃動，引導信(xin)息淡化或消(xiao)失；有的搜(sou)索(suo)框還(huan)會(hui)伴隨彈出輔助區(qu)域，區(qu)域內(nei)包含熱詞、搜(sou)索(suo)歷史等(deng)信(xin)息，典型(xing)如(ru)騰訊視頻、淘寶等(deng)。

2. 搜索(suo)形式

第一種是有搜(sou)(sou)索(suo)(suo)(suo)/確定按鈕或icon的搜(sou)(sou)索(suo)(suo)(suo)框，用(yong)戶(hu)輸入完(wan)成后可(ke)(ke)點擊按鈕進行搜(sou)(sou)索(suo)(suo)(suo)，也可(ke)(ke)點擊鍵盤回車搜(sou)(sou)索(suo)(suo)(suo)；另一種是無(wu)搜(sou)(sou)索(suo)(suo)(suo)按鈕的搜(sou)(sou)索(suo)(suo)(suo)框，用(yong)戶(hu)需鍵盤回車搜(sou)(sou)索(suo)(suo)(suo)。

在網(wang)頁(ye)設計中，第一種應用(yong)比較(jiao)廣泛，第二種國外網(wang)站(zhan)應用(yong)較(jiao)多(duo)，如dribbble等(deng)(deng)。還有一些搜索框內添加了拍(pai)照、上(shang)傳圖(tu)片、語音輸入等(deng)(deng)功能，使得搜索方(fang)式更加多(duo)元化。

3. 輔助區(qu)域

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

熱(re)詞推薦(jian)：熱(re)詞推薦(jian)主要(yao)為當前時段內比較(jiao)熱(re)點的(de)詞匯或(huo)(huo)產品(pin)(pin)的(de)新功(gong)能(neng)，能(neng)夠為產品(pin)(pin)帶來流量(liang)導入和(he)收益，如電商(shang)類網(wang)頁中的(de)熱(re)詞一般為新產品(pin)(pin)或(huo)(huo)高銷量(liang)產品(pin)(pin)，視(shi)頻(pin)類網(wang)站的(de)搜索熱(re)詞一般為最新視(shi)頻(pin)或(huo)(huo)點擊(ji)量(liang)較(jiao)高的(de)影視(shi)劇。

歷史(shi)(shi)記錄(lu)：歷史(shi)(shi)記錄(lu)能夠(gou)在(zai)用(yong)戶重復搜索(suo)(suo)時提高效率，一般會在(zai)數目上(shang)做(zuo)限制，騰訊(xun)視頻的歷史(shi)(shi)記錄(lu)最多(duo)展(zhan)示(shi) 10 條，百度搜索(suo)(suo)最多(duo)展(zhan)示(shi) 9 條，由于受頁面(mian)空間和時效性的限制，盡量(liang)不(bu)要展(zhan)示(shi) 10 條以上(shang)。此外，考慮(lv)到(dao)用(yong)戶隱私的問題，歷史(shi)(shi)記錄(lu)還需要支持(chi)刪除。

隨著(zhu)用(yong)戶體驗(yan)的不(bu)斷優化，歷史記(ji)錄衍生出了收(shou)藏、訂(ding)閱、關注(zhu)等功能(neng)，讓用(yong)戶免于搜(sou)索，可持續(xu)接收(shou)關注(zhu)的內(nei)容。

三、內容輸入

1. 輸入(ru)觸(chu)發(fa)的交互

輸入內容(rong)時(shi)，引導信(xin)息(xi)消失，有的(de)還會伴隨在搜索框中出(chu)現清(qing)除(chu)的(de)icon，清(qing)除(chu)的(de)icon主要方便(bian)用戶進行二次搜索時(shi)一鍵清(qing)空當前信(xin)息(xi)，省(sheng)去了逐字(zi)刪(shan)除(chu)的(de)麻煩；根據輸入內容(rong)，進行關鍵詞的(de)匹配。

匹(pi)(pi)配形式一般有(you)兩種(zhong)，一種(zhong)是正常的(de)關鍵詞(ci)匹(pi)(pi)配，按(an)照一定的(de)規(gui)則進行推薦并排序；還(huan)有(you)一種(zhong)是包含(han)歷史記(ji)錄的(de)匹(pi)(pi)配，會將(jiang)包含(han)關鍵詞(ci)的(de)歷史記(ji)錄置頂(ding)，與正常的(de)匹(pi)(pi)配做(zuo)區(qu)別并支持刪(shan)除（如淘(tao)寶）。

2. 關鍵(jian)詞匹配(pei)的作用

關(guan)鍵詞匹(pi)配的(de)作用(yong)(yong)主(zhu)要(yao)有三個：引導(dao)(dao)、糾(jiu)錯(cuo)和(he)高(gao)效(xiao)(xiao)。引導(dao)(dao)：在用(yong)(yong)戶(hu)(hu)無法準確記憶(yi)搜索(suo)的(de)名稱時，關(guan)鍵詞可以(yi)作為(wei)引導(dao)(dao)，幫(bang)助(zhu)用(yong)(yong)戶(hu)(hu)完成(cheng)搜索(suo)；糾(jiu)錯(cuo)：減(jian)(jian)少(shao)用(yong)(yong)戶(hu)(hu)輸入(ru)的(de)錯(cuo)誤(wu)，會自動在匹(pi)配區域更正；高(gao)效(xiao)(xiao)：用(yong)(yong)戶(hu)(hu)直(zhi)接點擊匹(pi)配出(chu)的(de)結果，減(jian)(jian)少(shao)輸入(ru)，提(ti)高(gao)搜索(suo)效(xiao)(xiao)率。3. 關(guan)鍵詞匹(pi)配的(de)條數(shu)

各(ge)產品匹配條數(shu)上(shang)限(xian)不(bu)一(yi)(yi)致，淘寶為 10 條，愛奇(qi)藝為 10 條，一(yi)(yi)般(ban)來說不(bu)會(hui)超(chao)過(guo)(guo) 10 條，過(guo)(guo)多的(de)選擇會(hui)給用(yong)戶(hu)造成(cheng)記憶負擔，并(bing)且占據(ju)空(kong)間，有(you)損(sun)用(yong)戶(hu)體(ti)驗。四(si)、點(dian)(dian)擊搜索(suo)(suo)點(dian)(dian)擊搜索(suo)(suo)一(yi)(yi)般(ban)有(you)兩種(zhong)機制：一(yi)(yi)種(zhong)是輸(shu)(shu)入完成(cheng)后，點(dian)(dian)擊搜索(suo)(suo)按(an)鈕、鍵盤回車進(jin)行(xing)搜索(suo)(suo)；一(yi)(yi)種(zhong)是邊輸(shu)(shu)入邊顯示搜索(suo)(suo)結果(guo)，每輸(shu)(shu)入一(yi)(yi)個(ge)字符即(ji)進(jin)行(xing)一(yi)(yi)次數(shu)據(ju)檢(jian)索(suo)(suo)并(bing)將結果(guo)展示出來，這(zhe)種(zhong)搜索(suo)(suo)方(fang)式(shi)也被稱為“即(ji)時(shi)搜索(suo)(suo)”。即(ji)時(shi)搜索(suo)(suo)的(de)方(fang)式(shi)簡化(hua)了搜索(suo)(suo)的(de)操作路徑，更快的(de)引導用(yong)戶(hu)查詢到結果(guo)，能夠(gou)給用(yong)戶(hu)帶來良好的(de)體(ti)驗。

但即時(shi)搜(sou)(sou)索對服(fu)務器的(de)運算能(neng)力(li)要求較(jiao)高，如果(guo)(guo)(guo)服(fu)務器運算能(neng)力(li)跟不(bu)上，會(hui)出現(xian)較(jiao)長時(shi)間(jian)的(de)等待，有(you)損(sun)用戶體驗(yan)，因此這(zhe)種搜(sou)(sou)索機制(zhi)在產(chan)品中(zhong)并(bing)不(bu)多(duo)見。五、反饋(kui)結(jie)果(guo)(guo)(guo)觸發搜(sou)(sou)索之后(hou)，搜(sou)(sou)索框失去焦點，框內保留搜(sou)(sou)索關鍵詞(ci)，顯示多(duo)條(tiao)搜(sou)(sou)索結(jie)果(guo)(guo)(guo)，每條(tiao)搜(sou)(sou)索結(jie)果(guo)(guo)(guo)中(zhong)對搜(sou)(sou)索的(de)內容飄紅展示。如何能(neng)讓(rang)搜(sou)(sou)索結(jie)果(guo)(guo)(guo)更清晰的(de)展示，讓(rang)用戶更快的(de)找到所需，針(zhen)對搜(sou)(sou)索結(jie)果(guo)(guo)(guo)的(de)交(jiao)互設計需要注意以下幾個問題：

1. 結果分類

將(jiang)搜索(suo)到的結果(guo)進行(xing)分類(lei)處理，一般(ban)采用Tab的樣式進行(xing)歸類(lei)，如谷歌搜索(suo)“設(she)計”，將(jiang)搜索(suo)結果(guo)按(an)照“全部”“圖(tu)片”“視(shi)頻”“新聞”“更多”等(deng)進行(xing)了分類(lei)。

2. 排序篩(shai)選

排(pai)序與篩(shai)選(xuan)的(de)(de)維(wei)度因(yin)產品(pin)性質而異，常(chang)見的(de)(de)排(pai)序方式(shi)有(you)時間、價格、銷量(liang)、距離(li)、好(hao)評等(deng)；篩(shai)選(xuan)可(ke)以算做個性化的(de)(de)需求，不(bu)同產品(pin)間存(cun)在較大差異。排(pai)序和篩(shai)選(xuan)的(de)(de)功(gong)(gong)能一(yi)般放置在搜索和結果(guo)之間，一(yi)是(shi)符(fu)合用(yong)戶(hu)的(de)(de)認知和使用(yong)習慣(guan)，再(zai)者便于用(yong)戶(hu)切換(huan)。尤其在電商類網站(zhan)中，排(pai)序和篩(shai)選(xuan)功(gong)(gong)能尤為(wei)重(zhong)要(yao)，占到(dao)了首屏空間的(de)(de)三分(fen)之一(yi)。

3. 自(zi)動糾(jiu)錯(cuo)

用戶(hu)在搜(sou)索時輸入(ru)了(le)錯誤(wu)的詞匯，系統經過判(pan)斷(duan)后會展示正確詞匯的搜(sou)索結(jie)果給用戶(hu)，并友(you)好(hao)的告知用戶(hu)正確的搜(sou)索方式。

4. 特殊(shu)狀(zhuang)態

特殊狀態包(bao)含無結(jie)果狀態、網絡不佳狀態等。

出現無結(jie)(jie)果的(de)狀態可(ke)能是(shi)：用(yong)戶(hu)輸入錯誤；搜(sou)索(suo)(suo)結(jie)(jie)果無。針對第一種情(qing)況(kuang)，可(ke)以提(ti)示用(yong)戶(hu)正確的(de)搜(sou)索(suo)(suo)方(fang)式，并自動幫(bang)用(yong)戶(hu)糾錯；對于第二種，需要(yao)有(you)好的(de)提(ti)示用(yong)戶(hu)無搜(sou)索(suo)(suo)結(jie)(jie)果，嘗試(shi)其他(ta)搜(sou)索(suo)(suo)方(fang)式或者更換關鍵詞等。六、結(jie)(jie)語以上對于搜(sou)索(suo)(suo)功能進行(xing)了拆解和細(xi)化，設(she)計師在進行(xing)搜(sou)索(suo)(suo)功能要(yao)根(gen)據(ju)產品的(de)定位(wei)以及目標用(yong)戶(hu)、應用(yong)場景、業(ye)務需求等因(yin)素進行(xing)設(she)計，仔細(xi)推敲交互的(de)每(mei)一個(ge)細(xi)節，提(ti)升產品的(de)用(yong)戶(hu)體(ti)驗。