如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

一.為什么要做搜索功能

主要是方便用戶，讓用戶更便捷地從大量信息內(nèi)容中通過一些關(guān)鍵詞迅速找到自己感興趣的內(nèi)容；其次可以通過適當(dāng)?shù)囊龑?dǎo)設(shè)計來完成產(chǎn)品的商業(yè)需求

二 .搜索種類

根據(jù)搜索識別內(nèi)容的不同，可分為語音搜索，圖像搜索及文字搜索，一般會根據(jù)產(chǎn)品業(yè)務(wù)的特點以及公司開發(fā)能力結(jié)合多種搜索。語音搜索常見于音樂相關(guān)產(chǎn)品，通過識別聲音來找到某段音樂；圖像搜索常見于電商產(chǎn)品，電商行業(yè)商品種類繁多，名稱復(fù)雜，通過文字描述很難找到對應(yīng)商品，故用戶可通過商品條形碼或外觀來搜索對應(yīng)的商品，可以盡量縮小目標(biāo)商品范圍；由于目前常見的是文字搜索為主，故本文主要探討文字搜索

三.搜索流程及功能大綱

研究了諸多產(chǎn)品，按照最簡單的搜索流程把搜索相關(guān)的功能或內(nèi)容都羅列出來，使用要根據(jù)自身產(chǎn)品，業(yè)務(wù)和用戶的特點做針對性設(shè)計，切勿一股腦兒照搬

四.搜索流程及功能詳細(xì)分析

接下來按照簡化的搜索流程去看下每個步驟在設(shè)計的時候需要涉及哪些功能或內(nèi)容

4.1找到搜索入口

目前常見的有五種搜索入口，主要因為自身產(chǎn)品的業(yè)務(wù)以及搜索功能對于整個產(chǎn)品而言的重要程不同，通常在一個產(chǎn)品中也結(jié)合多種來使用

4.1.1 底部標(biāo)簽欄

入口：底標(biāo)簽欄，作為單獨一個版塊，
樣式：底標(biāo)簽欄的一個搜索icon，通常在搜索版面會結(jié)合導(dǎo)航欄中搜索框的樣式。
適用：目前采用該入口的產(chǎn)品相對較少，且版塊逐漸演變成“發(fā)現(xiàn)”“分類”，通過推薦+搜索來讓用戶找到感興趣的內(nèi)容。適用于搜索功能占比非常大的業(yè)務(wù)形態(tài)
舉例：蘋果的apple store和music，印象筆記，專為搜索設(shè)置了一個版面。因為搜索版面空間足夠大，所以可供運營的空間比較大，可以結(jié)合產(chǎn)品業(yè)務(wù)對搜索版面進行內(nèi)容豐富。例如拼多多的搜索，結(jié)合商品分類

4.1.2 導(dǎo)航欄中的搜索框

入口：導(dǎo)航欄中間
樣式：搜索框+搜索icon+提示詞+（圖像icon/聲音icon）
         搜索框+提示詞+搜索按鈕（文字或圖標(biāo)）
適用：將搜索框放在導(dǎo)航欄上，按照人眼正常的瀏覽順序，從上往下，從左往右，搜索框占據(jù)了比較重要的位置，用戶一眼就能看到，并且輕松進入搜索流程，此類適合對搜索功能依賴較重的產(chǎn)品，至少有一半用戶是通過搜索來獲取自己感興趣的內(nèi)容
舉例：該搜索入口是目前絕大多數(shù)產(chǎn)品的選擇，常見于電商，閱讀，音樂，影視等產(chǎn)品，如淘寶，小米有品，蝦米，愛奇藝，網(wǎng)易蝸牛等

4.1.3 導(dǎo)航欄邊的搜索按鈕

入口：導(dǎo)航欄邊
樣式：一個搜索icon
適用：此類搜索在整個頁面的視覺比重弱了很多，適合對搜索功能依賴不深的產(chǎn)品，大部分用戶主要通過產(chǎn)品推薦來獲取信息，小部分會通過搜索，所以保留了搜索入口，僅僅弱化了樣式。此搜索入口還有個優(yōu)點，相比上一種節(jié)省了空間，可以在導(dǎo)航欄放置其他重要的功能
舉例：如支付寶的理財版塊，因為支付寶的用戶群體較廣，所以它的理財版塊是針對非專業(yè)人士設(shè)計的，此時理財版塊更重視產(chǎn)品推薦而非搜索，故弱化了搜索的同時也方便部分用戶可以直接搜搜自己感興趣的理財內(nèi)容

4.1.4 隱藏的搜索框

入口：位于導(dǎo)航欄下方
樣式：搜索框+搜索icon+提示詞
適用：因為此類搜索框入口通常不可見，只有當(dāng)用戶需要搜索功能時，通過某種手勢喚起后才可見。搜索在該產(chǎn)品中是相對較弱但是又有可能用到的一個功能。
舉例：ios的信息和微信首頁打開后，搜索框都是隱藏的，只有當(dāng)下拉頁面時，搜索框才出現(xiàn)。

