編輯導(dǎo)語：搜索功能是我們?nèi)粘Ｉ钪薪佑|最多的功能之一，它更夠很好的提高用戶使用產(chǎn)品的效率，用戶對搜索功能的依賴性也比較大，所以設(shè)計好搜索功能將會很大程度上提高用戶體驗。本文作者通過分享這篇文章，幫我們搞懂產(chǎn)品中的搜索設(shè)計。

搜索是一個常見而且使用頻率極高的功能，因為產(chǎn)品的定位和業(yè)務(wù)場景不同，搜索承載的價值也不同。在某些產(chǎn)品中，它只是一個輔助功能，但是像谷歌和百度，它是整個產(chǎn)品的核心。所以對于不同的產(chǎn)品，搜索的交互設(shè)計形態(tài)也是不同的。

我們可以把搜索的使用過程，想象成朋友間的一次提問，首先朋友要先找到你，接著向你提出問題，最后你根據(jù)現(xiàn)有資源或者知識儲備給出答案。

一、找到搜索入口

朋友想要提問，需要先找到你。有可能你就一直待在他身邊，他可以隨時提問，有可能他需要先把你找出來再去提問。對于搜索的展現(xiàn)形式，也可以分為顯式和隱式兩種情況。

1.?顯式搜索

1）搜索輸入框

輸入框一般固定在上方導(dǎo)航欄或者頁面最上方，也是目前使用最廣泛的一種搜索樣式。當搜索功能會被用戶高頻使用時，可以這樣去展示搜索入口。

大部分電商類、知識類以及信息分享類的App和Web都會采用這種樣式，比如淘寶、網(wǎng)易云音樂和微信讀書。

2）搜索 tab

這種搜索入口是移動端特有的一種交互形式，它占據(jù)頁面底部的一個獨立tab位置，點擊后同樣進入搜索頁。

和搜索輸入框相比，除了表現(xiàn)形式上有所差異，它的搜索功能在整個產(chǎn)品中權(quán)重會更高。從信息架構(gòu)的角度來說，這種方式讓搜索模塊更加突出。典型的例子可以看新浪微博，點擊后進入的搜索頁，內(nèi)容非常豐富。

2.?隱式搜索

1）搜索圖標

很多產(chǎn)品的搜索路徑都是從一個小圖標開始的，它一般都悄悄的躲在頁面頂部的左上角或者右上角，點擊后展開搜索樣式。

這個設(shè)計主要是為了弱化搜索，突出頁面中的信息流內(nèi)容，比如知識星球，還有抖音，為了強化信息流或者推送，而弱化了搜索功能。

2）手勢下拉搜索

現(xiàn)在很多的App都在用這種方式，不占用頁面頂部位置，其實是比用圖標更進一步的弱化了搜索功能，它配合了用戶最常用的下拉手勢，隱藏的深了一點，有一定的學(xué)習(xí)成本。

這也是配合產(chǎn)品的戰(zhàn)略去設(shè)計的，比如微信中的訂閱號列表頁，就是用了這種方式，去凸顯下面的訂閱號文章列表的，在感官上盡量讓用戶沉浸在推送文章的列表中一個一個的往下看，而不是去搜索特定的某一篇文章。

搜索入口在設(shè)計的時候盡量做到簡潔，在兼顧產(chǎn)品調(diào)性和頁面布局的前提下，讓用戶盡快的找到搜索功能，不需要花費過多的學(xué)習(xí)成本。好了，找到了搜索的入口，就像朋友已經(jīng)找到了你，接下來看看提問過程中會發(fā)生什么情況吧。

二、開始搜索

朋友要開始拋出問題了，首先要讓他知曉你能解決問題的范圍或者類別，也可以給他一些問題庫，或者甩給他一些歷史問題，看能不能從中直接找到答案。

用什么方式提問、問題是模糊的還是具體的，在他提問前你一無所知，但你卻可以做些準備來應(yīng)對這些不確定情況，讓朋友可以在你這高效又準確的找到問題答案。

上述疑問在搜索的過程中也存在，接下來去真正的搜索頁面一一攻破。

1.?搜索范圍

1）搜索提示詞

在搜索框中可以加入一些默認文字，用來提示用戶可以去輸入哪些方面的搜索詞，比如可以搜索的范圍是用戶名、地址、聯(lián)系人信息，那搜索框中的默認文字要顯示“請輸入用戶名/地址/聯(lián)系人電話“等，這樣就告訴用戶，可以輸入以上這幾項之一去進行搜索。

現(xiàn)在大部分產(chǎn)品的搜索框中都會顯示搜索提示詞，這樣會有更好的引導(dǎo)，同時用戶體驗感也會提升。很多電商平臺會把搜索框中的默認文字用做廣告營銷去做活動轉(zhuǎn)化，比如淘寶、京東的首頁搜索框，還會輪播默認文字，所以搜索框也可以承載競價廣告的價值。

