搜索作爲大(dà)部分(fēn)互聯網産品都具備的(de)功能，直接影(yǐng)響著(zhe)産品的(de)用(yòng)戶體驗。在進行搜索功能的(de)設計時(shí)要以簡單、高(gāo)效爲核心目标，每一步的(de)細節設計都要反複驗證是否脫離了(le)需求和(hé)核心目标。

根據搜索的(de)行爲，可(kě)将其拆分(fēn)爲五步：搜索入口-搜索觸發-内容輸入-點擊搜索-反饋結果。

一、搜索入口搜索入口具有提示和(hé)引導操作的(de)作用(yòng)，主要類型有四種：主頁搜索、搜索框、多(duō)條件搜索、搜索icon。

1. 主頁搜索

将搜索作爲獨立的(de)頁面，以搜索爲導向，整個(gè)産品的(de)使用(yòng)圍繞搜索這(zhè)一核心功能功能展開。比較典型的(de)如百度、谷歌(gē)等，搜索框功能強大(dà)，用(yòng)戶可(kě)以進行各種嘗試。谷歌(gē)主頁中的(de)手氣不錯以及百度搜索的(de)個(gè)性化(huà)推薦和(hé)新聞，爲産品引進更多(duō)的(de)流量，增加了(le)用(yòng)戶黏性。

2. 搜索框

這(zhè)種是在網頁中最爲常見的(de)，應用(yòng)也(yě)最廣泛，大(dà)多(duō)居于頁面内容區(qū)域的(de)上方，有的(de)出于節省空間和(hé)搜索需求的(de)考量，也(yě)内嵌在導航欄中。搜索框内會有文字的(de)提示，提示用(yòng)戶搜索的(de)方式，還(hái)有一些産品在搜索框内放置當前的(de)熱(rè)詞、活動、新功能等，将搜索框做(zuò)成了(le)運營的(de)入口。

搜索框的(de)後面一般會伴有搜索按鈕或放大(dà)鏡的(de)icon，可(kě)點擊按鈕和(hé)鍵盤回車進行搜索。在頁面滑動時(shí)，搜索框一般會固定在頁面的(de)頂端，用(yòng)以提示用(yòng)戶目前搜索内容，同時(shí)也(yě)方便重新搜索。

3. 多(duō)條件搜索

多(duō)條件搜索的(de)方式常見于旅遊、出行類的(de)網站，如貓途鷹、攜程、東方航空等，需要輸入時(shí)間、地點、人(rén)員(yuán)等信息，單一的(de)搜索框不能滿足用(yòng)戶的(de)需求，多(duō)條件的(de)搜索框一般置于頁面中較醒目的(de)位置，引導用(yòng)戶操作。

4. 搜索icon

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

搜索icon的(de)形式雖然可(kě)以節約導航欄的(de)空間，但相對(duì)搜索框來(lái)說對(duì)用(yòng)戶的(de)引導性較差，因此比較适合以搜索爲輔助功能的(de)産品

二、搜索觸發

1. 搜索框觸

點擊搜索框或搜索icon，呈激活狀态，光(guāng)标在框内閃動，引導信息淡化(huà)或消失；有的(de)搜索框還(hái)會伴随彈出輔助區(qū)域，區(qū)域内包含熱(rè)詞、搜索曆史等信息，典型如騰訊視頻(pín)、淘寶等。

2. 搜索形式

第一種是有搜索/确定按鈕或icon的(de)搜索框，用(yòng)戶輸入完成後可(kě)點擊按鈕進行搜索，也(yě)可(kě)點擊鍵盤回車搜索；另一種是無搜索按鈕的(de)搜索框，用(yòng)戶需鍵盤回車搜索。

在網頁設計中，第一種應用(yòng)比較廣泛，第二種國外網站應用(yòng)較多(duō)，如dribbble等。還(hái)有一些搜索框内添加了(le)拍(pāi)照(zhào)、上傳圖片、語音(yīn)輸入等功能，使得(de)搜索方式更加多(duō)元化(huà)。

3. 輔助區(qū)域

輔助區(qū)域的(de)信息主要有熱(rè)詞推薦和(hé)曆史記錄，用(yòng)以提高(gāo)搜索的(de)效率和(hé)作爲推廣的(de)入口。

熱(rè)詞推薦：熱(rè)詞推薦主要爲當前時(shí)段内比較熱(rè)點的(de)詞彙或産品的(de)新功能，能夠爲産品帶來(lái)流量導入和(hé)收益，如電商類網頁中的(de)熱(rè)詞一般爲新産品或高(gāo)銷量産品，視頻(pín)類網站的(de)搜索熱(rè)詞一般爲最新視頻(pín)或點擊量較高(gāo)的(de)影(yǐng)視劇。

曆史記錄：曆史記錄能夠在用(yòng)戶重複搜索時(shí)提高(gāo)效率，一般會在數目上做(zuò)限制，騰訊視頻(pín)的(de)曆史記錄最多(duō)展示 10 條，百度搜索最多(duō)展示 9 條，由于受頁面空間和(hé)時(shí)效性的(de)限制，盡量不要展示 10 條以上。此外，考慮到用(yòng)戶隐私的(de)問題，曆史記錄還(hái)需要支持删除。

