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

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

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

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

一、基本屬性與特征

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. 搜索前-進入“待命”狀态

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部