生活中我们经常要在无数的选项中进行选择，而筛选器可以帮助用户在大量的选项中，按照用户的预定条件达到精选的目的，大大提高了用户的决策效率。比如我们可以根据发货地、价位来筛选商品，或是通过价位、地点来筛选租房等等。这篇文章主要分享了 APP 中筛选器的常见展现形式。

其实 tab 栏和搜索都可以算作筛选，这篇文章主要阐述的是由不同类别和各类别下的选项组成的筛选器。常见的展现形式有顶部多行展示、顶部浮层、右侧浮层、底部浮层、全浮层5种。

目录

1.顶部多行展示

2.顶部浮层

3.右侧浮层

4.底部浮层

5.全浮层

6.总结

顶部多行展示

这种形式多出现在视频 APP 中，每一行都对应一个类别，每个类别向左滑动可以显示更多的选项。适用于业务结构单一、筛选类别较少的场景中。

优点：筛选比较直观，且用户选择完后可以及时看到下面筛选出来的结果。

缺点：结构单一、类别较少，结果比较模糊，不适格较复杂的业务。如下图：

以优酷和腾讯视频为例，它们都是以视频为主要内容的应用，业务比较专一。且筛选类别都是以评分、地区、种类、是否院线、上线时间、是否会员独播等为主，筛选类别较少并且已经大多固定在这几个类别中，所以使用了这样的展现形式。

顶部浮层

这种样式的入口多出现在顶部 tab 栏中，适应于业务复杂且筛选选项特别多的场景中。

优点：选项多，可以进行更复杂的筛选，且筛选结果更细致精准。

缺点：筛选类别多且复杂，操作繁琐，用户需要花费较多的精力在筛选上。如下图：

以链家为例，点击顶部 tab 栏中的区域和价格都会弹出一个浮层，为用户提供了更多、更精准的选项，浮层的高度会随着内容的多少而变化。

右侧浮层

这种样式只有点击 tab 栏最右侧的“筛选”选项时才会出现。因为 tab 栏前面的几个选项在大多情况已经能满足用户的需求，更多复杂且不常用的选项就会放在最右侧的“筛选”里面，所以它的位置也放在了视觉比较薄弱的最右侧。它也适用于业务复杂且筛选选项特别多的场景中。

优点：筛选类别多，且筛选结果精准细致。

缺点：操作复杂，用户需要花费较多的精力在筛选上面。如下图：

以淘宝和京东为例，它们 tab 中的综合、销量、价格等选项已经能满足大多数用户的需求，但用户想选择发货地、价格区间、品牌等更细节的条件时，右侧浮层的样式就提供了更多的选项，并且还为用户提供了一键重置按钮，方便用户重新选择。

底部浮层

通常当筛选按钮放在页面底部或单独出现时，筛选浮层就会放在页面底部。

优点：处于页面底部，手指更容易点击。如下图：

以飞猪火车票页面和 Soul 为例，飞猪的筛选按钮放在了页面底部，而 Soul 的则单独出现，它们的筛选弹窗都使用了底部浮层的样式，手指很容易就可以触摸到选项。

全浮层

全浮层其实和右侧浮层有点类似，它的页面占用面积是最大的，适用于业务更复杂，且筛选类别更多的场景中。

优点：用户的注意力最集中。

缺点：用户不能及时地看到筛选结果，且选项多操作复杂。如下图：

以马蜂窝和链家为例，马蜂窝火车票的筛选，以及链家顶部 tab 的更多选项都使用了全浮层的展现样式，让用户把注意力更好的集中在筛选这件事情上。

总结

今天主要分享的一件事是筛选器的常见展现形式，我总结了以下4点：

1.当业务单一、筛选类别较少时可以使用顶部多行的展现形式；

2.业务复杂且选项特别多时，可以根据实际情况使用顶部浮层、右侧浮层、全浮层等形式。

3.浮层的位置通常会根据筛选的按钮的位置所改变，比如筛选按钮在底部或单独出现时，浮层会出现在底部；

4.全浮层可以让用户的注意力更容易集中在筛选上。

原创： 青山       公众号：海盐社