前言

筛选排序能够减少用户平时的使用 app 的操作成本，提高效率。今天我们从筛选排序的作用说起，结合业务结构的复杂程度分析一下，不同的筛选排序样式适合什么样的业务场景。

目录

1.筛选排序的作用

2.筛选排序的功能组成

3.筛选排序的展现形式

4.总结

筛选排序最大的作用：提高用户的操作效率！

用户通过各种筛选维度和 UI 样式的排列组合中选取最优组合，提高用户的筛选操作的效率。

例如我们需要购买一些商品的时候，如果一一查找费时费力，甚至会放弃购买！但是我们可以通过筛选排序功能，缩小筛选结果的范围区间，帮助用户在筛选结果里快速的找到符合自己心理预期的商品！例如网易严选：

网易严选通过多维度筛选条件的设置，使得用户可以根据自己的心理预期来进行选择筛选条件，通过筛选会展示符合筛选条件的商品结果，而这时候用户可以在筛选结果中选择自己心仪商品。

对于筛选功能结构最简单的理解就是：结果控制+内容展示。

结果控制区通过不同维度的对标签进行筛选选择组合，再通过内容展示区来显示筛选结果的排序，以便用户查看结果。

筛选排序的展现形式主要分四种：顶部显示、半浮层、侧边浮层、全浮层。

筛选排序的展现形式在很大程度上取决于自身的业务复杂程度，而不是根据设计者的喜好！

a.顶部显示适合业务结构专一的页面

顶部显示的筛选页面适合业务结构专一的页面，筛选维度较少，筛选结果模糊，并且结果控制区与内容展示区的联系强，不需要二次点击跳转交互，用户可以直观的查看筛选结果。例如人人视频、nice：

人人视频主要针对业务是海外电视剧，相对于其他视频平台，它的业务更加专一，筛选维度的种类较少，固定在顶部即可，不需要在进行二次点击。而 nice 的好货页面的主要业务针对于潮流运动鞋，潮流具有很很强的“时效性”和“热度”，所以筛选维度较少，仅通过“热度、最新、价格“用户最关心的三个维度即可满足需求。

b.半浮层适合业务结构较为复杂的页面

半浮层适合业务结构较为复杂的页面，在筛选维度上较多，筛选结果较为准确，并且结果控制与内容展示的联系性较强。值得一提的是半浮层的结果控制区的空间大小是相对弹性的，由筛选标签的数量决定的。以摩托迷为例：

摩托迷的选车业务较为复杂，筛选维度较多，用户需要在“排序、价格、排量”三个重要维度里面进行二次筛选，这样做的优点是能够帮助用户的精准的筛选结果。

c.侧边浮层适合业务结构复杂的页面

侧边浮层适合业务结构复杂的页面，相对于顶部显示和半浮层的使用面积更大，所以筛选维度种类更加全面，当筛选纬度超出屏幕页面高度的时候需要通过上下滑动来选择不同的筛选标签，通过更全面的多维度的筛选结果较为精确，但是侧边浮层的控制层与结果层的联系较弱，需要用户筛选完毕之后返回查看。例如闲鱼和贝壳租房：

闲鱼和贝壳租房的业务场景复杂，筛选维度详细，需要用户结合交互滑动完成筛选任务的操作，多维度的筛选让结果更加精准，结果更加符合用户的心理预期。

d.全浮层让用户更加专注

全浮层我们可以理解为展开一个新页面，结果控制和内容展示的联系薄弱，但是能够让用户更加专注于当前页面筛选任务的操作，筛选维度更加全面，能够为用户推荐更为精准的筛选结果。例如途家和 WEAR ：

途家和 WEAR 的筛选页面都是全浮层的形式，用户可以更加专注的当前筛选任务的操作，通过多维度复杂的筛选，最终筛选出较为精确的结果。

* 重要常用的选项固定在顶部

重要常用的选项属于用户高频点击使用的筛选维度，将“它”固定在顶部有利于用户快速点击筛选，有效的提高了用户的操作效率，并且不需要用户二次点击，见面了不必要的交互步骤，提高了用户的使用体验。例如小红书和下厨房：

小红书将“综合、销量、上新、价格”等重要的选项和用户常用的“自营”选项固定在顶部供用户快速选择；下厨房则是把用户常用的蛋糕种类设置成标签的形式供用户快速选择。

筛选排序设计的形式取决业务场景的复杂程度，而非设计者的喜好。我们可以参考业务结构的复杂属性来作为参考，业务结构简单的话我们可以采取顶部显示或半浮层的形式；而业务结构复杂的我们可以选择侧边浮层和全浮层的形式；重要常用的选项可以固定在顶部，可以提高用户操作效率和用户体验。

参考链接

【JOIN产品实战笔记】市值100万到10000亿的App，都是如何设计筛选功能的？

https://zhuanlan.zhihu.com/p/21784812

筛选与排序的设计逻辑

https://zhuanlan.zhihu.com/p/35418096