如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

生活需要篩選，App頁面也一樣。本文通過案例分析，從篩選組件的樣式、使用場景等方面來解析篩選組件在手機端場景的設(shè)計。

篩選組件概述

篩選組件的作用是幫助人們在面對大量信息時，通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄，本文暫不分析。

組件包括篩選按鈕與篩選器，篩選器包含類別及各類別下的篩選項。使用頻次高低、篩選條件的數(shù)量都是決定篩選組件樣式的因素。

01

位于 Tab 欄的篩選組件

組件樣式

篩選按鈕位置：一般位于Tab欄最右側(cè)視覺薄弱區(qū)域。

篩選器形式：點擊按鈕，篩選器以抽屜形式從Tab欄底部向下展開篩選條件，或以浮層形式從屏幕最右側(cè)向左滑出篩選條件。

樣式分析

當界面使用Tab欄時，已為內(nèi)容做了第一層篩選，多數(shù)情況下已滿足用戶對內(nèi)容的篩選需求。

當篩選類別較多且復雜時，就需要在Tab欄增加篩選組件來提供更詳細的篩選能力。而這里的篩選組件較于Tab欄其他條件優(yōu)先級較低，屏幕右側(cè)為視覺薄弱區(qū)域，這也解釋了為什么大多數(shù)Tab欄的篩選組件都位于最右側(cè)。

案例一

案例來源于美團App

此頁是對美食品類的選擇，這里的篩選組件在Tab中是最常見的樣式。對于用戶而言，選擇商家店鋪優(yōu)先考慮地域、美食類別、價格及綜合評價，而用餐人數(shù)與餐廳服務(wù)等只是輔助選擇條件。

篩選器使用了抽屜形式，如要選擇此樣式，建議在篩選條件不多且不超過一屏的場景使用。

案例二

案例來源于淘寶App

當用戶從首頁全局搜索后，出現(xiàn)此頁。篩選按鈕位于二級Tab欄。點擊篩選按鈕后，由于篩選條件較多，很難一頁展示完，用戶往往需要上下滑動屏幕查看全部，因此使用右側(cè)浮層展開的形式較適合。

案例三

案例來源于嗶哩嗶哩App

全局搜索后，Tab欄默認展開綜合tab內(nèi)容，用戶對排序、時長、分區(qū)的篩選需求較高，因此直接把篩選類別放在了二級Tab欄，相比通過點擊篩選按鈕再展開類別的交互方式更簡單直白。

點擊篩選類別后，篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少（不超過4項），篩選項數(shù)量不多的場景。

02

底部按鈕型篩選組件

組件樣式

篩選按鈕位置：以按鈕或浮層形式固定在界面底部，便于用戶操作。

篩選器形式：點擊按鈕，篩選器以抽屜形式從按鈕底部向上展開篩選條件，或以界面浮層形式從底部向上展開篩選條件。

樣式分析

使用底部篩選按鈕的界面，內(nèi)容區(qū)類別相對單一，通過篩選組件就能滿足篩選需求，并對篩選的需求較大。而底部按鈕作為常見的按鈕形式，用戶點擊更方便，因此承載篩選組件較合適。

若使用此樣式，點擊篩選按鈕后，篩選器的出現(xiàn)優(yōu)先考慮從底部向上出現(xiàn)的抽屜式浮層。

案例一

案例來源于旅游類App Expedia

輸入旅游目的地后進入此列表頁，用戶目的性明確，就是要查看結(jié)果。底部的篩選按鈕是為了幫助用戶更快的篩選結(jié)果，方便用戶觸達。并且篩選條件較多，無法一頁展示完，使用了界面浮層的形式。

這里還有2個細節(jié)：

1、由于篩選類別較多，手動清除單個篩選條件太過繁瑣，于是篩選器底部增加了清除按鈕，操作更簡便。但底部按鈕一般為“確定”操作，“清除”放在底部樣式上沒有做誤操作提示，可能會增加誤操作機率。

2、篩選后，篩選按鈕處會顯示已選擇的篩選類別數(shù)量，給用戶帶來良好的使用反饋。

案例二

案例來源于dribbble

當前頁為地點搜索。需要先進行篩選操作，內(nèi)容區(qū)再出現(xiàn)結(jié)果。篩選按鈕位于底部浮層，篩選類別代替篩選按鈕平鋪展現(xiàn)，篩選器使用抽屜式從浮層底部向上展開。

此樣式一般適合篩選類別較少，并且每個類別的篩選項不多的場景。優(yōu)點是減少操作步驟，提高用戶操作效率。并且可以學習一些體驗細節(jié)：在篩選器中選擇一個選項后，在其篩選類別處同步修改為該選項；篩選項與篩選類別選中狀態(tài)一致，增加關(guān)聯(lián)度。

