设计筛选排序控件看看别人家产品怎么做

　　筛选/排序控件在设计中是不可或缺的一部分，如何结合产品特性进行设计也是常见的问题。作者将结合自身经验为我们分析，设计筛选/排序控件该怎么设计。
　　最近做的一个项目中涉及两种筛选维度的组合筛选，难点是：其中一种维度是高频切换的，另一种维度是低频切换的，做成两个tab行或者平行的两个下拉菜单都不太合适。
　　于是梳理了一下竞品都是怎么设计筛选/排序控件的，帮助大家在使用筛选/排序时选择更适合自己的场景。
　　一、什么时候需要筛选/排序控件
　　筛选的作用是缩小展示范围，排序的作用是更改展示顺序。这两个控件本质上是为了帮助用户更快速地找到自己想要的信息。
　　（1）筛选控件有时会用于＂频道切换＂。
　　比如：内容型或电商产品，用tab切换不同频道，每个频道内有自己的形态。
　　（2）而筛选和排序控件共同出现时，更多的是用于列表——即有相同字段的一系列信息。不论是搜索结果的展示，还是已有的列表，比如订单列表的展示，都有可能用到筛选和排序。
　　比如：餐厅列表，有价格、地理位置、评价这些字段，所以可以用这些维度去进行筛选限制或者排序，从而找到用户想去的餐厅。
　　二、筛选/排序控件类型
　　1. 高频筛选低频
　　针对我的项目中的问题，即一个高频切换筛选，另一个非高频切换筛选。
　　竞品通常把非高频的筛选控件放在了右上角，也就是title bar的title旁边（图中紫色圈出）：
　　还有一种，像京东的订单，把高频切换的＂订单状态＂放出来，把非高频切换的＂订单类型＂筛选入口放到了title bar的title上：
　　总之，一个高频筛选另一个低频筛选，宗旨是把高频的筛选项直接用tab展示，把低频的筛选项收起，只保留一个入口。
　　2. 多重组合筛选+排序
　　这种控件常出现在电商类的搜索结果列表中，从多个维度进行筛选，再加上一种排序方式的选择：
　　大众点评的是最常规的一种做法，把所有的筛选和排序控件排成一排形成组合。
　　飞猪除了有大众点评的这一排组合外，还增加了一行常用的特殊要求筛选。用户点选后可以快速进行特殊条件的限定，相当于不用展开右上角的那个＂筛选＂，也就是我标为＂低频筛选＂的下拉菜单，就可以进行快捷操作了，减少了用户步长。
　　饿了么的组合方式是筛选和排序选项全部展开——第一行是展开的常规筛选选项，可滑动或点击下箭头查看更多选项；第二行同样是展开的排序方式选项；第三行还提供了常用的特殊要求筛选项。饿了么这种处理方式使得筛选+排序控件占用了三行，而第一行的美食类型也并不能在一屏显示全。个人不推荐这种形式。
　　建议多重筛选+排序最多占用两行，再多就有些混乱了。
　　从上面这三个例子中倒是可以发现一个有趣的现象：筛选和排序控件混合在一起，无论怎么混合，对于用户来说其实影响都不大，只要是最终能帮用户找到他们想要的结果就够了。
　　在这三个产品中，排序控件都是穿插在了筛选控件中间，但是丝毫不影响用户的理解和使用。
　　3. 另一种对于多重筛选的处理方法
　　同样是从多个维度进行筛选，在爱奇艺和优酷等视频app的＂电视剧＂筛选页面上方直接展开所有维度的筛选项，有5-6行，一行一个维度，一屏显示不下时可左滑。
　　用户设置好筛选条件后，上滑时，顶部出现一行筛选条，显示用户选择的条件；点击这个筛选条，回到顶部，可重新设置筛选条件。
　　＂电视剧＂这个页面是从爱奇艺首页的电视剧频道的＂筛选＂入口进入的。所以用户进入这个页面时，是有明确的筛选目的的。一般的列表页可能不适合一上来就出现5-6行的筛选项。
　　所以，这种筛选控件适用于一进入这个页面就有明确的筛选目标，并且筛选后不常更换的场景。
　　4. 两个tab行的使用
　　文章开头我提到了对于两个维度的筛选，做成两个tab行的方案在我的项目中不太适用。那么，是不是就不能用两个筛选行了呢？
　　我在竞品研究过程中也找到了一些使用两个tab行的案例：
　　这种两个tab行都是存在于第一个tab行的选项不全有二级筛选的情况下的。
　　像百度中，搜索结果的＂资讯＂、＂贴吧＂、＂音乐＂等，就没有二级筛选项；虾米音乐的＂乐库＂＂推荐＂和＂视频＂中也没有二级筛选项。
　　如果每个一级筛选项都有二级，就适合用下方展示的级联下拉框了：
　　5. 横向和纵向排布两级筛选项
　　最后讲一种竞品分析过程中见到的比较特殊的筛选方式：用横向和纵向排布两级筛选项，筛选结果展示在右下方区域：
　　这种展现样式只适用于列表单条内容项所包含的信息比较少的时候。
　　三、结语
　　总结一下，使用哪一种筛选/排序控件取决于筛选逻辑、使用场景和列表的内容项本身。设计时可以灵活使用和做合适的变动。