?寫(xiě)在前面?

無(wú)論網(wǎng)站或是App碍脏，搜索功能幾乎成了標(biāo)配，在其間占據(jù)著或輕或重的位置稍算。一方面典尾，搜索可以幫助用戶(hù)節(jié)約時(shí)間、直達(dá)目的糊探；另一方面钾埂，它也是用戶(hù)主動(dòng)表達(dá)意愿的一個(gè)窗口，可以幫助搜集用戶(hù)需求科平、引導(dǎo)用戶(hù)行為褥紫。

在不同業(yè)務(wù)類(lèi)型、不同場(chǎng)景下瞪慧，搜索的定位和形式可能大不相同髓考，有沒(méi)有一種通用的思路，可以cover住各類(lèi)搜索的體驗(yàn)設(shè)計(jì)呢弃酌？

我最近把玩了30+個(gè)App氨菇，涉及搜索、資訊妓湘、知識(shí)查蓉、電商、社交榜贴、視頻豌研、音樂(lè)、導(dǎo)航唬党、工具鹃共、O2O、生活服務(wù)等十幾種類(lèi)別初嘹，歸納總結(jié)了搜索設(shè)計(jì)的一些套路和設(shè)計(jì)形式及汉，將其拆解開(kāi)來(lái)，與大家分享屯烦、探討坷随。大家可以結(jié)合自家的業(yè)務(wù)類(lèi)型、具體的應(yīng)用場(chǎng)景驻龟，選取適合的形式温眉，提升搜索體驗(yàn)。

搜索體驗(yàn)的“三度”?

打造滿(mǎn)意的搜索體驗(yàn)翁狐，需做好三個(gè)“度”：速度类溢、溫度、準(zhǔn)確度。

速度指讓用戶(hù)更快得到搜索結(jié)果闯冷、完成搜索過(guò)程砂心。

溫度指搜索過(guò)程人性化，易于理解和操作蛇耀，讓用戶(hù)感到貼心辩诞、甚至是驚喜。

準(zhǔn)確度指搜索結(jié)果準(zhǔn)確纺涤，符合用戶(hù)期望译暂。

乍一看，速度和準(zhǔn)確度似乎與技術(shù)更相關(guān)撩炊，跟設(shè)計(jì)沒(méi)啥關(guān)系外永。但其實(shí)三者相輔相成秘车，我們可以通過(guò)合理而帶有溫度的設(shè)計(jì)州既，提升搜索的效率和體驗(yàn)罗侯，讓用戶(hù)搜得更快丹禀、更準(zhǔn)口糕、更舒心萍诱。

?搜索體驗(yàn)的設(shè)計(jì)拆解?

我們可以把搜索拆解為三個(gè)部分：搜索入口稼钩、搜索過(guò)程具帮、搜索結(jié)果谭网。

搜索過(guò)程又可拆解為三個(gè)動(dòng)作：點(diǎn)擊搜索框/icon → 輸入文字/字符 →? 點(diǎn)擊搜索按鈕/關(guān)鍵詞汪厨。每個(gè)動(dòng)作觸發(fā)后，都會(huì)有相應(yīng)反饋：

圖1 ?搜索過(guò)程及反饋

接下來(lái)我會(huì)將各個(gè)部分拆分開(kāi)來(lái)愉择，分析體驗(yàn)設(shè)計(jì)的要點(diǎn)劫乱。結(jié)構(gòu)及目錄見(jiàn)下圖：?

圖2 ?本文結(jié)構(gòu)與目錄

?第一部分? 搜索入口?

搜索入口具有提示和引導(dǎo)作用，常見(jiàn)的有4種：

1.獨(dú)立的一級(jí)tab

2.搜索框

3.搜索icon

4.隱藏式搜索框/icon

圖3 ?四類(lèi)搜索入口形式

A.獨(dú)立的一級(jí)tab

把一個(gè)獨(dú)立的tab作為搜索入口锥涕，整個(gè)tab頁(yè)面圍繞搜索功能進(jìn)行展開(kāi)衷戈。這一整頁(yè)，為搜索功能的拓展提供了很大空間层坠，可以做各種嘗試殖妇，適合將搜索作為重要流量入口的App。

代表有App Store破花、Twitter谦趣、新浪微博。App Store座每、Twitter的tab頁(yè)面中只保留了搜索框和搜索熱詞推薦前鹅。新浪微博的嘗試更加豐富，包括分類(lèi)峭梳、話(huà)題以及不同類(lèi)型的推薦舰绘，運(yùn)營(yíng)的空間更大。

B.搜索框

