追求卓越一諾千金

藍藍設計|-腹部减肥瑜伽,2011年成立_--韩语手机铃声,主創清華團隊_|_战狼彩票全天实时计划,專注軟件和互聯網ui設計開發_收破烂歌词。擅長企業信息化管理-|_盈彩二维码、監控|通络灸、大數據軟件UIUE谘詢和設計開發服務|青海明胶股吧。立足UI--_淘宝网沙发巾,好好學習||湖南中青旅行社,天天進步__-尹国驹!


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

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


如果您想訂閱本博客內容-_|qqg个性网名,每天自動發到您的郵箱中|花果园失火, 請點這裏

篩選是資源聚合類APP中不可缺少的功能|-优惠多金币联盟,可幫用戶快速|_-11选5任选7胆拖参照表、精準地找到需要內容信息__059彩票,根據資源分類形式的不同有多種篩選類型||-闪光夫妇为什么下车,並且不同的篩選類型還可以進行自由組合|-28码时时彩计划,讓複雜的內容信息更容易被篩選出來||-陈允斌博客。


目錄

1. 橫向tab式篩選

2. 標簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選


1. 橫向tab式篩選

這是最常見的篩選樣式-_|长城物业信息管理系统,屬於一級篩選---獐子图片。通常出現在導航欄或者是導航欄目的下方---助赢计划软件,根據分類層級的多少有4種展現形式_vc6 0安装教程。

一個層級

  • 分類2~5個-|杨幂遭人非礼:所有類目都可以直接在tab欄目上展示出來_雷区里的工具,用戶可快速地在各個分類之間進行切換_|宜昌天问学校;

  • 分類大於5個_邓有帮:所有類目以相同的間距進行橫向排布-至尊彩可靠吗,引入橫滑操作---郭美美澳门,方便用戶瀏覽被隱藏的分類信息|-云帆app;有些產品也會在欄目右側增加下拉操作|_银潮谷,點擊後下拉展示所有的分類|__魔兽世界 元素太初,用戶可對所有分類進行直觀的瀏覽_-煲机音乐;




兩個層級分類

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

當內容分類有兩個層級且分類比較多的時候-|重庆ume电影院,產品會根據用戶的喜好推薦幾種分類在tab上進行展示-邮政局上班时间;右側有篩選操作_--共产党员在党组织讨论决定对党员的党纪,點擊後在一個頁麵裏展示所有的分類|-108娱乐买彩票骗局。用戶可以在這個頁麵自主選擇增減展示在tab上的分類-|_冷酷殿下判出局,並且可以調整展示的順序-宝利格改装卡宴。

交互細節

  • 用戶在不同的類目間進行切換的時候||小腻腻博客,篩選內容在當前頁麵刷新展示-传说中勇者的传说2;

  • 不同的tab分類可以通過橫滑進行切換-|男科悍医;

  • 位於內容信息的上方_--静佳jcare纤体梅,對下方的列表內容進行控製||-1号计划彩票;

  • 當觸發篩選條件時|_|亿贝平台简介,篩選欄目直接定位到導航欄下方|-_键盘自动按键器。



2. 標簽篩選

是一種輔助篩選樣式_|焦点目标打断宏,通常位於某一分類標題下方_-爱唯侦察论坛地址,或者跟tab篩選和下拉篩選搭配使用_|框架箱尺寸,有4種表現形式

① 內容分類標簽___隆昌县地图,充當內容入口__|华为5c。產品設定的內容分類_-1213金鼎娱乐,分類層級較高|_-三星s3mini,且內容之間無交集-|长春花卉批发市场,當觸發操作的時候_6个男人要过河,會跳轉頁麵進行內容展示|掌上彩票无法登录。


② 大分類下的子篩選條件-卫青吧,分類層級比較低|||澳优会员积分,當用戶觸發操作時__-2019世界杯猜球彩票,內容在當前頁麵進行展示-||168彩票网会员。


③ 篩選頁麵--基加美修的召唤石,多維度的篩選條件以列表的形式進行排布-_-阳光的意义歌词,標簽是單一維度下的多種分類-__天猫分销平台,可橫滑操作|-_兽性之血,這種方式可以幫助用戶快速進行多維度的內容篩選-_触动陷阱。篩選的結果直接展示在篩選條件下方|__致命弯道5 豆瓣,最常出現在視頻類APP內做電影-_李驰新浪博客、電視篩選||强心脏20110823;馬蜂窩遊記中也使用了這種分類形式-__大学生创业策划书。


3.下拉篩選

通常是在一個大的分類下做具體選擇的時候使用_|_中兴彩票网站,這種篩選樣式可以承載1~3級分類層級|_千山暮雪浴缸吻戏。

單一層級

分類以列表的形式展示在頁麵中-兼职日语翻译,當分類字段少且分類較多的時候也可以排2~3列進行展示__360福利彩票全国开奖。

 

兩個層級

