12.2  具体的界面检查的举例

12.2.1  登录界面

登录页面如图12-7所示。关注一下三点：

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

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

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

图12-7 登录页面

12.2.2  主界面

图12-8 主界面一：用户管理页面

图12-9 主界面二：订单管理页面

12.2.2.1  头文件

图12-10 头文件

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

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

（3）下拉菜单要根据菜单选项的含义进行分组，并应该按重要程序先后次序排列，重要的放在开头，次要的放在后边；没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置。

（4）如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。 菜单深度一般要求最多控制在二层以内。

（5）主菜单的宽度要接近，字数最好不多于四个，每个菜单的字数能相同最好；主菜单数目不应太多，最好为单排布置。

12.2.2.2  欢迎页面

欢迎界面测试关注以下两点：

（1）显示信息的欢迎页面，信息要以明线表格的形式显示。（如图12-11所示）

（2）不显示信息的欢迎页面，要有欢迎语句和与主题相关的淡雅底图。（如图12-12所示）

图12-11 欢迎页面一

图12-12 欢迎页面二

12.2.2.3  左侧菜单

 图12-13 左侧菜单一      图12-14左侧菜单二

（1）树型菜单深度最好控制在三层以内。 （如图12-13）

（2）抽屉式菜单深度最好控制在二层以内。（如图12-14）

12.2.2.4  右框架显示内容部分

右框架显示内容部分测试关注以下几点：

图12-15用户管理页面内容区域

1. 当前位置

图12-16 用户管理页面当前位置区域

要能准确显示当前内容的位置，字与“>>”之间要有最少一个空格的间隙。（如图12-16）

2. 查询表格

图12-17 用户管理页面查询区域一

图12-18 用户管理页面查询区域二

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

如果查询条件少而命令按钮多，可以采用没有表格线的方式显示。（如图12-18）

3. 显示记录的列表

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

（2）列表记录之间要有不同的底色相间隔；如果没有底色间隔，当鼠标经过某条记录时此记录底色要有所变化与其它记录有所区别，当选中某条记录时，此记录的底色也要有变化，以便用户查看编辑。（如图12-20所示）

图12-19 用户管理页面列表区域一

图12-20 内容显示列表区域二

（3）各种列表在页面中往往是传递信息的核心，尽量集中的表现出来，方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维护效率。

（4）表格中字体使用统一的字体和字号（通常都用宋体和12号字）；表格宽度设置不能为100%，可以根据情况统一设置，一般情况下设为98%，整个表格居中显示；表格头的文字要居中显示。

（5）表格中内容：文字的对齐方式都采用左对齐；数字的对齐方式都采用右对齐，带小数点的数字没有特殊要求的情况下保留到小数点后面两位。

（6）单元格中的内容，最少离表格线3个像素的距离。

4. 弹出窗口

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

图12-21 弹出窗口

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

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

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

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

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

5. 表单

图12-22 表单一

图12-23 表单二

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

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

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

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

（5）经常使用的工具按钮（如新增、编辑等功能按钮）保证在页面经单向拖曳浏览后，不需来回拖曳滑竿即可操作；长页面可以考虑页首、页尾均放置工具按钮；默认按钮要支持Enter及选择操作，即按Enter后自动执行默认按钮对应操作。

（6）按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置；按钮的大小要与界面的大小和空间要协调；避免空旷的界面上放置很大的按钮；Enter 缺省按钮/确认操作输入设计。

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

（8）高效率的输入方式，特定的字段内容的输入方式选用使用效率最高，不容易发生错误的方式。如录入日期使用户点选弹出的日历控件，并无须干预的自动返回正确的格式。

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

（10）表单字段左对齐。

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