DevUI组件库又双叒叕新增组件啦！CategorySearch分类搜索组件初体验——来自真实业务的反馈

DevUI 近期发布了v11.1.0版本，这个版本给DevUI组件你们族增长了两个新成员：

• 一个是 CategorySearch 分类搜索组件
• 另外一个是 ReadTip 阅读提示组件

这两个组件都很是实用，DevCloud 研发工具链已经有业务在使用了，咱们一块儿来看看来自真实业务使用的反馈吧，如下是 ProjectMan 项目管理业务使用 CategorySearch 组件后的反馈。

---

近期 ProjectMan 服务接入了 DevUI 组件库的 CategorySearch 分类过滤器组件。

初步体验了下，搜索、过滤的体验比以前提高了不少。

1 旧过滤器的缺陷

以前的搜索和过滤功能存在如下缺点。

缺点一：搜索和过滤功能分离

主要体如今：

1. 搜索框和搜索条件的显示分离
2. 搜索框和字段过滤功能分离

以下图所示：

缺陷二：高级过滤交互太复杂，操做效率低

以前的过滤功能有单独的入口，在显示字段的后面

点击这个过滤按钮，会展开一个很高的过滤面板，占用主体内容（工做项列表）的空间。

其次过滤面板为了尽量不占用太大空间，将部分字段隐藏，而后设计了一个“增长过滤字段”的功能，让用户本身按需添加，从逻辑上来讲是合理的，可是从体验上来讲是糟糕的，增长了用户的学习成本，同时下降了操做的效率。

好比：

用户想按工做项的更新日期过滤，过滤最近三天更新过的工做项，须要执行如下操做：

1. 点击过滤按钮，展开过滤面板
2. 点击增长过滤字段按钮，打开字段选择模态框
3. 勾选更新日期字段
4. 点击肯定按钮
5. 点击更新日期下拉框，弹出日期选择面板
6. 选择开始/结束日期
7. 点击肯定
8. 点击临时过滤

替换成新的分类过滤器组件以后，以上过滤需求只须要5步就能够完成，提高了操做效率。

假设上面的日期须要修改，用户想要过滤最近七天的工做项，旧的过滤器须要6步，新的过滤器只须要4步。

缺陷三：交互扩展性差

一旦过滤字段增多，旧的过滤器没法扩展，会不断地占用主体内容的空间，直到屏幕显示的全是过滤条件，没有主体内容。

2 整合、提效和可扩展

旧过滤器的缺陷也是用户的痛点，而这些痛点正是新过滤器要解决的。

优化一：整合搜索、过滤、过滤条件的显示3个功能

新的过滤器将搜索、过滤、过滤条件的显示三者整合在一块儿，只有一个输入框。看着就很是清爽，简单一般意味着用户的学习成本低，上手容易，用户才会喜欢用、常常用。

并且因为将过滤条件的显示也放到输入框中，增长了交互上的可扩展性，无论过滤多少个字段，一个输入框搞定一切。

以下图所示：

优化二：收纳过滤字段

若是只是简单，功能却少了，确定是不行，新的分类过滤器保留了旧过滤器的所有功能，并作了交互上的简化，提升了操做效率和用户体验。

新过滤器移除了新增过滤字段这个蹩脚的设计，将全部过滤条件收纳到一个下拉框中，点击输入框便可弹出该下拉框。

以下图所示：

选择过滤字段以后，立刻会弹出选择过滤值的下拉框，这种交互体验很是天然和流畅，这也是我喜欢这个过滤器最主要的缘由。

除了流畅和符合预期，还缩短了操做路径，提升了操做效率：原来须要8步才能完成的操做，如今只须要5步。

优化三：更高效地修改过滤条件

以前的过滤器因为过滤面板这个糟糕的设计，每次修改过滤条件都要从新打开过滤面板，很是麻烦。

新过滤器能够直接经过点击过滤条件选项，展开过滤值下拉框，直接修改，很是高效。

---

如下是 CategorySearch 组件的地址，欢迎你们试用和反馈：

https://devui.design/componen...