提升使用者決策效率的篩選控制元件

編輯導語：篩選控制元件能夠有效提升使用者決策效率，本篇文章作者結合自身經驗總結了各類篩選控制元件的拆解，整理了在移動端中常用篩選控制元件中的型別、使用場景和設計思路，乾貨滿滿，感興趣的一起來學習一下吧，希望對你有幫助。

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

當產品簡化到一定程度，就必須要面對其不可簡化的複雜性。

諾曼曾說過 “複雜是世界的一部分，但它不應該令人困惑 ”，如果複雜性是合理的，我們應該學會如何去管理複雜，考慮好複雜的問題在流向使用者後以何種方式處理。

篩選控制元件就是使用者自行處理複雜資訊的方式之一，只要是符合使用者行為做出的設計，將應有的複雜以篩選的形式呈現給使用者，讓其自行決定，使用者反而會樂意接受。

篩選控制元件的使用頻率非常高，本文根據筆者對各類篩選控制元件的拆解及自身經驗進行分總結，整理了在移動端中常用篩選控制元件的型別、使用場景以及設計思路，幫助大家在設計中更好的選擇適合自己產品的篩選控制元件。

一、現實生活中的篩選

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

設想一下，當你走進超市，在沒有任何分類指示的情況下，看到琳琅滿目的商品是否會不知所措，答案是肯定的，且不論超市規模大小、商品的多少，相信沒有任何一個人願意在不清楚的情況下花時間去找一個很可能不存在的商品，即便這點時間會很短。

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

換言之，如果我們能透過標識牌、平面圖指引（模糊查詢），詢問服務員、記憶指引（精準查詢），就容易很多，這些指引路徑就完全充當了篩選功能，至於透過什麼方式，只能根據人們自身或現場條件自行選擇，能滿足自己的需求即可。在功能繁多、互動流程複雜的網際網路產品中也是如此。

二、篩選功能的重要性

1。 篩選的定義

在我們設計篩選控制元件之前，需要清楚瞭解什麼是篩選，東施效顰不是什麼明智之舉。

篩選，即使用者根據自身需求、透過一個或多個特定條件，在已有的內容中快速找到滿足自己當前條件的資訊，單獨呈現的同時、並將未滿足條件的資訊暫時作隱藏處理，以便使用者完成自己的目標需求。

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

這裡需要說明一點，篩選不同於搜尋，它是系統結合使用者提出的條件，對內容進行規則性的查詢，準確的說，使用者屬於被動，篩選出的結果在產品側「精準」、使用者側「模糊」。

而搜尋則是使用者透過明確的目標主動進行精準查詢，要麼直接找到自己想要的結果、要麼對結果不滿意，搜尋出的結果在產品側「模糊」、使用者側需要「精準」。

說直接點就是，搜尋直接查找出結果、篩選只是縮小查詢範圍（並非絕對，也可以對搜尋結果縮小範圍）。

2。 為什麼要使用篩選

在電商應用中，如果有目標的使用者更多使用的是搜尋，那麼沒有目標的使用者更多使用的則是系統推薦或商品分類，不管是哪種型別的使用者，前面雖然已經進行過一次範圍縮減，但下一步還是逃不掉要面對的海量商品。

這時，不給使用者提供選擇上的便利，使用者很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走，即便離轉化僅一步之遙，也無法避免使用者流失的問題。

增加篩選功能就能很好解決這個困局，使用者透過篩選、設定接近於目標需求的條件，縮短查詢路徑，就能從海量的商品資訊中快速找到符合條件的內容，大大降低了使用者的查詢成本，節省了很多查詢時間，使用者體驗得到很大程度的提升，由此可見，為什麼要使用篩選，不言而喻。

3。 什麼時候使用篩選

1）系統定義篩選需求

方向性的篩選：

使用者透過系統提供的多種型別進行頻道切換，還會存在多少子級，可定義為一級篩選。例如訂單列表（待支付/待發貨/待收貨/待評價），優惠券（未使用/已使用/已過期）等，使用者從已有的型別列表中選擇自己所需。

2）使用者自定義篩選需求

精細化篩選：

當系統已提供方向性的篩選，使用者依然可從分類篩選出的結果中進一步細化。例如針對單個型別的商品列表自定義價格區間、發貨地、品牌…等，也可稱之為二級次篩選，相比一級篩選，其篩選的結果會更精細化，也更接近於使用者的真實需求。

PS：系統定義篩選條件後，配合使用者自定義二次篩選條件以及排序功能，則更容易滿足使用者需求。

三、常見的篩選樣式

1。 Tab篩選

Tab式篩選條件大部分在操作前、操作中、操作後基本都會一直顯示，有橫向Tab和縱向Tab兩種，如新聞、影片型別的應用大多使用橫向Tab，透過將不同的內容以大的方向、區塊進行分類，便於使用者隨時切換、篩選出不同的內容。

縱向Tab更多則是在電商類應用中出現，且會存在多個子級，例如我們在京東購買「滑鼠」，則需要在tab分類中依次找到「電腦辦公>外設產品>滑鼠」進行篩選。

Tab型別主要以大的維度進行篩選，所篩選出的結果可能模糊且資訊量極大，如果想要結果更加精準，則需配備其他型別的控制元件進行二次篩選。

2。 彈窗式篩選

