本文作者將從用戶訴求、信息層級、界面表現三個層次上，試圖對搜索和篩選兩者的邊界進行理清，并分別給出一些設計切入點。

一、問題產生

一次設計評審會上，作為設計師的我們和研發方針對「搜索和篩選到底是不是一回事？」這一問題產生了認知差異。核心分歧點在于：研發哥哥認為從數據層面來講，搜索和篩選是一回事。而從用戶的感知來看，我們認為兩者是不同的。

剖析字面意：搜索是尋求，搜查，發現之意；而篩選則是對分離的兩種或兩種以上物質按照某種特性進行選擇的操作過程。顯而易見，兩者性質不同。而在產品設計中，兩者的差異從哪些細節中體現呢？

本文中，筆者欲從用戶訴求、信息層級、界面表現三個層次上，試圖對兩者的邊界進行理清，并分別給出一些設計切入點。以期在今后的設計中，對同類問題建立更為清晰的判斷和思考。

二、用戶訴求上的異同

無論是搜索還是篩選，用戶無非想要從海量信息中獲取到自己想要的信息，只是結果的細粒度不同，它可以是一類信息，也可以是某一個精確的信息點。因此，兩個功能背后用戶訴求的細粒度有精確和模糊之別，這決定了用戶與系統的交互方式，以及功能的選擇。如想吃 「零食」和想吃「德芙榛仁葡萄干巧克力」就是兩個不同細粒度的查詢需求。

當想要找的內容清晰具體，用戶一般通過鍵入關鍵詞（數據輸入）的方式搜索。而當用戶游離在模糊的區間時，通常使用到篩選功能來聚焦。通過瀏覽過濾器（Filter）所提供的信息，逐級選擇出想要的內容。

三、信息層級上的異同

從產品的使命來看，兩個功能都是為了幫助用戶查詢。而從信息組織的層級來講，當產品需要展示無規律性、多而雜的信息時，系統提供搜索功能以供用戶快速觸達，檢索詞由用戶指定。

如前面提到，篩選從信息科學的角度來看是瀏覽的一種方式，當信息有統一且清晰的分類時，系統依據合理的分類為用戶提供過濾機制，減少眼前可瀏覽的信息量，讓用戶在一個或多個條件下逐步獲取到想要的信息。

四、界面表現上的異同

界面表現屬于行為層，行為層由心理層決定。回到第一部分提到的用戶訴求，訴求的強弱決定了搜索和篩選兩個功能點在界面中的比重與布局。

如出行類、問答社區類應用，用戶的查詢訴求就相對強烈。而微信在即時通訊和搜索兩個功能點的權衡，就強調即時聊天而隱藏掉了搜索框。這個典型的例子將搜索功能降弱了一個優先級。分類屬于一種廣義的篩選，像電商的分類導航在界面中的比重較高且位于界面重要的位置。

這里所謂的比重，其實是界面上的相對概念。因此，作為交互設計師，初步整理需求后，依據產品定位明確劃分出搜索和篩選兩個功能相較于其他功能點的優先級，以規劃界面的比重與布局。

五、判斷矩陣

在技術保障的前提下，交互設計師可通過以下矩陣的不同維度對兩個功能的設計進行預判：

六、設計切入點

理清邊界的目的是為了構建合理、友好的搜索與篩選流程。如何做呢？其核心點是力求高效。以下分別是搜索和篩選功能在設計中可以去提升體驗的切入點：

1. 搜索

根據矩陣對兩個功能進行初步判斷后，交互設計師需要與利益相關者進行密切溝通。結合用戶需求和開發難度，對以下細分功能點進行取舍，最終搭建出一套友好的搜索流程：

• 歷史搜索
• 熱門與推薦搜索
• 預加載（猜你喜歡、預設文案）
• 自動填充
• 模糊匹配（智能糾錯、拼音與同義詞匹配）
• 分類搜索

2. 篩選

篩選部分的設計應把重點放在篩選類目邏輯關系的梳理上。在這一前提下匹配相應的篩選控件，深入思考以下三點：

篩選類目和篩選值的設定是否符合用戶預期

• 合理的分類
• 具有預測性
• 避免晦澀難懂的文案
• 突出優先級
• 界定篩選值的邊界

控件的選擇是否合理

除了最常見的時間篩選器、下拉列表篩選外，標簽、開關、tab/卡片、滑塊（slider）、步進控件（stepper）也常被應用于篩選功能。設計師依據篩選類目和篩選值的屬性，將用戶需求與篩選控件進行匹配。

筆者僅梳理了典型場景和對應的控件。實際情況中，設計師應根據個性化的業務需求加以分析補充。

多個篩選項間的聯動關系

當篩選項是多維度的時候，需考慮篩選項間的聯動關系。并且在篩選的過程中給予用戶及時的反饋。

• 包含關系
• 遞進關系
• 并列關系
• 互斥關系

小結

以上就是筆者關于搜索與篩選功能的一些思考。通過對本文的閱讀，希望今后進行搜索和篩選功能的相關設計時，能夠對兩者建立清晰的判斷，并結合場景深入思考，設計出合理高效的搜索、篩選流程。

歡迎關注順豐科技用戶體驗設計部公眾號：「SFUED」

圖片素材作者：Arthur Arapov

「篩選功能與搜索的細節設計」

• 《交互基礎小課堂！全面的篩選功能設計總結》
• 《如何設計更高效的篩選器？來看網易設計師的總結！》
• 《如何讓搜索框的體驗更好？我總結了這些設計套路！》