為了讓用戶(hù)可以快速找到自己想要的內(nèi)容，產(chǎn)品的搜索功能也就應(yīng)運(yùn)而生了，那么，怎么從零開(kāi)始設(shè)計(jì)產(chǎn)品的搜索功能呢？本篇文章里，作者就對(duì)搜索功能的設(shè)計(jì)進(jìn)行了設(shè)計(jì)拆解，一起來(lái)看看吧。

前言

發(fā)展到一定階段的產(chǎn)品都不可避免地變得復(fù)雜。對(duì)于功能復(fù)雜化的問(wèn)題，產(chǎn)品會(huì)通過(guò)導(dǎo)航欄、菜單欄以及更多的卡片去進(jìn)行收納，方便讓用戶(hù)更快地找到想要的功能。

但僅僅把功能分門(mén)別類(lèi)放到不同的 “收納盒” 中還不夠，產(chǎn)品需要一種更直接的方式，方便讓用戶(hù)快速找到自己想要的內(nèi)容，產(chǎn)品內(nèi)搜索應(yīng)運(yùn)而生。

在如今的互聯(lián)網(wǎng)產(chǎn)品中，搜索已經(jīng)成為了非常重要的一個(gè)功能模塊。一個(gè)搜索框加上一個(gè)確定按鈕，用戶(hù)就能直達(dá)這個(gè)產(chǎn)品最偏遠(yuǎn)的角落，也正因如此，搜索也成為了產(chǎn)品重要的流量入口之一。

搜索功能的體驗(yàn)反映出產(chǎn)品是否具有用戶(hù)意識(shí)，好的產(chǎn)品通過(guò)搜索能夠幫助用戶(hù)快速找到結(jié)果，節(jié)約時(shí)間成本。在內(nèi)容算法的加持下，搜索還能成為一個(gè)可觀的流量入口。如同小紅書(shū)改變了很多人（包括我）搜索的習(xí)慣，我現(xiàn)在更傾向于去小紅書(shū)搜索而不是百度。另一方面，搜索也是用戶(hù)數(shù)據(jù)的重要來(lái)源。在設(shè)計(jì)好數(shù)據(jù)埋點(diǎn)的前提下能夠?yàn)楹罄m(xù)的更新迭代提供更多的行為數(shù)據(jù)。

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

互聯(lián)網(wǎng)產(chǎn)品的搜索功能注定其無(wú)法像谷歌搜索兼具美感和力度，在設(shè)計(jì)功能的時(shí)候需要考慮業(yè)務(wù)、功能和目的，去打造自身的產(chǎn)品特色。同時(shí)也需要關(guān)注在激活、鍵入和結(jié)果呈現(xiàn)三個(gè)搜索階段的設(shè)計(jì)細(xì)節(jié)，這關(guān)乎著用戶(hù)搜索的綜合感受。

搜索功能設(shè)計(jì)

1. 搜索存在的意義

對(duì)于架構(gòu)比較簡(jiǎn)單的產(chǎn)品來(lái)說(shuō)，通過(guò)列表、圖標(biāo)、文字等示符就能找到目標(biāo)。當(dāng)應(yīng)用界面的內(nèi)容過(guò)多，過(guò)多的示符成為了干擾項(xiàng)，使用戶(hù)很難僅通過(guò)視覺(jué)找到目標(biāo)。

產(chǎn)品一般有兩種做法去解決這個(gè)問(wèn)題，一是篩選，二是搜索。

篩選可以有效幫助用戶(hù)縮小查找范圍，比如電商產(chǎn)品中的 “萬(wàn)人團(tuán)”、“聚劃算”，解決掉了用戶(hù)對(duì)價(jià)格的猶豫環(huán)節(jié)。暗示帶有此類(lèi)標(biāo)簽的商品就是最便宜的，無(wú)腦買(mǎi)就對(duì)了。同理，音樂(lè)軟件中的榜單功能，券商軟件中的選股功能，本質(zhì)上都是在幫用戶(hù)做篩選。

搜索的優(yōu)勢(shì)在于它能直達(dá)目標(biāo)。在當(dāng)下的產(chǎn)品設(shè)計(jì)中，搜索疊加篩選已經(jīng)成為了常規(guī)的做法，這使得搜索的整體優(yōu)勢(shì)和流量在不斷地放大。對(duì)于有明確需求的用戶(hù)，搜索的效率已經(jīng)遠(yuǎn)比產(chǎn)品中的導(dǎo)航欄和欄目高，匹配結(jié)果的精準(zhǔn)度也更高。

