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

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