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

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

如果您想訂閱本博客內容_,每天自動發到您的郵箱中_--一家人的兽交小说, 請點這裏

篩選是資源聚合類APP中不可缺少的功能___苘山租房,可幫用戶快速-_长江电力商务、精準地找到需要內容信息_|陈小春谭耀文,根據資源分類形式的不同有多種篩選類型_战神彩票,並且不同的篩選類型還可以進行自由組合|__静佳jcare纤体梅,讓複雜的內容信息更容易被篩選出來|cctv6 节目表。


目錄

1. 橫向tab式篩選

2. 標簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選


1. 橫向tab式篩選

這是最常見的篩選樣式_家有辣嫂2,屬於一級篩選|__久爱弹弹堂。通常出現在導航欄或者是導航欄目的下方--|fps什么意思,根據分類層級的多少有4種展現形式||骑刃王全集。

一個層級

  • 分類2~5個_-|塔河贴吧:所有類目都可以直接在tab欄目上展示出來_娱乐天地手机登录,用戶可快速地在各個分類之間進行切換|-|2009qq下载;

  • 分類大於5個_-天津家电以旧换新:所有類目以相同的間距進行橫向排布||360怎么设置主页,引入橫滑操作__-3218彩城彩票网,方便用戶瀏覽被隱藏的分類信息__盈博彩票是正规公司么;有些產品也會在欄目右側增加下拉操作|_-许鹤缤 家在远方,點擊後下拉展示所有的分類_qq空间代码克隆,用戶可對所有分類進行直觀的瀏覽-意彩彩票注册;




兩個層級分類

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

當內容分類有兩個層級且分類比較多的時候-柳焚余,產品會根據用戶的喜好推薦幾種分類在tab上進行展示-_|至尊快三APP;右側有篩選操作_|-小狼狗高手论坛,點擊後在一個頁麵裏展示所有的分類||掌上购彩App是不是骗局。用戶可以在這個頁麵自主選擇增減展示在tab上的分類___芷江租房信息,並且可以調整展示的順序-||qq炫舞答题练习答案。

交互細節

  • 用戶在不同的類目間進行切換的時候||尊彩网邀请码,篩選內容在當前頁麵刷新展示_--东北二嫂百度云;

  • 不同的tab分類可以通過橫滑進行切換_|迪华澳;

  • 位於內容信息的上方_-快乐大本营落跑甜心剧组,對下方的列表內容進行控製-|_33选7大星彩票走势图;

  • 當觸發篩選條件時-_-中国主席名单,篩選欄目直接定位到導航欄下方|-阿玛拉王国武器锻造。



2. 標簽篩選

是一種輔助篩選樣式--_008彩票平台,通常位於某一分類標題下方|-宋祖德近况,或者跟tab篩選和下拉篩選搭配使用_|-娃独自下车被牵走,有4種表現形式

① 內容分類標簽||上海情侣网吧门,充當內容入口-|张庭新浪微博。產品設定的內容分類|_jellybird果冻酒,分類層級較高|--传奇行会霸气名字,且內容之間無交集|||2019买马12生肖号码图,當觸發操作的時候--众发彩票合法吗?,會跳轉頁麵進行內容展示|||双鹿空调故障代码。


② 大分類下的子篩選條件--|曾海潮李悦陈霁江陵肃,分類層級比較低|-|欧邦鼠,當用戶觸發操作時|--诸城百盛吧,內容在當前頁麵進行展示--|大一新生请产假。


③ 篩選頁麵--重庆食品舞厅,多維度的篩選條件以列表的形式進行排布-|好看的电影网站你懂的,標簽是單一維度下的多種分類-_-冰河时代2歌词,可橫滑操作|-|魔龙辅助官网,這種方式可以幫助用戶快速進行多維度的內容篩選-|_注册彩票送18。篩選的結果直接展示在篩選條件下方|_138彩票,最常出現在視頻類APP內做電影-_-亿彩彩票安卓app、電視篩選|-_白小俺图片;馬蜂窩遊記中也使用了這種分類形式||-长沙租房口碑网。


3.下拉篩選

通常是在一個大的分類下做具體選擇的時候使用__无氨显影液,這種篩選樣式可以承載1~3級分類層級--_yyy863 com。

單一層級

分類以列表的形式展示在頁麵中|-|盈彩注册邀请码,當分類字段少且分類較多的時候也可以排2~3列進行展示--年末负债总额。

 

兩個層級

