当我们聊设计的时候，我们在聊些什么？（二）

优化

上周我们做出了一个带分组的实现，但是并不好用，现在我们来考虑怎么优化。

不足

1.当前添加关联关系只能添加到每个分组最后的位置，如果我们想添加到当中的位置就很不方便。

2.当前多个关联关系无法转化为分组。

3.对于没有sql相关知识的用户，嵌套的条件过于复杂，不利于理解和使用。

4.每个条件占据的空间太大。

5.增加查询条件支持的种类。

6.日期选择时可增加一个月前，一周前，当天等快捷选择。

新的实现

1.针对不足4，修改布局，把每个条件修改到一行内展示，同时改小输入框大小和间距。

2.针对不足5，新增了两种下拉框的输入方式，可支持单选和多选。

3.针对不足1，在每个条件之前新加了添加关联关系按钮，点击添加即可在当前位置后插入一条新的查询条件。

4.针对不足3，取消嵌套的功能，仅保留一层分组。减少使用的学习成本。

5.针对不足2，在每个条件前新加了checkbox，勾选条件并点击分组按钮，即可将多个条件新加入一个分组。

需要注意的是，只有连续的条件才可合并分组，因此checkbox在勾选和取消勾选时会对状态进行校验，只允许操作两边的按钮。

如果勾选中的有分组，应该将条件和分组合并，而不是嵌套。

6.针对不足6，时间组件内新增快捷选择，对常用时间选项一键选择。

感想

这次我们进行了一次设计优化的实例。对于任何设计而言，使用和持续优化都是获得一个好的用户体验所必须的步骤。

对于很多开发设计出来的组件，往往会更多的关注可用。它会覆盖到所有开发认知以内的功能，但是这样的设计对于非专业的用户来说，往往是多余的。

去繁就简，界面更整齐的排列，给常用功能提供快捷操作，合理的禁用非法的操作，都是让组件更好用的，好的改变。

github：https://github.com/4cos90/condition/tree/master