應(yīng)用最廣泛的一種形式，大多居于頁(yè)面頂部捂寿，較為醒目口四。有些App在滑動(dòng)頁(yè)面時(shí)，還會(huì)將搜索框吸頂顯示者蠕，便于用戶(hù)隨時(shí)使用窃祝。

搜索框內(nèi)一般會(huì)有預(yù)設(shè)文案掐松，提示用戶(hù)可搜索的關(guān)鍵詞類(lèi)型踱侣。目前越來(lái)越多的App（尤其是電商類(lèi)）把搜索框作為運(yùn)營(yíng)的入口，放入一些熱詞大磺、活動(dòng)抡句、新品/新功能等，并且不局限于一個(gè)詞杠愧，可能是一個(gè)字待榔、一個(gè)短語(yǔ)，甚至是一個(gè)句子流济。

圖4 ?搜索框中的預(yù)設(shè)文案

C.搜索icon

搜索icon應(yīng)用廣泛锐锣，位置一般在頁(yè)面右上角。相對(duì)搜索框來(lái)說(shuō)绳瘟，搜索icon的引導(dǎo)性稍差雕憔，運(yùn)營(yíng)空間也有限，但可以節(jié)約導(dǎo)航欄空間糖声，適合于將搜索作為輔助功能的場(chǎng)景斤彼。

比如得到的今日學(xué)習(xí)模塊，以feed流的形式蘸泻，展示用戶(hù)每天的學(xué)習(xí)任務(wù)琉苇。這個(gè)模塊預(yù)設(shè)功能是瀏覽、收聽(tīng)悦施，且內(nèi)容有限（只包括用戶(hù)付費(fèi)訂閱的內(nèi)容和平臺(tái)為該用戶(hù)個(gè)性化推薦的內(nèi)容）并扇，搜索在此僅僅是輔助功能，所以將入口弱化抡诞。并且得到將此處搜索設(shè)定為全局搜索（搜索全App）穷蛹，可以引導(dǎo)用戶(hù)發(fā)現(xiàn)更多內(nèi)容，避免出現(xiàn)無(wú)結(jié)果/少結(jié)果的情況沐绒。

圖5 ?得到今日學(xué)習(xí)模塊

D.隱藏式搜索框/icon

這種形式的搜索功能是被弱化的俩莽，入口在主頁(yè)上不可見(jiàn)，有的折疊在其它入口中乔遮，有的可通過(guò)手勢(shì)喚起扮超。

典型的一種是下拉出現(xiàn)搜索框：平時(shí)搜索入口隱藏，不占用空間，需要時(shí)又可下拉迅速呼出出刷。微信和ios桌面璧疗、備忘錄都采用了這種形式。

?第二部分? 搜索過(guò)程?

搜索過(guò)程是提高搜索體驗(yàn)的關(guān)鍵部分馁龟，過(guò)程可分為三個(gè)階段：點(diǎn)擊搜索框/icon → 輸入文字/字符 →? 點(diǎn)擊搜索按鈕/關(guān)鍵詞崩侠。

第一階段的反饋如下：

a.跳轉(zhuǎn)：跳轉(zhuǎn)到搜索頁(yè)

b.激活：激活搜索框，光標(biāo)閃爍坷檩，并顯示引導(dǎo)文案

c.調(diào)起：調(diào)起搜索鍵盤(pán)

E.搜索頁(yè)

本文的搜索頁(yè)却音，指點(diǎn)擊搜索框/icon后跳轉(zhuǎn)的頁(yè)面。

搜索頁(yè)包括兩部分矢炼，搜索欄和輔助區(qū)（搜索欄以外的部分）系瓢。進(jìn)入搜索頁(yè)后，一般默認(rèn)調(diào)起搜索鍵盤(pán)句灌。

圖6 ?搜索頁(yè)結(jié)構(gòu)

F.搜索欄

搜索欄有兩種常見(jiàn)的形式：

圖7 ?搜索欄形式

兩種形式區(qū)別在于按鈕的設(shè)計(jì)夷陋，前者有“返回”和“搜索”兩個(gè)按鈕，后者僅有“取消”按鈕胰锌。這里“返回”和“取消”功能相同骗绕，都是結(jié)束搜索，返回上頁(yè)资昧。

