版权归作者所有，转载请注明出处
关于筛选菜单的设计思考
我公司产品是数据型产品，对数据的查询筛选是用户非常频繁的操作，我司之前使用的筛选样式比较随意，没有形成组件，我通过对竞品研究，尝试结合我司业务，设计出符合使用需求的筛选组件。
筛选条件的常见功能要求
支持单选/多选混合选择
从筛选条件数量上可以支持较多和较少的筛选条件，
支持对筛选条件修改
可以保存复杂的组合条件，便于以后调用
可以支持筛选条件悬浮
结合业务，我选择了 支持多选、单选、支持展开收起、支持编辑、悬浮几个功能点。
单选、多选混合时的处理方法
对单选和多选区别使用不同的样式（比如单选使用单选框，需要多选的直接使用复选框），直截了当的展示给用户。适用场景：适用单选多选混杂，两种选择都较为高频的使用情景。缺点：无法满足某项即支持单选，又可以支持多选情况。
通过模式区分，分为单选模式和多选模式。单选模式下，该项只能进行单选；多选模式下支持多选。由于多项选择较低频，操作放置在了更深的一层进行，使界面整洁规整。
竞品分析
筛选条件选中后的处理办法
方法1：选中后，被选中的项显示在筛选框顶部，同时隐藏掉该选项。
这种处理方式不利于快速修改筛选项内容，电商网站一般使用这种办法。原因我猜想可能一方面为了节省页面空间，另一方面，用户购买产品时一般带有明确的目的性，是一个层层深入的删选过程，不会在产品和类别间来回跳转，所以当用户指定一项条件后，该条件的其他同类项对其而言已不重要，可以收起该项，给产品更多的展示空间。
方法2：选项被选后标记为选中效果。
和方法1的区别在于已选项的处理问题，这种方法修改成本相对较少，特别对多选项的修改。方便用户频繁修改删选条件场景。当用户的目标性稍弱，或者需要频繁修改筛选条件，且页面空间较富裕时可以使用。为了快速重置，可以提供重置按钮。
字段对齐问题
关于是否对齐这个问题我选择的是控制对齐，以保持界面的规整。但对齐带来的要求就是需要控制字段的最大长度，需要和涉及的产品沟通字段命名限制，字数长度若还是超出，就使用点点点替代，鼠标移上去给title提示全名。
关于如何对齐，中国制造网和京东使用的左对齐。淘宝没有强行控制对齐，控制字段间相等间隔。
在key的处理上，三者采取了不同的处理方法。中国制造网的右对齐应该是出于key和value之间阅读速度快，无障碍的考虑；京东为了保证视觉的绝对一致，key使用了左对齐；淘宝则是能对齐的地方对齐，不能对齐的地方就不管了。
我使用的方法和中国制造网相同，兼顾美观和阅读效率。同时我们的表单也使用右对齐处理方式。
最终产出的筛选样式
