App设计体系之筛选

筛选的作用是让用户在众多内容的界面中更快的找到目标内容，而内容越多，筛选条件可能也会越多，无法全部一起显示，需要考虑哪些筛选项要先“隐藏起来”（不展示在第一层级中），哪些筛选项要“显现出来”（展示在第一层级中）。

1、“隐藏起来”

在淘宝的搜索结果界面需要点击界面右侧的筛选按钮，才会出现展现更多的筛选项。

“藏起来”的标准：当有大量筛选项，且大多数用户使用产品时并不需要筛选，或者筛选项使用频次不高时，一般考虑将筛选项“藏起来”。

2、“显现出来”

氧气的搜索结果界面将尺码和类型直接“显现出来”，即使筛选项占据屏幕空间的40%，而买贴身衣物尺寸，罩杯和胸围是必选，品牌等非必选项就集合在一起且“隐藏起来”。

“露起来”的标准：筛选项为必选项，用户使用频次较高则应该“显现出来”。

3、综合说明

为了进一步说明什么该“隐藏”何时该“显现”，以商城app为例。

销量- - -用户从众消费

价格- - -买实惠的给自己，送最贵的给姑娘

返现商品- - -有优惠

新品- - -为了给新上线的商品一些流量的入口

品牌- - -只用某个牌子

香调- - -中意某种味道

以上几点是用户搜索香水的最核心的消费决策点，在首屏顶部“显现出来”，用户通过最少的操作实现目标筛选，在筛选抽屉中的筛选项的优先级远不如首屏中的筛选项高。适合专业用户去探索发现。品牌这个筛选维度也只显示八个筛选项，点击“查看全部”后才显示该维度的所有筛选项，毕竟，选项多会让用户恐惧，必须有所取舍。

小结：如果筛选项不多，可全部直接展示出来；如果筛选项多，那就把使用频次高的筛选项直接放在首屏(展现出来)，而剩余筛选项统一整合到一个容器中(隐藏起来)。

4 常见UI样式与交互细节

4.1 筛选抽屉

4.2 横栏式筛选

4.3 标签式筛选 

4.4 表单筛选

4.5 全屏

在筛选的过程中，按钮中会实时显示筛选结果数，让用户知道筛选结果，能避免因筛选结果数为0而造成挫败感。

5、实际应用

不同类型的App适用不同类型的筛选控件

5.1 电商类

电商类产品的筛选器都是以抽屉的形式从tab栏展开筛选条件，表现形式分为以下两种形式：

5.2 视频类

5.3 旅游类

5.4 模块选择

5.5 特别的筛选