| 交互设计 | Web筛选器的设计

一、动态筛选器

        动态筛选器，是当用户选中了一个条件后，筛选器中所对应的筛选项消失，选中值展示在面包屑导航区域，并且筛选器中的其他筛选值根据已选项联动更新。

动态筛选器示例——淘宝

应用场景

        动态筛选器在电商中应用广泛，如淘宝、天猫、京东、苏宁易购等主流电商，均采用的是动态筛选器。 由于电商商品类目较多， 且不同类目对应的筛选项也会不同，如，选择了”品牌“，与该品牌相关的选项会级联更新。为避免筛选项目过长，并为用户提供足够多的筛选选项和精确的结果，动态筛选器会更加合适。

优点

1） 在选择的过程中，已选项会影响其余选项是否存在。因此，无交集的选项不会同时出现，可保证用户在筛选的过程中一定会有筛选结果。

2） 筛选器中的选项会根据已选择的结果进行更新，筛选器的高度不会过长。

缺点

1） 筛选器高度会在每次筛选结果后刷新变化，导致页面会出现跳动，且筛选项愈来愈少，需要用户不断适应。

2）如果需要调整选项，必须先取消已选选项，等页面刷新出其他选项后，才可重新选择。一旦用户需要频繁调整选项，体验的流畅度和满意度会降低。

二、固定筛选器

        固定筛选器，即筛选器的选项是固定的，各个筛选项之间是相互独立的。

固定筛选器示例——自如

应用场景

        固定筛选器适用于分类比较明确，且筛选条件不超过10个的情况下。

优点

筛选切换方便，已选选项不会影响其他选项，因此在选择过程中页面会保持稳定。

选项固定页面文档——美团

缺点

1. 筛选项较多的情况下，筛选器的高度会较长。若做隐藏等处理，若用户不注意，可能会忽略掉部分筛选项。

隐藏部分筛选内容示例——文都网校

2. 由于各个选择之间是相互独立的，最后结果是各个选项的交集，会出现交集为空的情况，因此会有筛选结果无值的情况。当筛选条件越多，筛不到结果的情况就会越多，会给用户带来一定的挫败感。

筛选无结果——自如网

总结

        动态筛选器，筛选器中的选项会根据已选条件更新在该筛选条件下可选的值，已选选项会影响其他筛选项。而固定筛选器，筛选器中不同选项之间彼此相互独立的，已经选择的筛选项，不会影响其他选项。希望大家根据产品实际场景，选择适合的筛选器！~

参考网站

动态筛选器：天猫 ，淘宝，京东，1号店，沪江网校，苏宁易购

固定筛选器：美团，58同城，自如，大麦网，Boss直聘，拉勾网

---

感谢阅读~希望这篇文章对你有帮助 ：）

By 爱生活爱旅游的用户体验设计师 do小鱼

你也许还感兴趣：

后台产品这样设计更高效

课程类商品营销落地页改版

如何提升商品详情页转化率？这5个电商要素必须知道！

交互设计成长记录—入职3个月小记