因?yàn)檎{(diào)起的鍵盤(pán)通常為搜索鍵盤(pán)酬土，自帶“搜索”按鈕，并且從操作連貫性方面來(lái)說(shuō)榛搔，鍵盤(pán)上的搜索按鈕更符合用戶(hù)習(xí)慣诺凡。所以目前大多數(shù)App在界面上僅保留了取消按鈕，這樣也更利于用戶(hù)聚焦践惑。

有些App突破了傳統(tǒng)搜索框樣式腹泌，采用了更突出的形式（如愛(ài)彼迎）。還有些增加了圖片尔觉、語(yǔ)音凉袱、二維碼識(shí)別的入口，這也為信息輸入提供了更多的途徑侦铜。

G.輔助區(qū)

輔助區(qū)主要為用戶(hù)提供合適的推薦专甩，以提高搜索效率。此外钉稍，也兼具運(yùn)營(yíng)屬性涤躲，可以作為推廣入口。

輔助區(qū)的推薦主要有歷史記錄贡未、熱搜和分類(lèi)种樱。不同類(lèi)型的App在設(shè)計(jì)上有所偏重蒙袍，如電商類(lèi)App，熱搜可以作為運(yùn)營(yíng)入口嫩挤、為某些品類(lèi)導(dǎo)量害幅，但工具類(lèi)App，如印象筆記岂昭，搜索功能主要用來(lái)查找用戶(hù)自己的筆記以现，不具備運(yùn)營(yíng)屬性，也就不需要熱搜约啊。

圖8 ?輔助區(qū)中的歷史記錄邑遏、熱搜和分類(lèi)

H.歷史記錄

歷史記錄適用兩種場(chǎng)景：一是搜索詞與歷史搜索有一定相關(guān)性，需要在歷史搜索的基礎(chǔ)上調(diào)整關(guān)鍵詞棍苹。二是搜索的關(guān)鍵詞无宿，搜索結(jié)果可能有更新（如在58搜索酒仙橋三室一廳的租房信息，房源信息可能會(huì)增加）枢里、搜索結(jié)果之前并未處理完（如在京東搜索加濕器，只瀏覽了第一頁(yè)蹂午，并未完成購(gòu)買(mǎi)）或者需要再次搜索（如高德地圖中從不同的起點(diǎn)搜索某地栏豺、做路線(xiàn)規(guī)劃），這時(shí)需要重新輸入關(guān)鍵詞豆胸。??

歷史記錄能提升重復(fù)搜索時(shí)的效率奥洼，但并非所有的搜索都需要?dú)v史記錄。如果搜索結(jié)果操作較為簡(jiǎn)單晚胡，且通過(guò)一次即可完成灵奖，那么就可視情況省略。

比如App Store估盘，無(wú)論是搜索關(guān)鍵詞或者精確的App名稱(chēng)瓷患，用戶(hù)搜到之后，最有可能的動(dòng)作就是下載遣妥。如果不滿(mǎn)意擅编，可能會(huì)離開(kāi)，但離開(kāi)后再搜索同一App的可能性很小箫踩，歷史記錄起到的作用有限爱态。

考慮到搜索頁(yè)的空間、有效性境钟，通常需要控制歷史記錄的數(shù)目和時(shí)間范圍锦担。

歷史記錄的形式主要有兩種：一種是標(biāo)簽式，一種是列表式慨削。標(biāo)簽式節(jié)約空間洞渔，列表式擴(kuò)展性強(qiáng)（可以展示更詳細(xì)的信息鱼的，也可支持收藏、刪除等操作）痘煤。

考慮到隱私問(wèn)題凑阶，歷史記錄一般支持刪除。刪除有兩種衷快，一種是刪除單條宙橱，一種是清空所有。刪除單條功能多見(jiàn)于列表式蘸拔，一些標(biāo)簽類(lèi)的也可采用長(zhǎng)按的方式刪除單條（比如淘寶）师郑。

圖9 ?歷史記錄

需要注意的一點(diǎn)，歷史記錄只用于搜索初期调窍，后續(xù)可在適合的場(chǎng)景下宝冕，引導(dǎo)用戶(hù)使用收藏、訂閱邓萨、足跡等功能地梨，打造更好的體驗(yàn)。例如缔恳，騰訊視頻記錄觀看歷史宝剖，不但使用戶(hù)免于搜索，而且可以記錄進(jìn)度歉甚。什么值得買(mǎi)万细，在搜索結(jié)果頁(yè)添加了“關(guān)注”按鈕，關(guān)注后用戶(hù)可以在首頁(yè)“關(guān)注動(dòng)態(tài)”tab看到持續(xù)更新的搜索結(jié)果纸泄。

圖10 ?更豐富的引導(dǎo)方式

I.熱搜

