編輯導(dǎo)語：篩選控件能夠有效提升用戶決策效率，本篇文章作者結(jié)合自身經(jīng)驗(yàn)總結(jié)了各類篩選控件的拆解，整理了在移動端中常用篩選控件中的類型、使用場景和設(shè)計(jì)思路，干貨滿滿，感興趣的一起來學(xué)習(xí)一下吧，希望對你有幫助。

“少即是多”是經(jīng)常掛在嘴邊的話題，在設(shè)計(jì)過程中，設(shè)計(jì)師們都會想盡一切辦法去簡化交互流程、組件元素及各種設(shè)計(jì)屬性，讓用戶使用起來更簡單。

當(dāng)產(chǎn)品簡化到一定程度，就必須要面對其不可簡化的復(fù)雜性。

諾曼曾說過 “復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑 ”，如果復(fù)雜性是合理的，我們應(yīng)該學(xué)會如何去管理復(fù)雜，考慮好復(fù)雜的問題在流向用戶后以何種方式處理。

篩選控件就是用戶自行處理復(fù)雜信息的方式之一，只要是符合用戶行為做出的設(shè)計(jì)，將應(yīng)有的復(fù)雜以篩選的形式呈現(xiàn)給用戶，讓其自行決定，用戶反而會樂意接受。

篩選控件的使用頻率非常高，本文根據(jù)筆者對各類篩選控件的拆解及自身經(jīng)驗(yàn)進(jìn)行分總結(jié)，整理了在移動端中常用篩選控件的類型、使用場景以及設(shè)計(jì)思路，幫助大家在設(shè)計(jì)中更好的選擇適合自己產(chǎn)品的篩選控件。

一、現(xiàn)實(shí)生活中的篩選

在日常生活中，我們天天都在跟篩選打交道。

設(shè)想一下，當(dāng)你走進(jìn)超市，在沒有任何分類指示的情況下，看到琳瑯滿目的商品是否會不知所措，答案是肯定的，且不論超市規(guī)模大小、商品的多少，相信沒有任何一個(gè)人愿意在不清楚的情況下花時(shí)間去找一個(gè)很可能不存在的商品，即便這點(diǎn)時(shí)間會很短。

道理還沒說完，大家都感覺自己很懂，可依然逃脫不了如今在各種形形色色的應(yīng)用中找不到自己需要的功能而苦惱，那么這些應(yīng)用又是誰設(shè)計(jì)的呢？答案就是「大多數(shù)人」。

換言之，如果我們能通過標(biāo)識牌、平面圖指引（模糊查找），詢問服務(wù)員、記憶指引（精準(zhǔn)查找），就容易很多，這些指引路徑就完全充當(dāng)了篩選功能，至于通過什么方式，只能根據(jù)人們自身或現(xiàn)場條件自行選擇，能滿足自己的需求即可。在功能繁多、交互流程復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品中也是如此。

二、篩選功能的重要性

1. 篩選的定義

在我們設(shè)計(jì)篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。

篩選，即用戶根據(jù)自身需求、通過一個(gè)或多個(gè)特定條件，在已有的內(nèi)容中快速找到滿足自己當(dāng)前條件的信息，單獨(dú)呈現(xiàn)的同時(shí)、并將未滿足條件的信息暫時(shí)作隱藏處理，以便用戶完成自己的目標(biāo)需求。

篩選也可以稱之為過濾器，是搜索框架的一部分。

這里需要說明一點(diǎn)，篩選不同于搜索，它是系統(tǒng)結(jié)合用戶提出的條件，對內(nèi)容進(jìn)行規(guī)則性的查找，準(zhǔn)確的說，用戶屬于被動，篩選出的結(jié)果在產(chǎn)品側(cè)「精準(zhǔn)」、用戶側(cè)「模糊」。

而搜索則是用戶通過明確的目標(biāo)主動進(jìn)行精準(zhǔn)查找，要么直接找到自己想要的結(jié)果、要么對結(jié)果不滿意，搜索出的結(jié)果在產(chǎn)品側(cè)「模糊」、用戶側(cè)需要「精準(zhǔn)」。

說直接點(diǎn)就是，搜索直接查找出結(jié)果、篩選只是縮小查找范圍（并非絕對，也可以對搜索結(jié)果縮小范圍）。

2. 為什么要使用篩選

在電商應(yīng)用中，如果有目標(biāo)的用戶更多使用的是搜索，那么沒有目標(biāo)的用戶更多使用的則是系統(tǒng)推薦或商品分類，不管是哪種類型的用戶，前面雖然已經(jīng)進(jìn)行過一次范圍縮減，但下一步還是逃不掉要面對的海量商品。

這時(shí)，不給用戶提供選擇上的便利，用戶很可能因?yàn)g覽商品耗時(shí)過長、選擇性困難等原因扭頭就走，即便離轉(zhuǎn)化僅一步之遙，也無法避免用戶流失的問題。

