web应用界面设计规范软件测试资料大全.doc

Web 应用界面设计规范 文档标识标识：comtop-std-webUI 深圳市康拓普信息技术有限公司 Shenzhen Comtop Information Technology Co.,Ltd. Web 应用界面设计规范 深圳市康拓普信息技术有限公司 修订记录 版本版本修订说明修订说明作者作者审核审核审核日期审核日期 1.0罗星衡 1.1修订：增加了对查询界面、文本框等的要求李勋红林镇锋2006-3-13 1.2修订李勋红林镇锋2006-5-10 1.3 修订：树的底色改成白色，编辑页面的备注 写在表格里面 李勋红林镇锋2006-5-30 1.4 2006-11-16 增加：对数字加千分位符的要求（1.4 中 5 的 c）) 李勋红 1.5修改文档格式张洪艳 所有权声明： 深圳市康拓普信息技术有限公司 版权所有 不得复制 Copyright 2006 by Shenzhen Comtop Information Technology Co.，Ltd. Web 应用界面设计规范 - I - 目 录 WEB 应用界面设计规范应用界面设计规范.1 1示例与说明示例与说明.1 1.1登录界面1 1.2桌面2 1.3总体界面3 1.4列表界面4 1.5编辑界面6 1.5.1上下结构主从式编辑界面6 1.5.2左右结构主从式编辑页面7 1.5.3一般编辑界面9 1.6查询界面9 1.7弹出窗口10 1.8控件10 1.8.1文本框10 1.8.2下拉选择框11 1.8.3单选按钮11 1.9提示信息11 2待确定问题列表待确定问题列表.11 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 1 页 1 示例与说明示例与说明 1.1 登录界面登录界面 如上图例所示：登录界面的内容应该包括： 1.用户单位的名称和 LOGO 图案 2.应用系统的中文名称(也可加入英文名称) 3.用户名和密码输入框 4.本公司版权说明（中英文） Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 2 页 1.2 桌面桌面 如上图例所示：桌面的内容应该包括： 1.桌面的文字标识 2.个人需要紧急处理的事务提醒 3.整个系统的信息公告滚动框（可选） 4.各种工具入口 5.本公司客户服务电话，传真，EMAIL 提示 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 3 页 1.3 总体界面总体界面 如上图例所示：总体界面的内容应该包括： 1.用户单位的名称和 LOGO 图案 2.应用系统的中文名称(也可加入英文名称) 3.系统功能入口(比如回到桌面， 重新登录等功能) 4.功能菜单区域 5.主工作区 功能菜单区工作区 用户所在单位的图标 和名称 应用系统的中文名和英文名系统功能入口当前用户 工作区所属模块说明 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 4 页 1.4 列表界面列表界面 1.所在的菜单层次：说明本模块所在位置的文字，所在的位置必须对应功能菜单 比如点击菜单上的；则模块位置说明文字必须对应起来: 2.选中的 TAB 页(每个 tab 页所包含的页面可以称之为一个卡片): a)卡片的底色必须是白色的，卡片外的颜色是灰色的； b)选中的 tab 按键的颜色必须和未选中的 tab 按键区别开来，未选中的按键上的字体是黑色 的，而选中按键上的字体是蓝色加粗的 如右图所示： 3.按钮说明： a)按钮的颜色是统一的; b)按钮上如果只有两个字，则这两个字之间和两个字的两边都需要一个空格； c)如果是两个字以上的则只需要在字两边加一个空格； d)按钮的最右端必须和列表的最右端对齐； 所在的菜单层次， 注释 1 选中的 TAB 页 ，注释 2 按钮，注释 3 按钮右端要与列表右端 对齐 工作区背景为 灰色 选中的行显示蓝色，注释 8 列表名称与表格的左 边线对齐 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 5 页 e)按钮之间没有空格； 如右图所示： 4.文字显示多个记录说明： a)列表必须提供对多个记录操作的功能，必须有一个选择本页所有记录的按钮；如右图 所示：； b)列表下面必须注明记录总数，如“共有 15 条记录” ； 5.记录文字说明： a)如果列表前选择框使用的是 Radio Button，则应该默认选中第 1 条; b)选中的记录必须和未选中的记录区分开来； c)列表中数量数字必须靠右显示；金额数字采用千分位分隔符的形式，分隔符为西文逗 号“,”如：。 d)列表中字数固定的文字（比如日期，图片等）居中显示； e)字数不规则的记录靠左显示； 6.如果没有选中列表中的项，在点击功能操作按钮时，必须有提示“没有选择” 。例如： 没有选择项目列表中的项目时，按功能按钮弹出窗口提示：“没有选择项目！” 。 7.在列表的字段中，有被截短的，鼠标放上去，必须显示出全部的值，如图所示。 8.选中的行显示为蓝色。 9.如果列表没有数据时，显示“本 列 表 暂 无 记 录 ！” 用蓝色字体，白色背景。 10. 列表中显示查询结果时， “查询”按钮变蓝。如图所示 11. 备注描述如：“红色表示回退的记录.”的描述写在表格外面。 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 6 页 12. 从详细页面返回到列表页面时，光标应该定位到刚才选择的记录。 13. 当弹出一个窗口的目的是为了返回选择的行时，双击列表中的某一行上的数据，选中行前 的单选或复选框。进入详细信息的途径为点击列表最右边的图标。如图所示： 1.5 编辑界面编辑界面 1.5.1 上下结构主从式编辑界面上下结构主从式编辑界面 备注写在表格外面 单击弹出列表窗口 双击任一行，选中行前的单选按钮 单击进入详细信息 弹出的窗口 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 7 页 2.界面说明文字：主从式界面必须有说明文字，且主页面和从页面的字体必须是一样的，如右图 所示： 3.文本框说明： a)只读的文本框和可输入的文本框在颜色上必须区分； b)文本框上下或者左右对齐； c)数字靠右显示； d)字数相等的文字居中显示； e)字数不等的文字靠左显示； 如右图所示： 4.编辑页面表格必须和界面两端有一定距离 1.5.2 左右结构主从式编辑页面左右结构主从式编辑页面 界面说明文字只读的文本框可输入的文本框 文本框要上下对齐 列表中不能编辑的地方底色为灰色 列表中可输入的文本底色为白 色 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 8 页 左右结构的页面中，工作区所属模块说明部分必须包括左右两部分； 每个填项或者选项的说明文字必须靠左显示； 左边底色为白色 左右之间有深色 分隔线 编辑区背景是灰 色的 编辑表格之外有 白框 节点底色为 白色 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 9 页 1.5.3 一般编辑界面一般编辑界面 1.弹出窗口说明：弹出式窗口应居中显示；必须有关闭窗口的按钮，否则则必须有返回上一页的 按钮。如果是关闭按钮，名称必须叫做“关闭” ，不能写成“取消”或其他类似的名字。 2.必填项说明：编辑页面中的必填项必须有标识，如右图： 也要有标识的说明，如右图所示： 3.多行文本框说明：多行的文本框必须有提示剩余输入字数的功能，且文字是黑色的，数字必须 是突出的红色字体 如右图所示： 4. 人员选择使用；部门选择使用；其它选择使用。 1.6 查询界面查询界面 必填或者必选的地方需要 特别提示 填写数字的文本框数字要靠 右边显示 选择的图片，注释 4 备注写在表格里面 Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 10 页 1.功能按钮：查询、全部数据、清空、关闭，放在页面底部中间位置。 2.清空：指清空查询条件。 3.执行查询时将输入的查询条件的前后空格过滤掉。 4.查询条件的名称的文字统一为左对齐。 1.7 弹出窗口弹出窗口 1 弹出新的可编辑窗口、查看信息窗口、查询窗口的位置在中间。 2 弹出选择部门、日期等窗口时位置在编辑框旁边。 1.8 控件控件 暂时不可用的控件应该灰掉 1.8.1 文本框文本框 1.可以输入的文本框以白色为背景，如： 2.需要选择的文本框都以白色为背景，如： 3. 不可输入不可选择的文本框以灰色为背景，如： Web 应用界面设计规范 深圳市康拓普信息技术有限公司 第 11 页 4.在界面上明确各个文本框的 TAB 键的顺序。 1.8.2 下拉选择框下拉选择框 1.未选中时显示的值为“-请选择-” 。 1.8.3 单选按钮单选按钮 点击按钮的值，应能选中按钮。 如图：用户点击“暂缓”二字，选中前面的单选按钮。 1.9 提示信息提示信息 需要用户确认的信息一定要用对话框，例如：警告信息，而保存成功，新增成功等信息可以使 用浮动的文本框 2 待确定问题列表待确定问题列表 1.“工作区所属模块说明” 、 “模块位置说明文字”层次和命名不规范。 （Web 界面设计规范上要求所 在的菜单层次：说明本模块所在位置的文字，所在的位置必须对应功能菜单。目前的系统中一般只 对应到第二级，从第三级开始，有的会把前二级的名称都带着，有的则只显示第三级的名称。 ） 2. 列表如果超过一页（有时一条记录有多行，又不能用省略号）时，怎么加滚动条，锁定题头？锁 定分页条？ 3.在线帮助？建