BS软件设计测试界面规范Word文件下载.docx

BS软件设计测试界面规范Word文件下载.docx

《BS软件设计测试界面规范Word文件下载.docx》由会员分享，可在线阅读，更多相关《BS软件设计测试界面规范Word文件下载.docx（15页珍藏版）》请在冰豆网上搜索。

图2

2、界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

3、系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，固定的格式，方便用户导航使用；

排版不宜过于密集，保留一定的“留白”区域，减轻查看时的视觉疲劳。

4、布局要主次分明，页面中同时分布较多栏目的情况下，按照页面的伸展方向，即由上到下，由左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导航等置于页面头部固定位置。

使导航等重要内容始终处于用户的视野之中。

页面右边一般是一些当前页面主要操作的扩展、选项等内容。

（如图3）

图3

5、页面留白，是一种增加可读性的方式，在文字区域防止用户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。

6、每一个交互动作应该能够马上看到操作的结果，并且用色彩、文字粗细、闪烁、弹出、页面布局的明显变化等突出方式告知用户。

7、不同内容之间距离保持一致，这样让界面看起来更清晰。

（如图4）

图4

8、分辨率适应页面布局，以保证在分辨率1024*768下的正确显示为前提，适应高分辨率情况使用表格宽度或层的宽度等参数使用百分比方式自动适应。

9、现在浏览器有很多版本，页面设计和CSS编写要兼容现在主流的几个浏览器（IE6/IE7/IE8/FIREFOX）。

2.3文件命名和文本信息

1、在页面主体内容部分往往有很多文本信息，它是需要用户认真阅读的部分，只有在文本字体、色彩上增加格式的变化，如加粗、下划线等，就可以将冗长的文档、表格等组织的很有条理；

冗长的内容层次有了变化，更容易辩识。

2、文件的命名尽量做到简洁但又明了清晰，容易找到。

文件夹也要分类命名，文件要分类放置，这样方便查找管理。

3、所有的字号都应该用样式表来实现，禁止在页面中出现<

fontsize=?

>

标记。

4、处理页面中的文字，禁止直接复制粘贴WORD中的文字，应将文字粘贴至记事本后再使用。

用户无特殊要求时，一般汉字采用宋体，英文数字采用Arial。

5、文字正确无误，段落层次清晰，中文段落首行缩进二个汉字或直接采用方便浏览直接用文字左对齐方式。

2.4错误操作和提示信息

1、非法的输入或操作应有足够的提示说明。

对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待（如图5）。

系统耗时操作超过30秒的最好能够提供给用户相关的进度条功能。

图5

2、系统中相关的耗时操作都必须转变鼠标为等待状态。

3、提示信息：

错误信息提示、警告、或错误说明应该清楚、明了、恰当；

以第二人称“你”或“您”称呼用户，强调用户的主导能力；

用对用户宽容的语气；

严重的警告信息使用弹出信息框提示，不严重的在页面前后文处直接输出，弹出不宜太频繁的使用；

可能对系统导致破坏性的操作要给出警告信息和用户确认按钮，用户可以取消操作，防止意外的错误操作造成损失；

复杂步骤在完成后给出完成成功的提示。

图6

4、出错处理及出错画面的转向，系统的内部状态变化对于用户有较大影响的情况，给出用户明显的解决方案提示，或给出自动的导航，使用户快速的恢复工作状态。

例如用户SESSION过期，用户无法进行操作时，系统自动跳转至登录界面。

2.5图形

1、尽量少使用大图片，图形大于100K时，必须采用缩略图，用点击放大方式制作。

2、为减少图形文件大小，图形颜色丰富（>

128色）时使用JPG格式（JPG压缩比为6），颜色单调（<

128色）时使用GIF格式。

三、具体页面的细则

3.1登录界面

图7

1、登录界面上要有客户的标志和系统名称。

2、登录界面最好有用户名和ID的记忆，焦点直接定位到密码输入框。

3、如果用户输入用户名或密码错误时，要出现错误提示，提示用户具体是哪项填写错误。

3.2主界面

图8

图9

3.2.1头文件

图10

1、界面上都有客户标志和系统名称（如果系统名过长可以用简称）。

2、要有用户名、当前的日期和相关的快捷命令按钮。

3、下拉菜单要根据菜单选项的含义进行分组，并应该按重要程序先后次序排列，重要的放在开头，次要的放在后边；

没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置。

