追求卓越一諾千金

藍藍設計|_注册送彩金验证手机,2011年成立|-345彩票网导,主創清華團隊--22选5河南最新开奖,專注軟件和互聯網ui設計開發|||魔幻西游online。擅長企業信息化管理--|半裸江山结局、監控80txt、大數據軟件UIUE谘詢和設計開發服務-|_张笑东后台。立足UI-重庆农村商业银行上市,好好學習--郑浩南三级,天天進步_-淘宝画报首页!


UI設計-篩選功能選擇類型的總結

2019-4-15 泥人張 設計思維


如果您想訂閱本博客內容_-惧龟刷新时间,每天自動發到您的郵箱中_-年利率是什么意思, 請點這裏

篩選是資源聚合類APP中不可缺少的功能|__河北区haobc,可幫用戶快速|_168彩票官网登录7168、精準地找到需要內容信息__运盛彩票靠谱吗,根據資源分類形式的不同有多種篩選類型__|卓易彩票闪退,並且不同的篩選類型還可以進行自由組合-_|锁紧螺母原理,讓複雜的內容信息更容易被篩選出來___江简称。


目錄

1. 橫向tab式篩選

2. 標簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選


1. 橫向tab式篩選

這是最常見的篩選樣式-|去霉运,屬於一級篩選---2019年彩票五行。通常出現在導航欄或者是導航欄目的下方_-易彩快3是真的吗,根據分類層級的多少有4種展現形式--掌上棋牌怎么没了。

一個層級

  • 分類2~5個_茅崎爱丽丝:所有類目都可以直接在tab欄目上展示出來-_90后无视鸣枪砍警察,用戶可快速地在各個分類之間進行切換__穆勒故意跪倒;

  • 分類大於5個||娱乐天地点检:所有類目以相同的間距進行橫向排布|-360彩票大乐透杀号定胆,引入橫滑操作_-雪弗莱官网,方便用戶瀏覽被隱藏的分類信息-苏州红星美凯龙;有些產品也會在欄目右側增加下拉操作__云顶娱乐打鱼可提现,點擊後下拉展示所有的分類_-345彩票正规吗,用戶可對所有分類進行直觀的瀏覽||铁路安全管理条例;




兩個層級分類

  • Tab 欄目上隻展示推薦分類或者用戶自己選擇的分類

當內容分類有兩個層級且分類比較多的時候__14场胜负彩最新预测,產品會根據用戶的喜好推薦幾種分類在tab上進行展示-|湖笔徽墨宣纸端砚;右側有篩選操作||亿贝平台合法吗,點擊後在一個頁麵裏展示所有的分類|_注册会员送彩金不限id。用戶可以在這個頁麵自主選擇增減展示在tab上的分類|俗人岛 华人论坛,並且可以調整展示的順序--13彩怎么玩不亏。

交互細節

  • 用戶在不同的類目間進行切換的時候___n78软件,篩選內容在當前頁麵刷新展示__018期富婆看图肖特;

  • 不同的tab分類可以通過橫滑進行切換|_智能手机;

  • 位於內容信息的上方|-_亿彩官方邀请码,對下方的列表內容進行控製|-|寂寞先生 刘悦;

  • 當觸發篩選條件時-|陈氏太极拳教程,篩選欄目直接定位到導航欄下方-_|薇丝露。



2. 標簽篩選

是一種輔助篩選樣式--苗老表,通常位於某一分類標題下方||336手机彩票网址,或者跟tab篩選和下拉篩選搭配使用--金星电视机,有4種表現形式

① 內容分類標簽-|姿姿堂,充當內容入口_-陆幽张斌。產品設定的內容分類_-_至尊彩靠谱吗,分類層級較高_|-11068移动彩票登陆,且內容之間無交集__易旺彩票邀请码,當觸發操作的時候|__河南省焊工证查询,會跳轉頁麵進行內容展示|双层大巴车价格。


② 大分類下的子篩選條件--_打屁屁视频家法,分類層級比較低|_|祝愿猫,當用戶觸發操作時--|长春大学光华学院教务处,內容在當前頁麵進行展示-_永胜彩票骗局。


③ 篩選頁麵-_15选5复式中奖怎么算,多維度的篩選條件以列表的形式進行排布cctv10真相怪兽之谜,標簽是單一維度下的多種分類-_-2018明星死亡大全,可橫滑操作-__168彩票是正规的吗,這種方式可以幫助用戶快速進行多維度的內容篩選|||30元好彩头出奖模式。篩選的結果直接展示在篩選條件下方-_|雪弗莱科帕奇,最常出現在視頻類APP內做電影_|15分彩正规吗、電視篩選_||160彩票邀请;馬蜂窩遊記中也使用了這種分類形式_-_取消gprs5元套餐。


3.下拉篩選

通常是在一個大的分類下做具體選擇的時候使用_|武汉艾普宽带,這種篩選樣式可以承載1~3級分類層級-后知后觉金池。

單一層級

分類以列表的形式展示在頁麵中_|中成快递,當分類字段少且分類較多的時候也可以排2~3列進行展示__龙炎电商非法集资。

 

兩個層級

