搜尋介面設計思考
你有沒有曾思考過這樣一個問題：為什麼搜尋框總是在頂部而輸入框卻總在下方？針對這個問題，作者將自己的思考整理如下。
Quora上有一個很有趣的問題：為什麼搜尋框總是在頂部而輸入框卻總在下方？
有設計師給出了一些解答，譬如搜尋框應易尋、大部分人會首先使用搜索等。而我認為，在功能模組眾多，資訊架構複雜的當下，搜尋這一元件的重要性將愈發突出。
在近期參與的產品中，我經歷了多個搜尋介面的設計，藉此機會，整理一下搜尋設計的一些思路。
一、常用搜索元件分解
入口
從左至右：微博 谷歌 唯物
- 獨立標籤頁 微博9.0改版中，原本用於發微博的標籤頁中間位置改為“發現”頁，這一改動將內容產生權重降低，內容消費權重上升。發現標籤頁正是獨立標籤頁型別的搜尋入口，這一形式適用於坐擁龐大內容的成熟SNS產品，例如抖音、推特也使用了此樣式，根據產品的不同，搜尋標籤頁的架構也各有不同；
- 搜尋框式 除了百度和谷歌，一些資源聚合類網站依然使用此樣式，譬如圖片分享網站Flickr。在寸土寸金的移動端，搜尋框一般會搭配推薦內容出現；
- icon式 搜尋功能需要較好的功能可見性，但不代表它需要佔據較高視覺權重，此外，“放大鏡”是一個成熟而準確的意符，作為icon，使用者很容易理解“這裡可以進行搜尋”這一含義。當你希望提供搜尋功能，又不想打破介面沉浸感時，在右上角提供一個icon作為入口會是較好的選擇。
中間頁
使用者準備輸入時展開的臨時介面，常見於移動端，桌面端多為下拉選單。
左：美團 右：唯物
- 歷史記錄 有些產品中也會以“上次使用項”呈現；
- 熱門推薦 當你需要引導使用者時，推薦項是一個較好的互動方式。此外，歷史記錄和熱門推薦常組合使用。
引導語
用於揭示搜尋結果。
從左至右：推特 三星Bixby 淘寶
- 功能頁本身反映 推特的發現頁會根據使用者熱點進行模糊推薦：“這會是你想搜尋的內容嗎？”
- 中間頁展現 表面上看，中間頁與功能頁沒有太大區別。實際上兩者不同主要在互動邏輯上，中間頁是搜尋時產生的臨時頁面，而功能頁則是獨立模組。
- 文案 主要有兩種方式，一種是使用引導語鼓勵使用者使用搜索。另一種則是根據使用者資料推斷使用者可能感興趣的搜尋目標，淘寶、網易雲音樂都使用了這一形式。
搜尋中
左：谷歌 右：今日頭條
- 搜尋聯想/即時建議；
- 過渡動畫 搜尋通常需要較長響應時間，可以在搜尋過程中新增過渡動畫。
結果呈現
大部分app會將多種方式組合使用，這裡只需要一個釘釘的結果頁作為例子就可以了
釘釘搜尋結果頁
- 多維度展示；
- 通過篩選導航；
- 關鍵字高亮；
- 結果糾錯（模糊匹配）。
順便一提，釘釘中使用者輸入的同時會動態呈現搜尋結果。也就是說，它的中間頁和結果頁相同，在下文將會分析此功能。
二、實際案例
在專案中，搜尋功能的設計常包含多個元素複合使用的情況，這也是其難點所在，而解決方案仍然是基於使用情景進行設計。
下面以我近期產品（教育類）為例，探討一下設計思路。（考慮保密問題，與實際產品有一定出入）
視訊模組搜尋介面設計
在中後臺產品的搜尋設計中，難點主要在搜尋和篩選的優先順序取捨，我們要做的是讓使用者快速完成目標任務。此模組提供視訊內容給教師用於課堂展示，一個常見的情況是：教學視訊的標題通常以數字進行分類，如“第一課”、“No.3+課程標題”等形式，這也意味著，作為使用者的教師未必能記得搜尋目標名稱。
因此，此介面篩選優先於搜尋，而軟體本身可讀取當前班級的科目資訊，預先進行一級篩選，此外，“上次使用”功能相當於模糊檢索結果，大概率減少使用者操作路徑。搜尋結果的呈現則使用關鍵字高亮的方式，易於閱讀。
現實中龐大的資料、檔案往往伴隨著複雜而有序的排列方式。譬如，電視劇中表現警察檢查檔案的場景時，會展現一大排資料架，各類檔案按照時間或A-Z的順序排列，警察們從架子上逐個挑選，抱下一堆資料反覆檢視。
然而在軟體中，使用者不需要做這樣的事情，他們往往很明確自己的目標：要麼是資料的名稱，要麼是資料相關者——總之，使用者所希望的是他們在搜尋框中輸入這樣一個關鍵詞，就直接得到想要的結果，而翻找資料的工作，應當由程式來完成。
資料檢索頁的條件篩選
此介面中，搜尋框的大小反映了其優先順序。而條件篩選未必沒有意義——它以下拉選單的形式呈現，當搜尋框中無內容時，它承擔模糊檢索的功能，在搜尋時，它承擔中間頁的功能，而當用戶收起篩選選單時，意味著搜尋條件被清空，使用者可以再次搜尋所有內容。
篩選元件中標籤的互動
模糊檢索這一訴求也應得到滿足。資料模組與視訊模組不同之處在於：我們難以預測使用者檢索內容，並依此簡化操作。因此我採用“熱門”作為二級標籤列表，將常用類目作為內容，當用戶點選“熱門”標籤中物件（乙瑛碑）時，搜尋該物件並高亮顯示結果，採用提供線索的方式進行篩選模組設計。
最後，以國民應用微信的搜尋功能分析作為結尾。
微信搜尋中間頁
點選右上角搜尋icon後，使用者便打開了微信搜尋中間頁。可以看到此頁採用標籤頁形式劃分了六個模組，使用者點選後可以搜尋特定模組，另一方面，這些模組名稱也起到引導語的作用，揭示搜尋結果。
搜尋中&搜尋結果頁面
搜尋中與搜尋結果是同一頁面，在使用者輸入的同時動態顯示結果，並以多維度分類展現。這一搜索方式適用於搜尋本地資源（內部搜尋），畢竟外部搜尋需要較長響應時間，QQ、釘釘也採用了類似的策略，順便一提，QQ採用了同時即時顯示內部和外部結果的策略，但外部結果載入耗時較長，因此放在內部結果下方。
最下方的“搜一搜”則是微信的外部搜尋入口，此外，我們知道“發現”標籤頁中也有搜一搜的入口，並且，此處的搜一搜中間頁除了六個標籤頁之外，還有微信熱點這一功能。
“發現”標籤頁中的搜一搜
從進入微信到搜一搜結果有兩種路徑
從程式邏輯上來說，他們都是搜一搜模組，只不過有不同方式可以到達，但對使用者來說，這是兩種不同的功能。搜尋按鈕中，搜一搜結果是對內部搜尋的補充，不將多餘的內容呈現給使用者，保持克制，而“發現”中的搜一搜，則是將微信龐大的內容展現給使用者。
參考文章：
《深入理解搜尋和篩選功能在產品設計中的異同》
本文由 @SekiM 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議