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