生活中我們經常要在無數的選項中進行選擇，而篩選器可以幫助用戶在大量的選項中，按照用戶的預定條件達到精選的目的，大大提高了用戶的決策效率。比如我們可以根據發貨地、價位來篩選商品，或是通過價位、地點來篩選租房等等。這篇文章主要分享了 APP 中篩選器的常見展現形式。
其實 tab 欄和搜索都可以算作篩選，這篇文章主要闡述的是由不同類別和各類別下的選項組成的篩選器。常見的展現形式有頂部多行展示、頂部浮層、右側浮層、底部浮層、全浮層5種。
目錄
1.頂部多行展示
2.頂部浮層
3.右側浮層
4.底部浮層
5.全浮層
6.總結
?
頂部多行展示
這種形式多出現在視頻 APP 中，每一行都對應一個類別，每個類別向左滑動可以顯示更多的選項。適用于業務結構單一、篩選類別較少的場景中。
優點：篩選比較直觀，且用戶選擇完后可以及時看到下面篩選出來的結果。
缺點：結構單一、類別較少，結果比較模糊，不適格較復雜的業務。如下圖：
以優酷和騰訊視頻為例，它們都是以視頻為主要內容的應用，業務比較專一。且篩選類別都是以評分、地區、種類、是否院線、上線時間、是否會員獨播等為主，篩選類別較少并且已經大多固定在這幾個類別中，所以使用了這樣的展現形式。
?
?
頂部浮層
這種樣式的入口多出現在頂部 tab 欄中，適應于業務復雜且篩選選項特別多的場景中。
優點：選項多，可以進行更復雜的篩選，且篩選結果更細致精準。
缺點：篩選類別多且復雜，操作繁瑣，用戶需要花費較多的精力在篩選上。如下圖：
以鏈家為例，點擊頂部 tab 欄中的區域和價格都會彈出一個浮層，為用戶提供了更多、更精準的選項，浮層的高度會隨著內容的多少而變化。
?
?
右側浮層
這種樣式只有點擊 tab 欄最右側的“篩選”選項時才會出現。因為 tab 欄前面的幾個選項在大多情況已經能滿足用戶的需求，更多復雜且不常用的選項就會放在最右側的“篩選”里面，所以它的位置也放在了視覺比較薄弱的最右側。它也適用于業務復雜且篩選選項特別多的場景中。
優點：篩選類別多，且篩選結果精準細致。
缺點：操作復雜，用戶需要花費較多的精力在篩選上面。如下圖：
以淘寶和京東為例，它們 tab 中的綜合、銷量、價格等選項已經能滿足大多數用戶的需求，但用戶想選擇發貨地、價格區間、品牌等更細節的條件時，右側浮層的樣式就提供了更多的選項，并且還為用戶提供了一鍵重置按鈕，方便用戶重新選擇。
?
底部浮層
通常當篩選按鈕放在頁面底部或單獨出現時，篩選浮層就會放在頁面底部。
優點：處于頁面底部，手指更容易點擊。如下圖：
以飛豬火車票頁面和 Soul 為例，飛豬的篩選按鈕放在了頁面底部，而 Soul 的則單獨出現，它們的篩選彈窗都使用了底部浮層的樣式，手指很容易就可以觸摸到選項。
?
?
全浮層
全浮層其實和右側浮層有點類似，它的頁面占用面積是最大的，適用于業務更復雜，且篩選類別更多的場景中。
優點：用戶的注意力最集中。
缺點：用戶不能及時地看到篩選結果，且選項多操作復雜。如下圖：
以馬蜂窩和鏈家為例，馬蜂窩火車票的篩選，以及鏈家頂部 tab 的更多選項都使用了全浮層的展現樣式，讓用戶把注意力更好的集中在篩選這件事情上。
?
總結
今天主要分享的一件事是篩選器的常見展現形式，我總結了以下4點：
1.當業務單一、篩選類別較少時可以使用頂部多行的展現形式；
2.業務復雜且選項特別多時，可以根據實際情況使用頂部浮層、右側浮層、全浮層等形式。
3.浮層的位置通常會根據篩選的按鈕的位置所改變，比如篩選按鈕在底部或單獨出現時，浮層會出現在底部；
4.全浮層可以讓用戶的注意力更容易集中在篩選上。
?
?
?
原創：?青山? ? ? ?公眾號：海鹽社
