文章通過多個實例對搜索功能的設計要點進行分析總結，希望此文能夠給你帶來些參考與借鑒。

在之前的好幾篇的文章中，我都提到了設計師如果想完成自我提升，就應該懂產品。但是設計師如何去跨越那條“鴻溝”，學習站在產品的角度去構思設計，我卻很少提及。不是我高冷，故意賣關子，因為我也不是很懂，所以也不敢亂說。

最近我接到一個需求，是給一個后管系統做搜索功能。在做的過程中，我發現了搜索功能對于設計師學習產品可以起到一個很好的引導作用。

搜索功能的作用

搜索功能的出現追根溯源上來說是因為現在一款產品所包含的內容太多了，特別是阿里的產品。

內容越多，用戶的學習成本也越大。用戶使用你的產品，他們希望越簡單越好，越容易上手越好。自己可以快速而又準確的找到期望的功能或內容是用戶的目標。所以從這個角度來說，搜索功能的出現勢在必行。

那么為什么我建議設計師給自己的產品做一個搜索功能呢？因為通過建立搜索功能可以幫助你了解你現在所負責的這款產品里究竟有哪些東西。

其實很多設計師工作的時間也蠻久的，但是對于其產品所包含的內容和功能可能還不能完全吃透。 口口聲聲說要懂得產品，但是連產品里究竟有哪些東西都不知道，其實想想挺無厘頭的。

舉一個例子，你在微信中搜索“邁克爾杰克遜”，搜索結果會出現名稱中帶有邁克爾杰克遜的群聊／好友，關注的公眾號，聊天記錄，還有收藏記錄。當你點開更多，你還會看到關于邁克爾杰克遜的新聞資訊，表情包，音樂，朋友圈等。如果你剛使用微信不久，通過這個搜索結果你就會對微信可以提供的服務有了大致的了解。所以說通過建立搜索功能可以幫助你很好的了解一款產品。

搜索功能的三個階段

知道了搜索功能的必要性，接下來我們真正的開始去進入搜索功能的設計階段。

其實談到搜索功能設計，很多人會想到搜索框設計。搜索框可能是搜索功能一個最主要的展現形式。但是搜索功能里學問遠不止是簡單的搜索框可以概括的，一個完整的搜索功能/流程應該由以下三個方面/階段組成：

1. （打開）搜索框
2. 信息錄入
3. 搜索結果展示

搜索框

搜索框的設計我覺得有三點需要我們注意。

第一，不同的產品對于搜索框的展示方式存在差異。有的產品搜索框直接就放在界面上方，用戶可以直接進入信息錄入階段。

但是有的產品的搜索框需要你點擊放大鏡按鈕彈出。

前者的好處就是用戶隨時看到搜索框，使用起來也方便。而后者的優勢在于占據更少的空間，適合實現產品迭代期的搜索功能需求。

例如，在工作中我們會經常遇到突發奇想的領導，他們哪天一開心拍板說，不如我們在這個界面里加一個搜索功能吧。而這個界面可能已經放不下一個搜索框了，所以只能放一個搜索框的入口——放大鏡圖標。

第二，用戶需要查找的內容可能屬于不同的類別。以UI中國為例，用戶可能需要查找的是一位設計師，一篇文章或者一個插畫作品。在這種情況下，我們需要在搜索框的左邊給用戶提供了一個下拉列表給他們去選擇查找期望的內容類別。

當然并不一定非要放在搜索框左邊，微信這種分類樣式也很出彩。

最后一個需要我們注意的是搜索框的設計風格應該和產品里其他的輸入框保持一致，不能你這里的輸入框帶有圓角，而那里的是直角。這種比較低級的錯誤我們不要犯。

信息錄入

信息錄入目前來說最常見的就是文字錄入，不過現在我們也開始看到新興的錄入方式：語音錄入和圖片錄入。

語音錄入我們最熟悉的產品就是一些音樂播放軟件還有外語詞典，比如qq音樂或者網易云音樂。用戶想聽一首歌，可以直接輸入歌曲名，但是不知道歌名的情況下，可以通過語音的形式完成歌曲信息的錄入。

而使用圖片完成信息錄入的一個比較典型的例子就是淘寶的拍立淘，用戶可以拍下心儀產品的照片，系統就會給你匹配相似的商品，非常方便。從這點來看，設計師必須要時刻掌握最新的科技信息，要不然很容易就被淘汰。

我們可以看到很多產品的搜索功能都為用戶提供了搜索記錄和熱門搜索這兩個服務。有的搜索記錄和熱門搜索都是通過下拉列表的樣式來實現的。例如知乎

但是淘寶和京東選擇的卻是另一種布局方式。這種布局方式可以展示更多的信息。這迎合了電商產品的一個目標，但是無法完成單條記錄的刪減，這在我看來影響不是很大。

此外為了更方便用戶操作，我們還可以在用戶錄入階段給用戶以自動提示。這樣可以節省用戶的操作時間，避免打錯字。

搜索結果

搜索結果在我看來最難的一點就是如何展示不同類型和級別的內容。例如，你在支付寶里搜索賬單，搜索出來的結果包括賬單相關的應用，生活號和資訊。為了進行區分，級別更高的應用和生活號我們會加一個圖標展示。

當然用戶還可以通過tab切換的形式選擇合適的內容類別。

有的情況下搜索結果過多，而用戶又沒有時間一個個的去看。我們可以引入篩選器來幫助用戶在短時間內找到期望的內容，不要花時間去翻頁或者滑動查找。

剛才說的都是搜索結果過多的情況下應該怎么辦。我們還應該考慮的是搜索結果為零的時候，我們如何給用戶設計合適的空頁面。

現在一些搜索結果是通過加載一個新的頁面來展示的，如果我們不給用戶說清楚。用戶會誤以為是網絡原因導致頁面加載失敗而不是搜索不到你想要的商品。所以空頁面設計的一個重點要向用戶解釋清楚原因，讓用戶知道為什么沒有加載出信息。

總結

以上就是我對搜索功能的一些總結，肯定還有很多知識點沒有涉及到，希望各位看完以后能夠有所收獲，多提意見。

#專欄作家#

王M爭，人人都是經理專欄作家，資深互聯網人。

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

題圖來自 Pexels，基于 CC0 協議