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

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

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

有部分設(shè)計師認(rèn)為，搜索不就是一個矩形框、放大鏡圖標(biāo)再加一個占位符不就搞定了嗎？可有沒有想過，為什么在不同類型的應(yīng)用中搜索框的交互方式、視覺樣式也有所不同，且用戶在搜索前、搜索中、搜索后到底有哪些細節(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)

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

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

2. 搜索中-關(guān)鍵詞聯(lián)想

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

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

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

3. 搜索后-清晰有效的結(jié)果

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

1）無相關(guān)內(nèi)容匹配

當(dāng)系統(tǒng)無法給用戶提供相匹配的內(nèi)容時，會通過缺省頁提示，例如讓用戶修改關(guān)鍵詞或?qū)⑵湟龑?dǎo)至其他內(nèi)容頁面。電商類產(chǎn)品通常會提供其他模塊的商品進行引流，如猜你喜歡、熱門推薦、經(jīng)常購買等。

2）結(jié)果內(nèi)容較少

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

3）結(jié)果內(nèi)容較多

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

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

1. 默認(rèn)提示（占位符）

首先，搜索框內(nèi)會有默認(rèn)的占位符提示，以引導(dǎo)用戶搜索，這些提示詞可以是固定的、也可以是來自運營的營銷文案或者系統(tǒng)根據(jù)算法推薦，用戶不用任何輸入也能直接點擊搜索提示詞相關(guān)的內(nèi)容。

2. 熱門推薦

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

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

3. 搜索歷史

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

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

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

4. 猜你喜歡

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

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

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

5. 分類搜索

產(chǎn)品中涉及的業(yè)務(wù)、類型較多時，搜索結(jié)果可能“魚龍混雜”，可在用戶搜索前就提供多個類別，方面目標(biāo)明確的用戶能更快、更精準(zhǔn)的搜索出符合目標(biāo)預(yù)期的相關(guān)內(nèi)容。

六、結(jié)語

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

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