第一章 界面测试

简介

界面是软件与用户交互的最直接方式，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。如果界面设计的失败或界面上含有错别字，排版混乱，都会扰乱用户的思路，使用户对软件产生不信任感。

目前界面的设计引起软件设计人员重视的程度还远远不够，经常出现很多问题。另外，在测试过程中，测试人员通常只重视程序功能界面的测试，而忽视了安装过程和帮助联机中的界面测试，这些也会对软件的使用造成影响。

12.1  界面检查的通用原则

12.1.1  界面色彩搭配

计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别做出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。界面的配色应该尽量简单，尽量少使用各种刺眼的颜色。

12.1.2  界面布局

（1）屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置内容时要注意利用这两个位置。（如下图12-1和图12-2矩形区域所示）

（2）界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

（3）系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻查看时的视觉疲劳。

图12-1 登录页面

图12-2 用户管理页面

（4）布局要主次分明，页面中同时分布较多栏目的情况下，按照页面的伸展方向，即由上到下，由左到右，根据浏览的方向，重要的内容应该在左边最容易注意的位置，导航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野之中。页面右边一般是一些当前页面主要操作的扩展、选项等内容。（如图12-3）

图12-3用户管理页面

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

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

不同内容之间距离保持一致，这样让界面看起来更清晰。（如图12-4）

图12-4 用户管理页面

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

（8）现在浏览器有很多版本，页面设计和CSS编写要兼容现在主流的几个浏览器。

12.1.3  文件命名和文本信息

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

（2）文件的命名尽量做到简洁但又明了清晰，容易找到。文件夹也要分类命名，文件要分类放置，这样方便查找管理。

（3）所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。

（4）处理页面中的文字，禁止直接复制粘贴WORD中的文字，应将文字粘贴至记事本后再使用。用户无特殊要求时，一般汉字采用宋体，英文数字采用Arial。

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

12.1.4  错误操作和提示信息

（1）非法的输入或操作应有足够的提示说明。对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待（如图12-5）。系统耗时操作超过30秒的最好能够提供给用户相关的进度条功能。

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

（3）提示信息：错误信息提示、警告、或错误说明应该清楚、明了、恰当；以第二人称“你”或“您”称呼用户，强调用户的主导能力；用对用户宽容的语气；严重的警告信息使用弹出信息框提示，不严重的在页面前后文处直接输出，弹出不宜太频繁的使用；可能对系统导致破坏性的操作要给出警告信息和用户确认按钮，用户可以取消操作，防止意外的错误操作造成损失；复杂步骤在完成后给出完成成功的提示。如图12-6所示。

图12-5 报错对话框

图12-6 报错页面

（4）出错处理及出错画面的转向，系统的内部状态变化对于用户有较大影响的情况，给出用户明显的解决方案提示，或给出自动的导航，使用户快速的恢复工作状态。例如用户SESSION过期，用户无法进行操作时，系统自动跳转至登录界面。

12.1.5  图形

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

（2）为减少图形文件大小，图形颜色丰富（>128色）时使用JPG格式（JPG压缩比为6），颜色单调（<128色）时使用GIF格式。