浅析App筛选器的界面设计

生活中我们一直要在无数的选项中进行选取，而筛选器可以帮助客户在长期的选项中，按照用户的预定条件达到精选的目的，大大提升了客户的决策效率。比如我们可以按照发货地、价位来筛选商品，或是借助价位、地点来筛选租房等等。这篇文章主要分享了APP中筛选器的常用展现方式。

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

目录

1.顶部多行展示

2.顶部浮层

3.右侧浮层

4.底部浮层

5.全浮层

6.总结

顶部多行展示

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

优点：筛选非常直观，且客户选择完后可以迅速发现以下筛选出来的结果。

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

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

顶部浮层

这些样式的入口多出现在底部tab栏中，适应于业务复杂且筛选选项非常多的画面中。

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

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

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

右侧浮层

这些样式只有点击tab栏最左侧的“筛选”选项时就会出现。因为tab栏后面的几个选项在大多状况终于能满足客户的意愿，更多复杂且不常见的选项都会放在最左边的“筛选”里面，所以它的位置也放到了视觉非常薄弱的最右侧。它也适用于业务复杂且筛选选项非常多的画面中。

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

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

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

底部浮层

一般当筛选按钮置于页面顶部或单独出现时，筛选浮层经常放在页面底部。

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

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

全浮层

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

优点：用户的切记力最集中。

缺点：用户不能迅速地发现筛选结果，且选项多操作复杂。如下图：

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

总结

现在主要分享的一件事是筛选器的常用展现方式，我总结了下面4点：

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

2.业务复杂且选项非常多时，可以按照实际状况使用底部浮层、右侧浮层、全浮层等形式。

3.浮层的位置一般会按照筛选的按钮的位置所改变，比如筛选按钮在上面或单独发生时，浮层会发生在上面；

4.全浮层可以让用户的切记力更易于集中在筛选上。