03

浮層按鈕型篩選組件

組件樣式

篩選按鈕位置：以浮層按鈕的形式位于界面右下方，占用空間較少。

篩選器形式：點擊按鈕，篩選器以浮層形式為主，或在篩選按鈕下方展開篩選條件。

樣式分析

浮層型篩選按鈕的優(yōu)點是增大內(nèi)容區(qū)的縱向空間，比底部按鈕型篩選組件的層級要弱一些。但當用戶需要操作時，它的位置也便于用戶點擊。

設(shè)計時按鈕用色需要區(qū)別于內(nèi)容區(qū)，內(nèi)容形式盡量精簡直觀。若使用案例3中的扇形篩選器，則要求篩選類別為1-2類，篩選項數(shù)量少切文案精簡。

案例一

案例來源于dribbble

篩選按鈕位于界面右下方緊貼于右側(cè)屏邊，浮于被篩選內(nèi)容上層，滑動屏幕時消失。點擊篩選按鈕后，從屏幕右側(cè)展開篩選浮層，原篩選按鈕變?yōu)榇_認按鈕。

此按鈕形式最大限度的讓出空間留給內(nèi)容區(qū)，且右下角為用戶關(guān)注薄弱區(qū)，這樣的位置關(guān)系可讓用戶按需操作。關(guān)于篩選器使用右側(cè)浮層前面的案例也提到過，適用于篩選條件較多的場景。并且使用側(cè)邊欄形式的浮層與篩選按鈕關(guān)聯(lián)性較高，相對符合用戶認知。體驗細節(jié)上可學習的點還有按鈕功能的改變，使得體驗更便捷。

案例二

案例來源于dribbble

篩選按鈕位于界面右下方但沒有貼屏邊，篩選器以底部分層形式從底部向上展開。這里的篩選條件不多，因此使用了底部分層形式。

案例三

案例來源于dribbble

篩選按鈕形式與上一案例相似，不同的是篩選按鈕處直接顯示篩選條件，可得知此內(nèi)容區(qū)目前被篩選維度為“30M”。此樣式適用于篩選條件為同一維度的場景。

點擊按鈕后，從按鈕下層展開扇形篩選器，滑動選擇篩選條件。此種篩選器樣式使用場景較局限，多為選擇時長或數(shù)量，并且單選居多。因此篩選器不需要“確定按鈕”，只需放“關(guān)閉按鈕”即可。這里的篩選器也可根據(jù)不同的場景選擇其他的形式。

04

舉一反三

接下來我們拿個案例練練手。

下圖界面中內(nèi)容區(qū)為概覽與各監(jiān)控數(shù)據(jù)圖表，需要設(shè)計一個篩選組件對內(nèi)容區(qū)進行不同時段的篩選。

在設(shè)計之前需要確定幾個需求：篩選組件的使用頻次、篩選類別的數(shù)量、篩選項的數(shù)量，單復選關(guān)系、篩選條件之間的優(yōu)先級。

進一步明確需求

篩選類別只有時間段1項，篩選數(shù)量不固定，為多項，單選關(guān)系。當用戶進入此頁，根據(jù)用戶使用需求判斷“1小時”基本滿足用戶查看數(shù)據(jù)的需求，默認展示“1小時”的篩選。因此篩選組件此場景使用“1小時”時段基本滿足用戶查看數(shù)據(jù)的需求，可判斷用戶使用篩選組件的頻次不高。

方案解析

方案一，Tab欄形式

Tab是對整頁的篩選，多為不同維度，而這里只有時段一個維度。

Tab所處位置為視覺熱點區(qū)域附近，但用戶對篩選組件的需求并不高，放在此位置占用了概覽區(qū)空間。

方案二，底部按鈕形式

底部按鈕位于用戶的習慣操作區(qū)，放這里使用層級略高，并且會使內(nèi)容區(qū)的整體高度減少。

方案三，浮層按鈕形式

位于右下角的浮層按鈕在頁面中屬于視覺薄弱區(qū)域，可以使用戶瀏覽時不受按鈕影響；但按鈕擁有強對比色，在有篩選需求時滿足使用需求。

篩選器以時間選擇器形式出現(xiàn)，可滿足篩選項數(shù)量較多的場景。

05

小結(jié)

以上內(nèi)容是我對常見篩選組件的思考，每一種樣式都有其優(yōu)缺點。但我們設(shè)計篩選組件的最終目的是幫助用戶篩選信息，決策。這就需要設(shè)計師根據(jù)篩選需求、用戶習慣等設(shè)計符合用戶使用場景的操作體驗。

本文作者：TXD技術(shù)體驗團隊-喻杰（阿里巴巴視覺設(shè)計師）

藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。