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...