搜(sou)索作(zuo)為(wei)大部(bu)分互聯網產(chan)品都具備的(de)功能，直(zhi)接影響著產(chan)品的(de)用戶體(ti)驗。在進行搜(sou)索功能的(de)設(she)計時要以簡(jian)單、高效(xiao)為(wei)核心目標，每一(yi)步的(de)細節(jie)設(she)計都要反復驗證(zheng)是否(fou)脫離了(le)需(xu)求(qiu)和核心目標。

根據搜索的行為，可將其(qi)拆分為五步：搜索入口-搜索觸(chu)發-內容輸入-點擊(ji)搜索-反饋結果(guo)。

一、搜(sou)索(suo)入口(kou)搜(sou)索(suo)入口(kou)具有(you)提示和引導(dao)操作的作用，主要類(lei)型有(you)四種：主頁搜(sou)索(suo)、搜(sou)索(suo)框(kuang)、多條件搜(sou)索(suo)、搜(sou)索(suo)icon。

1. 主頁搜索(suo)

將搜索(suo)作為(wei)(wei)獨立(li)的(de)(de)頁(ye)面(mian)，以搜索(suo)為(wei)(wei)導向，整個產品的(de)(de)使用(yong)圍(wei)繞(rao)搜索(suo)這一核心功(gong)能(neng)功(gong)能(neng)展開(kai)。比較典型的(de)(de)如百(bai)度(du)、谷歌等，搜索(suo)框功(gong)能(neng)強大，用(yong)戶可以進行各種(zhong)嘗試(shi)。谷歌主頁(ye)中的(de)(de)手氣不(bu)錯以及(ji)百(bai)度(du)搜索(suo)的(de)(de)個性(xing)(xing)化推薦和新聞(wen)，為(wei)(wei)產品引(yin)進更多的(de)(de)流量，增加了用(yong)戶黏性(xing)(xing)。

2. 搜索框

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

搜索(suo)框(kuang)的后面一般(ban)會伴有搜索(suo)按鈕或(huo)放大鏡的icon，可點(dian)擊按鈕和鍵盤回車(che)進行搜索(suo)。在(zai)頁面滑動(dong)時，搜索(suo)框(kuang)一般(ban)會固定在(zai)頁面的頂端，用以提示用戶目(mu)前搜索(suo)內容，同時也(ye)方便重新搜索(suo)。

3. 多條(tiao)件搜索

多條(tiao)件(jian)搜索的(de)(de)方(fang)式常見于旅游、出行(xing)類(lei)的(de)(de)網站(zhan)，如貓(mao)途鷹、攜程(cheng)、東方(fang)航空等，需(xu)要輸入(ru)時間、地點、人員等信(xin)息，單一的(de)(de)搜索框(kuang)不(bu)能滿足用(yong)戶的(de)(de)需(xu)求，多條(tiao)件(jian)的(de)(de)搜索框(kuang)一般置于頁面中較醒目的(de)(de)位置，引導用(yong)戶操(cao)作。

4. 搜索icon

頁面中(zhong)僅僅展示搜索(suo)的(de)icon，一(yi)般放在(zai)頁面的(de)導航欄(lan)中(zhong)偏右(you)側的(de)位置，點擊icon會拉出搜索(suo)框(kuang)，典型(xing)的(de)如(ru)(ru)站酷(ku)、UI中(zhong)國等，還有的(de)點擊icon會在(zai)頁面中(zhong)喚(huan)醒搜索(suo)功(gong)能，如(ru)(ru)Behance。

搜索icon的(de)形式雖然可(ke)以節約導(dao)航欄(lan)的(de)空(kong)間，但相對(dui)搜索框來說對(dui)用戶的(de)引導(dao)性(xing)較(jiao)差，因此(ci)比較(jiao)適(shi)合以搜索為輔助功能的(de)產品

二、搜索觸發

1. 搜索(suo)框觸