有三種排布方式

  • ①直接以欄目標題加列表內容的形式排列_|易彩是正规平台吗。適用於兩個層級分類都較少_hp5100se驱动下载,或需要用戶進行操作(比較輸入框-珍爱十字绣花开富贵、滑塊)的場景使用|__注册送现金的电玩城。

  • ②左側為一級分類信息展示區_-|天目通移动维修论坛,右側為二級分類信息展示區-长葛二高吧,可以通過左側的一級分類控製右側的二級分類_-绅士的恶魔剧情介绍。適用於兩個層級分類都比較多的情況使用_-框架尺寸。

  • ③上麵為tab式的一級分類--陈公博简介,下麵是二級分類內容的展示_|opera酒店管理系统。適用於一級分類較少|--粤dk0213,二級分類較多的場景使用||-197彩票下载。



三個層級

一級分類為tab形式展示在最上麵__-花月婷养巢,二三級為左右排布形式---淘宝画报首页。


交互細節

  • 放在內容信息的上麵--陈法蓉 三级,對下方內容進行控製__唐山铁通宽带;

  • 當觸發篩選條件時_|色中色账号,篩選欄目直接定位在導航欄下方--|310胜负彩14场专家预测;

  • 有2~3種信息層級的篩選--_乐乐滋,結果通常取得是不同信息之間的交集_|_咸水湾,所以需要在篩選中向用戶展示篩選結果數量||盈彩邀请码,幫助用戶判斷是否調整篩選條件 |-|小爸爸13集插曲;如圖左

  • 我們也可以選擇在篩選結果頁展示篩選標簽-易富娱乐,用戶可以在當前頁麵刪除部分標簽_scc江智背景,以查看更多的內容信息||-松原启众网;如下圖

備注-|诺基亚7070拆机:下拉篩選通常是多維度組合在一個欄目上展示--_优信彩票APP,通常應用在電商||百度在线朗读器、外賣等內容分類層級比較多||众博国际娱乐,且層級內的分類也比較多的場景裏


4. 底部篩選

某一具體內容需要通過多個篩選維度輔助篩選時使用||库尔勒暴乱,比如XX-XX的火車票展示列表-_|淘宝热卖女装、馬蜂窩的地圖酒店篩選_|-玛雅发信。這種篩選通常能承載1~2級的篩選層級__娱乐彩票注册送彩金,每種層級下的分類目都不能過多_银色黎明声望怎么刷,是一種比較簡單輕便的篩選過程

單一篩選層級

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

 

兩個篩選層級

① 直接以欄目標題加列表內容的形式排列|唐人街导航。

② 左側為一級分類信息展示區--168极速开奖结果,右側為二級分類信息展示區

交互細節

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

當用戶出發操作的時候|贝莱斯顿,內容從下往上彈出展示|小班下学期个人总结。


5. 抽屜式篩選

電商平台應用較多的分類形式_闹腾影院,通常是有兩個分類層級|葫芦岛一高中家长汇,一|2628彩票网页、二級的分類類目都比較多|-12579彩票吉祥数字是什么,默認情況下||_奇迹世界2战士加点,如果分類特別多時可以隻展示第一層級信息_|天天酷跑大猫头,用展開收起輔助用戶瀏覽二級類目信息-__dota金箍棒。

交互細節

  • 因為篩選的分類比較多_国家副主席有几个,且通過展開收起會將已選擇的內容遮擋上-_永胜彩票网APP,所以我們需要以一種方式將已篩選的條件展示出來---狼人 狼嚎再起,方便用戶及時調整-金玉暖。eg.馬蜂窩將所有用戶選擇的內容都放置在最前麵|_-幼儿教师格言,而京東選擇在欄目上方展示出來-||诺基亚3110c游戏。

  • 顯示有多少個符合篩選條件的內容__甄子丹电影全集国语高清,幫助用戶決策篩選條件是否合理-|赢彩网大发快三邀请码。

總結

本文主要講述了5種內容篩選種類|-|雯雅婷漫画全集图片:tab篩選_|星际2人族大讲堂、標簽篩選_--139彩票怎么关闭了、下拉篩選_-|永盛娱乐是骗局么、底部篩選和抽屜式篩選--重庆厨房制造,選擇何種篩選類型跟內容分類層級和分類數量相關-|_2k彩票,所以設計之前要先了解產品的分類及數量|定陶教育信息网,有助於選擇更適合用戶使用的篩選樣式|_银彩网址。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_-始兴家园,為期望卓越的國內外企業提供卓越的UI界麵設計||-六一pop海报、BS界麵設計 _|_2019注册送彩金26、 cs界麵設計 |--晚托网、 ipad界麵設計 _|106平台彩票苹果、 包裝設計 ||_商丘摄影网、 圖標定製 ---潘春春 樊玲、 用戶體驗 苏州生活海外站、交互設計-_360彩票详情、 網站建設-|雷柏1810、平麵設計服務_英国商人。

 

« 交互設計定律-大白話解析席克定律 | 靈感枯竭怎麼辦||-嫩草老根?來看滴滴設計總監的方法_--太湖县花亭湖!»


訂閱Rss