4、如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。

菜单深度一般要求最多控制在二层以内。

5、主菜单的宽度要接近，字数最好不多于四个，每个菜单的字数能相同最好；

主菜单数目不应太多，最好为单排布置。

3.2.2欢迎页面

图11

图12

1、显示信息的欢迎页面，信息要以明线表格的形式显示。

（如图11）

2、不显示信息的欢迎页面，要有欢迎语句和与主题相关的淡雅底图。

（如图12）

3.2.3左侧菜单

图13图14

1、树型菜单深度最好控制在三层以内。

（如图13）

2、抽屉式菜单深底最好控制在二层以内。

（如图14）

3.2.4右框架显示内容部分

图15

3.2.4.1当前位置

图16

1、要能准确显示当前内容的位置，字与“>

”之间要有最少一个空格的间隙。

（如图16）

3.2.4.2查询表格

图17

图18

1、如果查询条件多且按钮少，最好采用明线表格的方式显示，这样更清楚易懂。

（如图17）

2、如果查询条件少而命令按钮多，可以采用没有表格线的方式显示。

（如图18）

3.2.4.3显示记录的列表

图19

图20

1、每页所显示的条数，以保持当前正好一屏显示无需滚动为标准。

2、列表记录之间要有不同的底色相间隔；

如果没有底色间隔，当鼠标经过某条记录时此记录底色要有所变化与其它记录有所区别，当选中某条记录时，此记录的底色也要有变化，以便用户查看编辑。

（如图20所示）

3、各种列表在页面中往往是传递信息的核心，尽量集中的表现出来，方便查看、编辑等；

冗长拖沓的数据组织形式可能给用户带来非常低的维护效率。

4、表格中字体使用统一的字体和字号（通常都用宋体和12号字）；

表格宽度设置不能为100%，可以根据情况统一设置，一般情况下设为98%，整个表格居中显示；

表格头的文字要居中显示。

6、表格中内容：

文字的对齐方式都采用左对齐；

数字的对齐方式都采用右对齐，带小数点的数字没有特殊要求的情况下保留到小数点后面两位。

7、单元格中的内容，最少离表格线3个像素的距离。

3.2.4.4弹出窗口

图21

1、屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置，窗体的中心位置应该在对角线焦点附近。

2、操作过程中有清晰分界的子任务使用弹出窗体实现，保证完成后向主任务窗体返回必要的结果，及时刷新主任务窗体，使用户看到操作完成的结果，并且通过控件获取焦点等措施突出显示该结果。

3、要显示窗口主题，窗口主题显示标志用户当前所在模块或子系统名称，子任务窗体主题使用“动词+名词”的语法结构指明用户当前的任务。

4、必填项要用红色星号标注。

5、内容对齐方式要一致，采用左对齐。

6、弹出窗体的页面主题、栏目标题等资料与关联的父窗体保持上下文一致，方便用户理解并做出处理策略。

3.2.4.5表单

图22

图23

1、常用的表单应该同时支持键盘操作和鼠标操作。

2、复选框和选项框最好有默认选项，并支持Tab选择，Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。

3、表单内在特定的字段域附近给出必填信息提示，并用红色标注，提醒用户注意，验证的错误提示要给出准确恰当的指导。

4、表单中用户在交互过程中保证用户方便的切换编辑、浏览状态，方便用户用最快的速度获取需要的信息，提高操作效率。

5、经常使用的工具按钮（如新增、编辑等功能按钮）保证在页面经单向拖曳浏览后，不需来回拖曳滑竿即可操作；

长页面可以考虑页首、页尾均放置工具按钮；

默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。

6、按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置；

按钮的大小要与界面的大小和空间要协调；

避免空旷的界面上放置很大的按钮；

Enter缺省按钮/确认操作输入设计。

7、与正在进行的操作无关的按钮应该加以屏蔽灰色显示。

8、高效率的输入方式，特定的字段内容的输入方式选用使用效率最高，不容易发生错误的方式。

如录入日期使用户点选弹出的日历控件，并无须干预的自动返回正确的格式。

9、表单格式尽量保持业务原始票据的格式或字段排列顺序，方便用户的集中录入过程。

10、表单字段左对齐。

11、输入框的宽度基本符合数据库能够容纳的宽度，暗示系统能够接受的字符容量。

基于以上规范，希望能为大家在工作中带来更多的方便，能更好的提高工作效率。