搜索作為大部分(fen)互聯(lian)網(wang)產品(pin)(pin)都具備的功能，直接影響著(zhu)產品(pin)(pin)的用戶體(ti)驗。在進行(xing)搜索功能的設計(ji)時(shi)要以(yi)簡單、高(gao)效(xiao)為核(he)心目(mu)標(biao)，每一(yi)步(bu)的細節設計(ji)都要反復驗證是否脫離了需求和核(he)心目(mu)標(biao)。

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

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

1. 主(zhu)頁搜(sou)索

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

2. 搜索框

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

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

3. 多條件搜索

多條件搜(sou)索的(de)(de)(de)方式常見于(yu)旅游、出行(xing)類的(de)(de)(de)網站，如貓途鷹(ying)、攜程、東方航空(kong)等(deng)，需要輸入時間、地點、人(ren)員等(deng)信(xin)息，單一(yi)的(de)(de)(de)搜(sou)索框(kuang)不能滿足(zu)用(yong)戶的(de)(de)(de)需求(qiu)，多條件的(de)(de)(de)搜(sou)索框(kuang)一(yi)般置(zhi)于(yu)頁面中(zhong)較醒目的(de)(de)(de)位置(zhi)，引(yin)導(dao)用(yong)戶操作。

4. 搜索icon

頁(ye)面(mian)中(zhong)僅(jin)僅(jin)展示搜(sou)索(suo)的(de)icon，一般放在頁(ye)面(mian)的(de)導航(hang)欄中(zhong)偏(pian)右側(ce)的(de)位置(zhi)，點擊(ji)icon會拉(la)出搜(sou)索(suo)框，典型的(de)如站酷、UI中(zhong)國等，還有的(de)點擊(ji)icon會在頁(ye)面(mian)中(zhong)喚醒搜(sou)索(suo)功能，如Behance。

搜(sou)索icon的形式(shi)雖然可(ke)以節約(yue)導航(hang)欄的空間(jian)，但(dan)相對搜(sou)索框來(lai)說(shuo)對用戶的引導性較差，因此比較適合(he)以搜(sou)索為輔助功能的產(chan)品。二、搜(sou)索觸(chu)(chu)發(fa)1. 搜(sou)索框觸(chu)(chu)

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

2. 搜索形(xing)式(shi)

第(di)一種是有搜索/確定(ding)按(an)鈕(niu)或icon的搜索框，用戶(hu)輸入完成后可點(dian)擊按(an)鈕(niu)進(jin)行(xing)搜索，也可點(dian)擊鍵(jian)盤回車(che)搜索；另一種是無搜索按(an)鈕(niu)的搜索框，用戶(hu)需鍵(jian)盤回車(che)搜索。

在網(wang)頁設計(ji)中，第(di)一(yi)種(zhong)(zhong)應(ying)(ying)用比較(jiao)廣泛(fan)，第(di)二種(zhong)(zhong)國(guo)外(wai)網(wang)站應(ying)(ying)用較(jiao)多，如dribbble等。還有一(yi)些搜索框(kuang)內添(tian)加了拍照、上(shang)傳圖(tu)片、語(yu)音(yin)輸入等功能(neng)，使得搜索方式(shi)更加多元化。

3. 輔助區域

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

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

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

隨著用戶體驗的(de)不(bu)斷優化，歷史(shi)記錄衍生(sheng)出(chu)了收(shou)藏、訂(ding)閱、關注等(deng)功能，讓用戶免于搜索(suo)，可持續接收(shou)關注的(de)內容。

三(san)、內容(rong)輸入1. 輸入觸發的交互

輸入(ru)內容時(shi)，引(yin)導信息消(xiao)失，有的還(huan)會伴隨在(zai)搜索框中出現清除的icon，清除的icon主要(yao)方便用(yong)戶進行(xing)二次(ci)搜索時(shi)一鍵(jian)清空當前信息，省去了逐(zhu)字刪除的麻煩；根據輸入(ru)內容，進行(xing)關鍵(jian)詞的匹配。

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

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

關(guan)鍵(jian)詞匹(pi)(pi)配的(de)作用主要(yao)有三(san)個(ge)：引(yin)導、糾錯(cuo)和(he)高效(xiao)。引(yin)導：在(zai)用戶無法(fa)準確記憶搜索(suo)(suo)的(de)名稱時(shi)，關(guan)鍵(jian)詞可以作為引(yin)導，幫助(zhu)用戶完成搜索(suo)(suo)；糾錯(cuo)：減少用戶輸入(ru)的(de)錯(cuo)誤，會自(zi)動在(zai)匹(pi)(pi)配區域更(geng)正；高效(xiao)：用戶直接點擊匹(pi)(pi)配出(chu)的(de)結(jie)果，減少輸入(ru)，提高搜索(suo)(suo)效(xiao)率。3. 關(guan)鍵(jian)詞匹(pi)(pi)配的(de)條數

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

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

1. 結果分(fen)類

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

2. 排序篩選

排(pai)序(xu)(xu)與篩(shai)選的(de)(de)(de)維度因產品(pin)性質(zhi)而異，常見的(de)(de)(de)排(pai)序(xu)(xu)方(fang)式有時間(jian)、價(jia)格(ge)、銷量、距(ju)離(li)、好(hao)評等(deng)；篩(shai)選可以算做個(ge)性化的(de)(de)(de)需求，不同產品(pin)間(jian)存在(zai)較(jiao)大差異。排(pai)序(xu)(xu)和篩(shai)選的(de)(de)(de)功能(neng)一般放置在(zai)搜索和結果之間(jian)，一是符(fu)合(he)用戶(hu)的(de)(de)(de)認知和使用習慣(guan)，再者便于用戶(hu)切換。尤(you)其在(zai)電商類網站中，排(pai)序(xu)(xu)和篩(shai)選功能(neng)尤(you)為重要，占到了首屏空間(jian)的(de)(de)(de)三分之一。

3. 自動糾錯

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

4. 特殊狀態(tai)

特(te)殊狀(zhuang)(zhuang)態(tai)包(bao)含(han)無結果狀(zhuang)(zhuang)態(tai)、網絡不佳(jia)狀(zhuang)(zhuang)態(tai)等(deng)。

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