2018-9-7 濤濤
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
生活需要篩選，App頁面也一樣。本文通過案例分析，從篩選組件的樣式、使用場景等方面來解析篩選組件在手機端場景的設計。
篩選組件概述
篩選組件的作用是幫助人們在面對大量信息時，通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄，本文暫不分析。
組件包括篩選按鈕與篩選器，篩選器包含類別及各類別下的篩選項。使用頻次高低、篩選條件的數量都是決定篩選組件樣式的因素。
01
位于 Tab 欄的篩選組件
組件樣式
篩選按鈕位置：一般位于Tab欄最右側視覺薄弱區域。
篩選器形式：點擊按鈕，篩選器以抽屜形式從Tab欄底部向下展開篩選條件，或以浮層形式從屏幕最右側向左滑出篩選條件。
樣式分析
當界面使用Tab欄時，已為內容做了第一層篩選，多數情況下已滿足用戶對內容的篩選需求。
當篩選類別較多且復雜時，就需要在Tab欄增加篩選組件來提供更詳細的篩選能力。而這里的篩選組件較于Tab欄其他條件優先級較低，屏幕右側為視覺薄弱區域，這也解釋了為什么大多數Tab欄的篩選組件都位于最右側。
案例一
案例來源于美團App
此頁是對美食品類的選擇，這里的篩選組件在Tab中是最常見的樣式。對于用戶而言，選擇商家店鋪優先考慮地域、美食類別、價格及綜合評價，而用餐人數與餐廳服務等只是輔助選擇條件。
篩選器使用了抽屜形式，如要選擇此樣式，建議在篩選條件不多且不超過一屏的場景使用。
案例二
案例來源于淘寶App
當用戶從首頁全局搜索后，出現此頁。篩選按鈕位于二級Tab欄。點擊篩選按鈕后，由于篩選條件較多，很難一頁展示完，用戶往往需要上下滑動屏幕查看全部，因此使用右側浮層展開的形式較適合。
案例三
案例來源于嗶哩嗶哩App
全局搜索后，Tab欄默認展開綜合tab內容，用戶對排序、時長、分區的篩選需求較高，因此直接把篩選類別放在了二級Tab欄，相比通過點擊篩選按鈕再展開類別的交互方式更簡單直白。
點擊篩選類別后，篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少（不超過4項），篩選項數量不多的場景。
02
底部按鈕型篩選組件
組件樣式
篩選按鈕位置：以按鈕或浮層形式固定在界面底部，便于用戶操作。
篩選器形式：點擊按鈕，篩選器以抽屜形式從按鈕底部向上展開篩選條件，或以界面浮層形式從底部向上展開篩選條件。
樣式分析
使用底部篩選按鈕的界面，內容區類別相對單一，通過篩選組件就能滿足篩選需求，并對篩選的需求較大。而底部按鈕作為常見的按鈕形式，用戶點擊更方便，因此承載篩選組件較合適。
若使用此樣式，點擊篩選按鈕后，篩選器的出現優先考慮從底部向上出現的抽屜式浮層。
案例一
案例來源于旅游類App Expedia
輸入旅游目的地后進入此列表頁，用戶目的性明確，就是要查看結果。底部的篩選按鈕是為了幫助用戶更快的篩選結果，方便用戶觸達。并且篩選條件較多，無法一頁展示完，使用了界面浮層的形式。
這里還有2個細節：
1、由于篩選類別較多，手動清除單個篩選條件太過繁瑣，于是篩選器底部增加了清除按鈕，操作更簡便。但底部按鈕一般為“確定”操作，“清除”放在底部樣式上沒有做誤操作提示，可能會增加誤操作機率。
2、篩選后，篩選按鈕處會顯示已選擇的篩選類別數量，給用戶帶來良好的使用反饋。
案例二
案例來源于dribbble
當前頁為地點搜索。需要先進行篩選操作，內容區再出現結果。篩選按鈕位于底部浮層，篩選類別代替篩選按鈕平鋪展現，篩選器使用抽屜式從浮層底部向上展開。
此樣式一般適合篩選類別較少，并且每個類別的篩選項不多的場景。優點是減少操作步驟，提高用戶操作效率。并且可以學習一些體驗細節：在篩選器中選擇一個選項后，在其篩選類別處同步修改為該選項；篩選項與篩選類別選中狀態一致，增加關聯度。
03
浮層按鈕型篩選組件
組件樣式
篩選按鈕位置：以浮層按鈕的形式位于界面右下方，占用空間較少。
篩選器形式：點擊按鈕，篩選器以浮層形式為主，或在篩選按鈕下方展開篩選條件。
樣式分析
浮層型篩選按鈕的優點是增大內容區的縱向空間，比底部按鈕型篩選組件的層級要弱一些。但當用戶需要操作時，它的位置也便于用戶點擊。
設計時按鈕用色需要區別于內容區，內容形式盡量精簡直觀。若使用案例3中的扇形篩選器，則要求篩選類別為1-2類，篩選項數量少切文案精簡。
案例一
案例來源于dribbble
篩選按鈕位于界面右下方緊貼于右側屏邊，浮于被篩選內容上層，滑動屏幕時消失。點擊篩選按鈕后，從屏幕右側展開篩選浮層，原篩選按鈕變為確認按鈕。
此按鈕形式最大限度的讓出空間留給內容區，且右下角為用戶關注薄弱區，這樣的位置關系可讓用戶按需操作。關于篩選器使用右側浮層前面的案例也提到過，適用于篩選條件較多的場景。并且使用側邊欄形式的浮層與篩選按鈕關聯性較高，相對符合用戶認知。體驗細節上可學習的點還有按鈕功能的改變，使得體驗更便捷。
案例二
案例來源于dribbble
篩選按鈕位于界面右下方但沒有貼屏邊，篩選器以底部分層形式從底部向上展開。這里的篩選條件不多，因此使用了底部分層形式。
案例三
案例來源于dribbble
篩選按鈕形式與上一案例相似，不同的是篩選按鈕處直接顯示篩選條件，可得知此內容區目前被篩選維度為“30M”。此樣式適用于篩選條件為同一維度的場景。
點擊按鈕后，從按鈕下層展開扇形篩選器，滑動選擇篩選條件。此種篩選器樣式使用場景較局限，多為選擇時長或數量，并且單選居多。因此篩選器不需要“確定按鈕”，只需放“關閉按鈕”即可。這里的篩選器也可根據不同的場景選擇其他的形式。
04
舉一反三
接下來我們拿個案例練練手。
下圖界面中內容區為概覽與各監控數據圖表，需要設計一個篩選組件對內容區進行不同時段的篩選。
在設計之前需要確定幾個需求：篩選組件的使用頻次、篩選類別的數量、篩選項的數量，單復選關系、篩選條件之間的優先級。
進一步明確需求
篩選類別只有時間段1項，篩選數量不固定，為多項，單選關系。當用戶進入此頁，根據用戶使用需求判斷“1小時”基本滿足用戶查看數據的需求，默認展示“1小時”的篩選。因此篩選組件此場景使用“1小時”時段基本滿足用戶查看數據的需求，可判斷用戶使用篩選組件的頻次不高。
方案解析
方案一，Tab欄形式
Tab是對整頁的篩選，多為不同維度，而這里只有時段一個維度。
Tab所處位置為視覺熱點區域附近，但用戶對篩選組件的需求并不高，放在此位置占用了概覽區空間。
方案二，底部按鈕形式
底部按鈕位于用戶的習慣操作區，放這里使用層級略高，并且會使內容區的整體高度減少。
方案三，浮層按鈕形式
位于右下角的浮層按鈕在頁面中屬于視覺薄弱區域，可以使用戶瀏覽時不受按鈕影響；但按鈕擁有強對比色，在有篩選需求時滿足使用需求。
篩選器以時間選擇器形式出現，可滿足篩選項數量較多的場景。
05
小結
以上內容是我對常見篩選組件的思考，每一種樣式都有其優缺點。但我們設計篩選組件的最終目的是幫助用戶篩選信息，決策。這就需要設計師根據篩選需求、用戶習慣等設計符合用戶使用場景的操作體驗。
本文作者：TXD技術體驗團隊-喻杰（阿里巴巴視覺設計師）
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
案例來源于dribbble
