《bs系统界面设计规范》.docxVIP

BS系统界面设计规范 B/S系统界面设计规范 TOC \o 1-5 \h \z 引 言 界面美观、操作易用性、维护成本低是评价 B/S系统的关键。本 规 范 参 考 了 一 些 成 熟 产 品科学的开发方法，将开发过程中的方式、规则等强行的约束。 希 望 藉 此 来 提 局 用 户 操 作 感 受 提 升 B/S 产 品 的 质 量 1.1. 编 写 目 的 TOC \o 1-5 \h \z 广义的界面概念包含了除页面布局设计之外，交互性的设计，及 人 体 工 程 学 方 面 的 研 究。 本规范制订的依据从广义概念出发，总结以往项目的成败经验， 目 的 是 从 整 体 上 提 升 公 司 B/S类产品的质量、开发效率。从以技术为中心发展为以客户为 中 心， 将 类 似 项 目 成 功 的 经 验继承和积累下来，将 B/S系统与C/S系统开发过程上的区别降 低 到 仅 显 示 控 制 的 极 小 的 层 面 。 新的开发方式强调分层，规范出界面设计人员做什么，服务器编 程 人 员 做 什 么， 这 样 就 把页面和控制代码两个层面清晰的分开。 背 景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特 TOC \o 1-5 \h \z 点， 在 公 司 产 品 线 中 占 越来越大的比重，.Net、J2ee等技术的发展更是将 B/S系统的开 发 和 桌 面 应 用 程 序 开 发 的 工 程方法统一起来，突出服务器端技术，这些变革要求界面设计人 员 和 服 务 器 端 编 程 人 员 能 够 应用更加科学的方法合作，团队的合作方式甚至决定了一个系统 开 发 的 成 败。 当前公司较多的服务器端编程人员依然处于“后 ASP时代”的开 发 方 式， 表 现 为 前 台 页面依然与服务器代码高度的关联，带来的后果是重复建设、高 昂 的 维 护 成 本 或 失 去 控 制 的 项目，没有充分的发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上，每个页 面 作 为 一 个 独 立 的 模 块来处理，在顶面父旦中则是程序员根据白己的习惯来控制， 程 序 对 个 人 的 编 程 风 格 的 依 赖 很强，这些在以往开发 WEBJ占点的方式扩展到 B/S系统有时是不 正 确 的， 甚 至 是 背 道 而 弛 的，当然也不 利于规模化的 团队 合作 1.3. 定 义 术 语 定 义 : 效果图：由界面设计人员设计的页面效果图，综合了概要设计的 业 务 需 要 和 整 个 站 点 的 风格，它规定 了页面布局上的每个细节。 容器：即 HTML标记的嵌套结构，如在表格 - 行- 单元格内放置 图 片， 那 么 能 够 认 为 单 元 格 是 放 置 图 片 的 容 器。 样式表：即级联式样式表 CSS它是 W3CM构在HTML标记语言上 扩 展 的 格 式 语 言。 非标准交互控件：是经过标准控件组合、扩展等方法以提高特定 业 务 执 行 效 率 而 进 行 封 装的控件， 或概括为用户根据以往的操作经验不能够直接领会出 操 作 方 式 的 交 互 控 件 2. 界 面 设 计 规 范 细 则 总 体 目 标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站 点 内 的 每 个 模 块 服 从 于 整 个 站点, 模块页面与 “高内聚”的控制代码紧密的结合在一起， 同 时 对 应 于 应 用 程 序 基 于 系 统 的 架 构 分 析 2.1. 通 用 原 则 1界面色彩要求： 计算机屏幕的发光成像和普通视觉成像有很大 的 不 同 , 应 该 注 意 这 种 差 别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使 用 户 在 较 长 时 间 使 用 后 不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色 系 为 主 配 色 等 等。 切 忌 色彩过多，花哨艳丽，严重妨碍用户视觉交互。 2界面平面版式要求：系统样式排版整齐划一，尽可能划分不同 的 功 能 区 域 于 固 定 位 置， 固定的格式，方便用户导航使用；排版不宜过于密集，保留一定 的 “留 白” 区 域， 减 轻 查 看 时 的 视 觉 疲 劳。 3数据显示集中原则：各种列表在页面中往往是传递信息的核 心， 尽 量 集 中 的 表 现 出 来， 并提供必要的关联数据、表等恰当的组织起来，而且在视觉上使 TOC \o 1-5 \h \z 用 户 彳艮 容 易 察 觉 数 据 之 间的关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能 给 用 户 带 来 非 常 低 的 维 护 效 率。 4主次分明原则：页面中同时分布较多栏目的情况下，按照页面 ( Flow ) 的 伸 展 方 向， 即由上到下，有左到右，根据浏览的方向，重要的