增加篩選功能就能很好解決這個(gè)困局，用戶通過篩選、設(shè)置接近于目標(biāo)需求的條件，縮短查找路徑，就能從海量的商品信息中快速找到符合條件的內(nèi)容，大大降低了用戶的查找成本，節(jié)省了很多查找時(shí)間，用戶體驗(yàn)得到很大程度的提升，由此可見，為什么要使用篩選，不言而喻。

3. 什么時(shí)候使用篩選

1）系統(tǒng)定義篩選需求

方向性的篩選：用戶通過系統(tǒng)提供的多種類型進(jìn)行頻道切換，還會存在多少子級，可定義為一級篩選。例如訂單列表（待支付/待發(fā)貨/待收貨/待評價(jià)），優(yōu)惠券（未使用/已使用/已過期）等，用戶從已有的類型列表中選擇自己所需。

2）用戶自定義篩選需求

精細(xì)化篩選：當(dāng)系統(tǒng)已提供方向性的篩選，用戶依然可從分類篩選出的結(jié)果中進(jìn)一步細(xì)化。例如針對單個(gè)類型的商品列表自定義價(jià)格區(qū)間、發(fā)貨地、品牌…等，也可稱之為二級次篩選，相比一級篩選，其篩選的結(jié)果會更精細(xì)化，也更接近于用戶的真實(shí)需求。

PS：系統(tǒng)定義篩選條件后，配合用戶自定義二次篩選條件以及排序功能，則更容易滿足用戶需求。

三、常見的篩選樣式

1. Tab篩選

Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示，有橫向Tab和縱向Tab兩種，如新聞、視頻類型的應(yīng)用大多使用橫向Tab，通過將不同的內(nèi)容以大的方向、區(qū)塊進(jìn)行分類，便于用戶隨時(shí)切換、篩選出不同的內(nèi)容。

縱向Tab更多則是在電商類應(yīng)用中出現(xiàn)，且會存在多個(gè)子級，例如我們在京東購買「鼠標(biāo)」，則需要在tab分類中依次找到「電腦辦公>外設(shè)產(chǎn)品>鼠標(biāo)」進(jìn)行篩選。

Tab類型主要以大的維度進(jìn)行篩選，所篩選出的結(jié)果可能模糊且信息量極大，如果想要結(jié)果更加精準(zhǔn)，則需配備其他類型的控件進(jìn)行二次篩選。

2. 彈窗式篩選

操作中以蒙層的方式彈出，其他時(shí)候均為隱藏狀態(tài)。彈窗類型的篩選最大的優(yōu)點(diǎn)是占用空間小，僅需一個(gè)入口，能在有限的彈出空間中從多個(gè)維度展示篩選條件，用戶選中或自定義對應(yīng)的篩選項(xiàng)，即可快速篩選出自己想要的信息。

3. 折疊式篩選

介于Tab式與彈窗式之間，篩選條件初始為隱藏狀態(tài)并提供一個(gè)入口。點(diǎn)擊后展開，期間不影響當(dāng)前頁面的任何其他操作且一直處于展示狀態(tài)，需經(jīng)過再次點(diǎn)擊才會將篩選條件隱藏。

4. 高級篩選

基于自定義篩選條件過多，為滿足用戶個(gè)性化需求，點(diǎn)擊后會跳轉(zhuǎn)到新頁面操作多個(gè)條件進(jìn)行篩選。相比前面提到的Tab、彈窗更為復(fù)雜，對篩選的要求較高。

高級篩選適合用在顆粒度很細(xì)的場景，為的是避開其他視覺元素的干擾，讓用戶更專注于當(dāng)前頁面較為復(fù)雜的篩選條件，降低因受其他因素影響而出錯(cuò)的情況。

例如：在選擇汽車時(shí)，需要對服務(wù)、價(jià)格、級別、排量…等各種情況作出非常細(xì)致的選擇，這時(shí)用高級篩選就再合適不過。

5. 篩選、排序組合

篩選、排序組合方式算是商品列表中的標(biāo)配了，尤其在空間資源有限的移動端設(shè)備中，能最大化的將多個(gè)控制條件一次性展示給用戶，在篩選出結(jié)果后再使用排序功能，便于更快找到想要的商品。例如美團(tuán)、餓了么將篩選與排序控件形成組合，極大的提高了用戶篩選的效率。

四、篩選的幾個(gè)維度

1. 單維度

單維度的篩選不管是設(shè)計(jì)還是操作都相對簡單，無需操作確定/下一步按鈕，觸發(fā)篩選條件后會就會更新信息列表，大家最熟悉的訂單系統(tǒng)（待支付、待發(fā)貨、待收貨）即是單維度篩選。

另外，單維度具備短、明、快的特點(diǎn)，為方便用戶識別，單個(gè)標(biāo)簽一般不超過5個(gè)文字，且語義明確，用戶不用任何思考就能快速理解。

2. 多維度

當(dāng)產(chǎn)品中的屬性過多，使用單維度篩選不僅會降低篩選結(jié)果的精準(zhǔn)度，還可能會導(dǎo)致用戶因反復(fù)/重復(fù)無用的操作而產(chǎn)生挫敗感，已無法滿足用戶的需求。

