Web 软件测试 Checklist 应用系列，第 3 部分: 颜色和字体
颜色和字体测试包含的范畴
用户通过使用网页产品获取大量的数据信息，这些信息的显示方式包括图形和文字两大部分。而在向用户呈现图形和文字的过程中，颜色和字体扮演了非常重要的角色。合理恰当的颜色和字体设置可以保证用户以最高效、清晰的方式获取到需要的信息，而如果颜色和字体设置的不恰当，用户将花费更多的时间获取相同的信息量，从而导致用户获取信息的效率下降。
本文中，将列举一些 Web 产品开发中需要注意的事项，通过避免这些事项，可以从一定程度上杜绝此类的问题给用户带来的不良体验，从而提高产品的用户满意度。本文也会举例说明一些具体的 Web 产品缺陷实例。
回页首
颜色测试 Checklist
表 1. 颜色测试 Checklist 总结
| 序号 | Checklist |
|---|---|
| 1.1 | 检查超链接的颜色 |
| 1.2 | 确保所有页面的背景颜色都被测试 |
| 1.3 | 检查警告消息的颜色是否符合规范 |
| 1.4 | 确保相似页面的颜色一致 |
| 1.5 | 确保前景色和背景色是易读的 |
| 1.6 | 确保不要用红色高亮显示活跃组件 |
1.1 检查超链接的颜色
超链接的颜色显示通常呈现三种形式：缺省颜色、有光标时的颜色、访问后颜色，如图 1 所示。
图 1. 超链接的三种颜色显示
按照以上一致性的要求，可以保证用户在不同的产品之间切换时，能有一致的用户感受和体验，对用户流畅的应用新的产品很有帮助。
1.2 确保所有页面的背景颜色都被测试
对于一款用户用好的网页产品，所有页面的背景颜色需要具有一致性，以保证提供给用户一致的用户体验。
图 2. 页面背景颜色不一致实例
图 2 中所示，该实例中，当水平滚动条出现后，拖动水平滚动条查看右侧内容，可以发现左右两侧的页面背景颜色是不一致的，这会让用户体验下降，是产品的一个缺陷。
1.3 检查警告消息的颜色是否符合规范
警告消息需要对用户进行醒目的提醒和警告，需要很容易即可被用户发现。因此，通常警告消息的颜色设置为粉红色，如图 3 所示。
图 3. 警告消息实例
在网页产品开发和测试过程中，开发测试人员需要检查警告消息的颜色是否保持一致，是否符合以上的颜色规范。
1.4 确保相似页面的颜色一致
为了保持网页产品页面设计的一致性，为用户提供一致的体验，相似页面的颜色需保持一致。
图 4. 相似页面背景色不一致实例
上图 4 中所示的实例，是以往我们遇到的一例相似页面背景色颜色不一致的情况。该实例中，左侧 Exceptions 和右侧 Reports 窗口组件在没有数据显示时，呈现出不同的背景颜色，而在用户看来，这两种情况均反映了没有数据的情况。两个窗口组件此时应显示一致的背景色，这是产品的一个缺陷。
图 5. 相似窗体背景色不一致实例
以上图 5 的实例中，显示的是同一个表格中不用列的标题部分背景颜色不一致的例子。第一列的标题窗体呈现为均匀的颜色显示，而右侧其余的列则出现了不平滑的颜色跳跃，这也是产品的缺陷。
1.5 确保前景色和背景色是易读的
由于人眼对颜色对比度的敏感性，为了保证用户对显示内容的易读性，需要保证前景色和背景色有一定的差异，达到一定的对比度。否则，如果前景色和背景色颜色过于接近，将给用户带来较大的阅读困难。举例，同时是蓝色的前景色，如果背景颜色也是蓝色，前景和背景将混在一起，使得用户无法区分。
图 6. 前景色和背景色太接近的实例
如以上图 6 中所示，显示的表格内容背景色和前景色非常接近，用户阅读起来非常吃力。这是产品的缺陷，需要增大前景和背景颜色的对比度。
1.6 确保不要用红色高亮显示活跃组件
因为有很多人是红绿色盲，所以不要用红色来高亮显示活跃的组件。据统计，全球男性中，红绿色盲的比例在 8% 左右。
回页首
字体测试 Checklist
表 2. 字体测试 Checklist 总结
| 序号 | Checklist |
|---|---|
| 2.1 | 确保整个网页产品中字体设置的一致性 |
| 2.2 | 确保字体放大时页面布局不被破坏 |
| 2.3 | 确保所有字体设置的易读性 |
| 2.4 | 确保不同类型内容在同一页面显示时尽量选用不同字体 |
2.1 确保整个网页产品中字体设置的一致性
为了给用户提供一致性的体验，字体在整个网页产品中需要采用一致的设置规则，相似的内容在不同的地方需要采用一致的字体设置。
2.2 确保字体放大时页面布局不被破坏
当用户有需求放大网页上的字体时，需要确保产品的页面布局不被破坏，依然可以为用户提供所有的功能。此时，需要确保页面上的组件不会相互遮挡。
2.3 确保所有字体设置的易读性
易用性和易读性是网页产品设计的重要内容，前面提到了颜色设置的易读性问题。这里，字体设置的易读性也很重要。合理的字体设置，可以让内容的呈现更有效率、更有层次。
2.4 确保不同类型内容在同一页面显示时尽量选用不同字体
当一个页面上有多种不同类型的数据一起显示时，尽量用不同的字体区分不同类型的内容，同时结合使用粗体、斜体、下划线等形式，以使数据更有层次性，更有利于用户的阅读。
图 7. 不同类型数据显示实例
以上图 7 中所示，显示的内容包括不同的层次关系，但所有这些内容都采用了相同的字体显示。这样将会让用户看起来比较吃力。如果可以将不同的内容采用不同的字体，用户看起来就轻松快捷很多。比如，将“How often”和“Occurs on”采用稍大的字体大小，并加粗；同时可以将“Weekdays”和“Weekends”采用不一样的字体显示，可以加上斜体效果加以区别，因为它们跟一周的具体七天是总分的关系。这样就可以让用户看起来更容易分辨哪里是总的分类，哪里是具体的天数。
回页首
总结
颜色和字体的显示，直接跟用户的体验相关联。网页产品中恰当合理的设置颜色和字体，会给用户带来极大的方便，而如果设置的不合理，将会让用户觉得产品用起来很吃力，从而降低用户的满意度。在网页产品开发过程中，应该多站在用户的角度思考，思考如何可以让用户最有效率的获取到需要的信息。