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

一.為什么要做搜索功能

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

二 .搜索種類

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

三.搜索流程及功能大綱

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

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

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

4.1找到搜索入口

目前常見的有五種搜索入口，主要因?yàn)樽陨懋a(chǎn)品的業(yè)務(wù)以及搜索功能對(duì)于整個(gè)產(chǎn)品而言的重要程不同，通常在一個(gè)產(chǎn)品中也結(jié)合多種來(lái)使用

4.1.1 底部標(biāo)簽欄

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

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

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

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

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

4.1.4 隱藏的搜索框

入口：位于導(dǎo)航欄下方
樣式：搜索框+搜索icon+提示詞
適用：因?yàn)榇祟愃阉骺蛉肟谕ǔ２豢梢?，只有?dāng)用戶需要搜索功能時(shí)，通過(guò)某種手勢(shì)喚起后才可見。搜索在該產(chǎn)品中是相對(duì)較弱但是又有可能用到的一個(gè)功能。
舉例：ios的信息和微信首頁(yè)打開后，搜索框都是隱藏的，只有當(dāng)下拉頁(yè)面時(shí)，搜索框才出現(xiàn)。

4.1.5 頁(yè)面中間的搜索表單

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

  

4.2 進(jìn)入搜索版面

通過(guò)上述對(duì)于入口的介紹，我們很快可以找到搜索入口，進(jìn)入搜索版面。

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

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

4.2.2 歷史搜索

歷史搜索是之前搜過(guò)的關(guān)鍵詞集成的一個(gè)版塊，點(diǎn)擊任一關(guān)鍵詞即可跳轉(zhuǎn)到相應(yīng)內(nèi)容，因?yàn)榇蟛糠钟脩舻南埠檬枪潭ǖ?，搜索有一定的重?fù)性，故通過(guò)選擇先前的記錄，進(jìn)一步幫助用戶節(jié)省時(shí)間，操作。當(dāng)然首次用搜索功能是沒有歷史搜索這塊內(nèi)容的。

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

4.2.3 熱門搜索

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

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

4.2.4 取消/返回

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

4.2.5 限定搜索范圍

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

4.2.6 其他推薦

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

4.3 實(shí)時(shí)搜索和非實(shí)時(shí)搜索

可以根據(jù)是否實(shí)時(shí)給出搜索結(jié)果分為實(shí)時(shí)搜索和非實(shí)時(shí)搜索，主要還是看業(yè)務(wù)場(chǎng)景，還要結(jié)合開發(fā)資源等因素，選擇適合的搜索。因?yàn)椴煌乃阉鞣绞綍?huì)有不同的樣式和功能，故分開來(lái)分析接下來(lái)的流程

4.3.1 實(shí)時(shí)搜索

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

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

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

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

4.3.2 非實(shí)時(shí)搜索

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

4.3.2.1 輸入關(guān)鍵詞

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

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

b.清除按鈕

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

4.3.2.2 得到搜索結(jié)果

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

b.無(wú)匹配結(jié)果

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

五. 總結(jié)

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

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