Web 软件测试 Checklist 应用系列(3)

2.3 确保没有孤儿页面（没有链接指向它）

Web 软件测试 Checklist 应用系列,希望对网站测试的有帮助

我们需要保证产品页面中，不存在孤儿页面，也就是永远没有链接指向它的页面。该类页面对用户来说没有价值，并且是对资源的浪费，在设计阶段需加以避免。

2.4 检查所有引用的网络站点和邮箱地址是否添加了超链接

正常情况下，所有引用到的网络站点和邮箱地址都需要增加超链接，这样可以保证用户轻易的知道这些站点和邮箱地址是超链接，用户通过点击这些超链接就可以轻易到达不同的目的地址。否则，用户将只能通过复制这些链接和邮箱到浏览器中，这将大大增加操作的复杂程度，给用户带来不便。

2.5 确保光标置于超链接之上时呈现为手形

当光标置于超链接之上时，这时光标由原图标变为手形，这样有助于提醒用户当前区域为超链接的范围，点击可以触发超链接跳转。如果手形未能恰当显示，将是产品的缺陷。此外，当光标位于可以点击的按钮的上方时，也应该显示为手形图标，以提醒用户现在是可点击跳转区域。

图

6. 超链接光标不显示为手形实例 1

如上图 6 中所示，当光标处于红圈标记的超链接区域时，并未显示为手形。而用户直接点击鼠标时，则会跳转到描述中提示的目标页面。

图 7. 超链接光标不显示为手形实例 2

图 7 中显示的是一个帮助按钮的页面，当光标位于帮助按钮上方时，会出现弹出帮助信息提示“点击帮助图标了解更多”。用户此时确实可以通过点击帮助按钮图标跳转到更多帮助页面，但是当光标位于帮助图标上方时，光标并未显示为手形，这也是产品的缺陷。

Web 软件测试 Checklist 应用系列,希望对网站测试的有帮助

2.6 确保所有的链接都带下划线

为了给用户明确的提示，所有的链接都需要带下划线，这样用户在页面上很清楚就可以知道哪里是超链接的范围，哪里不是。当然超链接的字体颜色通常也跟周围不同，访问过的链接和未访问的链接颜色也不同。具体颜色的定义各个产品不尽相同，但所有的链接都有下划线这点是一致的。

2.7 确保相关信息链接出现在内容的底端或者靠近顶端位置

通常情况下，“相关信息”是用来帮助用户获取对当前页面内容更深入的了解的相关信息，一般位于当前内容页面的底端或者靠近顶端的位置。这样最有利于用户定位和寻找相关信息。设想如果相关信息链接出现在内容中间，将会跟内容中本身自带的超链接发生混淆，用户将难以定位和寻找需要的相关链接。

回页首

总结

导航和链接作为用户使用网页产品的重要工具，是用户直接操作的对象，对用户体验的提升具有重要作用。两者的设计应该力求简练、高效，在提供给用户提供便捷的导航和移动的同时，也力求杜绝各种冗余的信息。

本文分别讨论了网页产品中的导航和链接中 Checklist 的应用，并给出了实际测试工作中的一些应用实例，演示了具体产品缺陷出现的场景。本文的目的主要是让网页产品开发人员和测试人员在导航和链接两个方面能尽量提供高效的产品，并依据本文提到的 Checklist 相关条目杜绝相关产品缺陷。

Web 软件测试 Checklist 应用系列,希望对网站测试的有帮助

第 3 部分: 颜色和字体

软件产品测试中的应用， 以帮助读者了解如何利用 Checklist 这种重要的测试手段，更高效的寻找 Web 产品中的 defect（缺陷）。Checklist 汇集了有经验的测试人员总结出来的最有效的测试想法，可以直接有效的指导测试工作，开阔测试人员的思路，能够快速的发现产品的缺陷并实现较好的测试覆盖，更重要的是该 Checklist 在不同的项目中具有很强的通用性。该系列文章中，将在每个部分给出具体的有效的 Checklist 并提供相关应用实例，以便于您的理解和应用。

颜色和字体测试包含的范畴

用户通过使用网页产品获取大量的数据信息，这些信息的显示方式包括图形和文字两大部分。而在向用户呈现图形和文字的过程中，颜色和字体扮演了非常重要的角色。合理恰当的颜色和字体设置可以保证用户以最高效、清晰的方式获取到需要的信息，而如果颜色和字体设置的不恰当，用户将花费更多的时间获取相同的信息量，从而导致用户获取信息的效率下降。

本文中，将列举一些 Web 产品开发中需要注意的事项，通过避免这些事项，可以从一定程度上杜绝此类的问题给用户带来的不良体验，从而提高产品的用户满意度。本文也会举例说明一些具体的 Web 产品缺陷实例。

回页首

颜色测试 Checklist

表 1. 颜色测试 Checklist 总结

1.1 检查超链接的颜色

超链接的颜色显示通常呈现三种形式：缺省颜色、有光标时的颜色、访问后颜色，如图 1 所示。

图 1. 超链接的三种颜色显示

Web 软件测试 Checklist 应用系列,希望对网站测试的有帮助

按照以上一致性的要求，可以保证用户在不同的产品之间切换时，能有一致的用户感受和体验，对用户流畅的应用新的产品很有帮助。

1.2 确保所有页面的背景颜色都被测试

对于一款用户用好的网页产品，所有页面的背景颜色需要具有一致性，

以保证提供给用户一致的用户体验。

图 2. 页面背景颜色不一致实例

图 2 中所示，该实例中，当水平滚动条出现后，拖动水平滚动条查看右侧内容，可以发现左右两侧的页面背景颜色是不一致的，这会让用户体验下降，是产品的一个缺陷。

1.3 检查警告消息的颜色是否符合规范

警告消息需要对用户进行醒目的提醒和警告，需要很容易即可被用户发现。因此，通常警告消息的颜色设置为粉红色，如图 3 所示。

图 3. 警告消息实例

在网页产品开发和测试过程中，开发测试人员需要检查警告消息的颜色是否保持一致，是否符合以上的颜色规范。

1.4 确保相似页面的颜色一致

为了保持网页产品页面设计的一致性，为用户提供一致的体验，相似页面的颜色需保持一致。

图 4. 相似页面背景色不一致实例