系统界面设计规范

1、B/S 系统界面设计规范1. 引言界面美观、 操作易用性、 维护成本低是评价 B/S 系统的关键。 本规范参考了一些成熟产 品科学的开发方法， 将开发过程中的方式、 规则等强行的约束。 希望藉此来提高用户操作感 受，提升 B/S 产品的质量。1.1. 编写目的广义的界面概念包含了除页面布局设计之外， 交互性的设计， 及人体工程学方面的研究。 本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经 验继承和积累下来， 将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层 面。新

2、的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就 把页面和控制代码两个层面清晰的分开。1.2. 背景B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占 越来越大的比重，.Net、J2ee等技术的发展更是将 B/S系统的开发和桌面应用程序开发的工 程方法统一起来， 突出服务器端技术， 这些变革要求界面设计人员和服务器端编程人员可以 应用更加科学的方法合作， 团队的合作方式甚至决定了一个系统开发的成败。 目前公司较多 的服务器端编程人员仍然处于“后 ASP 时代”的开发方式，表现为前台页面仍然与服务器 代码高度的关联， 带来的后果是重复建设、

3、高昂的维护成本或失去控制的项目， 没有充分的 发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理， 在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到 B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。1.3. 定义 术语定义： 效果图： 由界面设计人员设计的页面效果图， 综合了概要设计的业务需要和整个站点的 风格，它规定了页面布局上的每个细节。容器：即 HTML 标记的嵌套结构，如在表格 -行-单元格内放置图片，那么可以认为单 元格是放置图片的容器

4、。样式表：即级联式样式表 CSS它是 W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件： 是通过标准控件组合、 扩展等方法以提高特定业务执行效率而进行封 装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。2. 界面设计规范细则总体目标以规范作为基本原则， 在此框架内进行合理的扩展和变化， 将站点内的每个模块服从于 整个站点， 模块页面与“高内聚”的控制代码紧密的结合在一起， 同时对应于应用程序基于 系统的架构分析。2.1. 通用原则1 界面色彩要求： 计算机屏幕的发光成像和普通视觉成像有很大的不同， 应该注意这种 差别作出恰当的色彩搭配。 对于需用户长时

5、间使用的系统， 应当使用户在较长时间使用后不 至于过于感到视觉疲劳为宜。 例如轻松的淡彩为主配色， 灰色系为主配色等等。 切忌色彩过 多，花哨艳丽，严重妨碍用户视觉交互。2 界面平面版式要求： 系统样式排版整齐划一， 尽可能划分不同的功能区域于固定位置， 固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻查看 时的视觉疲劳。3 数据显示集中原则： 各种列表在页面中往往是传递信息的核心， 尽量集中的表现出来， 并提供必要的关联数据、 表等恰当的组织起来， 并且在视觉上使用户很容易察觉数据之间的 关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维护效

6、率。4 主次分明原则：页面中同时分布较多栏目的情况下，按照页面（Flow ）的伸展方向，即由上到下，有左到右， 根据浏览的方向，重要的内容应该在左边最易注意的位置，导航等 置于页面头部固定位置。使导航等重要内容始终处于用户的视野（Sight）之中.页面右边一般是一些当前页面主要操作的扩展、选项等内容。5 变化（对比）原则： 在页面主体内容部分往往有很多文本信息，它是需要用户认真阅 读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接文本 的不同状态定义（ linkhovervisited ）等，就可以将冗长的文档、表格等组织的很有条理； 冗长的内容"层次&qu

7、ot;就有了变化，更容易辩识（Readable）;在美学角度增加了相临部分间的对比。6页面留白：页面留白同时也是一种增加可读性（Readable）的方式。在文字区域防止用户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。7 即时响应原则： 每一个交互动作应该能够马上看到操作的结果， 并且用色彩、 文字粗 细、闪烁、弹出、页面布局的明显变化等突出方式告知用户。8 鼠标最短距离移动原则： 交互按钮控件等根据执行前后关系及表单中状态的控制等合 理的组织起来。2.2. 显示（版式）设计1. 页面布局基于表格 Table建立完全符合设计效果图。2 文字容易阅读。行间距、字体大

8、小等通过样式表统一控制。3. 页面链接根据不同功能、不同状态用不同颜色、状态标志，增加页面层次。4. 基于表格Talbe的布局（Layerout）控制，便于控制实现不同分辨率下的适应，和 页面上下方向的自动扩展;表格作为控件 “容器”规范外观和规格， 不同页面中的行列分布基本一致。5. 使用样式表修饰页面表格Table如表格单元格、背景，表格内字体等，方便今后对 于整个站点的维护和扩展。6. 页面分组页面查询区域、数据列表、详细信息、编辑区域等根据不同功能分组，所 在区域主题（Title）标注该区域的名称，类似功能页面间布局保持一致。7. 建立数据表格关系包含数据的表格使用户在视觉上理解相互间

9、关系，如序列、 父子8 页面留白页面有明显留白区域，且不同群组之间距离保持一致。9 分辨率适应页面布局以保证在低分辨率800*600 下的正确显示为前提，适应高分辨率情况使用表格宽度等参数使用百分比方式自动适应；2.3. 对程序设计及编码的要求1 表格作为控件物理上包含的容器和内部包含的控件之间的属性定制互不影响， 即实现 其无关性，这样才能完整的保证页面的基本结构在局部修改时不发生变化。2力求样式表实现页面格式全部控制，废弃如<font>、<backcolor>等内嵌标记，实例化坐标位置的<div>标记、页面中控制布局的标记修饰含style属性的内嵌样式修

