你有沒有曾思考過這樣一個問題：為什么搜索框總是在頂部而輸入框卻總在下方？針對這個問題，作者將自己的思考整理如下。

Quora上有一個很有趣的問題：為什么搜索框總是在頂部而輸入框卻總在下方？

有設計師給出了一些解答，譬如搜索框應易尋、大部分人會首先使用搜索等。而我認為，在功能模塊眾多，信息架構復雜的當下，搜索這一組件的重要性將愈發突出。

在近期參與的產品中，我經歷了多個搜索界面的設計，借此機會，整理一下搜索設計的一些思路。

一、常用搜索組件分解

入口

從左至右：微博 谷歌 唯物

1. 獨立標簽頁 微博9.0改版中，原本用于發微博的標簽頁中間位置改為“發現”頁，這一改動將內容產生權重降低，內容消費權重上升。發現標簽頁正是獨立標簽頁類型的搜索入口，這一形式適用于坐擁龐大內容的成熟SNS產品，例如抖音、推特也使用了此樣式，根據產品的不同，搜索標簽頁的架構也各有不同；
2. 搜索框式 除了百度和谷歌，一些資源聚合類網站依然使用此樣式，譬如圖片分享網站Flickr。在寸土寸金的移動端，搜索框一般會搭配推薦內容出現；
3. icon式 搜索功能需要較好的功能可見性，但不代表它需要占據較高視覺權重，此外，“放大鏡”是一個成熟而準確的意符，作為icon，用戶很容易理解“這里可以進行搜索”這一含義。當你希望提供搜索功能，又不想打破界面沉浸感時，在右上角提供一個icon作為入口會是較好的選擇。

中間頁

用戶準備輸入時展開的臨時界面，常見于移動端，桌面端多為下拉菜單。

左：美團? 右：唯物

1. 歷史記錄 有些產品中也會以“上次使用項”呈現；
2. 熱門推薦 當你需要引導用戶時，推薦項是一個較好的交互方式。此外，歷史記錄和熱門推薦常組合使用。

引導語

用于揭示搜索結果。

從左至右：推特 三星Bixby 淘寶

1. 功能頁本身反映 推特的發現頁會根據用戶熱點進行模糊推薦：“這會是你想搜索的內容嗎？”
2. 中間頁展現 表面上看，中間頁與功能頁沒有太大區別。實際上兩者不同主要在交互邏輯上，中間頁是搜索時產生的臨時頁面，而功能頁則是獨立模塊。
3. 文案 主要有兩種方式，一種是使用引導語鼓勵用戶使用搜索。另一種則是根據用戶數據推斷用戶可能感興趣的搜索目標，淘寶、網易云音樂都使用了這一形式。

搜索中

左：谷歌? 右：今日頭條

1. 搜索聯想/即時建議；
2. 過渡動畫 搜索通常需要較長響應時間，可以在搜索過程中添加過渡動畫。

結果呈現

大部分app會將多種方式組合使用，這里只需要一個釘釘的結果頁作為例子就可以了

釘釘搜索結果頁

1. 多維度展示；
2. 通過篩選導航；
3. 關鍵字高亮；
4. 結果糾錯（模糊匹配）。

順便一提，釘釘中用戶輸入的同時會動態呈現搜索結果。也就是說，它的中間頁和結果頁相同，在下文將會分析此功能。

二、實際案例

在項目中，搜索功能的設計常包含多個元素復合使用的情況，這也是其難點所在，而解決方案仍然是基于使用情景進行設計。

下面以我近期產品（教育類）為例，探討一下設計思路。（考慮保密問題，與實際產品有一定出入）

視頻模塊搜索界面設計

在中后臺產品的搜索設計中，難點主要在搜索和篩選的優先級取舍，我們要做的是讓用戶快速完成目標任務。此模塊提供視頻內容給教師用于課堂展示，一個常見的情況是：教學視頻的標題通常以數字進行分類，如“第一課”、“No.3+課程標題”等形式，這也意味著，作為使用者的教師未必能記得搜索目標名稱。

因此，此界面篩選優先于搜索，而軟件本身可讀取當前班級的科目信息，預先進行一級篩選，此外，“上次使用”功能相當于模糊檢索結果，大概率減少用戶操作路徑。搜索結果的呈現則使用關鍵字高亮的方式，易于閱讀。

現實中龐大的資料、檔案往往伴隨著復雜而有序的排列方式。譬如，電視劇中表現警察檢查檔案的場景時，會展現一大排資料架，各類文件按照時間或A-Z的順序排列，警察們從架子上逐個挑選，抱下一堆資料反復查看。

然而在軟件中，用戶不需要做這樣的事情，他們往往很明確自己的目標：要么是資料的名稱，要么是資料相關者——總之，用戶所希望的是他們在搜索框中輸入這樣一個關鍵詞，就直接得到想要的結果，而翻找資料的工作，應當由程序來完成。

資料檢索頁的條件篩選

此界面中，搜索框的大小反映了其優先級。而條件篩選未必沒有意義——它以下拉菜單的形式呈現，當搜索框中無內容時，它承擔模糊檢索的功能，在搜索時，它承擔中間頁的功能，而當用戶收起篩選菜單時，意味著搜索條件被清空，用戶可以再次搜索所有內容。

篩選組件中標簽的交互

模糊檢索這一訴求也應得到滿足。資料模塊與視頻模塊不同之處在于：我們難以預測用戶檢索內容，并依此簡化操作。因此我采用“熱門”作為二級標簽列表，將常用類目作為內容，當用戶點擊“熱門”標簽中對象（乙瑛碑）時，搜索該對象并高亮顯示結果，采用提供線索的方式進行篩選模塊設計。

最后，以國民應用微信的搜索功能分析作為結尾。

微信搜索中間頁

點擊右上角搜索icon后，用戶便打開了微信搜索中間頁?？梢钥吹酱隧摬捎脴撕烅撔问絼澐至肆鶄€模塊，用戶點擊后可以搜索特定模塊，另一方面，這些模塊名稱也起到引導語的作用，揭示搜索結果。

搜索中&搜索結果頁面

搜索中與搜索結果是同一頁面，在用戶輸入的同時動態顯示結果，并以多維度分類展現。這一搜索方式適用于搜索本地資源（內部搜索），畢竟外部搜索需要較長響應時間，QQ、釘釘也采用了類似的策略，順便一提，QQ采用了同時即時顯示內部和外部結果的策略，但外部結果加載耗時較長，因此放在內部結果下方。

最下方的“搜一搜”則是微信的外部搜索入口，此外，我們知道“發現”標簽頁中也有搜一搜的入口，并且，此處的搜一搜中間頁除了六個標簽頁之外，還有微信熱點這一功能。

“發現”標簽頁中的搜一搜

從進入微信到搜一搜結果有兩種路徑

從程序邏輯上來說，他們都是搜一搜模塊，只不過有不同方式可以到達，但對用戶來說，這是兩種不同的功能。搜索按鈕中，搜一搜結果是對內部搜索的補充，不將多余的內容呈現給用戶，保持克制，而“發現”中的搜一搜，則是將微信龐大的內容展現給用戶。

參考文章：

《深入理解搜索和篩選功能在產品設計中的異同》

本文由 @SekiM 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議