搜索是每個產品中的基本功能，搜索設計做得如何也會影響著用戶對產品的使用體驗。在搜索功能中，其交互方式、視覺樣式也有所不同，在產品設計前，對于搜索框的設計細節有什么需要注意的？本文就這幾點來探討關于搜索框的設計。

搜索是產品中非常重要的一個功能模塊，它通過搜索框給用戶提供一個直達目的地的綠色通道，方便用戶快速找到自己想要的內容，在引導用戶走向方面起到了絕對性的作用。

搜索框的體驗如何，決定著產品解決問題的能力、效率以及用戶的使用頻率。好的搜索框一方面能幫助用戶節約時間成本，通過友好的設計細節帶來差異化的信息反饋，便于用戶在大量且復雜的信息中篩查所需目標，提高轉化率；另一方面，還能協助產品搜集用戶行為目標并做好數據埋點，為后期的更新迭代提供強有力的依據。

有部分設計師認為，搜索不就是一個矩形框、放大鏡圖標再加一個占位符不就搞定了嗎？可有沒有想過，為什么在不同類型的應用中搜索框的交互方式、視覺樣式也有所不同，且用戶在搜索前、搜索中、搜索后到底有哪些細節需要我們去注意？今天，筆者將和大家一起了解關于搜索框的設計知識。

一、基本屬性與特征

1. 搜索存在的意義

當界面內容過多、在列表中僅通過視覺掃描很難找到目標，這時能給用戶提供最大幫助的一個是篩選、另一個就是搜索，篩選能夠縮小查找范圍、而搜索卻能直到目標。相對來說，對于有明確目標的用戶，在關鍵詞較為接近的情況下，搜索比篩選的查找效率、匹配結果的精準度更高。

2. 搜索反饋類型

輸入關鍵信息后，系統會有兩種反饋類型，自動即時反饋和手動觸發反饋。

1）自動反饋

系統自動檢測所有內容中符合關鍵詞的目標信息并羅列出來，隨著關鍵詞的持續輸入，與之相匹配的結果會逐漸減少、直至找到目標，類似自定義篩選功能。這種反饋方式適合內容不是特別多的列表，避免服務器的壓力太大、影響反饋效率，例如地址搜索、查找聯系人等。

2）手動觸發

關鍵詞輸入完成后，需要手動點擊搜索按鈕向服務器發送指令才會得到相應的搜索結果，這種方式適合內容信息較多的列表。例如商品查找、新聞類搜索等，其搜索結果也可能是海量的，與篩選功能結合使用效果更佳。

3. 搜索的屬性特征

1）搜索入口

為了保持界面的一致性，在同一APP中，不同界面、功能的搜索應該具備統一的視覺屬性。搜索本屬于界面的一部分，需要將其放在關鍵位置，用戶需要使用時能隨時找到。

2）狀態變化

站在用戶體驗角度，一個好的搜索應該具備完整的流程，即搜索前、搜索中、搜索后的頁面跳轉以及搜索框形態的變化，將搜索功能的價值發揮到最大化。

二、搜索入口的樣式及應用場景

在大家使用的眾多app中，部分搜索框的樣式雖然沒有多大差別，其實背后都經過了精心設計。針對搜索入口，更具不同的應用場景、等級權重，其搜索入口的位置、樣式也有所不同，下面將分別介紹四種常見的類型。

1. Tab欄獨立入口

將搜索放在底部Tab欄作為獨立的一級入口，很大程度上強化了搜索權重，有利于用戶的搜索行為引導、以及產品搜索相關內容的推薦曝光。這種做法為搜索功能拓展提供了很大的空間，相比其他方式，操作起來更便捷，即便用戶在其他Tab頁時、突然有搜索需求時也觸手可及，并使其成為應用重量級的流量入口。

