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

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

篩選組件概述

篩選組件的作用是幫助人們?cè)诿鎸?duì)大量信息時(shí)，通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄，本文暫不分析。

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

01

位于 Tab 欄的篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

案例來源于美團(tuán)App

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

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

案例二

案例來源于淘寶App

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

案例三

案例來源于嗶哩嗶哩App

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

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

02

底部按鈕型篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

案例來源于旅游類App Expedia

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

這里還有2個(gè)細(xì)節(jié)：

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

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

案例二

案例來源于dribbble

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

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

03

浮層按鈕型篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

案例來源于dribbble

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

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

案例二

案例來源于dribbble

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

案例三

案例來源于dribbble

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

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

04

舉一反三

接下來我們拿個(gè)案例練練手。

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

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

進(jìn)一步明確需求

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

方案解析

方案一，Tab欄形式

Tab是對(duì)整頁的篩選，多為不同維度，而這里只有時(shí)段一個(gè)維度。

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

方案二，底部按鈕形式

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

方案三，浮層按鈕形式

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

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

05

小結(jié)

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

本文作者：TXD技術(shù)體驗(yàn)團(tuán)隊(duì)-喻杰（阿里巴巴視覺設(shè)計(jì)師）

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