熱搜的作用類(lèi)似于搜索框中的預(yù)設(shè)文案赖钞，起引導(dǎo)作用。但因?yàn)檩o助區(qū)的空間有限（鍵盤(pán)會(huì)遮蓋一部分）聘裁，為盡可能提高利用率雪营，熱搜的字?jǐn)?shù)通常會(huì)作出限制。

常見(jiàn)的熱搜主要有4種：

1.整個(gè)平臺(tái)用戶(hù)的熱搜

2.基于用戶(hù)的個(gè)性化推薦（根據(jù)用戶(hù)資料咧虎、軌跡等信息做智能化推薦）

3.平臺(tái)運(yùn)營(yíng)內(nèi)容（為某些品類(lèi)引流）

4.推廣（商業(yè)廣告）

熱搜的展示形式以標(biāo)簽為主卓缰。因?yàn)椴糠譄崴咽莻€(gè)性化推薦，可能會(huì)暴露隱私砰诵，一些App還貼心地設(shè)置了隱藏按鈕征唬。

J.分類(lèi)搜索

當(dāng)App中涉及到的業(yè)務(wù)、類(lèi)型茁彭、品類(lèi)多時(shí)总寒，可能出現(xiàn)多種類(lèi)別的搜索結(jié)果，其形式和操作也不同理肺。為了讓一部分目的明確的用戶(hù)（明確知道要搜索的類(lèi)別）摄闸，從中快速善镰、準(zhǔn)確地找到自己預(yù)期的結(jié)果，常常采用分類(lèi)搜索的方式年枕。

具體有3種方式：

1.搜索框分類(lèi)選擇

2.輔助區(qū)分類(lèi)選擇

3.搜索結(jié)果頁(yè)分類(lèi)選擇

搜索框中的分類(lèi)選擇炫欺，適合那些需求明確的用戶(hù)。如在鏈家中熏兄，搜索二手房還是租房品洛，用戶(hù)是特別明確的。在搜索框中默認(rèn)限定類(lèi)別摩桶，可能會(huì)導(dǎo)致搜索結(jié)果偏差桥状。為了照顧到更多用戶(hù)，大多數(shù)App提供了“全部”類(lèi)別硝清，并默認(rèn)搜索“全部”類(lèi)別下的結(jié)果辅斟，比如微博。

未在搜索框中選擇分類(lèi)的芦拿，仍然有機(jī)會(huì)在搜索過(guò)程中選擇分類(lèi)士飒。淘寶采用tab的方式，區(qū)別展示“全部”防嗡、“天貓”变汪、“店鋪”的搜索建議和結(jié)果。亞馬遜則在輸入過(guò)程中蚁趁，提供類(lèi)別的選擇（默認(rèn)搜索全部分類(lèi)，但提供搜索小類(lèi)的入口）实胸，同樣的還有58他嫡、京東、閑魚(yú)等庐完。

更多的App采用搜索結(jié)果分類(lèi)的方式钢属，將結(jié)果分門(mén)別類(lèi)呈現(xiàn)，減少用戶(hù)在搜索過(guò)程中的決策壓力门躯。最常見(jiàn)的形式是tab式（代表：知乎淆党、支付寶），第一個(gè)tab一般為各類(lèi)結(jié)果的堆疊讶凉，后面每個(gè)tab為一類(lèi)染乌，便于切換。還有的采用標(biāo)簽來(lái)區(qū)分（代表：Facebook懂讯、網(wǎng)易考拉荷憋、京東）、用列表作為類(lèi)別入口（代表：58）褐望、直接將各個(gè)類(lèi)別模塊堆疊起來(lái)（更像是列表式的擴(kuò)展勒庄，每個(gè)類(lèi)別外露一些內(nèi)容串前，代表：微信、豆瓣）实蔽。

這幾種方式并不是完全獨(dú)立的荡碾，可以根據(jù)需要靈活運(yùn)用。

圖11 ?分類(lèi)搜索的常見(jiàn)形式

搜索過(guò)程第二階段（開(kāi)始輸入文字/字符）的反饋如下：

a.變化：搜索框中局装，引導(dǎo)文案消失坛吁，出現(xiàn)清除icon

b.匹配：根據(jù)輸入的內(nèi)容，進(jìn)行關(guān)鍵詞聯(lián)想

K.清除icon

清除icon是一個(gè)貼心的小設(shè)計(jì)贼邓。它的作用是一鍵清空搜索框中內(nèi)容阶冈，與引導(dǎo)文案交替出現(xiàn)：鍵入文字時(shí)，引導(dǎo)文案消失塑径，清除icon出現(xiàn)女坑；點(diǎn)擊清除icon，文字清空统舀，引導(dǎo)文案出現(xiàn)匆骗。

