"少即是多"是經(jīng)常掛在嘴邊的話題，在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師們都會(huì)想盡一切辦法去簡(jiǎn)化交互流程、組件元素及各種設(shè)計(jì)屬性，讓用戶使用起來(lái)更簡(jiǎn)單。當(dāng)產(chǎn)品簡(jiǎn)化到一定程度，就必須要面對(duì)其不可簡(jiǎn)化的復(fù)雜性。

諾曼曾說(shuō)過(guò) "復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑 "，如果復(fù)雜性是合理的，我們應(yīng)該學(xué)會(huì)如何去管理復(fù)雜，考慮好復(fù)雜的問(wèn)題在流向用戶后以何種方式處理，篩選控件就是用戶自行處理復(fù)雜信息的方式之一，只要是符合用戶行為做出的設(shè)計(jì)，將應(yīng)有的復(fù)雜以篩選的形式呈現(xiàn)給用戶，讓其自行決定，用戶反而會(huì)樂(lè)意接受。

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

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

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

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

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

篩選功能的重要性

1. 篩選的定義

在我們?cè)O(shè)計(jì)篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。篩選，即用戶根據(jù)自身需求、通過(guò)一個(gè)或多個(gè)特定條件，在已有的內(nèi)容中快速找到滿足自己當(dāng)前條件的信息，單獨(dú)呈現(xiàn)的同時(shí)、并將未滿足條件的信息暫時(shí)作隱藏處理，以便用戶完成自己的目標(biāo)需求。

篩選也可以稱之為過(guò)濾器，是搜索框架的一部分。這里需要說(shuō)明一點(diǎn)，篩選不同于搜索，它是系統(tǒng)結(jié)合用戶提出的條件，對(duì)內(nèi)容進(jìn)行規(guī)則性的查找，準(zhǔn)確的說(shuō)，用戶屬于被動(dòng)，篩選出的結(jié)果在產(chǎn)品側(cè)「精準(zhǔn)」、用戶側(cè)「模糊」；而搜索則是用戶通過(guò)明確的目標(biāo)主動(dòng)進(jìn)行精準(zhǔn)查找，要么直接找到自己想要的結(jié)果，要么對(duì)結(jié)果不滿意，搜索出的結(jié)果在產(chǎn)品側(cè)「模糊」，用戶側(cè)需要「精準(zhǔn)」。說(shuō)直接點(diǎn)就是，搜索直接查找出結(jié)果，篩選只是縮小查找范圍（并非絕對(duì)，也可以對(duì)搜索結(jié)果縮小范圍）。

2. 為什么要使用篩選

在電商應(yīng)用中，如果有目標(biāo)的用戶更多使用的是搜索，那么沒(méi)有目標(biāo)的用戶更多使用的則是系統(tǒng)推薦或商品分類，不管是哪種類型的用戶，前面雖然已經(jīng)進(jìn)行過(guò)一次范圍縮減，但下一步還是逃不掉要面對(duì)的海量商品，這時(shí)，不給用戶提供選擇上的便利，用戶很可能因?yàn)g覽商品耗時(shí)過(guò)長(zhǎng)、選擇性困難等原因扭頭就走，即便離轉(zhuǎn)化僅一步之遙，也無(wú)法避免用戶流失的問(wèn)題。

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

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

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

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

2）用戶自定義篩選需求

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

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

常見(jiàn)的篩選樣式

1. Tab 篩選

Tab 式篩選條件大部分在操作前、操作中、操作后基本都會(huì)一直顯示，有橫向 Tab 和縱向 Tab 兩種，如新聞、視頻類型的應(yīng)用大多使用橫向 Tab，通過(guò)將不同的內(nèi)容以大的方向、區(qū)塊進(jìn)行分類，便于用戶隨時(shí)切換、篩選出不同的內(nèi)容；縱向 Tab 更多則是在電商類應(yīng)用中出現(xiàn)，且會(huì)存在多個(gè)子級(jí)，例如我們?cè)诰〇|購(gòu)買「鼠標(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è)維度展示篩選條件，用戶選中或自定義對(duì)應(yīng)的篩選項(xiàng)，即可快速篩選出自己想要的信息。

3. 折疊式篩選

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

4. 高級(jí)篩選

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

高級(jí)篩選適合用在顆粒度很細(xì)的場(chǎng)景，為的是避開其他視覺(jué)元素的干擾，讓用戶更專注于當(dāng)前頁(yè)面較為復(fù)雜的篩選條件，降低因受其他因素影響而出錯(cuò)的情況。例如：在選擇汽車時(shí)，需要對(duì)服務(wù)、價(jià)格、級(jí)別、排量…等各種情況作出非常細(xì)致的選擇，這時(shí)用高級(jí)篩選就再合適不過(guò)。