4.1.5 頁面中間的搜索表單

入口：頁面中間
樣式：通常是一組用于輸入多個限制條件的表單以及搜索按鈕。
適用：只能通過搜索來達(dá)到自己明確目的的產(chǎn)品，如票務(wù)，旅居之類需要時間地點等更多條件才能明確搜索目標(biāo)的業(yè)務(wù)。
舉例：攜程，飛豬，螞蜂窩的機票業(yè)務(wù)版面，螞蜂窩的酒店預(yù)訂版面
         此類搜索流程和以上四種略有差異，本文暫不做展開分析；

  

4.2 進入搜索版面

通過上述對于入口的介紹，我們很快可以找到搜索入口，進入搜索版面。

4.2.1 搜索框內(nèi)默認(rèn)提示詞

第一種：一般默認(rèn)提示詞會提醒用戶搜索哪些關(guān)鍵詞，比如搜索訂單編號，搜索商品名稱等，適用于產(chǎn)品初期，用戶不太會玩，所以需要一個很好的引導(dǎo)（eg：MONO，花瓣網(wǎng)）
第二種：默認(rèn)提示詞也被用來進行運營推廣，將業(yè)務(wù)需要的關(guān)鍵詞置于搜索框內(nèi)，用戶看到感興趣，直接搜索即可得到相應(yīng)結(jié)果，這可以用作活動的流量入口。（eg：淘寶，蝦米）

4.2.2 歷史搜索

歷史搜索是之前搜過的關(guān)鍵詞集成的一個版塊，點擊任一關(guān)鍵詞即可跳轉(zhuǎn)到相應(yīng)內(nèi)容，因為大部分用戶的喜好是固定的，搜索有一定的重復(fù)性，故通過選擇先前的記錄，進一步幫助用戶節(jié)省時間，操作。當(dāng)然首次用搜索功能是沒有歷史搜索這塊內(nèi)容的。

因為歷史搜索會越來越多，所以一般歷史搜索版塊會有一個全部刪除功能，用于清除歷史搜索（eg：淘寶）；部分業(yè)務(wù)還會有逐條刪除的功能，給了用戶比較大的自主權(quán)，留下常用的歷史搜索，刪掉不常用的（eg：微博，知乎）。除此外還會有顯示搜索記錄按鈕，因為版面限制導(dǎo)致當(dāng)前放不下較多的歷史搜索，只能展示部分搜索記錄，剩余會隱藏，點擊顯示后，搜索記錄全部顯示（eg：微博）

4.2.3 熱門搜索

熱門搜索一般會根據(jù)已有的搜索數(shù)據(jù)，放一些搜索頻次較高的關(guān)鍵詞，便于大部分用戶的快捷選擇；除此外就是運營層面的應(yīng)用，會放一些商品或者活動入口的關(guān)鍵詞，增加活動或商品曝光的機會。還可以通過視覺上的處理來突出想要突出的重點信息，比如加個品牌色，加個tag標(biāo)簽（eg：網(wǎng)易嚴(yán)選，微博）

因為某些產(chǎn)品（新聞資訊類，泛娛樂類）的用戶對于資訊的獲取是大量的，源源不斷的，所以當(dāng)熱門搜索版塊的內(nèi)容較多時，需要考慮其交互方式，目前有三種交互方式，
第一種：加個更多按鈕，用一個新的頁面承載更多的熱搜內(nèi)容（eg：微博，優(yōu)酷）
第二種：先展示一部分，然后有按鈕可以在本頁面展開更多（eg：蝦米）
第三種：用tabbar來承載不同分類下的熱搜內(nèi)容，節(jié)約了空間，放下更多的內(nèi)容，同時有了明確的分類，用戶更容易找到感興趣的東西（eg：優(yōu)酷）

4.2.4 取消/返回

用戶很有可能中途改變主意，不想搜索，所以必須給這類用戶提供一個返回的途徑，讓其可以進行搜索之外的其他選擇——退回上一頁（eg：同上配圖）

4.2.5 限定搜索范圍

由于某些業(yè)務(wù)范圍較廣，內(nèi)容較復(fù)雜，所以用戶在搜索頁面即可限定搜索范圍，讓搜索更為準(zhǔn)確
第一種：二級tabbar的切換，直觀且操作方便，適合于限定范圍頻繁的業(yè)務(wù)
（eg:淘寶，站酷）
第二種：搜索框左側(cè)文字按鈕，點擊后出現(xiàn)浮層選擇范圍；相對來說，視覺上弱于上兩種，適合于使用限定范圍不太頻繁的業(yè)務(wù)（eg：大眾點評）
第三種：文字或者按鈕的不同范圍的入口，點擊后進入該范圍內(nèi)的搜索。適用于目的性較強的搜索（eg：微信，京東金融）

4.2.6 其他推薦