下圖是某App的截圖，需要注意取消按鈕的形式誉简，避免與清除icon沖突碉就，引起用戶(hù)困惑。

圖12 ?避免取消按鈕和清除icon沖突

L.兩種匹配機(jī)制

分析關(guān)鍵詞聯(lián)想之前闷串，我們先來(lái)了解下兩種匹配機(jī)制：一種是輸入過(guò)程匹配瓮钥，一種是輸入完成匹配。

輸入過(guò)程匹配：在輸入時(shí)烹吵，每輸入一個(gè)字/字母/字符碉熄，就進(jìn)行一次匹配，同時(shí)更新頁(yè)面信息肋拔。這里更新的信息锈津，可以是針對(duì)輸入內(nèi)容進(jìn)行推薦的信息，也可以是直接的搜索結(jié)果凉蜂。

前者是對(duì)輸入的內(nèi)容進(jìn)行關(guān)鍵詞聯(lián)想琼梆，如輸入“女”，推薦信息顯示“女包”“女鞋”“襪子女”等等窿吩。這種方式可以即時(shí)提供搜索建議茎杂、引導(dǎo)性強(qiáng)、可提高效率爆存。

后者則是每輸入一個(gè)字/字母/字符蛉顽，就立即對(duì)數(shù)據(jù)庫(kù)進(jìn)行一次搜索，同時(shí)把搜索結(jié)果展示出來(lái)先较。這種無(wú)需點(diǎn)擊搜索按鈕就實(shí)時(shí)展示搜索結(jié)果的方式，被稱(chēng)為“即時(shí)搜索”。

即時(shí)搜索可以直接竖席、快速地看到結(jié)果，在一定程度上可以提高搜索效率扣猫，但對(duì)計(jì)算能力要求高，若計(jì)算能力跟不上翘地，則可能需要等待加載申尤，從而影響體驗(yàn)。一般適合于數(shù)據(jù)量不大或者數(shù)據(jù)庫(kù)已經(jīng)下載到本地的情況衙耕。

例如昧穿，QQ郵箱預(yù)先已下載部分?jǐn)?shù)據(jù)到本地，搜索可即時(shí)看到結(jié)果（僅包含已下載的數(shù)據(jù)）橙喘，點(diǎn)擊“在服務(wù)器上繼續(xù)搜索”时鸵，才向服務(wù)器請(qǐng)求數(shù)據(jù)。

輸入完成匹配：僅在輸入完成后厅瞎，點(diǎn)擊“搜索”按鈕時(shí)饰潜，才開(kāi)始進(jìn)行搜索、匹配和簸，直接展示搜索結(jié)果彭雾。這種方式省去了對(duì)輸入過(guò)程實(shí)時(shí)分析、引導(dǎo)的過(guò)程锁保，適用于對(duì)搜索功能要求不高的情況薯酝。

圖13 ?即時(shí)搜索與輸入完成匹配

目前很多App采用組合方式：輸入過(guò)程關(guān)鍵詞聯(lián)想+輸入完成執(zhí)行搜索。

這是一個(gè)很討巧的組合爽柒。既對(duì)用戶(hù)提供了必要的幫助和引導(dǎo)蜜托，又減少了請(qǐng)求次數(shù)，避免出現(xiàn)等待加載的狀況霉赡。

M.關(guān)鍵詞聯(lián)想

關(guān)鍵詞到底有什么作用？簡(jiǎn)單來(lái)說(shuō)是：聯(lián)想幔托、匹配穴亏、引導(dǎo)、糾正重挑。展開(kāi)來(lái)說(shuō)嗓化，有四個(gè)作用：

第一，用戶(hù)不一定清楚要搜的精確名稱(chēng)谬哀，關(guān)鍵詞可以作為引導(dǎo)刺覆。

第二，系統(tǒng)可以根據(jù)已有的搜索數(shù)據(jù)史煎，對(duì)關(guān)鍵詞進(jìn)行關(guān)聯(lián)分類(lèi)谦屑，并且與數(shù)據(jù)庫(kù)精確匹配驳糯。如果用戶(hù)選擇了做過(guò)關(guān)聯(lián)處理的詞，就可以獲得內(nèi)容更精確氢橙、數(shù)量更可控的搜索結(jié)果（而這次選擇酝枢，對(duì)系統(tǒng)本身也是一次反饋）。同時(shí)悍手，因?yàn)橐杨A(yù)先做了分類(lèi)帘睦，搜索時(shí)可以直接調(diào)取、減少計(jì)算量坦康，速度也更快竣付。

