电商ToB产品筛选功能设计心得

ToB电商客服谈天产品

开启一个新产品，首先当然是定位你的产品，形成产品的感性认知。

讲解ToC与ToB产品差别、不同行业ToB产品差别的文章汗牛充栋。

这里只再强调一遍：务必深刻理解你的产品做事的业务的全体逻辑，不仅熟记躯干，还要亲自体验到每一个枝节。
（有无数人强调，也有无数人犯错，这里面的教训可以再写一篇文章了。
）

对付电商产品的筛选功能来说，ToC，是决定用户体验的核心功能之一，筛选漏斗做的越好，用户触达目标商品的可能性就越大；ToB，则是最不能犯错的模块，数据的精准筛选是统统剖析的条件。
筛选功能看似大略，却也有好些坑要填。

筛选的需求

要做好筛选，第一部当然是确定好筛选的需求。

筛选需求一定要详细理解到枝节

筛选需求的搜集，不是理解清楚有哪些筛选项就完了，结合数据库数据，对每一个筛选项预期数量级、单项字节长度范围、是否可以标签化、是否须要多选，都应该清楚。
这里前期的业务逻辑调研就发挥了巨大的浸染。

末了综合全部需求特色，构筑你的目标场景。

筛选模块的功能设计

有了筛选需求，就开始为筛选模块设计功能。

常见的筛选功能：筛选-复选与全选、全局搜索与栏目搜索、筛选记录与快捷打消。

复选与全选功能取决于业务利用需求。
全局搜索一样平常用于单条搜索，在业务路径清晰的ToB产品中不多见，栏目搜索的须要取决于当前筛选栏内的条款数量，一样平常来说条款数量>20当前筛选栏就得有搜索了。
筛选记录与快捷打消功能紧张看筛选行为的频次，如果在一次完全的剖析流程中须要多次筛选，那么筛选记录与快捷打消是一个收益很大的功能，否则这个功能就没有什么必要。

由于我的产品的筛选功能是一个低频功能，故没有为产品方案筛选记录与快捷打消模块，而对付谈天记录的凑集剖析也用不上全局搜索，以是我重点方案了复选与栏目搜索功能。

根据需求建立场景设计功能

筛选模块的交互样式设计整体展现：平铺还是弹出

要对筛选模块进行交互样式设计，除了节制条数字段等基本信息，我们还须要节制用户对筛选功能的利用频次，C端产品须要大量的用户调研确定用户层次，而B端还是对业务现状的理解。

淘宝网筛选

平铺是指将筛选项完备罗列在当前页面内，我们熟知的淘宝网便是采取这种模式，对付淘宝网来说，筛选是个常用功能。

这样展现的好处是筛选更为直不雅观，操作便捷，筛选效率更高。
可以看到这种展现样式有一定的限定，那便是展现条款本身是标签或者可以标签化，要么条款标最大字节长度在较低的水平，总体数量可要掌握在一个合理的区间，如果筛选条款数量多到一屏放不下，则须要考虑弹出式筛选，乃至是将将筛选独立成页。

百度高等筛选

弹出式的代表是下拉列表，百度的高等筛选正是这种样式，对付百度搜索，搜索条件筛选寄托于全局搜索，是专家用户才会利用的功能，并且一次搜索一样平常只需一次筛选，以是设计采取下拉列表，并隐蔽在高等筛选中。

当筛选条款数量较多时，一个额外的空间更为友好。
而如果筛选功能的利用频次较低，将它隐蔽不才一个层级，为关键信息预留更多位置也是很合理的。

栏目搜索的样式

由于筛选条款数>20，故我们为产品筛选添加搜索。

栏目搜索既可以放置不才拉列表顶端，也可以与筛选框整合。

搜索位于下拉列表顶端

搜索位于筛选框内

下拉列表顶端使搜索功能更加明显，但是要多占一行位置；与筛选框整合的话，在筛选框内闪动光标也可以提示搜索功能的存在（以目前的用户教诲水平，光标闪动交互提示完备足够）。

我个人方向于利用第二种，无论哪种，把稳保持整体交互风格的同等性便好。

如此长的商品名——古老的复选框

在实际设计商品筛选时，超长的商品名配上复选需求让商品筛选十分麻烦。
淘宝宝贝名长达40~50字，而且由于主要信息一样平常在全体名字的中部，以是大略省略是不可取。

可如果检点做成下拉筛选框，这里就有一个交互体验问题，单条名称如此之长，商品筛选又常日是个凑集，以至于用户选到后面完备忘却自己选择了什么。

一番思考后，我搬出了常用于上个时期的双筛选栏，合营搜索利用。

双筛选栏

这个双筛选栏常见于一些大型剖析软件（SPSS、ArcGIS等）中，它很好地办理了忘却自己选择了什么、是否选择完备的尴尬。

商品筛选——隐蔽的商品编号

需求中提到，须要用商品编号（ID）定位商品，但是放置一串串相似的数字在筛选框中，这个用户体验可太差了（长数字的可读性太低）。

你猜用户会不会疯掉？

为理解决这个问题，我与前端小伙伴商量了一下。
末了的办理方案是商品ID在筛选框中不显示，但可以通过搜索匹配出来。

数字匹配名称

总结

ToB产品的筛选相对付ToC来说通用性要弱很多，比起用户体验从有到优的优化，很多时候是在办理从无到有的过程。

情形越是繁芜多面，就要看重前期的调研和信息搜集，尽可能考虑好每一个问题。

作者：汪知浩，TP公司成长期产品经理、交互设计师。
热衷微交互，探索妖怪细节。

本文由@汪知浩 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议