如何设计筛选器

近期我们对一个电商平台的高级筛选进行迭代，希望能提高玩家的选购效率。作为交互，在这次迭代中遇到不少令人纠结的地方，于是整理了几个小感悟，希望和大家聊聊到底该如何设计筛选器。

筛选器是一个在APP中俯拾即是的模块，从电商到酒旅，甚至在社交产品中，都能找到它的影子。它常出没于信息量大的地方，为的是帮助用户“更准更快”的找到想要的玩意儿。但如此常见的模块却并不简单，同样是价格筛选却以不同的样式在不同类型的产品中百花齐放，一味的“向竞品致敬”很难解决工作中的实际问题，只能从头探究一下其中奥妙。

什么是筛选器

假象一下，你年会中了大奖，在众人的“祝福声”中做出请大家吃大餐的艰难决定。你打开XX点评APP - 选择 美食 - 设置 热门商圈天河 - 选择 按人气排序 - 又咬咬牙在筛选栏按下『100-300元』，切换了几次菜式，终于选定目标。摸摸荷包倒吸几口气后，固作镇定的在群里说咱们去这里吧，大家敞开了吃，别客气~ 

以上便是从使用场景到消费决策的完整流程，筛选器在其间占了举足轻重的作用。每一步选择，都浇筑了你的良苦用心和美好祝愿。你是谁，为啥来这里，期望找点啥，都或多或少影响了你的选择。所以说，好的筛选器是各自不同的，但设计目标又是各自相同的：帮助目标用户，既快又准的找到东西。

筛选器的类型

随意打开手机中几个常用的APP，整理了下常见的选择控件样式，真是出乎意料的多（见下图）。

仔细一琢磨，诸多条件间，并没有明确的优劣之分。比如某电商在商品列表顶端，贴心得将关键条件外漏，但某资讯产品却将同样的条件以填鸭式选项卡控件收至二级。所以不得不感叹，筛选功能的设计无非是在各种筛选维度与UI样式的排列组合间，选取最优解。

筛选器的设计原则

高级筛选中，某条件究竟需要外露几个选项？是向改版后的数据提升妥协，还是像个老学究一样偏执于条件间一致性？这背后的纠结也只有参与过改版的人才明白。

1.收vs放

移动端受限于屏幕大小，如何才能“收放自如”显得尤为重要。如果某些维度是用户决策的必经路径，可以帮助用户快速明确目标；或者用户需多次变更的筛选条件，就需要把选项露出来。一些大多数用户不需要的条件，或者使用频次不高的内容，就建议把它用心收起。

2.结构稳定vs快捷偏好

上一次修改高级筛选时，我们结合用户选购时的喜好分布，突出常用条件，弱化低频内容，希望提供更符合“快捷偏好“的选购体验。上线后，在高级筛选处发生的成交数据虽然上升，但也意外收获了些吐槽的声音-用户对于不同条件的“选项展开数量”和“几个筛选功能中条件的包含关系”，表现出困惑和不习惯。

复盘后发现，我们希望带给用户更好的体验，本质是希望用户付出最小成本满足需求，但成本=操作成本+思考成本。之前的改版，就是一味顾忌用户操作的快捷，但无端增加了用户对规则的理解载荷。

所以当选购数据喜欢分布明显时，首屏露出最核心的几个消费决策项，收起低频选项，效果是显而易见的，但需要注意规则的一致及易懂。当玩家选购路径多元时，则需牺牲一些信息的简洁性来保证玩家能在至少一个主要场景下，找到完整的筛选条件。

3.稳定性vs灵活性

由于我们平台交易的是游戏道具，筛选条件多，且条件间关系复杂，容易因误操作带来无结果的消极体验。于是考虑引入“选项间灵活联动”。这在淘宝中使用较多，比如当你选购咖啡时，选择某“咖啡品牌”后，可选的“咖啡种类”会实时发生变化，自动剔除选项间互斥的内容（见下图）。

我们产品未必合适直接复刻这个体验。因为淘宝中产品特征突出，但我们以标品为主，条件间映射关系并不浅显；加之我们条件多，过多时隐时现的条件势必会让玩家迷失。所以最后只选择了几个关键的条件，添加了灵活联动逻辑；并将不可选条件灰显，而非消失，进而在顾忌选项灵活显示的预期下，对稳定性做出妥协。

做筛选器的经验尚浅，没有大而全的方法论，只能简单罗列几个小规律。又出于对工作内容保密要求的考量，删除了具体的改版示例，感谢能坚持看到这里的客官，期待你的小心心~