Tab欄搜索入口只適合對于搜索需求極高的應用，具備簡潔、高辨識度的放大鏡圖標讓用戶一眼就能發現它，需要注意的是控制好Tab功能數量，在3~5個圖標時最宜使用，切勿強行加塞而影響操作。

例如：App Store、新浪微博、花瓣等

2. 頂部搜索框

最常見的搜索方式之一，將搜索以輸入框的形式居于頁面頂部（狀態欄或標題欄下方），在視覺上非常醒目，用戶進入應用即能快速找到，很符合用戶的視覺瀏覽動線，為最終轉化提供了很大的流量支持。

這種搜索框的形態較為復雜，其信息元素的設計有很多方面的考究，它主要由搜索框、圖標、占位符以及部分其他元素組成，下面一一介紹：

1）圖標

首先，“放大鏡”樣式的圖標主要用于提醒用戶這是一個搜索功能，如果搜索框足夠明顯且有占位符引導，也可以去掉搜索圖標；其次，輔助搜索如語音錄入、掃一掃、拍照搜索等也會使用圖標樣式呈現。

2）占位符

提示用戶文本輸入位置，很多產品會根據自身屬性或功能類型提供固定的占位符，例如：請輸入xxx搜索、搜索感興趣的內容…等。

在電商類型的產品中，為了提高占位符的商業價值，將其進行了拓展，系統根據千人千面的算法推薦、提供多個占位符式的商品名稱輪播，或者將占位符當做廣告位進行出售，不僅讓搜索框更個性化，還能潛移默化的提升搜索的轉化率。

3）按鈕

為了提高用戶使用搜索功能的便捷性，鍵盤的右下角都會有搜索操作，但設計師們依然會毫不吝嗇在搜索框右側多添加一個搜索按鈕，一方面在視覺上能起到引導搜索的作用，另一反面給用戶多一個選擇、避免鍵盤隱藏后需再次喚出才能發送搜索指令。

4）選擇器

對于類型/屬性較多且要求較高的產品，為了提高搜索結果的精準度，會增加一些前置條件，讓用戶設定好之后在進行搜索，得出的結果會與用戶目標更匹配，能一定程度的提升用戶對產品的滿意度。例如：攜程旅游搜索的地址選擇、酒店搜索日期選擇，拼多多的商品、店鋪選擇等。

3.“放大鏡”圖標入口

形態相對比較簡單，通常以“放大鏡”樣式的icon出現在界面右上角，視覺上不會過于突出，常用于搜索行為不是特別頻繁的場景，需點擊后才會跳轉至搜索框頁面。

Icon搜索入口相較于上述提到的類型在視覺引導方面略遜一籌，相對弱化了搜索功能，但可以節省了更多的導航欄空間，呈現位置比較靈活，可單獨呈現、也可與其多個其他功能icon并列組合展示。

4. 隱藏式入口

隱藏搜索入口方式在真實場景中使用的極少，在初始狀態下將搜索入口隱藏，需通過交互操作喚醒。例如：有的將其折疊，點擊展開才能看到；有的通過下滑才會出現，iPhone桌面就是一個不錯的案例。

三、常見的搜索方式

基于信息復雜度的提升，純文字搜索已無法滿足很多產品的搜索需求，為了拓展搜索功能空間、更好的滿足用戶需求，衍生出了多種搜索方式，如語音搜索、掃一掃、拍照搜索等。

1. 文本搜索

最常用且做主要的搜索方式，點擊搜索框激活鍵盤即可開始，相較于其它方式，碼字的操作成本略高，但這種搜索方式極為靈活，對于有目標的用戶、其搜索結果的精準度只高不低。

文本搜索可分為模糊搜索和精準搜索。精準搜索即能準確識別所輸入的關鍵詞，要么結果與搜索目標極度匹配、要么結果為空，例如訂單查詢、查找聯系人等；模糊搜索可在無法匹配用戶目標的情況下，推薦與關鍵詞相似、或相接近的內容，不管用戶是否有明確的目標皆可使用，例如商品搜索、新聞資訊搜索等。

