《从LRS项目重构看如何做UI设计——组合查询的界面创意设计（一）》

引言：

  在第一遍机房的时候做组合查询的经验我相信大家印象还很深刻，那里面惨不忍睹的if判断和select分支结构，搞得人叫那个晕啊！什么第一个条件，第二个条件，第三个条件……

  其实，这件事儿没有咱们想的那么复杂，之所以会给咱们造成这样的印象那是因为界面的设计的不合理。大家请看咱们之前的样本UI是怎么吧

一看就让人犯怵了，怎么填啊？这么多的框，每一个我们都需要做输入的处理和判断，而且，存在很多的情况。

1、没有组合关系，直接查询：第一个字段名+操作符+查询内容

2、有组合关系：

  2.1：仅有一个组合关系：

    2.11：第一行的字段名+第一行的操作符+第一段的查询内容+（组合关系Or）+第二行的（字段名+操作符+查询内容）

    2.12：第一行的字段名+第一行的操作符+第一段的查询内容+（组合关系and）+第二行的（字段名+操作符+查询内容）

  2.2：有两个组合关系：

    2.21：第一行的（字段名+操作符+查询内容+第一个组合关系（or）+第二行的（字段名+操作符+查询内容）+第二个组合关系（or）第三行的（字段名+操作符+查询内容)

    2.22：第一行的（字段名+操作符+查询内容+第一个组合关系（or）+第二行的（字段名+操作符+查询内容）+第二个组合关系（and）第三行的（字段名+操作符+查询内容)

    2.23：第一行的（字段名+操作符+查询内容+第一个组合关系（and）+第二行的（字段名+操作符+查询内容）+第二个组合关系（and）第三行的（字段名+操作符+查询内容)

    2.24：第一行的（字段名+操作符+查询内容+第一个组合关系（and）+第二行的（字段名+操作符+查询内容）+第二个组合关系（or）第三行的（字段名+操作符+查询内容)

  以上基本上是组合查询里面的逻辑了。额，反正我是醉了，也不知道第一次是咋绕过来的。而且第一次做的时候是所有的代码都堆积在UI层的。哦么噶！无法想象……咱们大家是强大到什么地步才能将它做出来额

  看这次的逻辑实现和UI设计。（只淡淡设计的理念和核心功能的实现）

首先：UI层的设计

1、让用户见到的界面最简单不用思考都知道自己下一步要干嘛！

  具体的控制：form窗体加载时，只让一个下拉框显示，其他的控件采用动态加载。也就是说当下拉框中的内容填写好之后，紧接着后面的操作符框就为用户自动加载出来了。每一次用户只需要填写一个空的内容，逻辑简单，界面干净简单。

效果图：