公司做的大大小小的系统中,查询总是一个不可缺少的功能模块。要怎么布局呢。就从查询的结果如手吧。查询结果不外乎有下面三种情况:
(1)具体的表样。类似于网上申报中某张表,比方说:增值税报表。这种情况没有二话,表是什么样的就显示成什么样。如果表很大,那我们也只有尽量让上下左右的空间释放,给它表现。有滚动条也只好拖。考虑到一般这都和实际表对应,一般不至于太夸张。
(2)小型数据表格。横向显示字段较少,列表用分页完成。通常只占小部分区域。例如网站后台管理的信息查询。这种情况也比较好处理,因为它横向所需要表现的信息量不大。它表现的方式比较灵活了,可以由整屏的滚动条来全屏滚动多条信息,也可以固定小窗口来表现。这就取决于页面的其它的元素(菜单,操作等)一起配合来了。
(3)大型的表格集。横向有几十个字段,一屏显示不下,纵向也是有N条数据,用分页来完成。滚动条需要滚几滚的。这种情况是最难处理,最讨人厌啦。大大的表格,N多字段, word-break最好都是keep-all式的,无形中又加了宽度。这种表格怎么处理都很讨人厌,因为无论页面上其它元素怎么精简仍然会被无穷尽的滚动条困扰,一句话,它自身就决定了用户体验差。看个例子:
上图中:有个奇怪的问题就是这么多的字段,用户会看这样的结果集吗?用户看得舒服吗?用户到底需要看什么样的信息呢?我认为有两个解决方法:
1、把需要但不必要的信息隐藏起来,只在用户需要的时候出来,把真正的需要看的数据信息放在主体位置。这样更方便用户做纵向数据比较。如下图:
点击头部小三角后:
用这种扩展形式,可以大大减少显示的信息。这样有一个好处,突出用户需要进行纵向比较的数据,方便查看数据。如有需要看详细再点击看。
2、如下表:
用户查询出来这样的表格,看数据更清晰方便,没有了那烦人的滚动条。反正数据总要一条条的看。不知道各位看官是否和我一样喜欢这种方式呢?
这两种方式相比,第一种更有利于纵向数据比较,第二种数据显示更清晰,业面更好组织。具体需要哪种还是需要按用户的需求来。
2、查询条件的布局:
查询条件安放的位置当然是在最方便的位置上,和查询结果放在一个页面比较好,方便用户更换条件。看看大家都在浏览器中加入GOOGLE的查询插件就知道。当然这种方式只对于简单查询条件有效。但是我们的系统却常常会有很复杂的检索条件。
要把这么多条件放在一个页面上,再把结果显示在同一个页面上,既要考虑不同分辩率的情况,还要菜单啊,翻页啊等其它页面功能,OMG,留给查询结果的空间往往少之又少。如果再碰到上面说的第三种的结果情况,界面要被挤爆啦。我觉得吧,这样的情况可以把查询条件和查询结果分页面显示,引导用户第一步输入查询条件,第二步进入结果页面。各显示各的,互不干扰。结果页面中仍然可以再跳到第一步的查询条件。
- 大小: 78.6 KB
- 大小: 59 KB
- 大小: 74 KB
- 大小: 95.7 KB
分享到:
相关推荐
ChatTTS Docker带UI界面快速部署命令 提供了一组Docker命令,帮助您快速启动并运行带有UI界面的ChatTTS(文本到语音转换服务)。这些命令简化了Docker的部署流程,让您无需深入了解Docker的底层细节,即可方便地部署...
内容概要:本资源基于Vue3和ElementPlus构建,实现了一个大学生桌面聊天室系统,界面仿照QQ和微信,包含了常见的聊天功能和界面设计。源码包括前端代码,采用Vue3和ElementPlus进行开发。部署文档详细介绍了系统的...
功能最强大&搭建最简单&界面更美观的在线考试/调查问卷/公开查询/题库刷题/360度评估/投票系统,支持一键部署
1. 功能测试:验证软件的所有功能是否按预期工作,包括界面操作、业务逻辑等。 2. 性能测试:评估软件在预期负载下的性能,包括响应时间、并发处理能力等。 3. 安全测试:检查软件的安全性,包括输入验证、权限...
课程设计 基于MATLAB的HMM语音信号识别源码+GUI界面+部署说明文档课程设计 基于MATLAB的HMM语音信号识别源码+GUI界面+部署说明文档课程设计 基于MATLAB的HMM语音信号识别源码+GUI界面+部署说明文档 【资源说明】 ...
“说明.txt”可能包含具体使用和部署的指导;“Mop_EsayUI.zip”可能是特定的EasyUI组件或案例;“easyui-icons-master图标.zip”提供了1000个图标资源,丰富了界面设计;最后,“jquery-easyui-1.3.4.zip”和...
3. **后端适配**:如果修改的界面涉及到与系统功能的交互,那么可能需要对设备的后端代码进行调整,确保新界面与原有功能的兼容性。 4. **壳程序(SHELL)**:提到"补SHELL",这可能意味着在原始系统的基础上增加或...
课程设计 基于C语言的学生管理系统,图形界面绚丽,动画效果演示,功能完善源码+资料齐全+部署文档 高分项目.zip课程设计 基于C语言的学生管理系统,图形界面绚丽,动画效果演示,功能完善源码+资料齐全+部署文档 ...
课程设计 基于MatlabGUI设计了PID控制器调参界面源码+GUI界面+项目资料齐全+部署说明文档.zip课程设计 基于MatlabGUI设计了PID控制器调参界面源码+GUI界面+项目资料齐全+部署说明文档.zip课程设计 基于MatlabGUI设计...
综上所述,一个强大的自动化部署发布系统应该具备自动化、多机支持、定时发布、WebSSH和多窗口等功能,以满足现代软件开发的需求。通过使用这样的系统,团队可以更有效地管理复杂的部署流程,提升软件项目的稳定性和...
课程设计 基于MATLAB的操控ROS小海龟的上位机+GUI界面源码+GUI界面+项目资料齐全+部署说明文档.zip课程设计 基于MATLAB的操控ROS小海龟的上位机+GUI界面源码+GUI界面+项目资料齐全+部署说明文档.zip课程设计 基于...
WebLogic 是一款功能强大、支持多种技术的 Web 应用服务器,包括 EJB、JSP、Servlet、JMS 等。部署 WebLogic 需要按照特定的步骤进行,下面是 WebLogic 部署手册的详细步骤。 安装 WebLogic 在安装 WebLogic 之前...
课程设计 基于Matlab的口罩识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的口罩识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的口罩识别系统源码+GUI...
课程设计 基于MATLAB的火灾检测系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的火灾检测系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的火灾检测系统源码+GUI...
课程设计 基于Matlab的身份证识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的身份证识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的身份证识别系统...
课程设计 基于MATLAB的车牌识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的车牌识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的车牌识别系统源码+GUI...
课程设计 基于Matlab的人脸考勤系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的人脸考勤系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的人脸考勤系统源码+GUI...
课程设计 基于Matlab的交通标志识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的交通标志识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的交通标志识别...
课程设计 基于MATLAB的答题卡识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的答题卡识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于MATLAB的答题卡识别系统...
课程设计 基于Matlab的车道线识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的车道线识别系统源码+GUI界面+部署说明文档资料+项目资料齐全.zip课程设计 基于Matlab的车道线识别系统...