移动端UI筛选组件全面总结

现在很多app和小程序上的信息流都是庞大而繁杂的，为了能过滤出更符合用户需求和产品需求的信息流，合理而明确的筛选设计是必不可少的。

国外设计师曾将市面上移动端的筛选器总结为3种常见模式，个人认为放到现在也适用于国内常见的筛选器形式。这三种筛选器分类为：

• 直列式筛选器（Onscreen Fliter）

• 抽屉/折叠式筛选器（Fliter Drawer）

• 表单式筛选器（Fliter Form）

1. 直列式筛选器（Onscreen Fliter）

• 平铺/滑动字段

• 平铺/滑动标签（按钮状）

• 选项卡标签：相对比较少见了

• 标签卡片平铺：卡片tab会有各种各样的呈现形式

2. 抽屉/折叠式筛选器（Fliter Drawer）

• 全屏/非全屏弹框：一般底部弹出，可容纳全部选项以及不同的筛选组件

• 下拉列表：字段旁通常有三角符号；下拉列表根据窗口大小，可容纳纯列表、标签式列表、复合筛选组件列表

还有浮层形式，浮层一般容纳5个字段以内，可配置在搜索框前端（右图）

• 侧栏抽屉：可复合多种筛选组件

3. 表单式筛选器（Fliter Form）：复合多种形式的筛选组件，如下面的5种

• 开关

• 标签、选项卡、卡片

• 滑块

• 输入框

• 步进器

上图来自网络

筛选维度

总结了筛选器和筛选组件的表现形式之后，来看看筛选的内核——筛选维度。

• 产品规划：产品出于综合考量，通过各方面的数据，制定一个综合的推荐排序规则。如豆瓣的找电影页面，用户在纪录片选项下，有个细分的二级筛选，「默认」的排序，就是产品综合用户数据、电影评分、浏览量等而产生的一个默认维度；

• 用户需求：用户目标相对比较清晰，会有自己的筛选需求，产品进行用研调查后能获知这些筛选维度。比如豆瓣用户更加注重电影的热度和评分，就会产生这样的筛选维度；

• 产品/资源性质：不同产品会有不同的性质，更多表现在种类和分类上面；比如阅读类的筛选维度是书的通用分类、电商类的筛选维度是商品的种类，是有产品所拥有的资源决定的种类分类。下图一级筛选就是按电影的种类产生的筛选维度；
  

多种维度的多层筛选

• 单层筛选：筛选维度一般不超过2个，超过两个可以组合抽屉式筛选器来呈现；筛选器形式通常为字段或标签的平铺和滑动。平铺字段最好5个以内，滑动字段最好不要让用户滑动超过3屏；
  

• 双层筛选：   复合直列式和抽屉式，抽屉式可能包含多种组件，包括表单式筛选器；有一点值得注意的是，视觉表现层面上，目前大部分app的筛选器，标签式的层级不会超过字段式；如右图，标签按钮一般放在字段筛选的下一行。

• 三层筛选：相对比较少见，一般用于「种类」的筛选维度有两层及以上的情况，如知乎的筛选模式，一级和二级的筛选都是基于产品种类的细分。筛选层次一般不要超过3层，否则容易造成视觉累赘，多种层次的筛选可以收纳在抽屉式筛选器里，在外面只显示权重较高的筛选条件。

多层筛选应当注意筛选项目之间的关系

• 包含

• 递进

• 并列

• 互斥 

在制定筛选维度的视觉层次时，可以充分综合产品需求和用户需求，根据筛选项之间的关系和权重分数去确定视觉的层级。

第一次总结文章，欢迎大家提出各自的见解，充分讨论。