搜索(suo)作為大部分互聯網產品都具備的(de)功能(neng)，直接影響著產品的(de)用戶體驗。在進(jin)行搜索(suo)功能(neng)的(de)設計時要以簡單、高效為核心(xin)目(mu)標，每一步(bu)的(de)細(xi)節設計都要反復驗證(zheng)是否脫(tuo)離了(le)需求和(he)核心(xin)目(mu)標。

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

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

1. 主頁搜索

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

2. 搜索框

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

搜索框(kuang)的后面一般會(hui)伴有搜索按鈕或放(fang)大鏡的icon，可點擊按鈕和(he)鍵(jian)盤(pan)回車進行搜索。在頁面滑動(dong)時，搜索框(kuang)一般會(hui)固定在頁面的頂端，用(yong)以提示用(yong)戶目前搜索內容，同時也方(fang)便重新(xin)搜索。

3. 多條件搜(sou)索(suo)

多條(tiao)件(jian)(jian)搜索的(de)方(fang)式常(chang)見于旅游、出(chu)行類的(de)網(wang)站，如貓途(tu)鷹、攜(xie)程、東方(fang)航空等，需要(yao)輸入時間、地點(dian)、人員等信息，單(dan)一的(de)搜索框不能滿足用(yong)戶的(de)需求(qiu)，多條(tiao)件(jian)(jian)的(de)搜索框一般置于頁面(mian)中(zhong)較醒目(mu)的(de)位置，引(yin)導(dao)用(yong)戶操作。

4. 搜(sou)索icon

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

搜(sou)(sou)索icon的(de)形式雖(sui)然可以節約(yue)導航欄的(de)空間，但相對(dui)搜(sou)(sou)索框(kuang)來(lai)說對(dui)用戶的(de)引導性較(jiao)差，因此(ci)比較(jiao)適合以搜(sou)(sou)索為輔(fu)助功(gong)能的(de)產品。二、搜(sou)(sou)索觸發1. 搜(sou)(sou)索框(kuang)觸

點(dian)擊搜(sou)索框(kuang)或搜(sou)索icon，呈激活狀(zhuang)態，光標在框(kuang)內(nei)閃(shan)動，引導信(xin)息(xi)淡化或消失；有的搜(sou)索框(kuang)還會伴隨(sui)彈出(chu)輔助區域(yu)，區域(yu)內(nei)包含(han)熱詞、搜(sou)索歷史等信(xin)息(xi)，典型如騰訊視頻(pin)、淘寶(bao)等。

2. 搜索形式(shi)

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

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

3. 輔助區域

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

熱(re)(re)(re)詞(ci)推薦：熱(re)(re)(re)詞(ci)推薦主要為當前(qian)時段(duan)內比較(jiao)熱(re)(re)(re)點的(de)詞(ci)匯(hui)或(huo)產(chan)品(pin)(pin)的(de)新(xin)功能(neng)，能(neng)夠為產(chan)品(pin)(pin)帶(dai)來(lai)流量(liang)導入和收(shou)益，如電商類網頁(ye)中(zhong)的(de)熱(re)(re)(re)詞(ci)一般(ban)為新(xin)產(chan)品(pin)(pin)或(huo)高(gao)銷量(liang)產(chan)品(pin)(pin)，視頻類網站的(de)搜索(suo)熱(re)(re)(re)詞(ci)一般(ban)為最新(xin)視頻或(huo)點擊量(liang)較(jiao)高(gao)的(de)影視劇。

歷(li)史(shi)記錄(lu)：歷(li)史(shi)記錄(lu)能夠在(zai)用(yong)戶重(zhong)復搜索時提(ti)高(gao)效率，一般會在(zai)數目上做(zuo)限(xian)制，騰訊視頻(pin)的歷(li)史(shi)記錄(lu)最多展(zhan)示(shi) 10 條，百度搜索最多展(zhan)示(shi) 9 條，由于受頁(ye)面空(kong)間(jian)和時效性的限(xian)制，盡(jin)量(liang)不要展(zhan)示(shi) 10 條以(yi)上。此(ci)外，考慮到用(yong)戶隱私的問題，歷(li)史(shi)記錄(lu)還需要支持刪除。

隨(sui)著(zhu)用戶(hu)體驗的(de)不斷優(you)化，歷(li)史記錄衍生出(chu)了收藏、訂閱(yue)、關(guan)注等功能(neng)，讓用戶(hu)免(mian)于搜(sou)索，可持續接收關(guan)注的(de)內容(rong)。

三、內容輸(shu)入1. 輸(shu)入觸(chu)發的(de)交(jiao)互

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

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

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

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

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

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

1. 結(jie)果分類

將(jiang)(jiang)搜索(suo)(suo)到(dao)的(de)結(jie)果進行(xing)分類處理，一(yi)般(ban)采用Tab的(de)樣式進行(xing)歸類，如谷(gu)歌搜索(suo)(suo)“設計”，將(jiang)(jiang)搜索(suo)(suo)結(jie)果按照“全部”“圖片”“視頻”“新(xin)聞(wen)”“更多”等(deng)進行(xing)了分類。

2. 排序篩選(xuan)

排序(xu)與(yu)篩(shai)選的(de)維度因產品性質而異，常(chang)見(jian)的(de)排序(xu)方式(shi)有時間、價格、銷量、距離、好評等(deng)；篩(shai)選可(ke)以算(suan)做個性化的(de)需求(qiu)，不同產品間存在(zai)較大差(cha)異。排序(xu)和篩(shai)選的(de)功(gong)(gong)能(neng)一(yi)般放(fang)置(zhi)在(zai)搜索和結果之間，一(yi)是(shi)符合用(yong)戶的(de)認(ren)知和使用(yong)習(xi)慣，再(zai)者便(bian)于(yu)用(yong)戶切換。尤其在(zai)電(dian)商類網站中，排序(xu)和篩(shai)選功(gong)(gong)能(neng)尤為重要，占到了首屏空間的(de)三分(fen)之一(yi)。

3. 自動(dong)糾錯

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

4. 特殊狀態(tai)

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

出現無結(jie)(jie)果的(de)狀態可(ke)能(neng)是：用(yong)(yong)戶輸(shu)入錯誤；搜(sou)(sou)索結(jie)(jie)果無。針(zhen)對第一(yi)種(zhong)情(qing)況，可(ke)以提示用(yong)(yong)戶正確的(de)搜(sou)(sou)索方式(shi)，并自動幫用(yong)(yong)戶糾(jiu)錯；對于第二種(zhong)，需要有好的(de)提示用(yong)(yong)戶無搜(sou)(sou)索結(jie)(jie)果，嘗試(shi)其他(ta)搜(sou)(sou)索方式(shi)或者(zhe)更換關鍵詞等。