其實(shí) tab 欄和搜索都可以算作篩選，這篇文章主要闡述的是由不同類別和各類別下的選項(xiàng)組成的篩選器。常見(jiàn)的展現(xiàn)形式有頂部多行展示、頂部浮層、右側(cè)浮層、底部浮層、全浮層5種。

目錄

1.頂部多行展示

2.頂部浮層

3.右側(cè)浮層

4.底部浮層

5.全浮層

6.總結(jié)

頂部多行展示

這種形式多出現(xiàn)在視頻 APP 中，每一行都對(duì)應(yīng)一個(gè)類別，每個(gè)類別向左滑動(dòng)可以顯示更多的選項(xiàng)。適用于業(yè)務(wù)結(jié)構(gòu)單一、篩選類別較少的場(chǎng)景中。

優(yōu)點(diǎn)：篩選比較直觀，且用戶選擇完后可以及時(shí)看到下面篩選出來(lái)的結(jié)果。

缺點(diǎn)：結(jié)構(gòu)單一、類別較少，結(jié)果比較模糊，不適格較復(fù)雜的業(yè)務(wù)。如下圖：

以優(yōu)酷和騰訊視頻為例，它們都是以視頻為主要內(nèi)容的應(yīng)用，業(yè)務(wù)比較專一。且篩選類別都是以評(píng)分、地區(qū)、種類、是否院線、上線時(shí)間、是否會(huì)員獨(dú)播等為主，篩選類別較少并且已經(jīng)大多固定在這幾個(gè)類別中，所以使用了這樣的展現(xiàn)形式。

頂部浮層

這種樣式的入口多出現(xiàn)在頂部 tab 欄中，適應(yīng)于業(yè)務(wù)復(fù)雜且篩選選項(xiàng)特別多的場(chǎng)景中。

優(yōu)點(diǎn)：選項(xiàng)多，可以進(jìn)行更復(fù)雜的篩選，且篩選結(jié)果更細(xì)致精準(zhǔn)。

缺點(diǎn)：篩選類別多且復(fù)雜，操作繁瑣，用戶需要花費(fèi)較多的精力在篩選上。如下圖：

以鏈家為例，點(diǎn)擊頂部 tab 欄中的區(qū)域和價(jià)格都會(huì)彈出一個(gè)浮層，為用戶提供了更多、更精準(zhǔn)的選項(xiàng)，浮層的高度會(huì)隨著內(nèi)容的多少而變化。

右側(cè)浮層

這種樣式只有點(diǎn)擊 tab 欄最右側(cè)的“篩選”選項(xiàng)時(shí)才會(huì)出現(xiàn)。因?yàn)?tab 欄前面的幾個(gè)選項(xiàng)在大多情況已經(jīng)能滿足用戶的需求，更多復(fù)雜且不常用的選項(xiàng)就會(huì)放在最右側(cè)的“篩選”里面，所以它的位置也放在了視覺(jué)比較薄弱的最右側(cè)。它也適用于業(yè)務(wù)復(fù)雜且篩選選項(xiàng)特別多的場(chǎng)景中。

優(yōu)點(diǎn)：篩選類別多，且篩選結(jié)果精準(zhǔn)細(xì)致。

缺點(diǎn)：操作復(fù)雜，用戶需要花費(fèi)較多的精力在篩選上面。如下圖：

以淘寶和京東為例，它們 tab 中的綜合、銷量、價(jià)格等選項(xiàng)已經(jīng)能滿足大多數(shù)用戶的需求，但用戶想選擇發(fā)貨地、價(jià)格區(qū)間、品牌等更細(xì)節(jié)的條件時(shí)，右側(cè)浮層的樣式就提供了更多的選項(xiàng)，并且還為用戶提供了一鍵重置按鈕，方便用戶重新選擇。

底部浮層

通常當(dāng)篩選按鈕放在頁(yè)面底部或單獨(dú)出現(xiàn)時(shí)，篩選浮層就會(huì)放在頁(yè)面底部。

優(yōu)點(diǎn)：處于頁(yè)面底部，手指更容易點(diǎn)擊。如下圖：

以飛豬火車票頁(yè)面和 Soul 為例，飛豬的篩選按鈕放在了頁(yè)面底部，而 Soul 的則單獨(dú)出現(xiàn)，它們的篩選彈窗都使用了底部浮層的樣式，手指很容易就可以觸摸到選項(xiàng)。

全浮層

全浮層其實(shí)和右側(cè)浮層有點(diǎn)類似，它的頁(yè)面占用面積是最大的，適用于業(yè)務(wù)更復(fù)雜，且篩選類別更多的場(chǎng)景中。

優(yōu)點(diǎn)：用戶的注意力最集中。

缺點(diǎn)：用戶不能及時(shí)地看到篩選結(jié)果，且選項(xiàng)多操作復(fù)雜。如下圖：

以馬蜂窩和鏈家為例，馬蜂窩火車票的篩選，以及鏈家頂部 tab 的更多選項(xiàng)都使用了全浮層的展現(xiàn)樣式，讓用戶把注意力更好的集中在篩選這件事情上。

總結(jié)

今天主要分享的一件事是篩選器的常見(jiàn)展現(xiàn)形式，我總結(jié)了以下4點(diǎn)：

1.當(dāng)業(yè)務(wù)單一、篩選類別較少時(shí)可以使用頂部多行的展現(xiàn)形式；

2.業(yè)務(wù)復(fù)雜且選項(xiàng)特別多時(shí)，可以根據(jù)實(shí)際情況使用頂部浮層、右側(cè)浮層、全浮層等形式。

3.浮層的位置通常會(huì)根據(jù)篩選的按鈕的位置所改變，比如篩選按鈕在底部或單獨(dú)出現(xiàn)時(shí)，浮層會(huì)出現(xiàn)在底部；

4.全浮層可以讓用戶的注意力更容易集中在篩選上。

原創(chuàng)： 青山       公眾號(hào)：海鹽社