第三，可以減少用戶(hù)的輸入錯(cuò)誤滞欠。

第四古胆，提供很多很動(dòng)態(tài)的運(yùn)營(yíng)位。

關(guān)鍵詞的展示形式比較靈活仑撞。最簡(jiǎn)單的是根據(jù)輸入詞赤兴，直接展示聯(lián)想的關(guān)鍵詞（如今日頭條），但因?yàn)轫?yè)面空間有限隧哮，被鍵盤(pán)遮蓋后只能露出幾條桶良，于是大家又發(fā)明了二級(jí)標(biāo)簽。它伴隨關(guān)鍵詞一起出現(xiàn)沮翔，提供更多相關(guān)的入口陨帆。

如下圖，搜索“niu rou”采蚀，推薦關(guān)鍵詞“牛肉”疲牵，后面跟著3個(gè)小標(biāo)簽“風(fēng)干”“手撕”“張飛”，這3個(gè)關(guān)鍵詞都是對(duì)“牛肉”的再次聯(lián)想榆鼠。點(diǎn)擊整欄纲爸，執(zhí)行搜索“牛肉”；點(diǎn)擊二級(jí)標(biāo)簽（如“張飛”）妆够，執(zhí)行搜索“牛肉張飛”识啦。需要注意的是，二級(jí)標(biāo)簽的操作區(qū)域很小神妹，對(duì)于操作精準(zhǔn)度要求高颓哮，數(shù)量不能超過(guò)3個(gè)。

圖14 ?今日頭條直接展示聯(lián)想詞鸵荠、京東采用二級(jí)關(guān)鍵詞標(biāo)簽

有時(shí)系統(tǒng)推薦的關(guān)鍵詞不夠精確冕茅，用戶(hù)需在后面輸入其它內(nèi)容。但無(wú)論是關(guān)鍵詞，還是二級(jí)標(biāo)簽姨伤，點(diǎn)擊后都直接執(zhí)行搜索哨坪，這就需要用戶(hù)在搜索結(jié)果頁(yè)再去激活搜索框，繼續(xù)完善搜索詞姜挺，中斷了搜索過(guò)程齿税。YouTube、Facebook炊豪、亞馬遜凌箕、淘寶等采用了“向上補(bǔ)全”功能，點(diǎn)擊關(guān)鍵詞或二級(jí)標(biāo)簽词渤，執(zhí)行搜索牵舱，點(diǎn)擊向上補(bǔ)全icon，會(huì)將關(guān)鍵詞補(bǔ)全到搜索框中缺虐。

圖15 ?淘寶的向上補(bǔ)全功能

還可以將關(guān)鍵詞對(duì)應(yīng)的搜索結(jié)果數(shù)量前置芜壁，便于用戶(hù)控制搜索詞的顆粒度，也避免出現(xiàn)無(wú)結(jié)果或者少結(jié)果的情況高氮。代表有Twitter慧妄、大眾點(diǎn)評(píng)、喜馬拉雅剪芍、鏈家塞淹、百度外賣(mài)等。

圖16 ?關(guān)鍵詞后顯示結(jié)果數(shù)目

除了提供關(guān)鍵詞罪裹，還可以對(duì)輸入詞進(jìn)行判斷饱普，適時(shí)提供分類(lèi)建議（如58、京東状共、亞馬遜套耕、閑魚(yú)等，可參考前文「J.分類(lèi)搜索」一節(jié)）峡继。58作為一個(gè)綜合的生活服務(wù)平臺(tái)冯袍，業(yè)務(wù)類(lèi)別多，搜索“牛肉”碾牌，在很多類(lèi)別都有相關(guān)信息颠猴，選取“食品”和“招商加盟”這兩個(gè)可能性最大的類(lèi)別推薦給用戶(hù)。?

圖17 ?58對(duì)輸入詞提供分類(lèi)建議

另外小染，也可以將部分搜索結(jié)果前置，與關(guān)鍵詞一起顯示贮折。這些搜索結(jié)果裤翩，可能是平臺(tái)用戶(hù)的熱搜、對(duì)當(dāng)前用戶(hù)的個(gè)性化推薦，也可能是平臺(tái)運(yùn)營(yíng)踊赠、推廣的內(nèi)容呵扛。

圖18 ?將部分搜索結(jié)果前置顯示

搜索過(guò)程第三階段，點(diǎn)擊搜索按鈕/關(guān)鍵詞后筐带，跳轉(zhuǎn)至搜索結(jié)果頁(yè)今穿。

?第三部分? 搜索結(jié)果?

