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

前言

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

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

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

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

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

搜索功能設計

1. 搜索存在的意義

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

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

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

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

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

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

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

無論你的訴求模糊或者精確，鍵入的內容精準亦或雜亂，優秀的搜索功能應該給你一個滿意的結果。

2. 搜索入口的設計

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

1）底部 Tab 欄

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

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

Tab 欄搜索入口只適合對搜索需求極高或者搜索已經成為核心流量入口的產品。

2）頂部搜索欄

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

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

① 圖標

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

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

② 占位符

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

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

③ 按鈕

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

④ 選擇器

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

3）放大鏡搜索圖標

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

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

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

4）隱藏式搜索入口

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

3. 常見的搜索方式

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

文字搜索是最常見的形式。語音搜索多用于老弱群體，通常這部分群體存在不識字，不會操作智能手機的情況；其次適用于車載產品或導航產品，處于駕駛狀態的用戶對于語音搜索的需求要遠高于文字搜索。

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