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

1、第3部分：颜色和字体颜色和字体测试包含的范畴用户通过使用网页产品获取大量的数据信息，这些信息的显示方式包拈图形和文字两大部分。而在向用户呈现图形和文字的过程中，颜色和字体扮演了 非常重要的角色。合理恰当的颜色和字体设置可以保证用户以最高效、清晰的方式获取到需要的信息，而如果颜色和字体设置的不恰当，用户将花费更 多的时间获取相同的信息量，从而导致用户获取信息的效率下降。本文中，将列举一些web产品开发中需要注意的事项，通过避免这些事项，可以从一定程度上杜绝此类的问题给用户带来的不以体验，从而提高产品 的用户满意度。本文也会举例说明一些具体的web产品缺陷实例。颜色测试checklist1.2确保

2、所有页面的背景颜色都被测试表1.颜色测试checklist总结序号checklist.1检査超链接的颜色1.3检查警告消息的颜色是否符合规范1.4确保相似页面的颜色一致1.5确保前景色和背景色是易读的1.6确保不耍用红色高亮显示活跃组件1.1检查超链接的颜色超链接的颜色显示通常呈现三种形式：缺省颜色、有光标吋的颜色、访问后颜色，如图1所示。图1.超链接的三种颜色显示default link text:the quick brown fox jumps over a lazy dog-并00649dlink text on hoverthe quick: brown fox jumps over

3、 a lazv doq-#05386blink text visited:the quick brown fox jumps over a lazy dog#745285按照以上一致性的要求，可以保证用户在不同的产品之间切换时，能有一致的用户感受和体验，对用户流畅的应用新的产品很有帮助。1.2确保所有页面的背景颜色都被测试对于一款用户用好的网页产品，所有页面的背景颜色需要具有一致性，以保证提供给用户一致的用户体验。图2.页面背景颜色不一致实例07aa980848407aa9800fofcf3f2f3f4*0039323400896c08703700896c00fofcpof2f0f0f3p7*

4、00020037020fec0827029o20fec00fofgfifof0f0f2f9*00100029021048082704802104800f0f<fifof0f0f4f8*001000480211a00827118o211a000f0f*fifororififs*001001160211b808271200211b600f0ffifof0f1p2p0*001001200211bc0827121o211bc00f0ffifof0f1f2f1*001001210212e008271820212e000foffifof0f1f8f2*001001820213240827195021

5、32400f0ffifop0f1f9f5*00100195021334082719902133400foffifof0f1f9f9*00100199027638083226802763800f0ff1f2f1f0f1fb*00121018035328084358003532800fofctlf6f6f0f8f0*001660800389b408汽'a a46371c 4 410389&400fofc戸汽，戸fc/p7f1f2f1*00177121 a a汽愚汽in图2中所示，该实例中，当水平滚动条出现后，拖动水平滚动条查看右侧内容，可以发现左右两侧的页面背景颜色是不一致的，这会

6、让用户体验卜降，是产品的一个缺陷1.3检查警告消息的颜色是否符合规范警告消息耑要对用户进行醒目的提醒和警告，耑要很容易即可被用户发现。因此，通常警告消息的颜色设置为粉红色，如图3所示。图3.警告消息实例q 111鬱 chentconotcl to ttxdi扇 wi癱t you wmrttw >4<v»rw31av i 的waj，在网页产品幵发和测试过程屮，幵发测试人员sr要检查警了告消息的颜色是否保持一致，是否符合以上的颜色规范。1.4确保相似页面的颜色一致为了保持网页产品页面设计的一致性，为用户提供一致的体验，相似页面的颜色耑保持一致。图4.相似页面背景色不一致实例

7、exceptionsu 国 | reports 0s c?error: there are no evaluation runs for no reports were found for this resource anything other than databases, areas, andpartitions上阁4屮所示的实例，是以往我们遇到的一例相似页而背景色颜色不一致的情况。该实例中，左侧exceptions和右侧reports窗口组件在没有数据显示时，呈现出不同的背景颜色，而在用户看来，这两种情况均反 映了没有数据的情况。两个窗口组件此时应显示一致的背景色，这是产品的一个缺陷。

8、图5.相似窗体背景色不一致实例addressportsslrepository nameauto discovery dateadd 5cjrt delete validate discover5123 false fposrvts 5123 falsefposrvtsenvironmentnamenotice the gradient isnt smooth.以上图5的实例中，显示的是同一个表格中不用列的标题color should be shaded better for professional look.部分背景颜色不一致的例子。第一列的标题窗体呈现为均匀的颜色显示，而衣侧其余的列则山

9、现了不平滑的颜色跳跃，这也是产品的缺陷。1.5确保前景色和背景色是易读的由于人眼对颜色对比度的敏感性，为了保证用户对显示内容的易读性，需要保证前景色和背景色有一定的差异，达到一定的对比度。否则，如果前景色 和背景色颜色过于接近，将给用户带来较大的阅读困难。举例，同时是蓝色的前景色，如果背景颜色也是蓝色，前景和背景将混在一起，使得用户无法 区分。图6.前景色和背景色太接近的实例如以上图6屮所示，显示的表格内容背景色和前景色非常接近，用户阅读起来非常吃力。这是产品的缺陷，盂要增大前景和背景颜色的对比度。1.6确保不要用红色高亮显示活跃组件因为有很多人是红绿色盲，所以不要用红色來高亮显示活跃的组件。

10、据统计，全球男性中，红绿色盲的比例在8%左右。字体测试checklist表2.字体测试checklist总结序号checklist2.1 确保整个网页产品中字体设置的一致性2.2 确保字体放大时页面布局不被破坏2.3 确保所有字体设置的易读性2.4 确保不同类型内容在同一贞面显示时尽量选用不同字体2.1确保整个网页产品中字体设置的一致性为了给用户提供一致性的体验，字体在整个网页产品中需要采用一致的设置规则，相似的内容在不同的地方需要采用一致的字体设置。2.2确保字体放大时页面布局不被破坏当用户育耑求放大网页上的字体时，耑要确保产品的页面布局不被破坏，依然可以为用户提供所有的功能。此时，耑要确保

11、页面上的组件不会相互遮挡2.3确保所有字体设置的易读性易川性和易读性是网页产品设计的重要內容，前面提到了颜色设置的易读性问题。这里，字体设置的易读性也很重要。合理的字体设置，可以让内容的 呈现更有效率、更有层次。2.4确保不同类型内容在同一页面显示时尽量选用不同字体当一个页而上有多种不同类型的数据一起显示时，尽量用不同的字体区分不同类型的n容，同时结合使用籼体、斜体、下划线等形式，以使数据更有层 次性，更有利于用户的阅读。图7.不同类型数据显示实例type. (2week override how often l| every weeki1st week of every month i 门

12、2nd week of every month i 3rd week of every month i q 4th week of every month i n 5th week of every month i i last week of every month occurs on:i weekdayso weekendsi o mondayssaturdays o tuesdaysj sundaysi wednesdays匚i thursdays i n fridays以上图7中所示，显示的内容包括不同的层次关系，但所有这些内容都采用了相同的字体显示。这样将会让用户看起來比较吃力。如果可以将不同的内容采用不同的字体，用户看起来就轻松快捷很多。比如，将“how often”和“occurs on”采川 稍大的字体大小，并加粗；同时可以将“weekdays”和“weekends”采用不一样的字体显示，可以加上斜体效果加以