N.搜索結(jié)果

搜索后，通常會(huì)得到N多個(gè)結(jié)果伦籍，它們可能不是同一類(lèi)型蓝晒，展示形式也會(huì)有差異。如何把這些結(jié)果清晰有序地展示出來(lái)帖鸦，讓用戶(hù)準(zhǔn)確芝薇、快速地找到想要的結(jié)果？這涉及到幾個(gè)問(wèn)題：

1.智能糾錯(cuò)

2.結(jié)果分類(lèi)（如果需要）

3.默認(rèn)排序

4.保留搜索詞

5.結(jié)果與搜索詞對(duì)應(yīng)

6.排序與篩選

7.無(wú)結(jié)果或少結(jié)果

智能糾錯(cuò)：當(dāng)用戶(hù)輸入了錯(cuò)誤的詞作儿，可能搜索不到結(jié)果洛二。需要系統(tǒng)判斷識(shí)別，推薦正確的詞攻锰，或者直接將正確結(jié)果展示出來(lái)晾嘶。?

圖19 ?智能糾錯(cuò)

結(jié)果分類(lèi)：可以通過(guò)tab、標(biāo)簽娶吞、列表等形式將結(jié)果分類(lèi)垒迂，具體可參考前文「J.分類(lèi)搜索」一節(jié)。

默認(rèn)排序：默認(rèn)的排序結(jié)果決定了用戶(hù)第一眼會(huì)看到什么寝志，對(duì)后續(xù)的轉(zhuǎn)化有直接影響娇斑。通常會(huì)根據(jù)一些因素做綜合排序，如用戶(hù)偏好材部、點(diǎn)擊量毫缆、轉(zhuǎn)化率、平臺(tái)運(yùn)營(yíng)乐导、商業(yè)推廣等苦丁。排序策略通常比較復(fù)雜，不同的平臺(tái)會(huì)考慮不同因素物臂、賦予不同的權(quán)重旺拉。

保留搜索詞：點(diǎn)擊進(jìn)入搜索頁(yè)時(shí)，仍然在搜索框中保留輸入的詞棵磷，一方面提示所搜的關(guān)鍵詞蛾狗，另一方面便于用戶(hù)修改、進(jìn)行二次搜索仪媒。

結(jié)果與搜索詞對(duì)應(yīng)：很多App的搜索內(nèi)容沉桌，不局限于標(biāo)題和結(jié)果列表露出的部分，這就導(dǎo)致搜索結(jié)果看起來(lái)與搜索詞并沒(méi)什么關(guān)系，容易造成用戶(hù)困惑留凭。

這點(diǎn)往往會(huì)被我們忽略佃扼。在必要時(shí)，我們應(yīng)將搜索詞顯示在搜索結(jié)果中蔼夜，保持搜索詞的可見(jiàn)性兼耀。

大眾點(diǎn)評(píng)做了一個(gè)很好的示例：我們搜索“牛欄山”（“牛欄山”是一個(gè)地名，同時(shí)也是酒的品牌）求冷。大眾點(diǎn)評(píng)搜索內(nèi)容包括店鋪名瘤运、地點(diǎn)和推薦菜，那么可能會(huì)有3種搜索結(jié)果：1.名字中含“牛欄山”的店鋪遵倦；2.位于牛欄山商圈的店鋪尽超；3.推薦菜中有“牛欄山”的店鋪。大眾點(diǎn)評(píng)對(duì)結(jié)果列表做了適配梧躺，顯示出命中搜索詞的推薦菜（平時(shí)并不會(huì)顯示）似谁，符合用戶(hù)預(yù)期。

圖20 ?大眾點(diǎn)評(píng)的結(jié)果與搜索詞對(duì)應(yīng)

排序與篩選：排序與篩選維度與業(yè)務(wù)類(lèi)型密切相關(guān)掠哥，不同行業(yè)差異較大巩踏。大致來(lái)說(shuō)，排序有時(shí)間续搀、距離塞琼、熱度、價(jià)格禁舷、銷(xiāo)量等維度彪杉；篩選維度則更加豐富和個(gè)性化，甚至?xí)鶕?jù)搜索內(nèi)容進(jìn)行變化牵咙。

一般排序功能會(huì)放在搜索欄與結(jié)果之間派近，便于切換。但有些App（主要是國(guó)外App洁桌，如亞馬遜渴丸、YouTube），將排序功能收起另凌，操作便利性不如前者谱轨。