站在用戶(hù)視角，我會(huì)在什么時(shí)候使用搜索？以下總結(jié)了幾個(gè)日常場(chǎng)景：

• 在一家咖啡廳想給女朋友拍照，于是打開(kāi)小紅書(shū)搜索關(guān)鍵詞 “咖啡廳拍照技巧”
• 路上不知道該換乘哪條地鐵，該從哪個(gè)出口出站，于是打開(kāi)高德搜索目的地
• 打開(kāi)美團(tuán)想要買(mǎi)菜，但找不到對(duì)應(yīng)功能，于是搜索 “買(mǎi)菜” 找到了相近的功能
• 發(fā)現(xiàn)某只股票漲停了，通過(guò)搜索代碼直接找到了當(dāng)天的漲停股
• 想買(mǎi)秋裝，但是不了解穿搭和款式，在淘寶搜索 “男裝”、“穿搭” 幾個(gè)關(guān)鍵詞

有時(shí)候需求是明確的，比如搜索拍照技巧，搜索目的地；需求有時(shí)是模糊的，比如搜索穿搭等。與之對(duì)應(yīng)的，搜索時(shí)鍵入的內(nèi)容是精準(zhǔn)或雜亂的，存在不確定性。對(duì)我來(lái)說(shuō)，搜索的意義在于：

無(wú)論你的訴求模糊或者精確，鍵入的內(nèi)容精準(zhǔn)亦或雜亂，優(yōu)秀的搜索功能應(yīng)該給你一個(gè)滿意的結(jié)果。

2. 搜索入口的設(shè)計(jì)

搜索入口是我們直接與搜索功能發(fā)生交互的位置。許多 App 對(duì)于搜索的設(shè)計(jì)很簡(jiǎn)單，搜索框加上搜索按鈕就構(gòu)成了前端展示要素。但產(chǎn)品設(shè)計(jì)會(huì)根據(jù)不同的使用場(chǎng)景、功能權(quán)重去判斷搜索入口的位置應(yīng)該放在哪里，樣式應(yīng)該如何設(shè)計(jì)。搜索入口的設(shè)計(jì)主要分為 4 種形式，強(qiáng)度從左到右依次減弱：

1）底部 Tab 欄

將 Tab 欄置于應(yīng)用底部，意味著在用戶(hù)使用場(chǎng)景中搜索行為頻繁發(fā)生，需求十分強(qiáng)烈。將搜索作為獨(dú)立的一級(jí)入口很大程度強(qiáng)化了搜索權(quán)重，也為功能提供了很大的拓展空間。大部分將搜索置于底部 Tab 欄的應(yīng)用，搜索功能都是流量入口。

• 微博：搜索（發(fā)現(xiàn)）入口承載了微博熱搜、熱聊以及熱門(mén)微博欄目
• App Store：搜索入口是主要的產(chǎn)品競(jìng)價(jià)排名廣告收入的來(lái)源之一
• Spotify：搜索入口承載了所有音樂(lè)類(lèi)型的榜單，存在付費(fèi)刷榜的情況

Tab 欄搜索入口只適合對(duì)搜索需求極高或者搜索已經(jīng)成為核心流量入口的產(chǎn)品。

2）頂部搜索欄

將搜索置于頁(yè)面頂部是最常見(jiàn)的方式。這樣做的方式是在視覺(jué)上非常醒目，也符合用戶(hù)的視覺(jué)瀏覽動(dòng)線。同底部 Tab 欄，頂部搜索欄也是產(chǎn)品內(nèi)重要的流量入口。

頂部搜索欄的設(shè)計(jì)是 4 種搜索形式中最復(fù)雜的，它的構(gòu)成包括了搜索欄、占位符、圖標(biāo)等元素。

① 圖標(biāo)

根據(jù)各自不同的業(yè)務(wù)場(chǎng)景，產(chǎn)品搜索框中的圖標(biāo)各有側(cè)重，比如淘寶的掃一掃、拍照?qǐng)D標(biāo)就是為了讓用戶(hù)更便捷地搜索到想要的產(chǎn)品。

同理，網(wǎng)易云音樂(lè)的搜索圖標(biāo)方便用戶(hù)對(duì)當(dāng)下聽(tīng)到的歌曲進(jìn)行識(shí)別，高德地圖的語(yǔ)音圖標(biāo)方便駕駛中的司機(jī)更方便地描述指令。同花順的圖片（識(shí)別）圖標(biāo)支持用戶(hù)從其他券商軟件中導(dǎo)入股票，方便遷移。

