移动端筛选常见交互形式及运用

2019-07-22
1688
0

本期跟大家分享一下个人总结的移动端常见的筛选交互的形式以及其各自的常见运用场景。


首先我把移动端常见的筛选大致分为三种形式,即入口型筛选、抽屉型筛选及全屏筛选,而抽屉型筛选又进一步根据交互细节和适用场景上的差异分为垂直抽屉和侧边抽屉,下面让我们逐一分析:



1.入口型筛选


▲ 去哪儿


主要特征:

筛选条件作为查询结果的前提


应用场景:

常用于有明确目的性的筛选查询,如:机场、酒店、旅游项目电影票等的预定,事先决定了主要筛选条件(时间、地点等)


注意要点:

作为入口的筛选条件最好不要多于三项;较为复杂且无必要事先决定的筛选内容可放在后续列表页去做二次筛选


代表产品:

去哪儿、携程



2.抽屉型筛选


常见形式有垂直抽屉和侧边抽屉两种,主要用于实时筛选的列表,抽屉留出的窗口区可向用户传达筛选内容刷新的信息


优点为比全屏筛选更轻,筛选反馈更直接且强烈。



2.1垂直抽屉筛选弹层



▲ 大众点评


主要特征:

在列表页内以向纵向(多为向下)展开的形式出现的筛选弹层


应用场景:

主要用于筛选类目较少且展示直观的场景;因为横向空间充足,常用于有多个层级包含关系的单选项目的筛选


注意要点:

筛选类目最好不要多于五项(横向);单选的筛选项后最好列出结果条目数量,便于帮助用户做决定


代表产品:

美团、大众点评



2.2 侧边抽屉筛选弹层


▲ 京东



3. 全屏筛选


▲ 雪球


主要特征:

使用页面跳转或者全屏弹层的样式做筛选


应用场景:

  • 常用于筛选类目多且层级深、项目繁杂的较重筛选查询

  • 相对于抽屉型筛选注重筛选项目与列表的互动,全屏筛选更侧重聚焦筛选本身


注意要点:

此类筛选很接近入口型筛选的体验,区别是全屏筛选的选项更繁杂且不够集中;常与入口型筛选作为互补使用


代表产品:

Airbnb 雪球



4. 快速选择合适的筛选交互


*本方法仅适用于快速评估筛选交互类型,具体案例仍需结合前面不同类型的分析综合考量

转载声明:文章来源于网络,不作任何商业用途。

免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
绘学霸是国内专业的CG数字艺术设计线上线下学习平台,在绘学霸有2D绘画、3D模型、影视后期、动画、特效等数字艺术培训课程,也有学习资源下载,还有行业社区交流。学习、交流,来绘学霸就对了。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
17688437870
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:17688437870
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
开发者:广州王氏软件科技有限公司 | App隐私政策> | 应用权限