简单的筛选并不简单
在做一个多级筛选页面,发现看上去简单的多级筛选功能,其实还是有很多逻辑上需要注意的地方。下面有两个筛选条件的截图,差别在哪里?
两图都是有统计每个筛选条件下的数量统计,每选择一层的筛选条件,下面的筛选条件会联动更新数量和选项。而区别是图1有固定区域显示当前选择的筛选条件,并可以进行取消。图2是在当前筛选条件增加底色来显示当前选择的筛选条件。
筛选条件要不要有?
嗯,筛选条件罗列的好处挺多的,用户知道自己已选择的筛选条件,快速解读当前搜索结果的定义,也可快速回滚到自己想要的筛选层级。But,我也看到一些中台系统是没有这个筛选条件的。靠当前用户选择标识来显示当前筛选条件。
这个思考了一下,大概原因:
- 中后台筛选条件和筛选项并没有电商等大型查询平台那样选项多,筛选条件层级多的问题。用户筛选条件在5个以内还是能很好的记忆到。但是超过5个后,用户无法记住自己的筛选结果。要倒退筛选结果困难度会上升。
- 中后台筛选条件的动机是快速找到我要找的结果,结果是可预知的。而查询平台的筛选条件动机是过滤掉我不需要的信息,结果是不可预知的。
- 若选项上有数量统计,则需要做好数量统计的即时更新,选项为空是隐藏还是以数量统计为0,禁止态显示,这些在设计上需要考虑到。在实战中,因为数量统计的联动与不联动,对用户在进行筛选上是有很大迷惑性的。联动了,在每级筛选下,部分选项会渐渐隐藏,如何返回上层筛选。不联动,当筛选一层层下来,数据越来越少,甚至无,如何反馈给用户,减少用户操作成本?在设计当中要认真思考。
大厂们的多项筛选
淘宝
京东
亚马逊
ant-design中后台案例
总结
这个多级筛选是个很基础的功能,但是总结起来,还是挺多的,要提醒自己在做相似功能时要多思考。(嗯,更多因为自己被坑的血泪教训)