筛选功能设计总结

注:从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。

三种常见基本样式

首先要明确一个概念:筛选功能并不是普通的单一功能项,它和导航一样是一个体系。

既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。

这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做的有多么复杂,都可以看成是这三种基本元素的不同组合形式。

1.Tab

Tab是最常见的筛选样式,一个tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

根据方向我们可以将tab分为横向栏tab和侧向栏ta,横向栏tab可展示2- 5 个选项,如果超过了 5 个,那么就需要用户滑动才能看到。

所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共 40 个选项,这里如果使用横向栏tab用户可能要侧向滑动 8 屏,操作成本过高。

当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

2.列表式

列表式也可称之为list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。

碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多,可以做成popover类、actionsheet类、activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。

相关推荐