操作中以蒙層的方式彈出，其他時候均為隱藏狀態。彈窗型別的篩選最大的優點是佔用空間小，僅需一個入口，能在有限的彈出空間中從多個維度展示篩選條件，使用者選中或自定義對應的篩選項，即可快速篩選出自己想要的資訊。

3。 摺疊式篩選

介於Tab式與彈窗式之間，篩選條件初始為隱藏狀態並提供一個入口。點選後展開，期間不影響當前頁面的任何其他操作且一直處於展示狀態，需經過再次點選才會將篩選條件隱藏。

4。 高階篩選

基於自定義篩選條件過多，為滿足使用者個性化需求，點選後會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為複雜，對篩選的要求較高。

高階篩選適合用在顆粒度很細的場景，為的是避開其他視覺元素的干擾，讓使用者更專注於當前頁面較為複雜的篩選條件，降低因受其他因素影響而出錯的情況。

例如：在選擇汽車時，需要對服務、價格、級別、排量…等各種情況作出非常細緻的選擇，這時用高階篩選就再合適不過。

5。 篩選、排序組合

篩選、排序組合方式算是商品列表中的標配了，尤其在空間資源有限的移動端裝置中，能最大化的將多個控制條件一次性展示給使用者，在篩選出結果後再使用排序功能，便於更快找到想要的商品。例如美團、餓了麼將篩選與排序控制元件形成組合，極大的提高了使用者篩選的效率。

四、篩選的幾個維度

1。 單維度

單維度的篩選不管是設計還是操作都相對簡單，無需操作確定/下一步按鈕，觸發篩選條件後會就會更新資訊列表，大家最熟悉的訂單系統（待支付、待發貨、待收貨）即是單維度篩選。

另外，單維度具備短、明、快的特點，為方便使用者識別，單個標籤一般不超過5個文字，且語義明確，使用者不用任何思考就能快速理解。

2。 多維度

當產品中的屬性過多，使用單維度篩選不僅會降低篩選結果的精準度，還可能會導致使用者因反覆/重複無用的操作而產生挫敗感，已無法滿足使用者的需求。

這時，需採用多維度篩選幫助使用者縮小查詢範圍，讓其快速找到符合自己需求的內容。多維度篩選條件一般以按鈕（單選/多選）、輸入框為主，有些還會以滑塊來控制資料範圍。

設定好篩選條件需透過重置、確認操作按鈕，用來清空篩選條件或進入下一步。在移動端，因螢幕空間有限，一級篩選數量最好不要超過9個，如果太多，建議進行整合或併入二級篩選。

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

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

五、篩選功能設計準則

1。 迎合使用者需求

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

以「餓了麼」使用者點餐為例，使用點餐服務的使用者型別雖然很多，不過主力還是來自於辦公室白領、宅男/女這兩大使用者群體，有目標的使用者會從搜尋、收藏、訂單記錄等入口直接去購買。

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

一群不知道“吃什麼”的白領、宅男/女使用者；

需要使用篩選功能解決自己“吃什麼”的問題；

問題很快得到解決後，對結果及使用體驗非常滿意。

上面的案例可以看出，使用者想要在海量的資訊中找到自身所需，從表面上看，最直接、真實的需求就是找到滿意的商品去下單。

站在產品的角度並非如此，最應該解決的應該是效率的問題，這才是篩選的終極目標，不管使用者花多長時間，筆者相信都能找到想要的，但所花費的時間成本越少，滿意度就會越高，其產品的可信度、使用粘性、使用者體驗也隨之提升。

2。 不同產品不同對待

篩選並非千篇一律，不要一上場就來一波大眾化的篩選條件，很多APP首頁設計就是最好的例子，什麼都不考慮，直接導航欄+輪播圖+金剛區+內容推薦…傳統的一套流程走下來，結果可想而知。

設計篩選功能時，不同型別的產品需要根據其產品定位、使用者目標以及使用場景來定義篩選條件，使用者需求是用來設定篩選條件範圍的決定因素。例如：購物類產品需要結合商品的銷量、評價、價格及知名度等，而新聞類產品側重於使用者偏好、點贊量、熱度值來提供篩選，方便使用者快速找到感興趣的內容。

3。 根據需求排列優先順序

在滿足上述兩個條件後也不能將篩選項一股腦的挨個排出來，即便是在同一個頁面內，也需要結合當前內容的屬性對篩選條件進行優先順序排序，將使用者高頻使用的條件按先後順序依次排列，不重要的也可將其隱藏於某個入口。

以淘寶為例，在「手機」商品列表，篩選條件中首先看到的是品牌，其次是記憶體、容量，我相信很少人不在乎手機品牌吧；而在「鋼釘」列表中，依次是價格排序、銷量。

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

六、總結

篩選功能旨在滿足使用者查詢需求，透過縮短使用者選擇商品的範圍，節約查詢時間，快速將符合條件的資訊呈現出來，並讓使用者在這一過程中產生愉悅的使用體驗，以發揮產品的最大價值，從而增強使用者的使用粘性。

至於在設計中該使用何種篩選控制元件則取決於使用者需求和使用場景，設定符合需求的篩選維度及條件，且根據內容屬性做靈活變動即可，切記篩選的核心需求是透過簡單易用的方式來幫助使用者提高操作效率。

大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力於產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾使用者帶來更好的體驗，即好看、好用。

本文原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於 CC0 協議