這時(shí)，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內(nèi)容。多維度篩選條件一般以按鈕（單選/多選）、輸入框?yàn)橹?，有些還會以滑塊來控制數(shù)據(jù)范圍。

設(shè)定好篩選條件需通過重置、確認(rèn)操作按鈕，用來清空篩選條件或進(jìn)入下一步。在移動端，因屏幕空間有限，一級篩選數(shù)量最好不要超過9個(gè)，如果太多，建議進(jìn)行整合或并入二級篩選。

3. 多等級（單維度/多維度）

在多級篩選控件中，可以把當(dāng)前篩選條件的上一級看成是篩選分類菜單，每個(gè)等級中可包含一個(gè)或多個(gè)單維度/多維度的篩選條件，移動端最多不超過3個(gè)等級。
從表面看，多級篩選與多維度篩選其本質(zhì)是一樣的，但多級篩選會存在下一級或再下一級，而多維度會將所有篩選條件平鋪在空間中。當(dāng)單維度、多維度篩選還是無法滿足用戶需求，多等級就能作為最好的延伸。

五、篩選功能設(shè)計(jì)準(zhǔn)則

1. 迎合用戶需求

在設(shè)計(jì)篩選之前，需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預(yù)期等，有了清晰的用戶需求，設(shè)計(jì)出來的篩選才能更好的幫助用戶滿足其需求。

以「餓了么」用戶點(diǎn)餐為例，使用點(diǎn)餐服務(wù)的用戶類型雖然很多，不過主力還是來自于辦公室白領(lǐng)、宅男/女這兩大用戶群體，有目標(biāo)的用戶會從搜索、收藏、訂單記錄等入口直接去購買。

但絕大多數(shù)用戶因長期點(diǎn)外賣的原因，“吃什么”就成了最大的問題，這時(shí)如果用戶還要“吃”，就必須得使用篩選功能，從Tab分類（模糊）到彈窗式篩選（精準(zhǔn)）再配合排序功能滿足自己的點(diǎn)餐需求，得出結(jié)論：

1. 一群不知道“吃什么”的白領(lǐng)、宅男/女用戶；
2. 需要使用篩選功能解決自己“吃什么”的問題；
3. 問題很快得到解決后，對結(jié)果及使用體驗(yàn)非常滿意。

上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實(shí)的需求就是找到滿意的商品去下單。

站在產(chǎn)品的角度并非如此，最應(yīng)該解決的應(yīng)該是效率的問題，這才是篩選的終極目標(biāo)，不管用戶花多長時(shí)間，筆者相信都能找到想要的，但所花費(fèi)的時(shí)間成本越少，滿意度就會越高，其產(chǎn)品的可信度、使用粘性、用戶體驗(yàn)也隨之提升。

2. 不同產(chǎn)品不同對待

篩選并非千篇一律，不要一上場就來一波大眾化的篩選條件，很多APP首頁設(shè)計(jì)就是最好的例子，什么都不考慮，直接導(dǎo)航欄+輪播圖+金剛區(qū)+內(nèi)容推薦…傳統(tǒng)的一套流程走下來，結(jié)果可想而知。

設(shè)計(jì)篩選功能時(shí)，不同類型的產(chǎn)品需要根據(jù)其產(chǎn)品定位、用戶目標(biāo)以及使用場景來定義篩選條件，用戶需求是用來設(shè)定篩選條件范圍的決定因素。例如：購物類產(chǎn)品需要結(jié)合商品的銷量、評價(jià)、價(jià)格及知名度等，而新聞類產(chǎn)品側(cè)重于用戶偏好、點(diǎn)贊量、熱度值來提供篩選，方便用戶快速找到感興趣的內(nèi)容。

3. 根據(jù)需求排列優(yōu)先級

在滿足上述兩個(gè)條件后也不能將篩選項(xiàng)一股腦的挨個(gè)排出來，即便是在同一個(gè)頁面內(nèi)，也需要結(jié)合當(dāng)前內(nèi)容的屬性對篩選條件進(jìn)行優(yōu)先級排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個(gè)入口。

以淘寶為例，在「手機(jī)」商品列表，篩選條件中首先看到的是品牌，其次是內(nèi)存、容量，我相信很少人不在乎手機(jī)品牌吧；而在「鋼釘」列表中，依次是價(jià)格排序、銷量。

品牌條件隱藏在了高級篩選中，試問，如果是你購買釘子這種實(shí)用性的商品，是在乎價(jià)格、還是品牌呢？

六、總結(jié)

篩選功能旨在滿足用戶查找需求，通過縮短用戶選擇商品的范圍，節(jié)約查找時(shí)間，快速將符合條件的信息呈現(xiàn)出來，并讓用戶在這一過程中產(chǎn)生愉悅的使用體驗(yàn)，以發(fā)揮產(chǎn)品的最大價(jià)值，從而增強(qiáng)用戶的使用粘性。

至于在設(shè)計(jì)中該使用何種篩選控件則取決于用戶需求和使用場景，設(shè)定符合需求的篩選維度及條件，且根據(jù)內(nèi)容屬性做靈活變動即可，切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。

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

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