软件测试界面规范

1 界面规范 一 总则 总则总则 1 界面整体向上 向左对齐靠拢 2 界面色调过渡平缓 避免视觉疲劳 3 界面最好支持分辨率自适应 最小支持 1024 768 不同分辨率下不影响界面元素 的展现 6 界面响应迅速 除批量操作业务外 界面一般操作的响应时间应少于 4 秒 批量 业务需要给出进度提示 7 界面元素中 文字显示不全时 鼠标移到界面元素上 自动出现 Tips 显示完整文 字 8 界面上所有 Button 类型的对象在鼠标移上去后最好显示 手 型 9 同一界面必填项尽量放置在一起 方便操作 除非同一界面分业务含义分块定义 必填项尽量靠前放置 位置醒目 对齐对齐 1 界面上的表单前文字右对齐 2 界面上的表单元素 输入或选择框等 左对齐 长度和高度一致 长表单元 素可跨两列或三列 两端和其他行表单元素对齐 3 行中的单 复选框和其他行表单元素左对齐排列 4 列表头居中对齐 列表内容最好靠左对齐以显示更多内容 5 菜单和 Tab 页名称居中对齐 滚动条滚动条 1 主界面原则上不允许使用纵向滚动条和横向滚动条 不得不使用时 滚动条 随界面元素的增多自动出现 术语术语 1 表单 是一个包含表单项的区域 是可作为一个整体提交数据的容器 比如 详情区域 2表单项 是指标题跟表单元素的组合 即标签 表单元素 3 表单元素 是允许用户在表单中输入信息的元素 比如 输入框 下拉列表 单选框 复选框等等 2 2 界面元素中允许使用纵向滚动条 尽量少用横向滚动条 界面元素中的滚动 条遵循默认隐藏和必要时自动显示的原则 间距间距 1 表单元素间的行间距一致 2 同一界面内表单项间的列间距一致 图标图标 Icon 1 不同界面和子界面中 表示相同含义的图标需要一致 2 时间选择图标使用专门图标 3 菜单按照业务内容使用不同图标标识 其它其它 OthersOthers 1 界面上的时间选择弹出框需要一致 显示的格式需要一致 2 界面上的普通按钮大小 风格 颜色需要一致 3 界面上使用合理的图标表示各类操作类型 4 界面上列表统计自动计算显示的数量使用只读样式 二 表单元素 表单元素表单元素 1 同一类型的表单元素使用统一样式 2 正在使用的菜单或 Tab 页签需要着重显示 界面选中的内容需要着重显示 3 必填输入项和必选项需要标识出来 常用 红色 标识 放在表单元素左侧 4 配置界面新增和修改时 点击新增或修改按钮后第一个需采集数据的表单元 素获得焦点 如果此表单元素是输入框或可输入的弹出式选择框 则光标落 于输入框中 如果此表单元素是下拉选择框或不可输入的弹出式选择框 则 可用有颜色的边框或边框加深提示 其他界面如查询界面等在初始化时 不 需要缺省聚焦于某个表单元素上 5 在新增和修改时 焦点缺省停留在第一个可编辑的表单元素上 焦点的切换 支持 Tab 键 Tab 键按照表单元素从左到右 从上到下的顺序切换 焦点切换 到输入框时 光标同时落入输入框中 支持切换后直接输入 3 6 校验不合法的表单元素可以红色边框标识并聚焦于第一个非法表单元素上 同时除错误提示外 非法表单元素上出现提示信息标识 如果第一个非法表单元素可输入并为空 则光标落在输入框中 如果第一个非法表单元素可输入并为非空 已经存在错误的输入项 一般 情况下 选中输入框中的内容 对于未填入有效信息的可输入下拉选择框 将会恢复到初始的 请选择 状态 7 两个同类型表单元素之间进行比较而校验失败时 以红色边框标识两个表单 元素 不必聚焦于某个表单元素上 如开始时间和结束时间 开始号码和结 束号码 8 输入框长度校验不通过时建议使用聚焦该输入框和提示信息结合的方式 9 所有表单元素的非空校验和界面数据合法性校验在失去焦点和提交时进行 失去焦点的校验只校验最近一个失去焦点的表单元素 提交时的校验按从左 到右从上到下的顺序校验当前表单中的所有表单元素 9 所有表单元素的数据库逻辑合法性校验在提交时进行 提交时的校验按从左 到右从上到下的顺序校验当前表单中的所有表单元素 9 所有非法校验提示按校验顺序 从左到右 从上到下的顺序 在一个提示信 息框中展示 10 修改操作时 如果没有修改任何信息 提交时仍需要提示操作成功 11 下拉框不管是否必选 第一个选项都为 请选择 初始化有默认值时 缺省选中默认值 12 在下拉数据量较大的情况下 不可输入的下拉选择框内容需要支持按中文拼 音首字母排序和定位功能 可输入的下拉选择框需要支持模糊匹配功能 13 业务上相近或相关联的表单元素集中放置 必填项需靠前放置在醒目位置 14 用户登录界面的用户名输入框最好具有记忆功能 需要记住最近一次清除浏 览器缓存之后曾经登录成功的用户名 再次输入用户名时 使用下拉列表方 式模糊匹配已经记住的用户名 15 除密码输入框外 其他输入框需要支持拷贝和粘贴 16 密码输入框需要以提示信息方式响应 CapsLock 键 并加密显示 17 有且只有两个选项的非空表单元素使用单选框 不使用下拉列表框 如选择 是 或 否 之类的选项 18 弹出式单选界面 除勾选选择外 最好支持双击选项选中选项并关闭选择界 面 19 新增时 非空的生效时间建议默认显示数据库当前时间 20 具有特殊业务规则的下拉选择框或弹出选择框中的选项可按照业务规则排序 如根据使用频度进行排序或将推荐的业务排在上方等 没有业务规则的选择 框选项按选项名称排序 4 三 列表 列表列表 1 列表必须使用列表头 列表头文字剧中对齐显示 2 列表支持分页功能 可能出现大数据量的查询功能必须使用分页 分页栏 置于列表右下方 分页每页最多显示记录数可修改 可根据输入的页码跳 转至相应页面 支持翻页 首页和末页跳转功能 3 列表支持数据统计功能 显示总页数或数据总数 4 列表中数据的默认显示顺序需要根据业务要求排序 建议新增加的列表记 录出现在最后可作为缺省显示顺序 并定位到新增的记录 在数据量较多 的情况下方便查看 5 列表中按列排序 需要根据业务要求使用正确的排序方式 如根据订单编 号 合同号或日期等 6 列表支持按列排序功能 即点击个列的列表头可进行排序 如果列表设置 了分页功能 排序时仅处理当前页数据 7 列表的列宽根据显示内容长度设置 当显示内容的长度比较均衡时才可以 使用默认平均分配 8 列表中数据显示不全时 需要支持 Tips 方式完整显示 9 列表控件最好能支持控制每列是否显示 10 列表需显示各表的重要字段 即有业务显示意义的列进行显示 无关紧要 的字段无需列出或通过列表控件控制是否显示 11 列表背景色 在选中和未选中前背景色变化 12 在数据量较少的查询列表中允许没有翻页功能 在必要时可使用滚动条 滚动条缺省隐藏 13 列表中删除记录 焦点定位到被删记录的下一条记录上 如果被删记录是 列表中最后一条 焦点则定位到被删记录的上一条记录上 14 列表中使用双击选中行的方式显示弹出式详情 建议不使用 详情查看 等超链接形式 列表左下方增加 tips 说明 双击查看详情 15 列表中如带有超链接 需用颜色或下划线标识出具有超链接的列表字段 16 列表中无需带有毫无意义的勾选框 如选中列表一行进行操作且操作按钮 跟前面的勾选框无关系时 没有必要显示勾选框 勾选框一般出现在有批 量操作时 或操作按钮没有跟随在列表每行的尾部而是独立放置在列表上 方或下方时需要使用勾选框 5 四 树 树树 1 树结构不使用列表头 2 树结构控件本身保证节点展现一致 使用不同图标区分父子节点 业务复杂 的特殊树结构不同层次的图标根据业务需求设置 3 树结构中允许使用滚动条 滚动条缺省隐藏 必要时自动出现 4 树结构中添加根节点和子节点可使用不同的图标标识 5 树结构新增节点 焦点应定位到当前新增记录上并完整展示 详情中显示新 增记录详细信息 如果存在滚动条 滚动条随着焦点的定位滚动到展示新增 记录的位置 6 树结构中删除节点成功后 焦点移动到所删节点的父节点上 如树结构中只 剩最高一级节点时 删除记录后 焦点移动到所删节点的下一节点上 若此 最高级节点只存在上一节点 则删除后 焦点移到所删除节点的上一节点 7 如界面带有树结构 进入该界面建议友好默认展开顶层第一层节点 8 树结构如带有搜索功能 一般搜索功能放置于树顶部 搜索到结果数据时默 认定位到第一个被搜索到的记录 其他搜索到的记录树展开并将搜索到的结 果着中标识 五 按钮 按钮按钮 1 登录界面按钮和系统功能按钮使用独立样式 不遵循下列按钮规范 2 普通按钮 链接式按钮 工具条按钮 右键菜单结合使用 使用原则 常规 界面允许使用普通按钮 链接式按钮和右键菜单 复杂界面建议使用工具条 按钮 鼠标移到按钮上有提示 3 业务功能按钮使用链接式按钮 置于操作对象区域左下方 新增 修改 删 除和确定 取消 导出 查询 重置按钮使用普通按钮 4 按钮使用统一样式 不允许使用自定义按钮和浏览器控件按钮 5 对于一些未能明确标出名称的按钮 鼠标移上去使用 Tips 显示按钮名称 如 工具条按钮等 6 普通按钮长度遵循最小长度和自适应文字长度相结合的原则 按钮高度固定 按钮间距固定 7 确定和取消按钮成对出现 查询和重置按钮成对出现 8 常用按钮建议支持快捷键 如确认支持回车快捷键等 6 9 操作按钮根据业务功能情况能够触发其他界面的展开 显示 隐藏或失效等 10 使用按钮提交时 如果出现异常提示 需要保持界面已采集到的数据和状态 不可清空界面表单 11 使用按钮提交过程数据出现异常时需要自动保存 在切换界面后再次进入 需要保持原已采集的数据 12 弹出式选择框的取消按钮 其作用是关闭窗口并恢复到弹出前的状态 13 新增或修改界面中的取消按钮 其作用是使界面恢复到新增和修改操作前的 浏览状态 13 重置按钮 其作用是使界面恢复到进入时的初始状态 不是清空 14 过程数据的增加 修改 删除操作最好使用特别图标按钮来区分 如图标式 按钮 六 单 复选框 单单 复选框复选框 1 仅有两个选项时使用单选框 如性别 男 女等 2 单选框一般情况下设定缺省值 单选按钮前不用标注必选星号 3 必选的复选框可根据业务情况设定缺省值 如是必选项在选项前标注必选星号 4 当复选框有勾选数量限制时 在勾选到达最大值时继续勾选需给出提示 5 复选框出现在下拉选项列表前时 支持多选 已选择的内容在框内需用分隔符后 标点分隔开 6 列表复选框列表头最好有全选复选框 支持选择所有列表项 如列表前复选框无 意义则不需要显示 7 树结构的复选框 在选中所有子节点时 则自动选中父节点复选框 同理在选中 父节点时 默认选中所有子节点 当某一个子节点复选框去除勾选 则父节点复 选框自动清除勾选 7 菜单 Tab 菜单菜单 Tab 1 Tab 页标题置于所有 Tab 页最外层上方 2 按钮操作适用于所有 Tab 页时 按钮置于 Tab 页区域下方 3 按钮操作只包括单独 Tab 页时 按钮置于 Tab 页内的下方 4 界面中菜单和 Tab 页打开增多时 菜单和 Tab 页签宽度最好支持自动缩小 显示 不完整的标题末尾用 表示 7 5 菜单和 Tab 页名称显示不全时 鼠标移到菜单或 Tab 页上需要出现 Tips 显示完 整名称 6 菜单名和 Tab 名称的中文汉字间不允许出现空格 剧中显示 7 菜单长度不允许超过菜单底色 8 菜单命名一般使用主谓结果 如客户管理 客户分组等 错误的如 新增客户 9 被选中的菜单或 Tab 名称需加重显示或改变底色区分显示 10 菜单名和 Tab 名使用相同字体 字号 且字体颜色统一 11 菜单如有英文行业术语 全部使用大写 12 Tab 页签中如与页签内容有相关联的操作显示 需根据实际业务自动触发数据变化 不需要刷新后再显示 13 菜单使用图标标识时 选用有意义的有代表性的常用图标 14 当菜单有多层子菜单时 外层菜单建议用 向右图标 标识其下含有子菜单 15 进入系统或进入一级菜单 默认显示的菜单需要统一 一般建议显示第一个二级菜 单 故可将最想展现给客户的菜单放置在此 八 查询界面 查询界面查询界面 1 查询界面布局分上下结构和左右结构 查询条件较少且查询结果列表栏位多时 使 用上下结构 查询条件多且需要一层层展开的使用左右结构 一般情况下查询为上 下结构 如带有树结构查询时建议为左右结构 2 一般情况下不使用复选框作为查询条件的选择项 3 必填或必选的查询条件在表单元素前用红色 标识 如果是单选按钮前面不需要 加 标识 初始化时带默认单选值 4 查询界面中查询和重置按钮成对出现 重置按钮的作用是将查询条件恢复到界面初 始化状态 并将上次查询结果清空 而非简单的清空查询条件 5 查询和重置按钮位置根据查询条件布局确定 一般放置与查询条件右方 在查询条 件最后一行放不下时可以重起一行 如重起一行最后一个按钮和上面的表单元素右 对齐 查询和重置按钮放在同一行 6 查询条件复杂时 一般需要分简单查询和高级查询两种模式 高级查询条件默认隐 藏 展开和折叠按钮后使用箭头图标表示 放置在查询和重置按钮上方 7 查询界面中 查询条件和查询结果列表放在同一个区域 查询结果列表使用列头标 识每列数据含义 列表如使用翻页功能则最好不使用下拉滚动条 8 查询界面中 查询条件一般情况下肯定出现在查询列表中作为一列列出查询结果 否则如果按该查询条件过滤查询时无法立即判断出查询结果是否正确 8 9 使用查询按钮 需要刷新下方的结果数据统计列表如页数 总数等 10 查询时如没有查询结果数据时 需要给出提示 提示信息剧中显示 11 查询列表数据需要按业务规则或特殊字段排序显示 如按时间 订单号 合同号等 12 如需要修改查询结果列表中的数据 一般不立即触发重新排序 重新点击查询按钮 或按列排序后再以新数据的顺序展示 13 开始 结束 日期 时间等 格式的查询条件在查询时按照所输入数据的左闭 右闭原则进行查询 14 查询条件在查询前要做合法性校验 如开始条件要小于 小于等于 结束条件 某 些字段长度限制等 15 查询按钮统一使用 查询 不使用 搜索 检索 等词语 16 一般情况下对查询条件是输入框的作模糊匹配 下拉选择框 时间选择框或勾选的 作精确匹配 九 弹出界面 弹出界面弹出界面 1 弹出界面居中显示 2 弹出界面如显示较多内容如详情弹出框 弹出框尽量做大以显示更多内容 尽量避免 使用横向纵向滚动条 3 弹出界面中使用取消或关闭按钮和右上角的关闭图标关闭窗口功能一致 4 操作类的弹出界面需要屏蔽主界面 主界面不允许操作 5 只读类的弹出界面不需要屏蔽主界面 当点击弹出界面其他区域时自动关闭只读弹出 界面 6 界面元素只需要一次提交后台时 确定 按钮代表提交操作并关闭窗口 取消 按钮代表取消操作并关闭窗口 7 界面元素需要多次提交后台时 确定 按钮只代表提交操作 取消 按钮只代表 取消操作 8 弹出界面有多层弹出操作 弹出界面还有弹出子界面的 界面带有 返回 按钮的 返回功能只返回到上一层弹出界面 不可 越层 返回 9 弹出界面有多层弹出操作 弹出界面还有弹出子界面的 子界面操作关闭后自动返 回到上一层弹出界面 也不可 越层 返回或关闭 10 弹出界面如有多层操作 在操作未提交前进行返回 则 返回 按钮代表取消本层操 作并关闭窗口后返回上一层 11 弹出界面有新增或编辑等操作后未保存直接关闭弹出界面时 需给出提示信息 确认 是否保存后关闭 12 弹出界面布局参考表单元素 列表和配置界面部分的规范 9 十 提示界面 提示界面提示界面 1 界面上所有操作类按钮必须要有提示信息 如新增 编辑 删除 保存 导入和 导出等 2 错误类 错误指代码级的 无法预知的问题 错误提示包含 提示语句 错误编 码 详细信息链接 点击详细信息可以看到详细的错误信息 出现错误信息时背 景不可操作 用户必须点击确定或取消按钮关闭窗口方能继续操作 3 警告类 业务级的和知道原因的操作错误应归为警告 出现警告信息时背景不可 操作 用户必须使用确定按钮或取消按钮关闭窗口方可继续操作 如数据重复等 4 提示类 提示信息一般浮动出现 也可提示为多少秒之后自动关闭 不防碍用 户继续操作 点击提示信息窗口之外区域时自动关闭 一般的数据有效性检查和 操作成功提示属于提示信息 5 询问类 出现询问时背景不可操作 用户必须点击 是 或 否 按钮方可继续 操作 是 代表继续执行 否 代表取消当前操作 危险操作都应该给予询 问 如大数据量操作 删除操作等 6 提示信息窗口居中显示 7 提示信息窗口使用确定 取消按钮或右上角的关闭图标关闭窗口 不使用关闭按 钮 8 提示信息窗口的类型需要使用正确 类型和图标要一致 详见第 条图标标识 9 不允许在用户界面直接抛出系统或数据库异常信息 所有的提示信息必须使用友 好的语言包装后显示给用户 10 程序异常以错误提示的形式显示 错误类异常需要提供详细的报错日志 11 提示类 警告类 询问类提示信息窗口中不允许出现错误码 详细信息链接 只 允许语言描述 12 提示信息不允许使用计算机术语 如数据记录 唯一性校验等 也不允许出现数 据库表英文名称或表字段名称等 13 操作提示规则 操作成功提示的同时需要更新界面信息 比较复杂的操作 长事 务操作需要给出提示 最好有进度条 如订单提交 大量数据的导入或导出操 作等 操作不成功必须给出提示 14 一般的提示类 警告类和错误类提示语句使用陈述句 询问类语句使用疑问句 简单的单句提示语句使用句号结束 一般不适用感叹句 感叹号有加强语气的用 意 但也有讽刺意义 故尽量少用 15 提示弹出框界面上出现的标点符号使用中文标点 开发编码使用的是英文 很容 易把标点符号写成英文半角 标点紧邻前面文字 句中的标点符号前后不允许 有空格 16 10 各级别错误提示建议使用不同等级图标 可参考 windows 各类等级报错标识 如 错误类 警告类 提示类 询问类 十一 常用的操作类提示界面 常用的操作类提示界面常用的操作类提示界面句型和举例 1操作成功提示操作成功提示 句型 必须带操作对象名称 新增 XXX 成功 修改 XXX 成功 删除 XXX 成功 如 新增客户成功 修改家政员成功等 中文单