刘一辰的软件工程随笔
B/S结构用户界面设计
信1905-2 20193897刘一辰
【实验编号】
10003809548j Web界面设计
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为dreamweaver
【实验内容】
通过B/S结构搭建一个对于货单的管理，其中包括
【关键步骤】
广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。
本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司
B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经
验继承和积累下来，将B/S系统开发过程上的区别降低到仅显示控制的极小的层面。
新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就
把页面和控制代码两个层面清晰的分开。
1、术语定义：
效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的
风格，它规定了页面布局上的每个细节。
容器：即HTML 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为
单元格是放置图片的容器。
样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。
非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封
装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。
2. 界面设计规范细则
总体目标
以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个
站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统
的架构分析。
2.1. 通用原则
1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差
别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后
不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌
色彩过多，花哨艳丽，严重妨碍用户视觉交互。
2 界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，
固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻
查看时的视觉疲劳。
3 数据显示集中原则：各种列表在页面中往往是传递信息的核心，尽量集中的表现出来，
并提供必要的关联数据、表等恰当的组织起来，并且在视觉上使用户很容易察觉数据之
间的关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维
护效率。
4 主次分明原则：页面中同时分布较多栏目的情况下，按照页面（Flow）的伸展方向，
即由上到下，有左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导
航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野（Sight）之中.
页面右边一般是一些当前页面主要操作的扩展、选项等内容。
5 变化（对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅
读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接
文本的不同状态定义（link\hover\visited）等，就可以将冗长的文档、表格等组织的很
有条理；冗长的内容“层次“就有了变化，更容易辩识(Readable)；在美学角度增加了
相临部分间的对比。
6 页面留白：页面留白同时也是一种增加可读性（Readable）的方式。在文字区域防止用
户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。
7 即时响应原则：每一个交互动作应该能够马上看到操作的结果，并且用色彩、文字粗细、
闪烁、弹出、页面布局的明显变化等突出方式告知用户。
8 鼠标最短距离移动原则：交互按钮控件等根据执行前后关系及表单中状态的控制等合
理的组织起来。
2.2. 显示（版式）设计
1． 页面布局基于表格Table建立完全符合设计效果图。
2． 文字容易阅读。行间距、字体大小等通过样式表统一控制。
3． 页面链接根据不同功能、不同状态用不同颜色、状态标志，增加页面层次。
4． 基于表格Talbe的布局（Layerout）控制，便于控制实现不同分辨率下的适应，和页面
上下方向的自动扩展；表格作为控件“容器”规范外观和规格，不同页面中的行列分布
基本一致。
5． 使用样式表修饰页面表格 Table,如表格单元格、背景，表格内字体等，方便今后对于整
个站点的维护和扩展。
6． 页面分组页面查询区域、数据列表、详细信息、编辑区域等根据不同功能分组，所在区
域主题（Title）标注该区域的名称，类似功能页面间布局保持一致。
7． 建立数据表格关系包含数据的表格使用户在视觉上理解相互间关系，如序列、父子表等。
8． 页面留白页面有明显留白区域，且不同群组之间距离保持一致。
9． 分辨率适应页面布局以保证在低分辨率[800*600]下的正确显示为前提，适应高分辨率情
况使用表格宽度等参数使用百分比方式自动适应；
2.3. 对程序设计及编码的要求
1 表格作为控件物理上包含的容器和内部包含的控件之间的属性定制互不影响，即实现其
无关性，这样才能完整的保证页面的基本结构在局部修改时不发生变化。
2 力求样式表实现页面格式全部控制，废弃如<font>、<backcolor>等内嵌标记，实例化坐
标位置的<div>标记、页面中控制布局的标记修饰含style属性的内嵌样式修饰，便于使
用第三方页面维护工具修改页面。
3 页面基本HTML及服务器端控件扩展标记等均保持代码干净整洁，便于检查和控制；
4 含有复杂嵌套结构的,<tr>,<td>标记在行间留白及结构的缩进，便于今后的维护。
5 非数据操作使用客户端脚本实现，减少非必要的服务器[WEB 服务器、数据库服务器]
负载；
2.4. 交互设计
a) 控件控制
1 第三方服务器端控件的使用要保证具有广泛兼容性和安全性，且具有完备的接口指定外
观属性和交互方式。
2 复杂的应用程序中非标准交互控件给出详细的操作方法的提示。
3 页面中尽量使用统一的导航类型，如使用基于点击“图形”的链接、 “文字”的链接
或文字图形混合其中一种方式。
举例：
4 页面按钮作为基本交互控件，提倡使用有鼠标响应状态变化和禁用状态的BUTTON 按
钮，除特殊界面需要，不提倡使用图形按钮，而且保证同一应用程序内只使用一种外观
的按钮。
5 拖放的服务器端控件在页面表格Table 里在执行过程中不能破坏页面原布局。如.NET
中CANLENDAR控件建议在弹出的子窗体内独立使用。
6 包含数据的表格使用中没有数据的情况有文字标注[无**数据]]，表头字段名用区别于数
据行的格式显示。
7 分栏目的主题名称使用用户容易理解的，以用户第一人称角度的命名方式，减少生硬的
称谓给用户带来的不友好感。
8 B/S应用程序允许含有类似拖放操作的非标准交互控件，但是需增加操作的说明。
b) 表单控制
1 页面内部有必要的前后文帮助信息，将页面主要任务目标、注意事项等描述在表单前申
明，便于用户及时获得导引。
2 页面在交互控制中添加完整的状态控制，操作中灰显特定组合的控件来实现用户的准确
操作，及时的刷新表单中遗留的数据。
3 表单内任务无关的信息、较少使用的选项等可以通过DHTML 技术、服务器端控件的
隐藏等减少用户操作中的干扰因素。
4 表单内在特定的字段域附近给出必填信息提示，并用醒目颜色标注，提醒用户注意，验
证的错误提示要给出准确恰当的指导；为提高用户填写的效率，建议使用客户端验证；
复杂逻辑的验证使用服务器端验证。
5 信息显示过滤可能出现的用户不能识别的HTML特殊字符。
6 表单中用户在交互过程中保证用户方便的切换编辑、浏览状态，方便用户用最快的速度
获取需要的信息，提高操作效率。
7 经常使用的工具按钮（如新增、编辑等功能按钮）保证在页面经单向拖曳浏览后，不需
来回拖曳滑竿即可操作；长页面可以考虑页首、页尾均放置工具按钮。
8 主详细表及父子表关系的查看方式使用联动式导航到下级数据，即点选主项目或父项目
记录时系统自动查询并显示出关联的详细信息、子表数据，无需点选任何按钮。
c) 窗体控制
1. 使用具有广泛兼容性的j***ascript控制客户端交互和简单导航,，除服务器控件部分自动
扩展到客户端的Jscript 外，程序员手动控制脚本不推荐使用Jscript
和VBscript。
2. 操作过程中有清晰分界的子任务使用弹出窗体实现，保证完成后向主任务窗体返回必要
的结果，及时刷新主任务窗体，使用户看到操作完成的结果，并且通过控件获取焦点等
措施突出显示该结果。
3. 弹出窗体的页面主题、栏目标题（Title）等资料与关联的父窗体保持上下文一致，方便
用户理解并做出处理策略。
4. 采用框架结构的应用程序，要充分考虑不同分辨率下的自动扩展，不同框架之间同步通
讯及时，方便用户快速切换目标导航，观察数据之间的关系等。
5. 窗口主题显示标志用户当前所在模块或子系统名称，子任务窗体主题使用“动词+名词”
的语法结构指明用户当前的任务；
2.5. 输入设计
1． 高效率的输入方式，特定的字段内容的输入方式选用使用效率最高，不容易发生错误的
方式。
如录入日期使用用户点选弹出的日历控件，并无须干预的自动返回正确的格式。
2． 方便的获取到必要的信息，无须用户记忆中间结果。
3． 表单格式尽量保持业务原始票据的格式或字段排列顺序，方便用户的集中录入过程。
4． 表单字段左对齐。
5． 输入控件的宽度基本符合数据库能够容纳的宽度，暗示系统能够接受的字符容量。
2.6. 提示信息
5.1. 错误操作的提示信息使用非专业的、易理解的名词告知用户。
5.2. 以第二人称“你”或“您”称呼用户，强调用户的主导能力。
5.3. 对用户宽容的语气。
5.4. 严重的警告信息使用弹出信息框提示，不严重的在页面前后文处直接输出，弹出不宜
太频繁的使用。
5.5. 可能对系统导致破坏性的操作要给出警告信息和用户确认（Confirm）按钮，用户可
以取消操作，防止意外的错误操作造成损失。
6. 复杂步骤在完成后给出完成成功的提示。
2.7. 出错处理及出错画面的转向
1. 系统的内部状态变化对于用户有较大影响的情况，给出用户明显的解决方案提示，或给
出自动的导航，使用户快速的恢复工作状态。
2. 例如用户SESSION 过期，用户无法进行操作时，系统自动跳转至登录界面。
3. 提供应用程序级错误截获，在不可预见的情况下仍给用户告知当前情况。
4. 提供页面间自动导航控制[Flow Controler],以更宽容的方式接受用户操作，协助用户处
理复杂的交互任务。
3. 小结
以上小结着重从交互方面将易忽略的部分给予规范，在用户操作过程中每一个操作即时的看
到操作的结果，这也就符合了即时响应原则的要求，降低了用户交互操作的复杂度，提高了
效率。
4. 展望
基于以上规范，在当前主流的开发工具下，可以开发出系列符合以上界面规范的服务器
端控件，在实例化后在客户端拥有良好用户体验，同时在页面上巧妙的融合到布局中。
重载标准控件弥补使用中不方便的缺失。这样同时从主流技术架构以服务器端逻辑入手
和客户端两个方向进行优化设计，充分的发挥出WEB灵活性的特点定制出有异常创意的用
户感受。
针对用户的友好界面甚至可以扩展到提供给用户的系统定制接口，二次开发接口。实现
这些接口的意义在于简化系统部署和使用过程中良好的扩展性，二次开发的接口通过发布的
WEBSERVICE 与已有的系统交换数据。
【程序运行截图】
【实验体会】
最近用了较短的时间，学习B/S的剩余部分。用了十几天的时间把xml、牛腩javascript、姜昊的javascript、jQuery和css样式设计通看了一遍。
之前维护考试系统，学习方法上最大的收获就是整体通吃，不要过于拘泥于细节，把握大局，掌握知识的核心。这次用十几天的时间看这些也算是一个尝试。
在看视频的时候，主动与已学的知识做对比，不同的知识之间也注重对比，其实很多东西，只是换一换形式，核心的思想都是一样的。
比如说，正则表达式在各种语言中都是一项基本内容，因为正则表达式当中，采用了一些符号做为验证规则说明，但是符号本身也可以作为验证的内容，这就用到了转义符号，如果程序中某一块儿的语言都需要采用转义的话，在xml中就是用了cdate来说明是一个转义的域。
Javascript和jQuery是一种面向对象的脚本语言。jQuery是做好的javascript的库，他们都是面向对象的，但是在一些语法的表达上跟C#等又有些异同。任何一种语言的三大结构都是相同的，在jQuery脚本语言中针对对象的定义没有像C#这些高级编译语言那样细致。Var在javascript和jQuery中基本相当于万能的了。
Javascript和css的相同之处都是针对前端界面的修饰，它们获取前端控件的方法类似，不同之处在于javascript使用面向对象思想中封装的方法来控制前台的控件。
Xml、js、jQuery和ajax是B/S阶段相对重要的内容，目前对这些内容的掌握还缺少具体的实践，计划在看完ajax之后再翻看一下之前的笔记，找一些经典的例题敲一敲。
B/S阶段还剩下最重要的一项内容ajax框架技术的学习，近期抓紧时间掌握。另外在学习的时候仍然要注重整体性和重点性，尤其还要注重代码的实践。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
2020-10-07 2020/10/07 刘一辰的JAVA随笔