2022-5-31 ui設計分享達人
“少即是多”是經常掛在嘴邊的話題，在設計過程中，設計師們都會想盡一切辦法去簡化交互流程、組件元素及各種設計屬性，讓用戶使用起來更簡單。當產品簡化到一定程度，就必須要面對其不可簡化的復雜性。
諾曼曾說過 “復雜是世界的一部分，但它不應該令人困惑 ”，如果復雜性是合理的，我們應該學會如何去管理復雜，考慮好復雜的問題在流向用戶后以何種方式處理，篩選控件就是用戶自行處理復雜信息的方式之一，只要是符合用戶行為做出的設計，將應有的復雜以篩選的形式呈現給用戶，讓其自行決定，用戶反而會樂意接受。
篩選控件的使用頻率非常高，本文根據筆者對各類篩選控件的拆解及自身經驗進行分總結，整理了在移動端中常用篩選控件的類型、使用場景以及設計思路，幫助大家在設計中更好的選擇適合自己產品的篩選控件。
一、現實生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個維度
五、篩選功能設計準則
六、總結
在日常生活中，我們天天都在跟篩選打交道。設想一下，當你走進超市，在沒有任何分類指示的情況下，看到琳瑯滿目的商品是否會不知所措，答案是肯定的，且不論超市規模大小、商品的多少，相信沒有任何一個人愿意在不清楚的情況下花時間去找一個很可能不存在的商品，即便這點時間會很短。
道理還沒說完，大家都感覺自己很懂，可依然逃脫不了如今在各種形形色色的應用中找不到自己需要的功能而苦惱，那么這些應用又是誰設計的呢？答案就是「大多數人」。
換言之，如果我們能通過標識牌、平面圖指引（模糊查找），詢問服務員、記憶指引（精準查找），就容易很多，這些指引路徑就完全充當了篩選功能，至于通過什么方式，只能根據人們自身或現場條件自行選擇，能滿足自己的需求即可。在功能繁多、交互流程復雜的互聯網產品中也是如此。
在我們設計篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。篩選，即用戶根據自身需求、通過一個或多個特定條件，在已有的內容中快速找到滿足自己當前條件的信息，單獨呈現的同時、并將未滿足條件的信息暫時作隱藏處理，以便用戶完成自己的目標需求。
篩選也可以稱之為過濾器，是搜索框架的一部分。這里需要說明一點，篩選不同于搜索，它是系統結合用戶提出的條件，對內容進行規則性的查找，準確的說，用戶屬于被動，篩選出的結果在產品側「精準」、用戶側「模糊」；而搜索則是用戶通過明確的目標主動進行精準查找，要么直接找到自己想要的結果、要么對結果不滿意，搜索出的結果在產品側「模糊」、用戶側需要「精準」。說直接點就是，搜索直接查找出結果、篩選只是縮小查找范圍（并非絕對，也可以對搜索結果縮小范圍）。
在電商應用中，如果有目標的用戶更多使用的是搜索，那么沒有目標的用戶更多使用的則是系統推薦或商品分類，不管是哪種類型的用戶，前面雖然已經進行過一次范圍縮減，但下一步還是逃不掉要面對的海量商品，這時，不給用戶提供選擇上的便利，用戶很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走，即便離轉化僅一步之遙，也無法避免用戶流失的問題。
增加篩選功能就能很好解決這個困局，用戶通過篩選、設置接近于目標需求的條件，縮短查找路徑，就能從海量的商品信息中快速找到符合條件的內容，大大降低了用戶的查找成本，節省了很多查找時間，用戶體驗得到很大程度的提升，由此可見，為什么要使用篩選，不言而喻。
1）系統定義篩選需求
方向性的篩選：用戶通過系統提供的多種類型進行頻道切換，還會存在多少子級，可定義為一級篩選。例如訂單列表（待支付/待發貨/待收貨/待評價），優惠券（未使用/已使用/已過期）等，用戶從已有的類型列表中選擇自己所需。
2）用戶自定義篩選需求
精細化篩選：當系統已提供方向性的篩選，用戶依然可從分類篩選出的結果中進一步細化。例如針對單個類型的商品列表自定義價格區間、發貨地、品牌...等，也可稱之為二級次篩選，相比一級篩選，其篩選的結果會更精細化，也更接近于用戶的真實需求。
（PS：系統定義篩選條件后，配合用戶自定義二次篩選條件以及排序功能，則更容易滿足用戶需求）
Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示，有橫向Tab和縱向Tab兩種，如新聞、視頻類型的應用大多使用橫向Tab，通過將不同的內容以大的方向、區塊進行分類，便于用戶隨時切換、篩選出不同的內容；縱向Tab更多則是在電商類應用中出現，且會存在多個子級，例如我們在京東購買「鼠標」，則需要在tab分類中依次找到「電腦辦公>外設產品>鼠標」進行篩選。
Tab類型主要以大的維度進行篩選，所篩選出的結果可能模糊且信息量極大，如果想要結果更加精準，則需配備其他類型的控件進行二次篩選。
操作中以蒙層的方式彈出，其他時候均為隱藏狀態。彈窗類型的篩選最大的優點是占用空間小，僅需一個入口，能在有限的彈出空間中從多個維度展示篩選條件，用戶選中或自定義對應的篩選項，即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間，篩選條件初始為隱藏狀態并提供一個入口。點擊后展開，期間不影響當前頁面的任何其他操作且一直處于展示狀態，需經過再次點擊才會將篩選條件隱藏。
基于自定義篩選條件過多，為滿足用戶個性化需求，點擊后會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為復雜，對篩選的要求較高。
高級篩選適合用在顆粒度很細的場景，為的是避開其他視覺元素的干擾，讓用戶更專注于當前頁面較為復雜的篩選條件，降低因受其他因素影響而出錯的情況。例如：在選擇汽車時，需要對服務、價格、級別、排量...等各種情況作出非常細致的選擇，這時用高級篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標配了，尤其在空間資源有限的移動端設備中，能最大化的將多個控制條件一次性展示給用戶，在篩選出結果后再使用排序功能，便于更快找到想要的商品。例如美團、餓了么將篩選與排序控件形成組合，極大的提高了用戶篩選的效率。
單維度的篩選不管是設計還是操作都相對簡單，無需操作確定/下一步按鈕，觸發篩選條件后會就會更新信息列表，大家最熟悉的訂單系統（待支付、待發貨、待收貨...）即是單維度篩選。
另外，單維度具備短、明、快的特點，為方便用戶識別，單個標簽一般不超過5個文字，且語義明確，用戶不用任何思考就能快速理解。
當產品中的屬性過多，使用單維度篩選不僅會降低篩選結果的精準度，還可能會導致用戶因反復/重復無用的操作而產生挫敗感，已無法滿足用戶的需求。這時，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內容。
多維度篩選條件一般以按鈕（單選/多選）、輸入框為主，有些還會以滑塊來控制數據范圍。設定好篩選條件需通過重置、確認操作按鈕，用來清空篩選條件或進入下一步。在移動端，因屏幕空間有限，一級篩選數量最好不要超過9個，如果太多，建議進行整合或并入二級篩選。
在多級篩選控件中，可以把當前篩選條件的上一級看成是篩選分類菜單，每個等級中可包含一個或多個單維度/多維度的篩選條件，移動端最多不超過3個等級。
從表面看，多級篩選與多維度篩選其本質是一樣的，但多級篩選會存在下一級或再下一級，而多維度會將所有篩選條件平鋪在空間中。當單維度、多維度篩選還是無法滿足用戶需求，多等級就能作為最好的延伸。
在設計篩選之前，需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預期等，有了清晰的用戶需求，設計出來的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點餐為例，使用點餐服務的用戶類型雖然很多，不過主力還是來自于辦公室白領、宅男/女這兩大用戶群體，有目標的用戶會從搜索、收藏、訂單記錄等入口直接去購買，但絕大多數用戶因長期點外賣的原因，“吃什么”就成了最大的問題，這時如果用戶還要“吃”，就必須得使用篩選功能，從Tab分類（模糊）到彈窗式篩選（精準）再配合排序功能滿足自己的點餐需求，得出結論：
1）一群不知道“吃什么”的白領、宅男/女用戶；
2）需要使用篩選功能解決自己“吃什么”的問題；
3）問題很快得到解決后，對結果及使用體驗非常滿意。
上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實的需求就是找到滿意的商品去下單。站在產品的角度并非如此，最應該解決的應該是效率的問題，這才是篩選的終極目標，不管用戶花多長時間，筆者相信都能找到想要的，但所花費的時間成本越少，滿意度就會越高，其產品的可信度、使用粘性、用戶體驗也隨之提升。
篩選并非千篇一律，不要一上場就來一波大眾化的篩選條件，很多APP首頁設計就是最好的例子，什么都不考慮，直接導航欄+輪播圖+金剛區+內容推薦...傳統的一套流程走下來，結果可想而知。
設計篩選功能時，不同類型的產品需要根據其產品定位、用戶目標以及使用場景來定義篩選條件，用戶需求是用來設定篩選條件范圍的決定因素。例如：購物類產品需要結合商品的銷量、評價、價格及知名度等，而新聞類產品側重于用戶偏好、點贊量、熱度值來提供篩選，方便用戶快速找到感興趣的內容。
在滿足上述兩個條件后也不能將篩選項一股腦的挨個排出來，即便是在同一個頁面內，也需要結合當前內容的屬性對篩選條件進行優先級排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個入口。
以淘寶為例，在「手機」商品列表，篩選條件中首先看到的是品牌，其次是內存、容量...，我相信很少人不在乎手機品牌吧；而在「鋼釘」列表中，依次是價格排序、銷量...，品牌條件隱藏在了高級篩選中，試問，如果是你購買釘子這種實用性的商品，是在乎價格、還是品牌呢？
篩選功能旨在滿足用戶查找需求，通過縮短用戶選擇商品的范圍，節約查找時間，快速將符合條件的信息呈現出來，并讓用戶在這一過程中產生愉悅的使用體驗，以發揮產品的最大價值，從而增強用戶的使用粘性。
至于在設計中該使用何種篩選控件則取決于用戶需求和使用場景，設定符合需求的篩選維度及條件，且根據內容屬性做靈活變動即可，切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、