10分钟教你如何选择筛选组件

Posted 2021-01-03 leolei

生活需要筛选，App页面也一样。本文通过案例分析，从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。

 

 

筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时，通过更高效的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏，本文暂不分析。

 

组件包括筛选按钮与筛选器，筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。

 

 

01

 

位于 Tab 栏的筛选组件

 

组件样式

筛选按钮位置：一般位于Tab栏最右侧视觉薄弱区域。

 

筛选器形式：点击按钮，筛选器以抽屉形式从Tab栏底部向下展开筛选条件，或以浮层形式从屏幕最右侧向左滑出筛选条件。

 

样式分析

当界面使用Tab栏时，已为内容做了第一层筛选，多数情况下已满足用户对内容的筛选需求。

 

当筛选类别较多且复杂时，就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低，屏幕右侧为视觉薄弱区域，这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。

 

 

案例一

案例来源于美团App

 

此页是对美食品类的选择，这里的筛选组件在Tab中是最常见的样式。对于用户而言，选择商家店铺优先考虑地域、美食类别、价格及综合评价，而用餐人数与餐厅服务等只是辅助选择条件。

 

筛选器使用了抽屉形式，如要选择此样式，建议在筛选条件不多且不超过一屏的场景使用。

 

 

案例二

案例来源于淘宝App

 

当用户从首页全局搜索后，出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后，由于筛选条件较多，很难一页展示完，用户往往需要上下滑动屏幕查看全部，因此使用右侧浮层展开的形式较适合。

 

 

案例三

案例来源于哔哩哔哩App

 

全局搜索后，Tab栏默认展开综合tab内容，用户对排序、时长、分区的筛选需求较高，因此直接把筛选类别放在了二级Tab栏，相比通过点击筛选按钮再展开类别的交互方式更简单直白。

 

点击筛选类别后，筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少（不超过4项），筛选项数量不多的场景。

 

 

02

 

底部按钮型筛选组件

组件样式

筛选按钮位置：以按钮或浮层形式固定在界面底部，便于用户操作。

 

筛选器形式：点击按钮，筛选器以抽屉形式从按钮底部向上展开筛选条件，或以界面浮层形式从底部向上展开筛选条件。

 

样式分析

使用底部筛选按钮的界面，内容区类别相对单一，通过筛选组件就能满足筛选需求，并对筛选的需求较大。而底部按钮作为常见的按钮形式，用户点击更方便，因此承载筛选组件较合适。

 

若使用此样式，点击筛选按钮后，筛选器的出现优先考虑从底部向上出现的抽屉式浮层。

 

 

案例一

案例来源于旅游类App Expedia

 

输入旅游目的地后进入此列表页，用户目的性明确，就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果，方便用户触达。并且筛选条件较多，无法一页展示完，使用了界面浮层的形式。

 

这里还有2个细节：

 

1、由于筛选类别较多，手动清除单个筛选条件太过繁琐，于是筛选器底部增加了清除按钮，操作更简便。但底部按钮一般为“确定”操作，“清除”放在底部样式上没有做误操作提示，可能会增加误操作机率。

 

2、筛选后，筛选按钮处会显示已选择的筛选类别数量，给用户带来良好的使用反馈。

 

 

案例二

案例来源于dribbble

 

当前页为地点搜索。需要先进行筛选操作，内容区再出现结果。筛选按钮位于底部浮层，筛选类别代替筛选按钮平铺展现，筛选器使用抽屉式从浮层底部向上展开。

 

此样式一般适合筛选类别较少，并且每个类别的筛选项不多的场景。优点是减少操作步骤，提高用户操作效率。并且可以学习一些体验细节：在筛选器中选择一个选项后，在其筛选类别处同步修改为该选项；筛选项与筛选类别选中状态一致，增加关联度。

 

 

03

 

浮层按钮型筛选组件

 

组件样式

筛选按钮位置：以浮层按钮的形式位于界面右下方，占用空间较少。

筛选器形式：点击按钮，筛选器以浮层形式为主，或在筛选按钮下方展开筛选条件。

 

样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间，比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时，它的位置也便于用户点击。

设计时按钮用色需要区别于内容区，内容形式尽量精简直观。若使用案例3中的扇形筛选器，则要求筛选类别为1-2类，筛选项数量少切文案精简。

 

 

案例一

案例来源于dribbble

 

筛选按钮位于界面右下方紧贴于右侧屏边，浮于被筛选内容上层，滑动屏幕时消失。点击筛选按钮后，从屏幕右侧展开筛选浮层，原筛选按钮变为确认按钮。

 

此按钮形式最大限度的让出空间留给内容区，且右下角为用户关注薄弱区，这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过，适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高，相对符合用户认知。体验细节上可学习的点还有按钮功能的改变，使得体验更便捷。

 

 

案例二

案例来源于dribbble

 

筛选按钮位于界面右下方但没有贴屏边，筛选器以底部分层形式从底部向上展开。这里的筛选条件不多，因此使用了底部分层形式。

 

 

案例三

案例来源于dribbble

 

筛选按钮形式与上一案例相似，不同的是筛选按钮处直接显示筛选条件，可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。

 

点击按钮后，从按钮下层展开扇形筛选器，滑动选择筛选条件。此种筛选器样式使用场景较局限，多为选择时长或数量，并且单选居多。因此筛选器不需要“确定按钮”，只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。

 

04

 

举一反三

 

接下来我们拿个案例练练手。

 

下图界面中内容区为概览与各监控数据图表，需要设计一个筛选组件对内容区进行不同时段的筛选。

 

 

在设计之前需要确定几个需求：筛选组件的使用频次、筛选类别的数量、筛选项的数量，单复选关系、筛选条件之间的优先级。

 

进一步明确需求

筛选类别只有时间段1项，筛选数量不固定，为多项，单选关系。当用户进入此页，根据用户使用需求判断“1小时”基本满足用户查看数据的需求，默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求，可判断用户使用筛选组件的频次不高。

 

 

方案解析

方案一，Tab栏形式

Tab是对整页的筛选，多为不同维度，而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近，但用户对筛选组件的需求并不高，放在此位置占用了概览区空间。

 

方案二，底部按钮形式

底部按钮位于用户的习惯操作区，放这里使用层级略高，并且会使内容区的整体高度减少。

 

方案三，浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域，可以使用户浏览时不受按钮影响；但按钮拥有强对比色，在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现，可满足筛选项数量较多的场景。

 

 

05

 

小结

 

以上内容是我对常见筛选组件的思考，每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息，高效决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。

 

编辑：千锋UI设计

本文作者：TXD技术体验团队-喻杰（阿里巴巴视觉设计师）