名稱可根據(jù)業(yè)務(wù)需求來定，是運營延展的一個版塊，多是推廣業(yè)務(wù)需求，作為流量入口，增加點擊量，從而提升銷量或播放量等業(yè)務(wù)相關(guān)數(shù)據(jù)；為了推薦更多的內(nèi)容，有些推薦版塊還會提供一個換一批的功能，便于用戶有更多的選擇，讓更多的內(nèi)容有曝光機會（eg：微信讀書，淘寶，天貓）

4.3 實時搜索和非實時搜索

可以根據(jù)是否實時給出搜索結(jié)果分為實時搜索和非實時搜索，主要還是看業(yè)務(wù)場景，還要結(jié)合開發(fā)資源等因素，選擇適合的搜索。因為不同的搜索方式會有不同的樣式和功能，故分開來分析接下來的流程

4.3.1 實時搜索

實時搜索就是當(dāng)輸入文字時，系統(tǒng)直接能根據(jù)給的關(guān)鍵字給出搜索結(jié)果
適用：適合小數(shù)量范圍內(nèi)的搜索，一般是搜索，適合在聯(lián)系人，好友，我關(guān)注的等有固定且明確的小范圍的業(yè)務(wù)中使用

此搜索中，輸入關(guān)鍵詞和得到搜索結(jié)果是同步進行的

直接按照輸入的字給出對應(yīng)的結(jié)果（eg：通訊錄），當(dāng)內(nèi)容類別較多時，會將結(jié)果的類別也展示出來，便于用戶直接選擇想要的（eg：微信首頁）

若沒有匹配結(jié)果，一般有三種情況
第一種：無顯示（ios通訊錄）
第二種：文字提示“未搜到結(jié)果”（微博我的好友搜索）
第三種：文字提示+相似推薦等其他推薦（eg：大麥網(wǎng)）

4.3.2 非實時搜索

非實時搜索就是當(dāng)輸入關(guān)鍵詞后點擊搜索按鈕后才能得到搜索結(jié)果
適用：大量數(shù)據(jù)范圍的內(nèi)容搜索，一般是模糊搜索

4.3.2.1 輸入關(guān)鍵詞

a.給出與文字匹配的關(guān)鍵詞建議

根據(jù)輸入的字來預(yù)測用戶想要搜索的內(nèi)容，并實時給出相應(yīng)推薦，這種方式提前預(yù)測用戶想搜索的內(nèi)容，為用戶多考慮一步，減少輸字的步驟，讓用戶更方便，提供更好的用戶體驗
樣式：搜索框下方，關(guān)鍵詞+詳細(xì)描述+（圖標(biāo)），關(guān)鍵詞一般用品牌色等來區(qū)分，圖標(biāo)的作用主要是為了示意用戶可點擊，一般是搜索圖標(biāo)或是箭頭，有些還會加上詳細(xì)類別，便于用戶篩選（eg：淘寶，考拉，愛奇藝，知乎）

b.清除按鈕

方便用戶直接刪除輸入的多個關(guān)鍵字，為用戶提供方便，一般是個刪除按鈕，適用于所有搜索框場景（eg：淘寶，網(wǎng)易考拉的清除按鈕，配圖同上）

4.3.2.2 得到搜索結(jié)果

a.正常結(jié)果
當(dāng)?shù)玫秸５慕Y(jié)果頁時，除了正常的結(jié)果列表，還有其他功能幫助用戶更地搜索，常見的有三種情況
第一種：輔助挑選欄，里面一般有排序，篩選等功能，也是便于用戶在繁多的結(jié)果中按照自己的需求找到需要的內(nèi)容。適用于業(yè)務(wù)體系龐大且繁雜的業(yè)務(wù)（淘寶，京東）
第二種：分類tabbar，能縮小范圍，便于用戶更地查找；適用于有明確類別的業(yè)務(wù)（站酷，蝦米）
第三種：更細(xì)致的選擇標(biāo)簽，有多選也有單選，幫助用戶更精細(xì)的篩選（eg：衣二三）

b.無匹配結(jié)果

當(dāng)沒有搜到任何結(jié)果時，基本上會出現(xiàn)以下兩類
第一種：無結(jié)果的提示（eg：京東，蝦米）
第二種：無結(jié)果的提示+推薦版塊（eg：網(wǎng)易嚴(yán)選，考拉海購）
無結(jié)果的提示如果加上情感化設(shè)計可以用一些小插畫豐富畫面，提升體驗；
當(dāng)用戶沒有找到想要的內(nèi)容，推薦版塊（猜你喜歡之類的）可以提供給用戶一些其他選擇，也增大一些內(nèi)容的曝光

五. 總結(jié)

以上總結(jié)的都是常見的搜索功能，整個搜索流程還是涉及到不少內(nèi)容和板塊的，不單單只是一個搜索icon而已，而且還有其他細(xì)節(jié)可能沒梳理到位，不過也夠日常參考使用了。重要的是做每個步驟的時候都要思考，為什么這樣設(shè)計，所有的設(shè)計都是有理有據(jù)的，要結(jié)合產(chǎn)品定位，用戶群體，開發(fā)資源，商務(wù)需求等來分析具體的搜索應(yīng)該怎么做，能解決問題的設(shè)計才是好的設(shè)計。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。