B/S 系统界面设计规范

1. 引言
界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产
品科学的开发方法，将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感
受，提升B/S产品的质量。
1.1. 编写目的
广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。
本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司
B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经
验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层
面。
新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就
把页面和控制代码两个层面清晰的分开。
1.2. 背景
B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占
越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工
程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以
应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。
目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台
页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的
项目，没有充分的发挥出集成开发工具的优势。
在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模
块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖
很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛
的，当然也不利于规模化的团队合作。
1.3. 定义
术语定义：
效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的
风格，它规定了页面布局上的每个细节。
容器：即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 与已有的系统交换数据。

http://www.cnblogs.com/khdg/articles/820255.html