篩選項(xiàng)維度少時(shí)，可以將篩選（與排序一起）放置在搜索欄與結(jié)果之間吠谢，點(diǎn)擊后以下拉菜單的形式出現(xiàn)土童；若維度豐富，一般使用側(cè)邊欄形式工坊。需要注意的是娜扇，多個(gè)篩選維度的疊加可能會(huì)導(dǎo)致結(jié)果過(guò)少错沃，前置篩選結(jié)果數(shù)量是個(gè)不錯(cuò)的辦法（如網(wǎng)易考拉海購(gòu)）。

圖21 ?排序與篩選

無(wú)結(jié)果或少結(jié)果：出現(xiàn)無(wú)結(jié)果或少結(jié)果時(shí)雀瓢，可能有這幾種情況：1.選擇了錯(cuò)誤的分類(lèi)；2.輸入錯(cuò)誤玉掸；3.搜索結(jié)果少或無(wú)刃麸。對(duì)于前兩種，可以提示用戶(hù)司浪，或者自動(dòng)幫用戶(hù)糾正錯(cuò)誤泊业；對(duì)于后一種，一般會(huì)匹配相關(guān)結(jié)果進(jìn)行補(bǔ)足啊易，或者提示用戶(hù)更換關(guān)鍵詞吁伺、擴(kuò)大搜索范圍、進(jìn)行訂閱等租谈。

例如58在搜索結(jié)果不足時(shí)篮奄，會(huì)引導(dǎo)用戶(hù)訂閱，當(dāng)搜索結(jié)果更新時(shí)割去，會(huì)向用戶(hù)主動(dòng)推送窟却。

圖22 ?結(jié)果不足時(shí)，補(bǔ)足信息+訂閱引導(dǎo)

O.更多搜索方式

隨著技術(shù)的發(fā)展呻逆，搜索方式越來(lái)越豐富夸赫。

比如語(yǔ)音搜索，不但為視力不佳的老年人提供了一種友善的方式咖城，也適用于一些輸入不便移動(dòng)場(chǎng)景茬腿。比如導(dǎo)航類(lèi)內(nèi)置語(yǔ)音搜索，可以在駕車(chē)途中實(shí)現(xiàn)路況查詢(xún)宜雀、地點(diǎn)搜索切平、路線(xiàn)規(guī)劃等功能。另外在一些音樂(lè)類(lèi)App中州袒，可以帶入音律揭绑，實(shí)現(xiàn)“聽(tīng)歌識(shí)曲”，甚至是“哼唱識(shí)曲”郎哭。

圖23 ?語(yǔ)音搜索

借助圖像識(shí)別技術(shù)他匪，圖像搜索也得到了廣泛應(yīng)用。百度的“以圖搜圖”夸研，可以搜索相似圖片邦蜜、追蹤圖片來(lái)源、獲取不同尺寸的圖片亥至；小猿搜題的“拍照搜題”悼沈，利用OCR技術(shù)贱迟，進(jìn)行快速識(shí)別，省去了輸入的繁瑣過(guò)程絮供；淘寶等電商的“拍立淘”衣吠，一方面可以搜同款商品，一方面在無(wú)法準(zhǔn)確描述商品名稱(chēng)的時(shí)候壤靶，也能進(jìn)行搜索缚俏。

圖24 ?圖像搜索

?結(jié)語(yǔ)?

各個(gè)App采用不同的設(shè)計(jì)形式，本質(zhì)上是因?yàn)樗鼈儗?duì)搜索功能的定位不同贮乳。

文章拆解分析了各種設(shè)計(jì)形式忧换，希望能給大家?guī)?lái)一些啟發(fā)。限于篇幅和自身水平向拆，一些內(nèi)容只是稍作介紹亚茬，更深的應(yīng)用還需要大家去探索。

實(shí)踐出真知浓恳。一方面刹缝，我們接觸到一個(gè)App，可以從搜索的具體形式奖蔓，來(lái)反推它的功能定位和應(yīng)用場(chǎng)景赞草，并且思考是否有更優(yōu)的方案，以此提高自己的思辨能力吆鹤。另一方面厨疙，在今后的設(shè)計(jì)實(shí)踐中，我們應(yīng)該從功能出發(fā)疑务，綜合考慮業(yè)務(wù)類(lèi)型沾凄、功能定位、目標(biāo)用戶(hù)知允、應(yīng)用場(chǎng)景撒蟀，選用最合適的形式，提升搜索體驗(yàn)温鸽，讓用戶(hù)搜得更快保屯、更準(zhǔn)、更舒心涤垫。

——韓筱婷《?拆解 | 搜索體驗(yàn)的設(shè)計(jì)套路 》