?

全國統一服務熱線:18021770366

站內公告:

淮安市嘉瑞廣告有限公司主要提供廣告設計制作安裝服務以及網站制作,是一家經驗豐富的廣告設計制作公司,擁有十幾年廣告設計制作經驗!

聯系我們CONTACT

地址:淮安市翔宇大道1009號
熱線:0517-8588 1663
Q Q:34665706
郵箱:[email protected]

18021770366

新聞中心

當前位置:主頁 > 新聞中心 >

淺析App篩選器安裝的界面設計

2019-12-11 點擊量:

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

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

目錄

1.頂部多行展示

2.頂部浮層

3.右側浮層

4.底部浮層

5.全浮層

6.總結

 

頂部多行展示

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

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

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

淺析App篩選器的界面設計

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

 

 

頂部浮層

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

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

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

淺析App篩選器的界面設計

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

 

 

右側浮層

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

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

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

淺析App篩選器的界面設計

淺析App篩選器的界面設計

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

 

底部浮層

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

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

淺析App篩選器的界面設計

淺析App篩選器的界面設計

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

 

 

全浮層

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

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

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

淺析App篩選器的界面設計

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

 

總結

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

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

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

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

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

 

 

 

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

?
渡劫5龙宫赚钱