2. 語音搜索

語音搜索比文本搜索更為便捷，省去了用戶碼字的操作，同時也解決了對使用鍵盤、拼音有難度的老弱用戶群體所面臨的現實問題。語音錄入后，系統會將其轉化為文字，然后根據關鍵詞搜索內容，需要注意的是對普通話的標準程度要求較高，不然會影響搜索結果的準確度。

為了給用戶提供更好的搜索體驗，語音搜索也玩出了新高度。例如：酷狗音樂的哼歌識曲/聽歌識曲，用戶只需哼出大致的曲調或直接對正在播放的音樂錄音就能找出歌曲名字；在高德地圖中，直接說出“導航去xxx”,系統即可自動完成搜索、查詢路線等多個操作步驟。

3. 拍照搜索

拍照搜索是借助圖像識別技術將用戶實時拍照、或上傳的圖片進行相關內容匹配的一種搜索方式，在電商類產品中得到廣泛應用。當我們看到一個物品想要夠買，不知道叫什么或無法用文字準確形容時，拍照搜索就能很好的解決這個問題。

4. 掃一掃搜索

用戶有明確目標且現場有真實樣品時，可直接掃描商品條形碼/二維碼搜索相同的商品。雖然這種搜索方式比上述任何一種方式搜索的準確度都要到高，但受到現實條件的限制，反而使用頻率很低。

四、搜索流程狀態解析

1. 搜索前-進入“待命”狀態

從用戶點擊搜索框的這一刻起、即便沒有任何其他操作，系統就已經開始做搜索前的準備工作了，利用一系列輔助功能為用戶提供有效的引導，為搜索轉化做足了鋪墊，例如占位符提示、熱門搜索、歷史搜索、猜你喜歡等，后續會對輔助功能做詳細的講解。

不僅如此，與搜索相關的元素也會進入“待命”狀態，隨著搜索框內放大鏡的消失、光標的閃爍、高亮的輸入框描邊以及自動彈出的鍵盤，每一個點都在從視覺上告訴用戶“我已經準備好了”。

2. 搜索中-關鍵詞聯想

在輸入關鍵詞過程中，搜索框右側會出現刪除圖標，點擊即可一鍵清除輸入的內容。這里要注意刪除與取消的區別，刪除只是清除內容，而取消則是回到上一級頁面，切勿將兩個操作離得太近，以免用戶誤觸而浪費不必要的時間成本。

系統還會根據所輸內容的變化進行關鍵詞聯想以提供內容推薦，點擊就能進入相應的搜索結果頁。關鍵詞聯想從很大程度上降低了用戶思考時間，還節省了點擊搜索按鈕的操作步驟，提高搜索效率，這也是一個優秀的搜索框必備的交互反饋。如果關鍵詞聯想設計的足夠智能，還可以自動拆分一句話中的多組關鍵詞、錯字自動糾正、拼音自動轉漢字等，搜索的易用性將得到進一步提升。

例如：在京東搜索框輸入“電”，就會出現電磁爐、電池、電熱毯…等一系列與“電”相關的商品。

3. 搜索后-清晰有效的結果

用戶主要是想通過搜索功能來縮短路徑、滿足自己的查找需求，產品應盡一切能力帶給用戶符合預期的搜索結果，即便無法與搜索目標相匹配，也應該給予清晰的提示以及合理的視覺引導，搜索結果常見的有三種場景。

1）無相關內容匹配

當系統無法給用戶提供相匹配的內容時，會通過缺省頁提示，例如讓用戶修改關鍵詞或將其引導至其他內容頁面。電商類產品通常會提供其他模塊的商品進行引流，如猜你喜歡、熱門推薦、經常購買等。

2）結果內容較少

搜索出的結果內容較少時，會全部顯示在同一頁面中，但需要注意排序的規則，與關鍵詞匹配度較高的內容靠前展示，用戶在上滑瀏覽的過程中，越往后的其關鍵詞匹配度越低，其閱讀量和關注度都不高。

