软件测试界面规范.docx

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