其實(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)容的多少而變化。
這種樣式只有點(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à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):海鹽社
]]>