旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中篩選頁面設(shè)計攻略

UI設(shè)計中篩選頁面設(shè)計攻略

時間:2020-08-27來源:5wd995.cn點擊量:作者:Gella
時間:2020-08-27點擊量:作者:Gella

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

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

  一、什么時候需要篩選?
 

  二、篩選組件的常見樣式以及應(yīng)用場景
 

  三、總結(jié)
 

  一、什么時候需要篩選?
 

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

  二、篩選組件的常見樣式以及應(yīng)用場景
 

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

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

  下面我們結(jié)合實例來一一分析吧
 

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

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

 



 

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

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

 



 

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

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

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

 



 

  4.全浮層顯示
 

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

 



 

  5.分類引導篩選
 

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

 



 

  三、小結(jié)
 

  1、什么時候需要篩選:信息內(nèi)容太多時提高用戶操作效率。
 

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

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



 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

老師想和你聊一聊

?2007-2021/ 5wd995.cn 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