本文作者將從用戶訴求、信息層級、界面表現(xiàn)三個層次上，試圖對搜索和篩選兩者的邊界進(jìn)行厘清，并分別給出一些設(shè)計切入點。enjoy~

1. 問題產(chǎn)生

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

剖析字面意：搜索是尋求，搜查，發(fā)現(xiàn)之意；而篩選則是對分離的兩種或兩種以上物質(zhì)按照某種特性進(jìn)行選擇的操作過程。顯而易見，兩者性質(zhì)不同。而在產(chǎn)品設(shè)計中，兩者的差異從哪些細(xì)節(jié)中體現(xiàn)呢？

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

2. 用戶訴求上的異同

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

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

3. 信息層級上的異同

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

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

4. 界面表現(xiàn)上的異同

界面表現(xiàn)屬于行為層，行為層由心理層決定?；氐降谝徊糠痔岬降挠脩粼V求，訴求的強弱決定了搜索和篩選兩個功能點在界面中的比重與布局。

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

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

5. 判斷矩陣

在技術(shù)保障的前提下，交互設(shè)計師可通過以下矩陣的不同維度對兩個功能的設(shè)計進(jìn)行預(yù)判：

6. 設(shè)計切入點

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

6.1 搜索

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

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

6.2 篩選

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

（1）篩選類目和篩選值的設(shè)定是否符合用戶預(yù)期

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

（2）控件的選擇是否合理

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

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

（3）多個篩選項間的聯(lián)動關(guān)系

當(dāng)篩選項是多維度的時候，需考慮篩選項間的聯(lián)動關(guān)系。并且在篩選的過程中給予用戶及時的反饋。

• 包含關(guān)系
• 遞進(jìn)關(guān)系
• 并列關(guān)系
• 互斥關(guān)系

?小結(jié)

以上就是筆者關(guān)于搜索與篩選功能的一些思考。通過對本文的閱讀，希望今后進(jìn)行搜索和篩選功能的相關(guān)設(shè)計時，能夠?qū)烧呓⑶逦呐袛?，并結(jié)合場景深入思考，設(shè)計出合理高效的搜索、篩選流程。

作者：SF_UED，順豐科技用戶體驗設(shè)計部，簡稱SFUED （SF. Tech User Experience Design）是順豐科技的核心設(shè)計團(tuán)隊，負(fù)責(zé)順豐相關(guān)產(chǎn)品的用戶體驗設(shè)計與研究。微信公眾號：SFUED

本文由 @SF_UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議