B端设计速查-筛选 | 这样去做筛选才不会烂

向前进

当我开始认真的做价值输出的时候，那其实对于我或者你们来说都是一个很恐怖的事情。成为大牛之前都会有一段慢慢长夜需要我们独自前行。我已经在这长夜里走了6个春秋了，之后希望你们的陪伴让我在之后走的会不那么孤单。

1、筛选的意义

首先你待知道这个东西是干什么的，他存在的意义是什么。对用户来说他作用是设计，只有了解了这些我们在设计的时候从底层出发才能更好的运用和做好页面的筛选功能

我们在B端设计里，对于一个平台或工具系统而言其包含的数据往往是逻辑复杂其庞大的。在这庞大的数据海里，我们能有用精准的筛选方式来定位我们所需要的数据。这是一个系统所要具备最基础的功能，也是提升用户体验的关键。

-定位数据

大部分时间我们再操作系统时是带着目的来的，页面筛选可以帮助用户对数据进行快速的定位可分类，已解决用户的需要。这样可以更好的提上我们系统的服务质量和水平。

-缩短路径

对数据进行划分，进而缩短查找路径和时间，帮助用户快速找到自己想要的数据。解决用户需求

-内容分类

页面内容过于复杂可以用筛选和分类结合，进行页面内容的分类划分。

2、筛选类型

在筛选类型上我们根据不同的场景，可以把筛选分为，这个分类是是比较粗暴的，如果细分我们在基础筛选里就还可以分出N多了。我的分类原则是不复杂的在各大B端系统组件库（ant design；TD DESIGN ; 阿科design等）里有的拿来就能用的都归类为基础。需要根据业务场景需求定制的筛选组件都归到高级筛选。因为这部分是你需要花心思理解需求的。

-基础筛选组件

通常有多个筛选条件组合而成，系统预设好的字段，用户无法修改。
适用场景：针对特定的业务和场景，除了关键词之外还有其他查询限定词，既支持模糊搜索也满足精准定位。大部分的系统场景基本这个基础筛选都可以搞定。

分类：筛选无非就是、单选、多多选、tep、输入框、下拉选择。这些数据方式组合成的限定条件，对我们的数据或其他进行快速的定位查找。进而缩短我们的需求解决路径提升我们的用户体验。

这些筛选的设计的组件元素，我在项目里基础都用过。

-高级筛选组件

筛选条件自定义组合（灵活且占空间小）。高级筛选占用空间比较小，用户可以根据需要自定义筛选条件，不必将所有筛选条件都展示在界面中。使用更灵活，界面更美观。

高级筛选主要就是灵活多变能够根据当前业务定制符合用户需求的筛选。我把这一类的定制化的筛选组件都归结到高级里。

这是我做的一个项目里对展示内容筛选填充字段内容的弹窗。

3、筛选的基本板式和常规样式

样式是随着页面板式的不同，并不一个一成不变的东西。不要把东西学太死吗。只要用户看的懂，有利于提升我们系统的效率。那就怎么简洁明了怎么来整就完事了。我在项目中就因为要满足业务方还要权衡用户使用行为习惯做过各种其他的筛选组合和方式。

-常规布局

筛选功能大部分的布局都会位于、页面的顶部和左侧。这样的布局在，用户视觉和操作上面，都是一种相对效率更高和简洁的选择。我做的我们的系统。筛选模块基本都是统一的安排在页面的顶部。

-常规样式

虽然筛选的样式可以根据自己的业务搞得花里胡哨，但是还是有几个基础样式可以参考的。平铺；折叠；Tab筛选；单侧选择；表头；综合

平铺

字面意思，就是把你的筛选条件的选择都平铺出来。这样最大的优点就是在操作上直观高效。缺点就是占用地方太大导致屏效降低。最终体验得不尝试。（我们系统大部分页面都是平铺筛选，我是很反对的可是没毛用）

折叠

这是我比较认同的一种筛选方式的样式。理解起来就是把用户高频的筛选条件放出来。把低频的筛选条件折起来。这样就兼顾了效率又提上了屏效。这种方式最大的问题是你永远不知道用户的想法和你的设计差的会有多夸张。永远不知知道自己在用户眼里有多蠢。

tab筛选

多用于区分内容分类。两标签内容区分比较大的情况。这个也会用的很多。本质上就是一种分类。

单侧筛选

在板式左右分布的时候可以采用单侧的筛选。他可以是单侧过个复杂筛选条件的方式。也可以是单侧导航的方式（后台菜单导航不也是一种对整个后台内容的一种筛选吗，你想对不）

表头

就是在页面列表里，对第一字段在表头上对状态或排列方式等的一种数据筛选方式。

综合

就是以上的多种筛选方式，综合在一个页面里使用。

4、说说我的项目

在我做的SaaS项目里，那基本上本文所说的各种筛选方式都用上了。是的在项目里基本是这样的。因为本身我们B端的业务逻辑比较复杂而且数据量比较大。毕竟我负责设计的SaaS平台系统是一个服务全国4000＋企业的大平台。真的是一点不比哪些大厂设计师差。

是的在项目里，大部分时间是很难统一用一种筛选方式去处理所有业务问题的。所以在我的项目里，筛选的设计运用就是在一个大的框架原则下做到尽量的保持页面的视觉表现。

在我项目里这个大的框架原则是什么呢。保证业务流程的通畅、系统操作逻辑的合理。

5、筛选的运用原则

通常我会认为筛选的使用大概可以从以下几个方面去考虑。

-业务

你的筛选要符合业务需求的要求。有没有提说过没有业务的设计都是耍流氓。

-效率

在满足业务的同时你也要考虑用户的操作效率。怎么的页面筛选方式才能让用户更高效的达成解决自己的需求。

-学习成本

你不要觉得没有学习成本就是一个好的系统。在现阶段B端系统没有学习成本是一个不可能的事情。但是过高的学习成本，是会极大的降低用户体验的。所以要考虑学习成成本和通用性。

最后

筛选个功能其实很简单。多看看这几个大厂的组件库和页面参考，大部分情况的业务都是可以解决的。希望这篇文章可以帮到你。

写到这里感觉还是没有没有把这个筛选聊的很清楚。如果要把他聊的在清楚一点，可能就不能单独的说筛选这个功能模块。需要结合到生活场景、业务场景里面去探讨。

但在本文中我又不太想过多的了我现在的项目。因为一旦聊起我自己的项目，就很容易吹牛逼了哈哈。还是希望能够帮到你，在B端设计里走的更轻松一点吧。