BS系统界面设计规范

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变化（对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅 读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接 文本的不同状态定义（lin k\hover\visited ）等，就可以将冗长的文档、表格等组织的很

有条理；冗长的内容 层次就有了变化，更容易辩识 （Readable ）;在美学角度增加了 相临部分间

的对比。

6页面留白：页面留白同时也是一种增加可读性（ Readable ）的方式。在文字区域防止用 户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。 7即时响应原则：每一个交互动作应该能够马上看到操作的结果， 并且用色彩、文字粗细、

闪烁、弹出、页面布局的明显变化等突出方式告知用户。

8鼠标最短距离移动原则：交互按钮控件等根据执行前后关系及表单中状态的控制等合 理的组织起来。 2.2. 1 .

2 .

3 .

4 . 面 上下方向的自动扩展；表格作为控件 容器”规范外观和规格，不同页面中的行列分布 基本一致。

5 .使用样式表修饰页面表格 Table,如表格单元格、背景，表格内字体等，方便今后对于

整 个站点的维护和扩展。 6. 页面分组页面查询区域、数据列表、详细信息、编辑区域等根据不同功能分组，所在 区 域主题（Title ）标注该区域的名称，类似功能页面间布局保持一致。 7.

建立数据表格关系包含数据的表格使用户在视觉上理解相互间关系，如序列、父子表 等。

8. 页面留白页面有明显留白区域，且不同群组之间距离保持一致。 9 .分辨率适应页面布局以保证在低分辨率 [800*600]

下的正确显示为前提，适应高分辨

率情

况使用表格宽度等参数使用百分比方式自动适应； 23对程序设计及编码的要求

显示（版式）设计

页面布局基于表格Table 建立完全符合设计效果图。 文字容易阅读。行间距、字体大小等

通过样式表统一控制。

页面链接根据不同功能、不同状态用不同颜色、状态标志，增加页面层次。

基于表格Talbe 的布局（Layerout ）控制，便于控制实现不同分辨率下的适应，和页