B/S

系统界面设计规

1.

引言

界而美观、操作易用性、维护成本低是评价

B/S

系统的关键。本规参考了一些成熟产品

科

学的开发方法

,

将开发过程中的方式、规则等强行的约朿。希望藉此来提高用户操作感受，

提升

B/S

产品的质虽

:

。

1.1.

编写目的

广义的界而概念包含了除页面布局设讣之外，交互性的设汁

,

及人体工程学方面的研究。

本

规制订的依据从广义概念岀发，总结以往项目的成败经验，目的是从整体上提升公司

B/S 

类产品

的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经验继

承和积累

下来，将

B/S

系统与

C/S

系统开发过程上的区别降低到仅显示控制的极小的层而。

新的开发方

式强调分层，规岀界而设

il

•人员做什么，服务器编程人员做什么，这样就把页而

和控制代码两

个层而淸晰的分开。

1.2.

背景

B/S

模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占

越来

越大的比重，

.Net

、

J2ee

等技术的发展更是将

B/S

系统的开发和桌而应用程序开发的工

程方法统

一起来，突出服务器端技术，这些变革要求界而设汁人员和服务器端编程人员可以

应用更加科

学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。目前公司较多

的服务器端编

程人员仍然处于“后

ASP

时代”的开发方式，表现为前台页而仍然与服务器

代码髙度的关联，

带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的

发挥岀集成开发工具

的优势。在以往的开发方式下界而设讣侧重在静态页面的建设上，每个

页面作为一个独立的模

块来处理，在页而交互中则是程序员根据自己的习惯来控制，程序对

个人的编程风格的依赖很

强，这些在以往开发

WEB

站点的方式扩展到

B/S

系统有时是不正

确的，甚至是背道而弛的，当

然也不利于规模化的团队合作。

1.3.

定义

术语定义：

效果图：由界而设计人员设计的页而效果图，综合了概要设计的业务需要和整个站点的

风

格，它规定了页而布局上的每个细节。

容器：

即

HTML

标记的嵌套结构，

如在表格

-

＞行

-

＞单元格放這图片，

那么可以认为单元

格

是放置图片的容器。

样式表：即级联式样式表

CSS,

它是

W3C

机构在

HTML

标记语言上扩展的格式语言。

非标准交互控件：是通过标准控件组合、扩展等方法以提髙特定业务执行效率而进行封

装

的控件，或槪括为用户根拯以往的操作经验不能够直接领会出操作方式的交互控件。

2.

界面设计规细则

总体目标

以规作为基本原则，

任此框架进行合理的扩展和变化，

将站点的每个模块服从于整个站

点，

模块页而与

"

髙聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架

构分析。

2.1.

通用原则

1

界而色彩要求：汁算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种

差