還有一種分類方式，在搜索前必須先選擇一個固定的分類，再去搜索，減小搜索范圍。

這樣設(shè)計的好處一是會減輕平臺的搜索功能性能方面的壓力，二是會減少全局搜索后，無關(guān)搜索結(jié)果對用戶的干擾。比如貝殼上的搜索，都是在某一個分類下去做的，這種也有可能是和數(shù)據(jù)庫表設(shè)計是有關(guān)系的。

2）搜索標簽

搜索標簽的出現(xiàn)，是搜索分類的一種優(yōu)化，提前在搜索頁像分類一樣，預(yù)設(shè)一些標簽，可以是熱門推薦、熱門搜索，也可以是活動運營轉(zhuǎn)化入口，快速觸達活動頁面。這種比較適合當進入搜索頁，不知道要搜什么的時候，給出一些建議，比較典型的就是微博的熱搜頁面。

3）歷史記錄

可以在搜索頁中設(shè)置歷史記錄，顯示之前搜索過的關(guān)鍵詞，這種方式現(xiàn)在也被廣泛應(yīng)用，可以在一定程度上提升用戶體驗，減少輸入。大部分的電商平臺都會支持歷史記錄搜索。

無論是搜索分類、搜索標簽還是歷史記錄，都可以減少用戶在搜索過程中的操作成本，并且可以起到豐富搜索頁面的效果，如果做為營銷轉(zhuǎn)化入口，還能貢獻GMV。

2.?搜索方式

搜索方式在最初只有文字搜索，后來又出現(xiàn)了語音和圖片搜索方式，但大部分的情況，它們都是做為文字搜索的補充。

1）文字搜索

這是大部分人最熟悉的搜索方式，同時也是玩法最多的，接下來我們要介紹的內(nèi)容，大部分都是圍繞著文字搜索展開的。

2）語音搜索

顧名思義，就是通過聲音去搜索，這是一個發(fā)展趨勢，現(xiàn)在的年輕人越來越喜歡用語音搜索，同樣因為門檻特別低，老年人也比較青睞這種方式，不需要打字，直接通過聲音識別去找到想要搜索的內(nèi)容。

像微信的搜索也是支持語音，還有所有的音樂類App，也都支持語音搜索歌曲的。

3）圖像搜索

圖像搜索是近年來比較流行的搜索形式，一種是通過掃描條形碼或者二維碼，識別其中的明碼后進行搜索。另一種是通過圖片匹配其他類似圖片的方式。

這兩種方式廣泛應(yīng)用在電商平臺中，比如淘寶，掃一掃、拍立淘，還有AR試穿，都是圖片搜索的優(yōu)化應(yīng)用，AR直接掃描識圖還減少了用戶的拍照的操作。

3.?搜索幫助

1）模糊搜索

模糊搜索是指輸入搜索詞后，顯示的搜索結(jié)果是該搜索詞的擴展信息，可以包含搜索詞的內(nèi)容，也可以是和該搜索詞相關(guān)的信息。所以模糊搜索能給用戶展現(xiàn)豐富多彩的選擇。

模糊搜索也是要考慮使用場景的，如果要求精準搜索快速定位時，模糊搜索反而起到了反效果，因為搜索結(jié)果中會包含太多的干擾信息，還要花費時間去篩選真正的結(jié)果。

2）自動補全

輸入搜索詞后，搜索框下方會出現(xiàn)下拉列表，其中包含該搜索詞的其他擴展詞。這種方法可以幫助用戶擴展聯(lián)想，提供豐富的選擇，也會減少用戶的輸入操作，幫助用戶更快的定位精準搜索詞，引導(dǎo)用戶一步步更精確的找到想要搜索的內(nèi)容。

如果應(yīng)用場景支持，可以很大程度的提高用戶體驗，同時減少用戶對查詢結(jié)果的篩選時間。

擴展詞一般是已經(jīng)設(shè)置好的詞庫，比如在淘寶等電商平臺中，搜索的擴展詞也會包含歷史搜索記錄，比如之前搜索過“這是什么東西呢”，當?shù)诙屋斎搿斑@是”的時候，下方就會顯示出“這是什么東西呢”。

對于擴展詞的來源，可以依據(jù)自身業(yè)務(wù)，比如加入一些營銷詞，做為轉(zhuǎn)化入口。

以上是搜索過程中的一些設(shè)計，但并不是越靈活越好，還是要依據(jù)具體的用戶場景去設(shè)計最適合的搜索方式。

4.?顯示搜索結(jié)果

朋友拋出問題后，你要給出答案，為了更好的解答疑惑，也許你會提供很多可選擇的答案。每一次搜索也會得到很多結(jié)果，這時需要對結(jié)果做下處理，在提供海量豐富選擇的同時，也讓用戶更快速的找到自己想要的結(jié)果。

