系统界面设计规范

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力求样式表实现页面格式全部控制，废弃如、等内嵌标记，实例化

坐标位置的

标记、页面中控制布局的标记修饰含style属性的内嵌样式修饰，便于使用

第三方页面维护工具修改页面。

3 页面基本HTML 及服务器端控件扩展标记等均保持代码干净整洁，便于检查和控制；

4 含有复杂嵌套结构的,, 标记在行间留白及结构的缩进，便于今后的维护。

5 非数据操作使用客户端脚本实现，减少非必要的服务器[WEB 服务器、数据库服务器] 负载；

2.4. 交互设计

a) 控件控制

1 第三方服务器端控件的使用要保证具有广泛兼容性和安全性，且具有完备的接口指定外观属性和交互方式。

2 复杂的应用程序中非标准交互控件给出详细的操作方法的提示。

3 页面中尽量使用统一的导航类型，如使用基于点击“图形”的链接、“文字”的链

接或文字图形混合其中一种方式。

举例：

4 页面按钮作为基本交互控件，提倡使用有鼠标响应状态变化和禁用状态的BUTTON 按钮，除特殊界面需要，不提倡使用图形按钮，而且保证同一应用程序内只使用一种外观的按钮。

5拖放的服务器端控件在页面表格Table里在执行过程中不能破坏页面原布局。如.NET 中CANLENDAF控件建议在弹出的子窗体内独立使用。

6 包含数据的表格使用中没有数据的情况有文字标注[无**数据]] ，表头字段名用区别于

数据行的格式显示。

7 分栏目的主题名称使用用户容易理解的，以用户第一人称角度的命名方式，减少生硬的称谓给用户带来的不友好感。

8 B/S应用程序允许含有类似拖放操作的非标准交互控件，但是需增加操作的说明。

b) 表单控制

1 页面内部有必要的前后文帮助信息，将页面主要任务目标、注意事项等描述在表单前申明，便于用户及时获得导引。

2 页面在交互控制中添加完整的状态控制，操作中灰显特定组合的控件来实现用户的准确操作，及时的刷新表单中遗留的数据。

3 表单内任务无关的信息、较少使用的选项等可以通过DHTML 技术、服务器端控件的隐藏等减少用户操作中的干扰因素。

4 表单内在特定的字段域附近给出必填信息提示，并用醒目颜色标注，提醒用户注意，验证的错误提示要给出准确恰当的指导；为提高用户填写的效率，建议使用客户端验证；复杂逻辑的验证使用服务器端验证。

5 信息显示过滤可能出现的用户不能识别的HTML 特殊字符。