5. 篩選、排序組合

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

篩選的幾個(gè)維度

1. 單維度

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

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

2. 多維度

當(dāng)產(chǎn)品中的屬性過(guò)多，使用單維度篩選不僅會(huì)降低篩選結(jié)果的精準(zhǔn)度，還可能會(huì)導(dǎo)致用戶因反復(fù)/重復(fù)無(wú)用的操作而產(chǎn)生挫敗感，已無(wú)法滿足用戶的需求。這時(shí)，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內(nèi)容。

多維度篩選條件一般以按鈕（單選/多選）、輸入框?yàn)橹鳎行┻€會(huì)以滑塊來(lái)控制數(shù)據(jù)范圍。設(shè)定好篩選條件需通過(guò)重置、確認(rèn)操作按鈕，用來(lái)清空篩選條件或進(jìn)入下一步。在移動(dòng)端，因屏幕空間有限，一級(jí)篩選數(shù)量最好不要超過(guò) 9 個(gè)，如果太多，建議進(jìn)行整合或并入二級(jí)篩選。

3. 多等級(jí)（單維度/多維度）

在多級(jí)篩選控件中，可以把當(dāng)前篩選條件的上一級(jí)看成是篩選分類菜單，每個(gè)等級(jí)中可包含一個(gè)或多個(gè)單維度/多維度的篩選條件，移動(dòng)端最多不超過(guò) 3 個(gè)等級(jí)。

從表面看，多級(jí)篩選與多維度篩選的本質(zhì)是一樣的，但多級(jí)篩選會(huì)存在下一級(jí)或再下一級(jí)，而多維度會(huì)將所有篩選條件平鋪在空間中。當(dāng)單維度、多維度篩選還是無(wú)法滿足用戶需求，多等級(jí)就能作為最好的延伸。

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

1. 迎合用戶需求

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

以「餓了么」用戶點(diǎn)餐為例，使用點(diǎn)餐服務(wù)的用戶類型雖然很多，不過(guò)主力還是來(lái)自于辦公室白領(lǐng)、宅男/女這兩大用戶群體，有目標(biāo)的用戶會(huì)從搜索、收藏、訂單記錄等入口直接去購(gòu)買，但絕大多數(shù)用戶因長(zhǎng)期點(diǎn)外賣的原因，"吃什么"就成了最大的問(wèn)題，這時(shí)如果用戶還要"吃"，就必須得使用篩選功能，從 Tab 分類（模糊）到彈窗式篩選（精準(zhǔn)）再配合排序功能滿足自己的點(diǎn)餐需求，得出結(jié)論：

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

上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實(shí)的需求就是找到滿意的商品去下單。站在產(chǎn)品的角度并非如此，最應(yīng)該解決的應(yīng)該是效率的問(wèn)題，這才是篩選的終極目標(biāo)，不管用戶花多長(zhǎng)時(shí)間，筆者相信都能找到想要的，但所花費(fèi)的時(shí)間成本越少，滿意度就會(huì)越高，其產(chǎn)品的可信度、使用粘性、用戶體驗(yàn)也隨之提升。

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

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

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

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

在滿足上述兩個(gè)條件后也不能將篩選項(xiàng)一股腦的挨個(gè)排出來(lái)，即便是在同一個(gè)頁(yè)面內(nèi)，也需要結(jié)合當(dāng)前內(nèi)容的屬性對(duì)篩選條件進(jìn)行優(yōu)先級(jí)排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個(gè)入口。以淘寶為例，在「手機(jī)」商品列表，篩選條件中首先看到的是品牌，其次是內(nèi)存、容量…，我相信很少人不在乎手機(jī)品牌吧；而在「鋼釘」列表中，依次是價(jià)格排序、銷量…，品牌條件隱藏在了高級(jí)篩選中，試問(wèn)，如果是你購(gòu)買釘子這種實(shí)用性的商品，是在乎價(jià)格、還是品牌呢？

總結(jié)

篩選功能旨在滿足用戶查找需求，通過(guò)縮短用戶選擇商品的范圍，節(jié)約查找時(shí)間，快速將符合條件的信息呈現(xiàn)出來(lái)，并讓用戶在這一過(guò)程中產(chǎn)生愉悅的使用體驗(yàn)，以發(fā)揮產(chǎn)品的最大價(jià)值，從而增強(qiáng)用戶的使用粘性。至于在設(shè)計(jì)中該使用何種篩選控件則取決于用戶需求和使用場(chǎng)景，設(shè)定符合需求的篩選維度及條件，且根據(jù)內(nèi)容屬性做靈活變動(dòng)即可，切記篩選的核心需求是通過(guò)簡(jiǎn)單易用的方式來(lái)幫助用戶提高操作效率。

作者：能量眼球