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

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

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

有部分設(shè)計師認(rèn)為，搜索不就是一個矩形框、放大鏡圖標(biāo)再加一個占位符不就搞定了嗎？可有沒有想過，為什么在不同類型的應(yīng)用中搜索框的交互方式、視覺樣式也有所不同，且用戶在搜索前、搜索中、搜索后到底有哪些細(xì)節(jié)需要我們?nèi)プ⒁?？今天，筆者將和大家一起了解關(guān)于搜索框的設(shè)計知識。

一、基本屬性與特征

1. 搜索存在的意義

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

2. 搜索反饋類型

輸入關(guān)鍵信息后，系統(tǒng)會有兩種反饋類型，自動即時反饋和手動觸發(fā)反饋。

1）自動反饋

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

2）手動觸發(fā)

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

3. 搜索的屬性特征

1）搜索入口

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

2）狀態(tài)變化

站在用戶體驗角度，一個好的搜索應(yīng)該具備完整的流程，即搜索前、搜索中、搜索后的頁面跳轉(zhuǎn)以及搜索框形態(tài)的變化，將搜索功能的價值發(fā)揮到最大化。

二、搜索入口的樣式及應(yīng)用場景

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

1. Tab欄獨立入口

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

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

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

2. 頂部搜索框

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

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

1）圖標(biāo)

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

2）占位符

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

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

3）按鈕

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

4）選擇器

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

3.“放大鏡”圖標(biāo)入口

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

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

4. 隱藏式入口

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

三、常見的搜索方式

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

1. 文本搜索

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

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

2. 語音搜索

語音搜索比文本搜索更為便捷，省去了用戶碼字的操作，同時也解決了對使用鍵盤、拼音有難度的老弱用戶群體所面臨的現(xiàn)實問題。語音錄入后，系統(tǒng)會將其轉(zhuǎn)化為文字，然后根據(jù)關(guān)鍵詞搜索內(nèi)容，需要注意的是對普通話的標(biāo)準(zhǔn)程度要求較高，不然會影響搜索結(jié)果的準(zhǔn)確度。

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

3. 拍照搜索

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

4. 掃一掃搜索

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

四、搜索流程狀態(tài)解析

1. 搜索前-進入“待命”狀態(tài)