有三種排布方式

  • ①直接以欄目標題加列表內容的形式排列||太湖花亭湖。適用於兩個層級分類都較少|__不丹国王,或需要用戶進行操作(比較輸入框__微锐答题、滑塊)的場景使用_-|国世平博客。

  • ②左側為一級分類信息展示區|-青岛城管强拆军区大院视频,右側為二級分類信息展示區_-我是歌手第10期排名,可以通過左側的一級分類控製右側的二級分類||n73主题。適用於兩個層級分類都比較多的情況使用__|永胜国际彩票合法吗。

  • ③上麵為tab式的一級分類_||1分快3亿彩下载,下麵是二級分類內容的展示|-众乐彩APP下载。適用於一級分類較少|__光明牛奶网上订购,二級分類較多的場景使用_|_钱塘江潮水时间表。



三個層級

一級分類為tab形式展示在最上麵||陈春阳,二三級為左右排布形式-2018彩票019开奖号码。


交互細節

  • 放在內容信息的上麵--|镭波f730,對下方內容進行控製---易彩彩民登录5022;

  • 當觸發篩選條件時--105彩票骗局,篩選欄目直接定位在導航欄下方||徐粉林简历;

  • 有2~3種信息層級的篩選一站到底在线游戏,結果通常取得是不同信息之間的交集|_-问问狗,所以需要在篩選中向用戶展示篩選結果數量||实况2009转会补丁,幫助用戶判斷是否調整篩選條件 |诺基亚官网pc套件下载;如圖左

  • 我們也可以選擇在篩選結果頁展示篩選標簽_|-气雾剂之家,用戶可以在當前頁麵刪除部分標簽||-魔兽地图大唐双龙传,以查看更多的內容信息-|_助赢计划软件;如下圖

備注|-7 k7k小游戏:下拉篩選通常是多維度組合在一個欄目上展示|中央一台直播播放,通常應用在電商_|_娱乐彩票澳门、外賣等內容分類層級比較多|_-在线spy2wc厕所中国,且層級內的分類也比較多的場景裏


4. 底部篩選

某一具體內容需要通過多個篩選維度輔助篩選時使用-|海伦二中贴吧,比如XX-XX的火車票展示列表|攻坚朱诺、馬蜂窩的地圖酒店篩選_||朝鲜近况。這種篩選通常能承載1~2級的篩選層級||-金融市场学张亦春,每種層級下的分類目都不能過多||长虹i30,是一種比較簡單輕便的篩選過程

單一篩選層級

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

 

兩個篩選層級

① 直接以欄目標題加列表內容的形式排列||考好老师让你做一次H。

② 左側為一級分類信息展示區_-易旺彩票靠谱吗,右側為二級分類信息展示區

交互細節

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

當用戶出發操作的時候|众发彩票是人工干预开,內容從下往上彈出展示-|7k7k7小游戏大全。


5. 抽屜式篩選

電商平台應用較多的分類形式北京市市委书记,通常是有兩個分類層級_|_最后情人 歌词,一|_106官网彩、二級的分類類目都比較多|优彩彩票靠谱吗,默認情況下-__联想a60游戏,如果分類特別多時可以隻展示第一層級信息_-|酒嘉视窗,用展開收起輔助用戶瀏覽二級類目信息_驿站网络日记本。

交互細節

  • 因為篩選的分類比較多|_昆明三对夫妇,且通過展開收起會將已選擇的內容遮擋上---何茵茵事件,所以我們需要以一種方式將已篩選的條件展示出來_|钟楼兄弟,方便用戶及時調整陈丽阳。eg.馬蜂窩將所有用戶選擇的內容都放置在最前麵-|约彩彩票靠谱吗,而京東選擇在欄目上方展示出來|-长郡style。

  • 顯示有多少個符合篩選條件的內容___13彩下载,幫助用戶決策篩選條件是否合理|_|芝兰粉。

總結

本文主要講述了5種內容篩選種類-龙之谷单刷:tab篩選|何小萌萌萌新浪微博、標簽篩選__-历届北京市委书记、下拉篩選--中兴v880官方刷机包、底部篩選和抽屜式篩選__天津友谊商厦,選擇何種篩選類型跟內容分類層級和分類數量相關2013江苏数学高考,所以設計之前要先了解產品的分類及數量|-心德维拉,有助於選擇更適合用戶使用的篩選樣式||_非常了得 陈星光。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|||盈盈彩注册,為期望卓越的國內外企業提供卓越的UI界麵設計_|爱唯侦察、BS界麵設計 -_|105彩票cc苹果版、 cs界麵設計 --长红彩票店、 ipad界麵設計 -_天迈g18、 包裝設計 _|视觉卡盟、 圖標定製 |_-吉林市都市110在线收听、 用戶體驗 ||上海麦当劳网上订餐、交互設計|_尊彩网下载、 網站建設_维护人员工具、平麵設計服務--wow致命一击。

 

分享到--360彩票苹果版: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap