最近做了一个和筛选有关的case，对目前市面上移动app的筛选功能做了横向比较，包括各大电商、机酒票务平台等。各家模式趋同，又有差异化，我对此进行了一些思考，希望对大家有用。

什么是筛选？ 

计算机：查询时的限制条件 ；

生物：在多数物质中按预定目标就某种具有特定性质的物质进行精选的操作过程 。M

总而言之，就是：来帮助我们找出符合需求特性的内容的。那么，当我们设计筛选器时，除了常规的信息架构（IA）之外，还会考虑哪些方面呢？

如何构建筛选信息的逻辑关系？ 

首先，从“需求特性”开始。“需求”（同一时间内）可能不止一个，而物品的特性可能会跨越不同纬度。对于一个筛选器的逻辑来说，在相同/不同维度之间的选择关系就变得尤为重要。

交集vs合集 

横向对比市面上电商、O2O等行业的移动App，基本遵循的规则是：在各纬度中选择一个筛选条件，筛选结果的内容必须符合条件的交集。即，选出来的物品需要同时符合所选择的多个条件（如果选了A、B，那么只有同时满足A和B才会出现在在结果中）。

这是一条很简单的易懂的规则（非常符合普通人的心智模型，以至于我自己在做筛选设计时都差点忽略这一点）。同时还有另一条非常简单的规则：在同一维度里（或压根没分维度）筛选时，如果可以复选，那么最终结果将会是各条件的全集（如果选了A、B，那么只要符合A或B中任意一项就会出现在结果中）。

对于简单的app来说，使用任何一种规则，既可以保证筛选器的逻辑清晰，又可以让用户精准的筛选出目标结果。

图1，“HOSTELWORLD”、“穷游最世界”的筛选功能逻辑简单、清晰

对另一些业务来说，比如各大电商app，用户在寻找商品时的需求会更复杂，仅以上述单一某一种形式是无法满足用户的。于是就出现了在筛选时同时有“跨纬”和“同纬”的复选可能。虽然看起来变得很复杂（设计逻辑乍看无比复杂，难以被认知），不过神奇的是，我们的直觉能够很自然的解决这方面问题（想想我们在pc上逛电商使用筛选器的经历）。只要严格遵守原始的2条规则，仅仅是把两种逻辑融合，并不会给我的使用带来多大的困扰。

图2，JD中筛选“单反相机”，就有“跨维”复选的情况，但并不会给我们（用户）造成困扰

单选vs复选 

光有“跨维”和“同维”的结合也是不够的。由于各维度中条件的性质不同，单选和复选可能也无法保持统一。比如“距离”：“在500米以内”和“在1公里以内”同时选择就毫无意义。如果该筛选器的其他维度有复选的需要，那么就无法统一了。这时候，我们就需要搞清楚2件事情：

如何定义一个维度中的条件的选择模式 如何告知用户不同维度有不同的选择模式

搞清楚1，可以从多个的角度入手。从条件本身的性质和相互之间的关联度来考虑是否需要复选（这块以后有机会展开再说）；另外也可以通过用户使用频率——易用性层面来考虑。我个人比较推崇的做法是：选择一种模式作为基础，个人倾向于单选，随后根据用户实际需求将部分维度扩展为复选。

图3，“淘宝”、“去哪儿-酒店”都出现了单/复选不统一的情况。这两家在考虑这个问题时，大概是以“类”和“标签”作为单复选的依据的。“类”使用单选，而“标签”可以复选

弄明白了1，2就会比较简单了。我推荐“饿了么”、“百度外卖”、“美团-外卖”等app的做法：将基础模式视为整个app统一的默认行为方式，对特殊模式作标记并提示。

图4，“饿了么”和“美团-外卖”的默认选择模式是截然不同的，但他们都标记出了特殊模式

什么样的方式更加有效率？ 

我们会发现，筛选条件事实上是有权重的。接下来，我们来看看“帮助…找出”这方面怎么能够做的更好。

信息结构vs快捷偏好 

从认知角度来说，一个完善合理的信息架构能够帮助我们“更容易寻找与管理”目标内容。通常的做法是将信息结构的顶层打散，把权重最高的2-3个筛选维度平铺展示给用户（通常混合排序功能），其他权重较低的维度会被收纳进“更多筛选”的合集中。小体量的筛选器不需要做更多的优化，因为选择不是很多，可能实际的用户使用频率也不是很高。  