② 占位符

除了圖標(biāo)，占位符也是非常重要的功能。在使用電商軟件時(shí)，我們經(jīng)常會(huì)發(fā)現(xiàn)最近搜索的商品、衣物，會(huì)在搜索框中顯示、輪播類(lèi)似的文字，這通常是算法推薦在起作用。

用戶(hù)通過(guò)占位符中的文字廣告進(jìn)行搜索越高頻，那么占位符的商業(yè)價(jià)值也就越高。占位符和推薦算法的的結(jié)合不僅能夠讓搜索框更加個(gè)性化，同時(shí)也能夠提升搜索轉(zhuǎn)化率。

③ 按鈕

為了優(yōu)化用戶(hù)搜索的體驗(yàn)，除了搜索時(shí)鍵盤(pán)自帶的搜索按鈕，在搜索框右側(cè)也會(huì)展示搜索按鈕。從視覺(jué)上，用戶(hù)能快速判斷這是一個(gè)搜索功能；操作上也能和鍵盤(pán)協(xié)同，更便捷地進(jìn)行搜索操作。

④ 選擇器

對(duì)于搜索類(lèi)型和屬性較多的產(chǎn)品，產(chǎn)品的搜索還會(huì)增加前置條件讓用戶(hù)在設(shè)定完成之后進(jìn)行搜索。比如美團(tuán)搜索的地區(qū)選擇，攜程搜索酒店時(shí)的地址選擇等等，可以理解為是篩選和搜索功能的疊加，這樣得出的結(jié)果更加精準(zhǔn)，也有利于提高用戶(hù)的滿意度。

3）放大鏡搜索圖標(biāo)

在產(chǎn)品頂部以 “放大鏡” 樣式的 icon 展示搜索功能，通常意味著當(dāng)前產(chǎn)品或者當(dāng)前頁(yè)面的搜索行為并非特別頻繁。需要用到搜索功能都是剛需，用戶(hù)的操作成本幾乎可以忽略不計(jì)。搜索功能相對(duì)弱化的同時(shí)，導(dǎo)航欄的空間也得以保留，此時(shí)搜索功能應(yīng)讓位給其他更重要的功能導(dǎo)航欄或者功能 icon。

以上圖左側(cè)的證券應(yīng)用漲樂(lè)財(cái)富通為例：在行情功能頁(yè)面，搜索功能的優(yōu)先級(jí)次于功能導(dǎo)航欄。搜索功能以圖標(biāo)的形式展示，導(dǎo)航欄功能是行情功能頁(yè)面的二級(jí)菜單。

而在網(wǎng)易云音樂(lè)App “我的”功能頁(yè)面，最常用的功能是 “我喜歡” 或者歌單功能，搜索的重要性較低，甚至妥協(xié)于整體的 UI 設(shè)計(jì)。頁(yè)面頂部沒(méi)有顯示搜索欄。

4）隱藏式搜索入口

隱藏式的搜索入口幾乎不在任何 App 內(nèi)見(jiàn)過(guò)：一個(gè)功能即便優(yōu)先級(jí)再低也需要曝光而非隱藏。這種設(shè)計(jì)最常見(jiàn)于手機(jī)系統(tǒng)的下拉或上劃交互，喚起后可以搜索手機(jī)內(nèi)的全局應(yīng)用、功能等。

3. 常見(jiàn)的搜索方式

最常見(jiàn)的搜索方式有四種，分別是文本、語(yǔ)音、拍照和掃描（掃一掃）。根據(jù)用戶(hù)不同的使用場(chǎng)景，這四種方式各均能發(fā)揮各自的重要作用。

文字搜索是最常見(jiàn)的形式。語(yǔ)音搜索多用于老弱群體，通常這部分群體存在不識(shí)字，不會(huì)操作智能手機(jī)的情況；其次適用于車(chē)載產(chǎn)品或?qū)Ш疆a(chǎn)品，處于駕駛狀態(tài)的用戶(hù)對(duì)于語(yǔ)音搜索的需求要遠(yuǎn)高于文字搜索。

拍照和掃描功能可拓展的場(chǎng)景更為豐富。在電商產(chǎn)品中可以識(shí)別商品同款，掃描商品條形碼以快速找到對(duì)應(yīng)商品。在識(shí)別領(lǐng)域，比如微信的掃一掃可以掃描出當(dāng)前攝像頭內(nèi)的花草植物和動(dòng)物。通過(guò) OCR 識(shí)別拍攝的圖片也能夠更快地找出圖片中的文字及其他關(guān)鍵信息。