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

前言

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

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

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

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

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

搜索功能設(shè)計

1. 搜索存在的意義

對于架構(gòu)比較簡單的產(chǎn)品來說，通過列表、圖標、文字等示符就能找到目標。當應用界面的內(nèi)容過多，過多的示符成為了干擾項，使用戶很難僅通過視覺找到目標。

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

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

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

站在用戶視角，我會在什么時候使用搜索？以下總結(jié)了幾個日常場景：

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

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

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

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

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

1）底部 Tab 欄

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

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

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

2）頂部搜索欄

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

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

① 圖標

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

同理，網(wǎng)易云音樂的搜索圖標方便用戶對當下聽到的歌曲進行識別，高德地圖的語音圖標方便駕駛中的司機更方便地描述指令。同花順的圖片（識別）圖標支持用戶從其他券商軟件中導入股票，方便遷移。

② 占位符

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

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

③ 按鈕

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

④ 選擇器

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

3）放大鏡搜索圖標

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

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

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

4）隱藏式搜索入口

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

3. 常見的搜索方式

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

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

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