随著(zhe)用(yòng)戶體驗的(de)不斷優化(huà)，曆史記錄衍生出了(le)收藏、訂閱、關注等功能，讓用(yòng)戶免于搜索，可(kě)持續接收關注的(de)内容。

三、内容輸入

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

輸入内容時(shí)，引導信息消失，有的(de)還(hái)會伴随在搜索框中出現清除的(de)icon，清除的(de)icon主要方便用(yòng)戶進行二次搜索時(shí)一鍵清空當前信息，省去了(le)逐字删除的(de)麻煩；根據輸入内容，進行關鍵詞的(de)匹配。

匹配形式一般有兩種，一種是正常的(de)關鍵詞匹配，按照(zhào)一定的(de)規則進行推薦并排序；還(hái)有一種是包含曆史記錄的(de)匹配，會将包含關鍵詞的(de)曆史記錄置頂，與正常的(de)匹配做(zuò)區(qū)别并支持删除（如淘寶）。

2. 關鍵詞匹配的(de)作用(yòng)

關鍵詞匹配的(de)作用(yòng)主要有三個(gè)：引導、糾錯和(hé)高(gāo)效。引導：在用(yòng)戶無法準确記憶搜索的(de)名稱時(shí)，關鍵詞可(kě)以作爲引導，幫助用(yòng)戶完成搜索；糾錯：減少用(yòng)戶輸入的(de)錯誤，會自動在匹配區(qū)域更正；高(gāo)效：用(yòng)戶直接點擊匹配出的(de)結果，減少輸入，提高(gāo)搜索效率。3. 關鍵詞匹配的(de)條數

各産品匹配條數上限不一緻，淘寶爲 10 條，愛(ài)奇藝爲 10 條，一般來(lái)說不會超過 10 條，過多(duō)的(de)選擇會給用(yòng)戶造成記憶負擔，并且占據空間，有損用(yòng)戶體驗。四、點擊搜索點擊搜索一般有兩種機制：一種是輸入完成後，點擊搜索按鈕、鍵盤回車進行搜索；一種是邊輸入邊顯示搜索結果，每輸入一個(gè)字符即進行一次數據檢索并将結果展示出來(lái)，這(zhè)種搜索方式也(yě)被稱爲“即時(shí)搜索”。即時(shí)搜索的(de)方式簡化(huà)了(le)搜索的(de)操作路徑，更快(kuài)的(de)引導用(yòng)戶查詢到結果，能夠給用(yòng)戶帶來(lái)良好的(de)體驗。

但即時(shí)搜索對(duì)服務器的(de)運算(suàn)能力要求較高(gāo)，如果服務器運算(suàn)能力跟不上，會出現較長(cháng)時(shí)間的(de)等待，有損用(yòng)戶體驗，因此這(zhè)種搜索機制在産品中并不多(duō)見。五、反饋結果觸發搜索之後，搜索框失去焦點，框内保留搜索關鍵詞，顯示多(duō)條搜索結果，每條搜索結果中對(duì)搜索的(de)内容飄紅展示。如何能讓搜索結果更清晰的(de)展示，讓用(yòng)戶更快(kuài)的(de)找到所需，針對(duì)搜索結果的(de)交互設計需要注意以下(xià)幾個(gè)問題：

1. 結果分(fēn)類

将搜索到的(de)結果進行分(fēn)類處理(lǐ)，一般采用(yòng)Tab的(de)樣式進行歸類，如谷歌(gē)搜索“設計”，将搜索結果按照(zhào)“全部”“圖片”“視頻(pín)”“新聞”“更多(duō)”等進行了(le)分(fēn)類。

2. 排序篩選

排序與篩選的(de)維度因産品性質而異，常見的(de)排序方式有時(shí)間、價格、銷量、距離、好評等；篩選可(kě)以算(suàn)做(zuò)個(gè)性化(huà)的(de)需求，不同産品間存在較大(dà)差異。排序和(hé)篩選的(de)功能一般放置在搜索和(hé)結果之間，一是符合用(yòng)戶的(de)認知和(hé)使用(yòng)習(xí)慣，再者便于用(yòng)戶切換。尤其在電商類網站中，排序和(hé)篩選功能尤爲重要，占到了(le)首屏空間的(de)三分(fēn)之一。

3. 自動糾錯

用(yòng)戶在搜索時(shí)輸入了(le)錯誤的(de)詞彙，系統經過判斷後會展示正确詞彙的(de)搜索結果給用(yòng)戶，并友好的(de)告知用(yòng)戶正确的(de)搜索方式。

4. 特殊狀态

特殊狀态包含無結果狀态、網絡不佳狀态等。

出現無結果的(de)狀态可(kě)能是：用(yòng)戶輸入錯誤；搜索結果無。針對(duì)第一種情況，可(kě)以提示用(yòng)戶正确的(de)搜索方式，并自動幫用(yòng)戶糾錯；對(duì)于第二種，需要有好的(de)提示用(yòng)戶無搜索結果，嘗試其他(tā)搜索方式或者更換關鍵詞等。六、結語以上對(duì)于搜索功能進行了(le)拆解和(hé)細化(huà)，設計師在進行搜索功能要根據産品的(de)定位以及目标用(yòng)戶、應用(yòng)場(chǎng)景、業務需求等因素進行設計，仔細推敲交互的(de)每一個(gè)細節，提升産品的(de)用(yòng)戶體驗。