本文對于搜索功能進行了拆解和細化，一起來看看吧~

“這有個搜索功能要加一下，樣式我給你?！?/p>

“好。”

“這搜索框連個提示也沒有怎么搜？歷史記錄呢？模糊匹配呢？還有…..balabala”

“你也沒說??！”
——來自設計獅與程序猿的日常

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

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

一、搜索入口

搜索入口具有提示和引導操作的作用，主要類型有四種：主頁搜索、搜索框、多條件搜索、搜索icon。

1. 主頁搜索

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

2. 搜索框

這種是在網頁中最為常見的，應用也最廣泛，大多居于頁面內容區域的上方，有的出于節省空間和搜索需求的考量，也內嵌在導航欄中。搜索框內會有文字的提示，提示用戶搜索的方式，還有一些產品在搜索框內放置當前的熱詞、活動、新功能等，將搜索框做成了運營的入口。

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

3. 多條件搜索

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

4. 搜索icon

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

搜索icon的形式雖然可以節約導航欄的空間，但相對搜索框來說對用戶的引導性較差，因此比較適合以搜索為輔助功能的產品。

二、搜索觸發

1. 搜索框觸

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

2.?搜索形式

第一種是有搜索/確定按鈕或icon的搜索框，用戶輸入完成后可點擊按鈕進行搜索，也可點擊鍵盤回車搜索；另一種是無搜索按鈕的搜索框，用戶需鍵盤回車搜索。

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

3. 輔助區域

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

熱詞推薦：熱詞推薦主要為當前時段內比較熱點的詞匯或產品的新功能，能夠為產品帶來流量導入和收益，如電商類網頁中的熱詞一般為新產品或高銷量產品，視頻類網站的搜索熱詞一般為最新視頻或點擊量較高的影視劇。

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

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

三、內容輸入

1. 輸入觸發的交互

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

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

2. 關鍵詞匹配的作用?

關鍵詞匹配的作用主要有三個：引導、糾錯和高效。

• 引導：在用戶無法準確記憶搜索的名稱時，關鍵詞可以作為引導，幫助用戶完成搜索；
• 糾錯：減少用戶輸入的錯誤，會自動在匹配區域更正；
• 高效：用戶直接點擊匹配出的結果，減少輸入，提高搜索效率。

3. 關鍵詞匹配的條數

各產品匹配條數上限不一致，淘寶為10條，愛奇藝為10條，一般來說不會超過10條，過多的選擇會給用戶造成記憶負擔，并且占據空間，有損用戶體驗。

四、點擊搜索

點擊搜索一般有兩種機制：

• 一種是輸入完成后，點擊搜索按鈕、鍵盤回車進行搜索；
• 一種是邊輸入邊顯示搜索結果，每輸入一個字符即進行一次數據檢索并將結果展示出來，這種搜索方式也被稱為“即時搜索”。

即時搜索的方式簡化了搜索的操作路徑，更快的引導用戶查詢到結果，能夠給用戶帶來良好的體驗。

但即時搜索對服務器的運算能力要求較高，如果服務器運算能力跟不上，會出現較長時間的等待，有損用戶體驗，因此這種搜索機制在產品中并不多見。

五、反饋結果

觸發搜索之后，搜索框失去焦點，框內保留搜索關鍵詞，顯示多條搜索結果，每條搜索結果中對搜索的內容飄紅展示。如何能讓搜索結果更清晰的展示，讓用戶更快的找到所需，針對搜索結果的交互設計需要注意以下幾個問題：

1. 結果分類

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

2. 排序篩選

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

3.?自動糾錯

用戶在搜索時輸入了錯誤的詞匯，系統經過判斷后會展示正確詞匯的搜索結果給用戶，并友好的告知用戶正確的搜索方式。

4.?特殊狀態

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

出現無結果的狀態可能是：

• 用戶輸入錯誤；
• 搜索結果無。

針對第一種情況，可以提示用戶正確的搜索方式，并自動幫用戶糾錯；對于第二種，需要有好的提示用戶無搜索結果，嘗試其他搜索方式或者更換關鍵詞等。

六、結語

以上對于搜索功能進行了拆解和細化，設計師在進行搜索功能要根據產品的定位以及目標用戶、應用場景、業務需求等因素進行設計，仔細推敲交互的每一個細節，提升產品的用戶體驗。

本文由 @墨白 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議