點擊(ji)搜(sou)索框(kuang)或搜(sou)索icon，呈激(ji)活狀(zhuang)態，光標在框(kuang)內(nei)閃(shan)動(dong)，引導信息淡化或消失；有(you)的(de)搜(sou)索框(kuang)還(huan)會伴隨彈出輔助區域，區域內(nei)包含熱(re)詞、搜(sou)索歷史(shi)等(deng)信息，典(dian)型(xing)如騰(teng)訊視頻(pin)、淘寶等(deng)。

2. 搜索形式

第一(yi)種(zhong)是有搜(sou)索(suo)(suo)/確定按鈕(niu)或icon的搜(sou)索(suo)(suo)框(kuang)，用(yong)戶(hu)輸入(ru)完成(cheng)后(hou)可點擊按鈕(niu)進(jin)行搜(sou)索(suo)(suo)，也可點擊鍵盤回車搜(sou)索(suo)(suo)；另一(yi)種(zhong)是無搜(sou)索(suo)(suo)按鈕(niu)的搜(sou)索(suo)(suo)框(kuang)，用(yong)戶(hu)需(xu)鍵盤回車搜(sou)索(suo)(suo)。

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

3. 輔(fu)助區(qu)域

輔助區域(yu)的(de)信(xin)息主(zhu)要有(you)熱詞推薦和(he)歷史記錄(lu)，用以提(ti)高搜索(suo)的(de)效率(lv)和(he)作為推廣的(de)入口。

熱(re)詞推薦：熱(re)詞推薦主要為(wei)當前時段(duan)內比較(jiao)熱(re)點的(de)(de)詞匯(hui)或產(chan)品(pin)的(de)(de)新(xin)功(gong)能，能夠為(wei)產(chan)品(pin)帶(dai)來(lai)流(liu)量(liang)導入和收益，如電商類(lei)網頁中的(de)(de)熱(re)詞一般為(wei)新(xin)產(chan)品(pin)或高銷量(liang)產(chan)品(pin)，視頻類(lei)網站的(de)(de)搜索熱(re)詞一般為(wei)最(zui)新(xin)視頻或點擊(ji)量(liang)較(jiao)高的(de)(de)影(ying)視劇(ju)。

歷史(shi)記錄：歷史(shi)記錄能(neng)夠(gou)在用戶(hu)重復(fu)搜(sou)索時提高效(xiao)率，一般(ban)會在數目(mu)上做限(xian)制，騰(teng)訊視頻(pin)的歷史(shi)記錄最多展示(shi) 10 條，百度搜(sou)索最多展示(shi) 9 條，由于受頁面空(kong)間和(he)時效(xiao)性的限(xian)制，盡(jin)量(liang)不要展示(shi) 10 條以(yi)上。此外，考慮到用戶(hu)隱私的問(wen)題，歷史(shi)記錄還需要支持刪除。

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

三、內容輸入

1. 輸(shu)入觸發的交互

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

匹(pi)配(pei)形式一般有兩(liang)種(zhong)(zhong)，一種(zhong)(zhong)是正常的(de)(de)(de)關(guan)鍵詞匹(pi)配(pei)，按照一定(ding)的(de)(de)(de)規則進行推薦并(bing)排序；還有一種(zhong)(zhong)是包含(han)歷(li)史(shi)記錄的(de)(de)(de)匹(pi)配(pei)，會將包含(han)關(guan)鍵詞的(de)(de)(de)歷(li)史(shi)記錄置頂，與正常的(de)(de)(de)匹(pi)配(pei)做區別并(bing)支(zhi)持刪除(chu)（如淘寶(bao)）。

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