有三種排布方式

  • ①直接以欄目標題加列表內容的形式排列_|118彩票赢了提现不了。適用於兩個層級分類都較少_重生洪荒之逍遥至尊,或需要用戶進行操作(比較輸入框_国世平本人新浪博客、滑塊)的場景使用_|于宏洁讲道集。

  • ②左側為一級分類信息展示區_-天津apec限行规定,右側為二級分類信息展示區_卫青吧,可以通過左側的一級分類控製右側的二級分類-_诺亚舟np1000。適用於兩個層級分類都比較多的情況使用|--我们约会吧李飒。

  • ③上麵為tab式的一級分類_-臻爱a900,下麵是二級分類內容的展示__掌上新华APP。適用於一級分類較少-__项城征婚,二級分類較多的場景使用__|联众好友在线。



三個層級

一級分類為tab形式展示在最上麵-万年屋日本料理,二三級為左右排布形式|_|12彩票IOS版。


交互細節

  • 放在內容信息的上麵-|易彩在线注册,對下方內容進行控製---2019管家婆马报图今晚资料;

  • 當觸發篩選條件時-英皇会所,篩選欄目直接定位在導航欄下方_--亿彩彩票;

  • 有2~3種信息層級的篩選|_1990时时彩,結果通常取得是不同信息之間的交集|-诺基亚手机串号查询,所以需要在篩選中向用戶展示篩選結果數量|-陶江湖,幫助用戶判斷是否調整篩選條件 _|-htc a3333;如圖左

  • 我們也可以選擇在篩選結果頁展示篩選標簽||-小狼狗心水论坛,用戶可以在當前頁麵刪除部分標簽|--永盛国际,以查看更多的內容信息---重庆ume电影院;如下圖

備注|_至尊彩到底是国家的吗:下拉篩選通常是多維度組合在一個欄目上展示|_-观澜田背花园,通常應用在電商---锁紧螺母原理、外賣等內容分類層級比較多--助赢计划app,且層級內的分類也比較多的場景裏


4. 底部篩選

某一具體內容需要通過多個篩選維度輔助篩選時使用|-黄牛课件,比如XX-XX的火車票展示列表__初二期中考试总结、馬蜂窩的地圖酒店篩選_-veor moda。這種篩選通常能承載1~2級的篩選層級|_小狼狗心水论坛,每種層級下的分類目都不能過多-||全运会女排决赛时间,是一種比較簡單輕便的篩選過程

單一篩選層級

① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內容

 

兩個篩選層級

① 直接以欄目標題加列表內容的形式排列||白看网络电视。

② 左側為一級分類信息展示區|||钱莹博客,右側為二級分類信息展示區

交互細節

處於頁麵的底部導航欄的位置

當用戶出發操作的時候-|-苏木科,內容從下往上彈出展示亿彩软件。


5. 抽屜式篩選

電商平台應用較多的分類形式_-宅男躲艳记txt下载,通常是有兩個分類層級||诺基亚n73主题,一|_|仙剑5前传破解、二級的分類類目都比較多_-湖北专科学校排名,默認情況下_|234彩票网络平台,如果分類特別多時可以隻展示第一層級信息--|项目投资计划书范文,用展開收起輔助用戶瀏覽二級類目信息--|永盛国际手机版手机彩票。

交互細節

  • 因為篩選的分類比較多--_清华同方锋锐k431,且通過展開收起會將已選擇的內容遮擋上-|_刘春天膏方网,所以我們需要以一種方式將已篩選的條件展示出來_|乐清公立寄宿学校,方便用戶及時調整-||芜湖德尔福派克招聘。eg.馬蜂窩將所有用戶選擇的內容都放置在最前麵亿博娱乐登录网站,而京東選擇在欄目上方展示出來|-风来照相馆。

  • 顯示有多少個符合篩選條件的內容|_萨满焦点打断宏,幫助用戶決策篩選條件是否合理|-_成都男子街头杀妻。

總結

本文主要講述了5種內容篩選種類|_王明勇博客:tab篩選___善淘网首页、標簽篩選__2019年122期精准五肖、下拉篩選||248彩票有几种版本、底部篩選和抽屜式篩選__家乡美的画,選擇何種篩選類型跟內容分類層級和分類數量相關-易彩网,所以設計之前要先了解產品的分類及數量|_|塔罗牌占卜大师 tlpnana,有助於選擇更適合用戶使用的篩選樣式_-|陕西省职业技能鉴定指导中心。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|-198彩人工带玩,為期望卓越的國內外企業提供卓越的UI界麵設計_-湖南基础教育资源网、BS界麵設計 |_|亿彩彩票违法吗、 cs界麵設計 _-_陈良全、 ipad界麵設計 |||昆明三夫妻、 包裝設計 ||氨糖的功效橄固力、 圖標定製 -||118彩票软件苹果版、 用戶體驗 _-|丽婴房特卖、交互設計|--广州市花都区人事局、 網站建設__如东实验小学万红、平麵設計服務|谈爱李白原文。

 

« 交互設計定律-大白話解析席克定律 | 靈感枯竭怎麼辦-花花公子成人网站?來看滴滴設計總監的方法|--搜搜返利网!»


訂閱Rss