1）結(jié)果排序

搜索結(jié)果的顯示都要有一個默認的排序規(guī)則，同時也可以提供排序選擇，比如搜索結(jié)果默認按照銷量由高到底排序，也提供其他排序選擇，比如時間由遠及近排序、價格從高到低排序等。

現(xiàn)在越來越多的電商都會在結(jié)果中加入廣告位，這也是一種轉(zhuǎn)化方式，但是廣告位不宜太多，一般就是第一個搜索結(jié)果，這樣既可以達到營銷目的，又不會太顯眼打亂之前的排序。

比如下圖中，在淘寶中搜索“產(chǎn)品經(jīng)理”，結(jié)果列表中第一個是當當網(wǎng)的廣告，這就是一種廣告轉(zhuǎn)化方式。

2）結(jié)果篩選

當搜索詞是一類有相同標簽的事物，并且搜索后結(jié)果過多時，也可以進一步以標簽做為條件做篩選處理，比如搜“牛奶”，可以通過對品牌、產(chǎn)地、容量等屬性去做進一步的篩選。

篩選在電商平臺是很常見的，因為電商平臺的商品數(shù)量多，品類豐富，而且每個商品都會具備幾種屬性。所以，在初步搜索后，再通過屬性去進一步縮小搜索范圍，會幫助用戶更快更精準的找到自己想要的商品。

3）關(guān)鍵詞高亮

在搜索結(jié)果中，如果文本過多，用戶很難快速的看出搜索詞，這個時候?qū)﹃P(guān)鍵詞進行高亮顯示，快速定位搜索詞，可以幫助用戶更快的判斷這條結(jié)果是否有用，節(jié)省用戶的決策成本。

大部分的知識類產(chǎn)品，因為文本過多，在搜索結(jié)果中都會高亮搜索詞，像微信讀書就是一個很典型的例子。

4）結(jié)果分類

之前說了在搜索前進行分類，可以縮小搜索范圍，更快找到匹配結(jié)果。但還有另一種方式是先進行全局搜索，針對得到的搜索結(jié)果是分類顯示的。

結(jié)果分類的好處是，減少用戶搜索前的操作，并且可以給用戶提供更豐富的展示結(jié)果，用戶可以直接選擇預(yù)想的分類，如果沒有想要的，還可以擴展看下其他分類下的結(jié)果。這種特別適合內(nèi)容生態(tài)產(chǎn)品，比如下面的網(wǎng)易云音樂。

5）結(jié)果建議

在搜索的時候經(jīng)常會出現(xiàn)結(jié)果較少，甚至是結(jié)果為空的情況，這個時候就需要缺省頁面。

除了放空頁面，其實還可以選擇加些建議或者推薦。比如淘寶中，搜索詞沒有對應(yīng)的結(jié)果，系統(tǒng)做了分詞，并根據(jù)分詞去搜索顯示結(jié)果。還有一些平臺不會提示沒有搜索結(jié)果，直接顯示分詞搜索結(jié)果，可以看下得到的無結(jié)果顯示方式。

關(guān)于缺省內(nèi)容，可以制定不同的策略，但還是要根據(jù)產(chǎn)品定位去進行權(quán)衡，避免畫蛇添足。

以上是搜索結(jié)果在顯示時的一些設(shè)計方式，其實還有很多沒有總結(jié)到的，比如搜索結(jié)果的展示方式是文字還是圖片、為了提高響應(yīng)時間可以做本地搜索和全網(wǎng)搜索，等等。這些也都可以和使用場景及產(chǎn)品定位結(jié)合考慮，就不一一介紹了。

三、最后

注重搜索功能雖說是交互設(shè)計的目的，但本質(zhì)上還是以提升用戶體驗為首位，要盡可能多的考慮用戶的使用場景，實用是最關(guān)鍵的。結(jié)合不同的產(chǎn)品類型，搜索功能承載的意義也是不一樣的。

比如內(nèi)容型產(chǎn)品的搜索，不論是在精準搜索還是擴展結(jié)果方面，更多的是提高搜索效率，電商型產(chǎn)品除了要提升效率外，也會也承擔(dān)一些營銷活動導(dǎo)流或轉(zhuǎn)化的運營需求，如果設(shè)計合理，其實是可以直接讓企業(yè)獲利的。

最后的最后，謹記“奧卡姆剃刀原則”，以簡潔易用為主，不要為了設(shè)計而設(shè)計，太復(fù)雜的操作或者繁重的搜索結(jié)果，都會給用戶增加學(xué)習(xí)成本，適得其反。

對于搜索，如果你有更好的想法，歡迎隨時和我交流。

本文由 @鄭多多 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議