web应用界面设计规范(1) 软件测试资料大全

《web应用界面设计规范(1) 软件测试资料大全》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Web应用界面设计规范Web应用界面设计规范文档标识：comtop-std-webUI深圳市康拓普信息技术有限公司ShenzhenComtopInformationTechnologyCo.,Ltd.深圳市康拓普信息技术有限公司Web应用界面设计规范修订记录版本修订说明作者审核审核日期1.0罗星衡1.1修订：增加了对查询界面、文本框等的要求李勋红林镇锋2006-3-131.2修订李勋红林镇锋2006-5-101.3修订：树的底色改成白色，编辑页面的备注写在表格里面李勋红林镇锋2006-5-301.42006-11-16增加：对数字加千分位符的要求（1.4中5

2、的c）)李勋红1.5修改文档格式张洪艳所有权声明：深圳市康拓普信息技术有限公司版权所有不得复制Copyright©2006byShenzhenComtopInformationTechnologyCo.，Ltd.深圳市康拓普信息技术有限公司Web应用界面设计规范目录WEB应用界面设计规范11示例与说明11.1登录界面11.2桌面21.3总体界面31.4列表界面41.5编辑界面61.5.1上下结构主从式编辑界面61.5.2左右结构主从式编辑页面71.5.3一般编辑界面91.6查询界面91.7弹出窗口101.8控件101.8.1文本框101.8.2下拉选择框11

3、1.8.3单选按钮111.9提示信息112待确定问题列表11-I-Web应用界面设计规范1示例与说明1.1登录界面如上图例所示：登录界面的内容应该包括：1.用户单位的名称和LOGO图案2.应用系统的中文名称(也可加入英文名称)3.用户名和密码输入框4.本公司版权说明（中英文）深圳市康拓普信息技术有限公司第11页Web应用界面设计规范1.1桌面如上图例所示：桌面的内容应该包括：1.桌面的文字标识2.个人需要紧急处理的事务提醒3.整个系统的信息公告滚动框（可选）4.各种工具入口5.本公司客户服务电话，传真，EMAIL提示深圳市康拓普信息技术有限公司第11页Web

4、应用界面设计规范功能菜单区工作区用户所在单位的图标和名称应用系统的中文名和英文名系统功能入口当前用户工作区所属模块说明1.1总体界面如上图例所示：总体界面的内容应该包括：1.用户单位的名称和LOGO图案2.应用系统的中文名称(也可加入英文名称)3.系统功能入口(比如回到桌面，重新登录等功能)4.功能菜单区域5.主工作区深圳市康拓普信息技术有限公司第11页Web应用界面设计规范1.1列表界面所在的菜单层次，注释1选中的TAB页，注释2按钮，注释3按钮右端要与列表右端对齐工作区背景为灰色选中的行显示蓝色，注释8列表名称与表格的左边线对齐1.所在的菜单层次：说明本

5、模块所在位置的文字，所在的位置必须对应功能菜单比如点击菜单上的；则模块位置说明文字必须对应起来:2.选中的TAB页(每个tab页所包含的页面可以称之为一个卡片):a)卡片的底色必须是白色的，卡片外的颜色是灰色的；b)选中的tab按键的颜色必须和未选中的tab按键区别开来，未选中的按键上的字体是黑色的，而选中按键上的字体是蓝色加粗的如右图所示：3.按钮说明：a)按钮的颜色是统一的;b)按钮上如果只有两个字，则这两个字之间和两个字的两边都需要一个空格；c)如果是两个字以上的则只需要在字两边加一个空格；d)按钮的最右端必须和列表的最右端对齐；深圳市康拓普信息技术有

6、限公司第11页Web应用界面设计规范a)按钮之间没有空格；如右图所示：1.文字显示多个记录说明：a)列表必须提供对多个记录操作的功能，必须有一个选择本页所有记录的按钮；如右图所示：；b)列表下面必须注明记录总数，如“共有15条记录”；2.记录文字说明：a)如果列表前选择框使用的是RadioButton，则应该默认选中第1条;b)选中的记录必须和未选中的记录区分开来；c)列表中数量数字必须靠右显示；金额数字采用千分位分隔符的形式，分隔符为西文逗号“,”如：。d)列表中字数固定的文字（比如日期，图片等）居中显示；e)字数不规则的记录靠左显示；3.如果没有选中列表

7、中的项，在点击功能操作按钮时，必须有提示“没有选择……”。例如：没有选择项目列表中的项目时，按功能按钮弹出窗口提示：“没有选择项目！”。4.在列表的字段中，有被截短的，鼠标放上去，必须显示出全部的值，如图所示。5.选中的行显示为蓝色。6.如果列表没有数据时，显示“本列表暂无记录！”用蓝色字体，白色背景。7.列表中显示查询结果时，“查询”按钮变蓝。如图所示8.备注描述－如：“红色表示回退的记录.”的描述写在表格外面。深圳市康拓普信息技术有限公司第11页Web应用界面设计规范备注写在表格外面1.从详细页面返回到列表页面时，光标应该定位到刚才选择的记录。2.当弹出

8、一个窗口的目的是为了返回选择的行时，双击列表中的某一