这是 B 端交互优化的第二篇，今天要分享的案例也是比较常见的

—— 列表筛选表单设计

基本上教过的有工作经验的学员都碰过在这个模块上翻车的经历，表单设计得乱七八糟，各种状态没有考虑，功能没有闭合，或者干脆就不知道怎么下手。

所以这次收集的案例中我们优先挑了这个模块来优化，给大家打个样，下图是该学员目前的案例：

这个案例目前被需求方和用户吐槽，上方的筛选模块占比太大了，而且感觉内容很多，下级的选项全部露出不方便使用。

所以，针对页面的功能以及需求建议，我们一起来来看看优化的方案。

Step1:模块拆分

• “异常事件处理” 居然是整个页面的标题，而不是筛选模块的标题，所以我肯定要把它从模块里独立出去

• 大致确认上方的模块高度应该控制在 300 左右，才能让页面显示较完整，不会过度隐藏下方的列表

Step2:模块内部切割

这一步要理解整个组件包含的字段和层级，筛选的内容显然是可以做分类的，所以我们分成了3个类别，包含 “基本信息”、“事件信息”、“其它信息”

• 然后，每个分类最多 4 个，那么我就对右侧的表单区域进行纵向切割，等分成4列，当然如果考虑全局其它页面的类目数量，也可以适当增加

• 同时，将搜索和重制按钮独立成一栏到下方去，不用和内容硬挤

Step3：表单控件优化

• 除了分类标题，每个表单作为一个筛选项，还包含：筛选标题、筛选结果两个部分，因为选框够长，所以做左右排列

• 在还没选择的前提下，我们的检索目标是通过标题找到要调整的表单，所以标题的权重肯定更高，这时候强化标题颜色弱化默认 “全部” 的色彩

• 同时添加下方搜索的按钮色，搜索按钮默认是不可点的，因为没有修改表单

Step4：处理选中样式

• 每个表单包含默认、选中、选完三种状态，我们对它进行呈现。选中的情况，会有彩色的边框，以及下拉弹窗

• 对日期弹窗进行优化，将快速选择放进下级菜单面板里，默认使用 “自定义” 选项，可以通过点击确认来选择单个方向日期

• 对选完的表单，修改表单边缘和背景色，以及选中的文字信息，提升识别的效率

Step5：处理搜索结果

• 搜索结果需要点击搜索按钮才会发起请求更新，那么搜索结果就要和默认有一定的区别，左下角空白处增加搜索结果条目的提示

• 重制按钮是默认清空选项但并不是清空同时刷新搜索结果，所以方便在搜索结果中回到默认状态，添加了 “清除选项” 文字按钮

  
  

时间关系，样式不会优化得太完善，理解思路和交互即可。最终的结果可以看下图：

筛选表单的情况多种多样，今天我们只是展示了其中一种优化方案，不知道大家有收获没有。

后续还会展示更多其它的处理方法，拓展交互的极限～

我们下篇再贱……

新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～