10、饰，便于使用第三方页面维护工具修改页面。3 页面基本 HTML 及服务器端控件扩展标记等均保持代码干净整洁，便于检查和控制；4 含有复杂嵌套结构的 ,<tr>,<td> 标记在行间留白及结构的缩进，便于今后的维护。5 非数据操作使用客户端脚本实现， 减少非必要的服务器 WEB 服务器、 数据库服务器 负载；2.4. 交互设计a) 控件控制1 第三方服务器端控件的使用要保证具有广泛兼容性和安全性， 且具有完备的接口指定 外观属性和交互方式。2 复杂的应用程序中非标准交互控件给出详细的操作方法的提示。3 页面中尽量使用统一的导航类型，如使用基于点击“图形”的链接、“文字”的

11、链接或文字图形混合其中一种方式。举例：4 页面按钮作为基本交互控件，提倡使用有鼠标响应状态变化和禁用状态的BUTTON按钮， 除特殊界面需要， 不提倡使用图形按钮， 而且保证同一应用程序内只使用一种外观的 按钮。5拖放的服务器端控件在页面表格Table里在执行过程中不能破坏页面原布局。如.NET中CANLENDAF控件建议在弹出的子窗体内独立使用。6 包含数据的表格使用中没有数据的情况有文字标注无* 数据 ，表头字段名用区别于数据行的格式显示。7 分栏目的主题名称使用用户容易理解的， 以用户第一人称角度的命名方式， 减少生硬 的称谓给用户带来的不友好感。8 B/S应用程序允许含有类似拖放操作的

12、非标准交互控件，但是需增加操作的说明。b) 表单控制1 页面内部有必要的前后文帮助信息， 将页面主要任务目标、 注意事项等描述在表单前 申明，便于用户及时获得导引。2 页面在交互控制中添加完整的状态控制， 操作中灰显特定组合的控件来实现用户的准 确操作，及时的刷新表单中遗留的数据。3 表单内任务无关的信息、较少使用的选项等可以通过 DHTML 技术、服务器端控件的 隐藏等减少用户操作中的干扰因素。4 表单内在特定的字段域附近给出必填信息提示，并用醒目颜色标注，提醒用户注意， 验证的错误提示要给出准确恰当的指导； 为提高用户填写的效率， 建议使用客户端验证； 复 杂逻辑的验证使用服务器端验证。5

13、 信息显示过滤可能出现的用户不能识别的 HTML 特殊字符。6 表单中用户在交互过程中保证用户方便的切换编辑、 浏览状态， 方便用户用最快的速 度获取需要的信息，提高操作效率。7 经常使用的工具按钮 （如新增、编辑等功能按钮）保证在页面经单向拖曳浏览后，不 需来回拖曳滑竿即可操作；长页面可以考虑页首、页尾均放置工具按钮。8 主详细表及父子表关系的查看方式使用联动式导航到下级数据， 即点选主项目或父项 目记录时系统自动查询并显示出关联的详细信息、子表数据，无需点选任何按钮。c） 窗体控制1. 使用具有广泛兼容性的 j*ascript 控制客户端交互和简单导航 ,，除服务器控件部分 自动扩展到客户

14、端的 Jscript 外，程序员手动控制脚本不推荐使用 Jscript 和 VBscript 。2. 操作过程中有清晰分界的子任务使用弹出窗体实现，保证完成后向主任务窗体返回 必要的结果， 及时刷新主任务窗体， 使用户看到操作完成的结果， 并且通过控件获取焦点等 措施突出显示该结果。3. 弹出窗体的页面主题、栏目标题（ Title ）等资料与关联的父窗体保持上下文一致， 方便用户理解并做出处理策略。4. 采用框架结构的应用程序，要充分考虑不同分辨率下的自动扩展，不同框架之间同 步通讯及时，方便用户快速切换目标导航，观察数据之间的关系等。5. 窗口主题显示标志用户当前所在模块或子系统名称，子任务

15、窗体主题使用“动词+名词”的语法结构指明用户当前的任务；2.5. 输入设计1 高效率的输入方式， 特定的字段内容的输入方式选用使用效率最高， 不容易发生错 误的方式。如录入日期使用用户点选弹出的日历控件，并无须干预的自动返回正确的格式。2 方便的获取到必要的信息，无须用户记忆中间结果。3 表单格式尽量保持业务原始票据的格式或字段排列顺序，方便用户的集中录入过程。4 表单字段左对齐。5 输入控件的宽度基本符合数据库能够容纳的宽度，暗示系统能够接受的字符容量。2.6. 提示信息1. 错误操作的提示信息使用非专业的、易理解的名词告知用户。2. 以第二人称“你”或“您”称呼用户，强调用户的主导能力。3. 对用户宽容的语气。4. 严重的警告信息使用弹出信息框提示，不严重的在页面前后文处直接输出，弹出不 宜太频繁的使用。5. 可能对系统导致破坏性的操作要给出警告信息和用户确认（Confirm ）按钮，用户可以取消操作，防止意外的错误操作造成损失。6. 复杂步骤在完成后给出完成成功的提示。2.7. 出错处理及出错画面的转向1. 系统的内部状态变化对于用户有较大影响的情况，给出用户明显的解决方案提示， 或给出自动的导航