浅析App筛选器的界面设计

作者:佚名 来源:海盐社 时间:2019-07-18

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

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

目录

1.顶部多行展示

2.顶部浮层

3.右侧浮层

4.底部浮层

5.全浮层

6.总结

 

顶部多行展示

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

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

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

浅析App筛选器的界面设计

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

 

 

顶部浮层

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

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

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

浅析App筛选器的界面设计

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

 

 

右侧浮层

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

优点:筛选类别多,且筛选结果精准细致。

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

浅析App筛选器的界面设计

浅析App筛选器的界面设计

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

 

底部浮层

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

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

浅析App筛选器的界面设计

浅析App筛选器的界面设计

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

 

 

全浮层

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

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

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

浅析App筛选器的界面设计

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

 

总结

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

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

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

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

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

 

 

 

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