搜索作為(wei)大(da)部(bu)分互聯網產(chan)品都具備(bei)的(de)(de)功能(neng)，直接(jie)影(ying)響著產(chan)品的(de)(de)用戶體驗(yan)。在進行搜索功能(neng)的(de)(de)設計時要以(yi)簡單(dan)、高效為(wei)核心目標(biao)，每(mei)一步(bu)的(de)(de)細(xi)節設計都要反復(fu)驗(yan)證是否(fou)脫離了需求和核心目標(biao)。

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

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

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

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

2. 搜索框

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

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

3. 多條件搜索

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

4. 搜索icon

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

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

二、搜索觸發

1. 搜索(suo)框觸

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

2. 搜索形式

第一種是(shi)有(you)搜(sou)索(suo)(suo)/確定按鈕或(huo)icon的搜(sou)索(suo)(suo)框，用戶輸(shu)入完(wan)成后可點擊(ji)按鈕進行搜(sou)索(suo)(suo)，也可點擊(ji)鍵(jian)盤回車(che)搜(sou)索(suo)(suo)；另(ling)一種是(shi)無搜(sou)索(suo)(suo)按鈕的搜(sou)索(suo)(suo)框，用戶需鍵(jian)盤回車(che)搜(sou)索(suo)(suo)。

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

3. 輔助區域

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

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

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

隨著用戶體驗的不斷(duan)優化，歷史記錄衍生出了收藏、訂閱(yue)、關注(zhu)等(deng)功能，讓用戶免(mian)于搜索，可持(chi)續接收關注(zhu)的內容。

三、內容輸入

1. 輸入觸發的交互

輸入內容時，引導(dao)信息消失(shi)，有的還會伴隨(sui)在搜(sou)索(suo)框中出現清除(chu)的icon，清除(chu)的icon主要(yao)方便用(yong)戶進行二次搜(sou)索(suo)時一(yi)鍵清空(kong)當(dang)前信息，省(sheng)去了(le)逐字刪除(chu)的麻煩；根據(ju)輸入內容，進行關(guan)鍵詞(ci)的匹(pi)配。

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

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

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

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

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

1. 結(jie)果分類

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

2. 排序篩選

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

3. 自動糾錯(cuo)

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

4. 特殊狀態(tai)

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

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