图5，“大众点评”将使用中最重要的“位置”、“菜系”两个维度释放出来，其他维度收纳在右侧“筛选”中

然而在电商和O2O的场景下，筛选器的体量通常是很大的，可筛选维度也可能超出10项。那么多的维度，只有信息架构任无法解决问题：如何帮助用户缩短常用筛选操作的路径和时长？

于是，在国内——世界最先进的——电商业务的驱动下，孕育了”快捷偏好”的思路（由理智又美貌的克总—Clara总结，非常贴切）。“偏好”决定了被收纳的次维度中哪些权重更高（用户更看重的），而“快捷”就是要把这些高权重的次维度（甚至是条件）也释放出来。 

图6，相比点评，美团将一些常用的筛选条件也释放到页面中（虽然不是传统的筛选器形式）

我们再看另一种释放子维度的方式：从“特征”和“灵活性”上来考虑。比如“手提电脑”与“单反相机”就有完全不同的物品特性，这些特性也会生成完全不同的筛选维度。这些次维度随不同物品而产生，是变化的。若按照小体量的做法（收纳进“更多筛选”），用户在查找某个物品的时候，就难直观的知道能做哪些筛选。将这些维度释放出来，可以帮助用户快速理解筛选维度，我把它看成是“快捷偏好”的扩展形式。

图7，两家电商都将“单反相机”部分筛选维度释放出来，虽然重点不同

通常来说，在小体量的筛选器中，被释放的信息结构的顶层维度与“更多筛选”互补形成了IA的全集。那么对于“快捷偏好” 来说，是应该同时被包含在“更多筛选”中（仅作为快捷入口），还是独立出来与“更多筛选”互补形成全集？

我个人更倾向于“独立-互补”的做法。首先，“被包含”会让整个筛选器很臃肿。再者，“独立-互补”的做法可以有效的减少“更多筛选”中的维度条目，在直观表现上分工更明确。从“特性-灵活性”来考虑，“快捷偏好”负责物品特性，而“更多筛选“就能专注于平台/服务的通用特性，这样反而使整体结构更加稳定。

图8，“京东”的“快捷偏好”同时被包含在“更多筛选”中，显得非常臃肿

图9，相比之下，“淘宝”的筛选就显得比较干净

固定vs灵活

有时我们会发现，“跨维”复选的交集并不能帮我们找到任何结果。换句话来说，用户做了无用功。比如筛选“品牌-如家”+“酒店星级-5星”，结果是不存在的。

一些app展示固定的维度和条件，用户使用时不容易迷失。但是如果维度和条件数量较多，那么它们之间的关系就变得复杂，最终导致“无用功”的情况。

图10，在“一号店”筛选咖啡粉，并不能预知筛选结果

于是，部分app开始让筛选变得更灵活。简单来说，就是在用户选择一个筛选条件后，系统自动过滤掉与用户选择的条件没有交集的维度或其他条件。再换句话说，用户进行筛选时，不但对内容进行了筛选，同时也对筛选器本身进行了筛选。但当用户重新调整筛选时，就比较容易迷失（因为总是在变）。

图11，“淘宝”的快捷偏好非常灵活，为用户过滤了无意义的维度和条件

如淘宝，产品特征分的非常细，从“维度”层面就开始过滤，算是灵活性的极致了。而市面上大部分的app并不需要如此“灵活”。我比较推荐“去哪儿-酒店”的做法是：在固定的维度框架下，仅过滤筛选条件。结合固定和灵活的优点，同时保证了结构的稳定，以及使用效率。

最后，我们再看看海外电商App的筛选器，用的是传统的方式（在传统方式下还是有很多细节值得学习）。而国内的企业更重视运营，也驱动了体验设计往更细的方向深入。

图12，国外的两大电商仍使用传统结构的筛选器，IA有条理，交互逻辑也很清晰

作者：点融设计中心DDC Lief

地址：http://ddc.dianrong.com/?p=385

请支持原创，转载/引用皆请标明作者和出处，本文版权归点融设计中心DDC所有

点融设计中心DDC（全称Dianrong Design Center）隶属于点融网技术部，是一个全功能的设计团队，包括交互设计、视觉设计、用户研究、用户体验文案设计、动效设计及品牌平面设计等，致力于打造互联网金融产品的极致体验。

欢迎关注微信号：点融设计中心DDC，微信ID：DR_DDC