UI設計中篩選頁面設計攻略

　　今天這篇文章跟大家分享的主題是關于篩選頁面的設計。作為一個有逼格的設計師，你不但要知道怎么做，還要知道為什么這么做。以免被甲方、老板、運營等問的啞口無言、冒頭苦改設計，經歷身心的摧殘后，一句“還是第一版最好”內心崩潰。
 

　　好的，我們言歸正傳，今天AAA教育郭老師就帶大家一起來看看今天的主角篩選頁面的表現(xiàn)形式及在產品中的應用吧。文章將從以下幾點來分析：
 

　　一、什么時候需要篩選?
 

　　二、篩選組件的常見樣式以及應用場景
 

　　三、總結
 

　　一、什么時候需要篩選?
 

　　信息爆炸時代，為了提高操作效率，更快的找到自己想要的信息，常常需要篩選來幫助我們。如我們在外出旅游時想要住一個經濟實惠的酒店、在家附近找一家性價比高的餐廳，為了滿足篩選需求，我們需要結合使用場景來綜合考慮。
 

　　二、篩選組件的常見樣式以及應用場景
 

　　這里我們主要分析5種常見的篩選樣式：
 

　　1.頂部顯示、2.半浮層、3.側邊浮層、4.全浮層、5.分類引導。
 

　　下面我們結合實例來一一分析吧
 

　　1.頂部顯示：以搜索結果下移來展現(xiàn)篩選器里的內容
 

　　頂部顯示適合業(yè)務結構比較專一、篩選緯度較少、篩選結果與內容展示區(qū)聯(lián)系較強的頁面，不需要二次跳轉交互，用戶可以直觀的查看結果。eg:一些視頻類APP：騰訊視頻、愛奇藝等。

 

　　2.半浮層顯示：篩選器以抽屜形式從Tab欄底部向下展開篩選條件
 

　　半浮層顯示適合業(yè)務結構較為復雜、篩選緯度較多但不超過一屏、篩選結果與內容展示區(qū)聯(lián)系性較強的頁面。eg:一些旅游類APP：攜程、飛豬的酒店篩選等。

 

　　這里發(fā)現(xiàn)一個細節(jié)，在酒店篩選時，已選擇的內容前面會有小紅點提示，給用戶很好的操作反饋。飛豬的酒店篩選結果會有數(shù)量顯示，給用戶很好的心理預期。
 

　　3.側邊浮層顯示：以浮層形式從屏幕最右側向左滑出篩選條件
 

　　側邊浮層顯示適合業(yè)務結構較為復雜、篩選緯度更全面、篩選結果與內容展示區(qū)聯(lián)系性較弱的頁面。同時由于篩選內容較多，往往需要用戶滑動頁面來選擇。eg:一些電商類APP：淘寶、京東等。

 

　　4.全浮層顯示
 

　　全浮層篩選維度更加全面、篩選結果與內容展示區(qū)聯(lián)系性較弱，但能夠讓用戶更加專注于當前頁面的篩選操作，篩選結果更加精確。

 

　　5.分類引導篩選
 

　　這種篩選屬于特別的形式，在用戶首次登錄APP后讓用戶進行選擇，這樣的好處是為了給用戶推送更合適的內容 ，表現(xiàn)形式多以與內容標簽+插畫場景或圖標的樣式。eg: 社交、學習類應用等。

 

　　三、小結
 

　　1、什么時候需要篩選：信息內容太多時提高用戶操作效率。
 

　　2、5種常見的篩選樣式：1.頂部顯示、2.半浮層、3.側邊浮層、4.全浮層、5.分類引導篩選。
 

　　因此，您現(xiàn)在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。