3）結果內容較多

如果搜索出的結果內容較多，且匹配度較高，很多內容都有可能是用戶想要的，這時就需要提供Tab分類、篩選等輔助控件來協助用戶更快找到想要的結果。

五、輔助模塊/元素的妙用

1. 默認提示（占位符）

首先，搜索框內會有默認的占位符提示，以引導用戶搜索，這些提示詞可以是固定的、也可以是來自運營的營銷文案或者系統根據算法推薦，用戶不用任何輸入也能直接點擊搜索提示詞相關的內容。

2. 熱門推薦

熱門搜索主要起到引導作用，特別對那些沒有明確目標的用戶能給予更多選擇，有點類似搜索框中的占位符提示，最大的區別在于占位符可能是用戶想要的、但熱門搜索卻是產品想要提供給用戶的內容。

因移動端設備空間有限，為提高資源位利用率，購物類產品的熱門搜索內容主要以標簽形式展示且不會太多，而新聞資訊類產品大部分則會以完整標題（一行）的形式縱向排列、并增加明顯的大標題/Tab分類。

3. 搜索歷史

用戶夠買過的商品（非消耗類）不一定會再買，但搜索過的內容卻有極高的幾率再次搜索，例如購物前貨比三家反復參考、看新聞/視頻有內容偏好等。

提供歷史搜索，方便用戶隨時查看搜過的內容，提升重復搜索的效率。不是所有的搜索都需要歷史記錄，例如訂單，用戶重復搜索的概率極低。

另外，考慮到界面空間的問題，歷史記錄的數目和時間范圍需要合理的控制，如產品所需保存的記錄較多，可以固定顯示幾行，其他的用展開/收起控件進行控制。如果歷史搜索權重較低，只展示了少量的記錄，可在新的搜索記錄產生時，最后一條后移隱藏，這樣為的是保持搜索記錄的新老更替，也不至于對其他信息產生影響。

4. 猜你喜歡

猜你喜歡出于營銷目的，通過采集用戶的行為偏好進行行為預判，提供用戶可能感興趣的內容，或可在用戶遲疑的瞬間被這些內容吸引，降低搜索頁面的跳出率。在用戶眼中，猜你喜歡多少有點“莫須有”的味道，不過這不是本文討論的重點。

與熱門推薦相比，猜你喜歡模塊權重在很多設計師眼中持不同看法。在筆者看來其實不分伯仲，這不難理解，同為搜索功能的輔助板塊，還得根據產品內容屬性來決定。

例如：商品類搜索，猜你喜歡必定比熱門推薦的轉化率要高，畢竟更接近用戶的真實需求，這就是「用戶想要的」與「產品想給的」最實質性的區別；而新聞資訊類搜索，熱門推薦的權重則更高，它所捕捉到的熱點、新奇事件正是吃瓜群眾們最要看到的內容。

5. 分類搜索

產品中涉及的業務、類型較多時，搜索結果可能“魚龍混雜”，可在用戶搜索前就提供多個類別，方面目標明確的用戶能更快、更精準的搜索出符合目標預期的相關內容。

六、結語

基于對上述內容的理解，大家都知道不管使用什么形式的搜索，其本身并沒有好壞之分，在設計之初就需要我們從業務類型、功能定位、使用場景等多維度綜進行合分析，才能設計出更合理的搜索形式，用戶的使用體驗也會更好。

設計師們雖然前期做了很多方面是準備，但要想將搜索功能做的多么完美無瑕，并非那么容易、也不太現實。正所謂沒有最好、只有更好，在這個過程中，前期不僅需要大量的樣式積累、思考分析，期間還應通過反復的使用、挖掘更多設計要點，以此思考是否還有更優的設計方案，為后續的更新迭代以及提升用戶體驗做充足的準備。