BS系统界面设计规范

《BS系统界面设计规范》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后A

3、SP时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。1.3.定义术语定义：效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点

4、的风格，它规定了页面布局上的每个细节。容器：即HTML标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为单元格是放置图片的容器。样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。2.界面设计规范细则总体目标以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧

5、密的结合在一起，同时对应于应用程序基于系统的架构分析。2.1.通用原则1界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。2界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻查看时的视觉疲劳。3数据

6、显示集中原则：各种列表在页面中往往是传递信息的核心，尽量集中的表现出来，并提供必要的关联数据、表等恰当的组织起来，并且在视觉上使用户很容易察觉数据之间的关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维护效率。4主次分明原则：页面中同时分布较多栏目的情况下，按照页面（Flow）的伸展方向，即由上到下，有左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野（Sight）之中.页面右边一般是一些当前页面主要操作的扩展、选项等内容

7、。5变化（对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接文本的不同状态定义（linkhovervisited）等，就可以将冗长的文档、表格等组织的很有条理；冗长的内容“层次“就有了变化，更容易辩识(Readable)；在美学角度增加了相临部分间的对比。6页面留白：页面留白同时也是一种增加可读性（Readable）的方式。在文字区域防止用户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。7

8、即时响应原则：每一个交互动作应该能够马上看到操作的结果，并且用色彩、文字粗细、闪烁、弹出、页面布局的明显变化等突出方式告知用户。8鼠标最短距离移动原则：交互按钮控件等根据执行前后关系及表单中状态的控制等合理的组织起来。2.2.显示（版式）设计1．页面布局基于表格Table建立完全符合设计效果图。2．文字容易阅读。行间距、字体大小等通过样式表统一控制。3．页面