bs界面规范.pdfVIP

B/S 界面规范 摘要：本文主要描述B/S 应用程序开发中前台界面的规范，从显示设计和交互设计等方面阐 述如何设计开发对用户友好的界面。 主题词：WEB 界面 界面规范 ASP.Net 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 变化 （对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅 读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接 文本