目前所负责产品的筛选逻辑比较复杂,采用了全浮层+标签+直列的筛选体系,仍有进一步提升用户操作效率的空间,为了寻找优化切入点,故对常用筛选器进行了总结。
筛选排序作用:提高用户的操作效率!
一、常见的筛选器
1.直列式筛选器
便于让用户理解下方的单排 tab 元素是基于检索关键词而进行过滤的。
(1)百度:顶部显示+搜索单排横向式
筛选体系:tab
顶部显示的筛选页面适合业务结构专一的页面,筛选维度较少,筛选结果模糊,并且结果控制区与内容展示区的联系强,不需要二次点击跳转交互,用户可以直观的查看筛选结果。
(2)vlive:顶部显示+双排筛选条
筛选体系:tab+列表
2.抽屉式筛选器
拥有成熟且稳固的分类/类目体系的内容平台更适合这种抽屉式的筛选器浮层,可以将完整的类目完全曝光
(1)topshop:抽屉式+半浮层筛选器
筛选体系:tab+列表+标签
半浮层适合业务结构较为复杂的页面,在筛选维度上较多,筛选结果较为准确,并且结果控制与内容展示的联系性较强。
以topshop为例,这里的筛选项主要分为四个:套装/商品、排序方式(价格、新品)、筛选器,最后一个筛选项包含大量条件,例如裙长、颜色、尺码、风格等等,对于这种多维度,深层级的筛选需求我们可以使用tab+列表式+标签的样式。
(2)淘宝 抽屉式+侧边浮层
筛选体系:tab+标签
侧边浮层适合业务结构复杂的页面,相对于顶部显示和半浮层的使用面积更大,所以筛选维度种类更加全面,当筛选纬度超出屏幕页面高度的时候需要通过上下滑动来选择不同的筛选标签,通过更全面的多维度的筛选结果较为精确,但是侧边浮层的控制层与结果层的联系较弱,需要用户筛选完毕之后返回查看。
(3)毒:抽屉式+全浮层
筛选体系:tab+tab
全浮层我们可以理解为展开一个新页面,结果控制和内容展示的联系薄弱,但是能够让用户更加专注于当前页面筛选任务的操作,筛选维度更加全面,能够为用户推荐更为精准的筛选结果。
3.列表式筛选器
筛选体系:tab+直列式+列表+标签
适用于较为复杂的筛选逻辑,并且可以将高频的筛选项作为预期设计提前曝光在单排的直列式筛选项中。
二、总结
尽量保持选项列表短,避免过多的手势滑动,核心目标是帮助用户建立一个简单易用的概念模型,来提高用户的决策效率。