Web软件测试Checklist应用系列,第3部分颜色和字体.doc

第 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 确保不同类型内容在同一页面显示时尽量选用不同字体 当一个页面上有多种不同类型的数据一