当我开始认真的总结自己过往学习知识时。也是我自己的又一次从新学习，在成为大牛之前会有一段漫长的夜需要我们独自前行。我已经在长夜里走了6个春秋才让你看到我。希望我能有幸陪伴优秀的你一起前行。守得云开见月明，我们能在顶峰相见。

第一部分 | 筛选基础知识

1、筛选意义

明白筛选的意义前、你要思考一下筛选是干什么的。他为什么在页面存在。对用户的意义。只有思考明白了这些问题那么。我们才能从底层出发、利用好筛选的意义来做好页面设计和用户体验。

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

所以筛选的意义；定位数据、缩短路径、内容分类

1.1、定位数据

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

1.2、缩短路径

对数据进行划分，进而缩短查找路径和时间，帮助用户快速找到自己想要的数据。提升用户体验

1.3、内容分类

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

2、筛选类型

在筛选的类型上我们可以根据不同的场景进行分类。当然也可以根据功能进行更详细的分类。

我在做项目时的分类原则是。不复杂的公共组件如可以在各大设计规范（ant、TD、阿科）里拿来直接用的基本都归类为基础筛选。需要根据业务场景需求定制的筛选组件都归到高级筛选。高级筛选是你需要花不少心思理解需要去定制的。

2.1、基础筛选组件

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

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

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

2.2、高级筛选组件

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

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

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

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

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

3.1、常规布局

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

3.2、常规样式

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

- 平铺

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

- 折叠

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

- tab筛选

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

- 单侧筛选

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

- 表头

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

- 综合

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

第二部分 | 我们实战项目

1、我的项目

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

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

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

2、筛选的运用原则

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

2.1、业务

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

2.2、效率

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


2.3、学习成本

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

写在最后

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

守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。

Powered by Froala Editor