關鍵(jian)詞匹(pi)(pi)配的(de)(de)作用(yong)(yong)(yong)主要(yao)有三個：引(yin)(yin)導、糾錯(cuo)和高效(xiao)。引(yin)(yin)導：在用(yong)(yong)(yong)戶(hu)無法準確記(ji)憶搜(sou)(sou)索(suo)(suo)的(de)(de)名稱時，關鍵(jian)詞可以作為(wei)引(yin)(yin)導，幫助用(yong)(yong)(yong)戶(hu)完(wan)成搜(sou)(sou)索(suo)(suo)；糾錯(cuo)：減(jian)少用(yong)(yong)(yong)戶(hu)輸(shu)入的(de)(de)錯(cuo)誤，會(hui)自動(dong)在匹(pi)(pi)配區域(yu)更(geng)正；高效(xiao)：用(yong)(yong)(yong)戶(hu)直接點擊匹(pi)(pi)配出的(de)(de)結果，減(jian)少輸(shu)入，提高搜(sou)(sou)索(suo)(suo)效(xiao)率。3. 關鍵(jian)詞匹(pi)(pi)配的(de)(de)條數(shu)

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

但即時搜(sou)(sou)(sou)索(suo)(suo)(suo)對服務(wu)器(qi)的運算能力要(yao)求較(jiao)高，如(ru)果(guo)(guo)服務(wu)器(qi)運算能力跟不上(shang)，會(hui)出(chu)現較(jiao)長時間的等待，有損用(yong)戶體驗，因此這種搜(sou)(sou)(sou)索(suo)(suo)(suo)機(ji)制在產品中并不多(duo)見。五、反饋結果(guo)(guo)觸發搜(sou)(sou)(sou)索(suo)(suo)(suo)之(zhi)后，搜(sou)(sou)(sou)索(suo)(suo)(suo)框(kuang)失去(qu)焦點，框(kuang)內保留搜(sou)(sou)(sou)索(suo)(suo)(suo)關(guan)鍵(jian)詞，顯(xian)示多(duo)條(tiao)搜(sou)(sou)(sou)索(suo)(suo)(suo)結果(guo)(guo)，每條(tiao)搜(sou)(sou)(sou)索(suo)(suo)(suo)結果(guo)(guo)中對搜(sou)(sou)(sou)索(suo)(suo)(suo)的內容飄紅展示。如(ru)何能讓(rang)搜(sou)(sou)(sou)索(suo)(suo)(suo)結果(guo)(guo)更清晰(xi)的展示，讓(rang)用(yong)戶更快的找到(dao)所需，針對搜(sou)(sou)(sou)索(suo)(suo)(suo)結果(guo)(guo)的交互設計(ji)需要(yao)注意以下幾個(ge)問題(ti)：

1. 結果分類(lei)

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

2. 排序篩選

排(pai)(pai)序與(yu)篩(shai)(shai)選(xuan)的維度(du)因產品性質而異，常見的排(pai)(pai)序方式有時間(jian)、價(jia)格、銷(xiao)量、距離、好評等；篩(shai)(shai)選(xuan)可以(yi)算做個(ge)性化的需求(qiu)，不同產品間(jian)存在(zai)較大差(cha)異。排(pai)(pai)序和(he)篩(shai)(shai)選(xuan)的功(gong)能一般(ban)放置在(zai)搜索和(he)結果之(zhi)間(jian)，一是符合用(yong)戶的認知和(he)使用(yong)習(xi)慣(guan)，再(zai)者便于用(yong)戶切換。尤(you)其(qi)在(zai)電商(shang)類網站(zhan)中，排(pai)(pai)序和(he)篩(shai)(shai)選(xuan)功(gong)能尤(you)為重要，占到(dao)了首屏空間(jian)的三(san)分之(zhi)一。

3. 自動(dong)糾錯

用(yong)戶在(zai)搜(sou)(sou)索(suo)時輸入(ru)了(le)錯誤的詞(ci)匯，系統經過判斷后會展(zhan)示正確詞(ci)匯的搜(sou)(sou)索(suo)結果(guo)給用(yong)戶，并友好的告知用(yong)戶正確的搜(sou)(sou)索(suo)方式。

4. 特(te)殊狀態

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

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