CMMI-TS-PROC-02BS系统GUI设计规范

《CMMI-TS-PROC-02BS系统GUI设计规范》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、°j恒华科技FOREVERTECHNOLOGYBS系统GUI设计规范文件状态：[]草稿[V]止式发布[]正在修改文件标识CMMI-TS-PROC-02当前版本1.0作者李刚完成LI期2011-10-26北京恒华伟业科技股份有限公司版本历史版本/状态作者参与者完成日期说明V1.0李刚王丽2011-12-28编写；榕式调整。审批人员姓名职务时间目录1・概述51・1・前言51.范围52.定义与约定54.3.设计规范53.1.界面风格53.2.CSS文件命名规范63.3.CSS命名规范63.4.基础样式文件64.4.开发规范64.1.标签格式64.2.

2、字段名称统一64.3.对话框64.4.信息框74.5.命令按钮84.6.单行输入域94.7.多行输入域94.8.树.94.9.菜单94.10.控件94.11.校验104.12.页面刷新1()4.13.内容排列对齐方式104.14.页面标题命名114.15.CSS样式引用114.5.HTML设计、开发规范114・1・HTML命名规范II42HTML头111..HTML中元素的书写：114.3.1.元索属性值必须包含在双引号中124.3.2.form中必须加action属性,并H不能为空。124.3.3.input要有maxlength属性，默认宽

3、度为数据库字段的宽度124.3.4.img的属性不对以缺少124.3.5.head与v/head>Z间必须有title；724.3.6.tbody、tr、th、td必须定义在tableZ间;124.3.7.button按钮必须定义在form之间;124.3.8.^javascript屮的字符串中出现的"I”前要用转义符“”:121..换行规范122..关闭规范134.6.缩近规则145.GUI设计细则142.2..框架14顶级框架14二级框架（主导航）16二级框架（内容）772.3..标题192.4..当前用户信息192.5..导航202.6.

4、.树.202.7..折叠部分202.8..系统子导航202.9..折叠部分212.10..数据展现222.11..版权信息23概述前言1.1.1.本标准规定的是基于公司所有bs软件系统应具有的用户界面设计要求。本标准主要起草单位：北京恒华伟业科技股份有限公司。1.1.3.本标准起草人：李刚、刘冬华。本标准审核人:刘冬华范围本规范为所有bs软件系统的川户界面方面的设计原则。本规范适用于公司内部所有bs软件系统的界而设计。定义与约定3.4.1.框架:指window对象中的Frame对象。3.4.2.桌面：指系统捉供的包括快捷图标的全屏幕窗口。3.4

5、.3.菜单：用來罗列所执行功能的标识项3.4.4.控件：指为实现所提供的系统功能的控件。3.4.5.表：指承载数据所用表格，即Document中的Table对象。3.4.6.标题栏：指表格中标题部分，即Table对象中的Th对象。3.4.7.内容栏：指表格内容部分，即Table对象中的Td对象。3.4.8.背景色：指页面背景颜色。3.4.9.背景图：只页血•背景图片。3.4.10.页边距：指页面中内容与窗口边框Z间的距离，包括上下左右四个参数。1.3.11・加载页面：指框架中加载页面在静态Demo中的绝对路径。1.3.12.页血地址：指框架中加

6、载页血在静态Demo中的绝対路径。1.3.13.样式地址：指该页而所加载样式表在静态Demo中的绝对路径。1.3.14.GUI设计细则屮未声明样式属性，为使用浏览器默认样式属性。1.3.15.设计支持主流浏览器IE6、IE7、IE8。设计规范1.界面风格2.1.1使用一致性。一致的外观将使用户界而更易于理解和使用。用户界面控件看起來应该是--致的。2.1.2使用安排和流程。人们习惯丁•从左到右，从上到下进行阅读，因此，应该将重要信息放在上面和左边。左上角授容易吸引起人们的注意力。屏幕小部件的布局也应以用户熟悉的方式进行。2.1.3使用对齐。通常

7、，使用左对齐来使用八界而控件更易于浏览。对于数值文本，应该使用小数点对齐或右对齐。对于非数值文木，应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐，或者使它们保持対称形式。在右边或底部保留空白区域更适合习惯。2.1.4使用分组。将相关的用户界面控件分成组，以体现它们之间的关系。同时,还要显示和关信息。将控件放在它所作用的对象旁。使用空格、分纟fl框、线条和标签，或者其它分隔符对用户界面控件进行分组。2.1.5使用强调。使用焦点、位置、分组、层次、启用/禁用、人小、颜色或者字体等，來将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方

8、式指明用户接下来应该进行的操作。2.1.6使用空格。使用空格来创建一个”透气室”，以使窗口布局更易于理解，并且杳看起来更舒服。空格的多少要适当，不要显