设计之家 > 文章 >

淺析App篩選器的界面設計

作者:佚名 來源:海鹽社 時間:2019-07-18

生活中我們經常要在無數的選項中進行選擇,而篩選器可以幫助用戶在大量的選項中,按照用戶的預定條件達到精選的目的,大大提高了用戶的決策效率。比如我們可以根據發貨地、價位來篩選商品,或是通過價位、地點來篩選租房等等。這篇文章主要分享了 APP 中篩選器的常見展現形式。

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

目錄

1.頂部多行展示

2.頂部浮層

3.右側浮層

4.底部浮層

5.全浮層

6.總結

 

頂部多行展示

這種形式多出現在視頻 APP 中,每一行都對應一個類別,每個類別向左滑動可以顯示更多的選項。適用於業務結構單一、篩選類別較少的場景中。

優點:篩選比較直觀,且用戶選擇完後可以及時看到下面篩選出來的結果。

缺點:結構單一、類別較少,結果比較模糊,不適格較複雜的業務。如下圖:

以優酷和騰訊視頻為例,它們都是以視頻為主要內容的應用,業務比較專一。且篩選類別都是以評分、地區、種類、是否院線、上線時間、是否會員獨播等為主,篩選類別較少並且已經大多固定在這幾個類別中,所以使用了這樣的展現形式。

 

 

頂部浮層

這種樣式的入口多出現在頂部 tab 欄中,適應於業務複雜且篩選選項特別多的場景中。

優點:選項多,可以進行更複雜的篩選,且篩選結果更細致精準。

缺點:篩選類別多且複雜,操作繁瑣,用戶需要花費較多的精力在篩選上。如下圖:

以鏈家為例,點擊頂部 tab 欄中的區域和價格都會彈出一個浮層,為用戶提供了更多、更精準的選項,浮層的高度會隨著內容的多少而變化。

 

 

右側浮層

這種樣式隻有點擊 tab 欄最右側的“篩選”選項時才會出現。因為 tab 欄前面的幾個選項在大多情況已經能滿足用戶的需求,更多複雜且不常用的選項就會放在最右側的“篩選”裏面,所以它的位置也放在了視覺比較薄弱的最右側。它也適用於業務複雜且篩選選項特別多的場景中。

優點:篩選類別多,且篩選結果精準細致。

缺點:操作複雜,用戶需要花費較多的精力在篩選上面。如下圖:

以淘寶和京東為例,它們 tab 中的綜合、銷量、價格等選項已經能滿足大多數用戶的需求,但用戶想選擇發貨地、價格區間、品牌等更細節的條件時,右側浮層的樣式就提供了更多的選項,並且還為用戶提供了一鍵重置按鈕,方便用戶重新選擇。

 

底部浮層

通常當篩選按鈕放在頁面底部或單獨出現時,篩選浮層就會放在頁面底部。

優點:處於頁面底部,手指更容易點擊。如下圖:

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

 

 

全浮層

全浮層其實和右側浮層有點類似,它的頁面占用面積是最大的,適用於業務更複雜,且篩選類別更多的場景中。

優點:用戶的注意力最集中。

缺點:用戶不能及時地看到篩選結果,且選項多操作複雜。如下圖:

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

 

總結

今天主要分享的一件事是篩選器的常見展現形式,我總結了以下4點:

1.當業務單一、篩選類別較少時可以使用頂部多行的展現形式;

2.業務複雜且選項特別多時,可以根據實際情況使用頂部浮層、右側浮層、全浮層等形式。

3.浮層的位置通常會根據篩選的按鈕的位置所改變,比如篩選按鈕在底部或單獨出現時,浮層會出現在底部;

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

 

 

 

原創: 青山       公眾號:海鹽社

推薦設計

最新文章