淺析App篩選器的界麵設計

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

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

目錄

1.頂部多行展示

2.頂部浮層

3.右側浮層

4.底部浮層

5.全浮層

6.總結

頂部多行展示

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

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

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

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

頂部浮層

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

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

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

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

右側浮層

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

優點：篩選類別多，且篩選結果精準細致。

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

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

底部浮層

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

優點：處於頁麵底部，手指更容易點擊。如下圖：

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

全浮層

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

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

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

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

總結

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

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

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

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

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

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