《从LRS项目重构看如何做UI设计——组合查询的界面创意设计(一)》
2015-05-24 21:05
295 查看
引言:
在第一遍机房的时候做组合查询的经验我相信大家印象还很深刻,那里面惨不忍睹的if判断和select分支结构,搞得人叫那个晕啊!什么第一个条件,第二个条件,第三个条件……
其实,这件事儿没有咱们想的那么复杂,之所以会给咱们造成这样的印象那是因为界面的设计的不合理。大家请看咱们之前的样本UI是怎么吧
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/13/5f574356cb558946695e4818d68c88bd)
一看就让人犯怵了,怎么填啊?这么多的框,每一个我们都需要做输入的处理和判断,而且,存在很多的情况。
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窗体加载时,只让一个下拉框显示,其他的控件采用动态加载。也就是说当下拉框中的内容填写好之后,紧接着后面的操作符框就为用户自动加载出来了。每一次用户只需要填写一个空的内容,逻辑简单,界面干净简单。
效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/13/669082a89cabcfa69af32e5015924dbb)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/13/6261912636dd4b49245c96ef96d0e025)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/13/e50c46613b9a1e323e89fbe6497c6ae2)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/13/99e8f93db210afa3e617a31176f5e1f8)
在第一遍机房的时候做组合查询的经验我相信大家印象还很深刻,那里面惨不忍睹的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窗体加载时,只让一个下拉框显示,其他的控件采用动态加载。也就是说当下拉框中的内容填写好之后,紧接着后面的操作符框就为用户自动加载出来了。每一次用户只需要填写一个空的内容,逻辑简单,界面干净简单。
效果图:
相关文章推荐
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(下)
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(下)
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(下)
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(上)
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(上)
- iKinds:我是如何一步步重构改造项目从单VC到多VC界面(上)
- 13款经典BI项目报表&界面风格设计方案
- 一个项目重构方案设计
- 【机房重构】—模板方法+存储过程简单实现组合查询
- 【Android】Android中期项目设计题目-界面设计小作业
- 机房重构--组合查询
- Hybrid设计--如何落地一个Hybrid项目
- 如何使用sql查询数据库表结构的设计(sqlserver,oracle)
- 如何搞定界面设计之构图篇
- 草根发现了一个前景广阔的互联网创意,如何将其实现?| 2017 互联网创业项目
- 产品设计体会(3012)如何做好“老板项目” 推荐
- C#Windows窗体界面设计_攻击决策项目_02_设计窗体_03_设置窗体弹出退出顺序
- 如何进行ibatis动态多条件组合查询以及模糊查询
- 项目管理之设计和开发者如何成为好基友
- 机房收费系统个人重构版2——组合查询之模板方法