将文字置于深色图案的背景上、或者置于颜色与文字对比不强烈的背景上,任何尺寸的文字都可能难以阅读。
带图案背景上的文字
芝加哥联邦储备银行网站中的抵押计算器可以说明带图案背景的页面是如何影响文字阅读的。计算器中的文本框标签在普通的白色背景上非常易读(参见解决之道),但是带图案的背景大大削减了它们的可读性,即使是相对比较浅的图案。他们的本意是为计算器添加一个适合房屋抵押的背景,但网站的设计人员对平面造型设计的考虑超过了对可用性的考虑。
文字与背景对比不强烈
即使网页的背景由单一的纯色组成,但是文字颜色与背景颜色对比不强烈也会伤害背景上面文字的易读性。没有人期待用户能够阅读颜色与背景色相同的文字,但是一些Web设计人员似乎期待用户能够阅读颜色与背景颜色反差不大的文字。
例如,Microsoft.com网站经常在深红色背景上显示黑色文字的出错消息。当然,红色一般代表错误,不幸的是,红色背景上的黑色文字阅读非常困难,小字体(10磅)没有用。
糖果经销商Russell Stover 原来的网站中显示了一个不容易阅读的出错消息。网站升级之前,注册表单的出错消息使用深蓝色背景显示红色字体,非常难以阅读。
带图案的背景加上颜色对比不强烈
因为带图案的背景和颜色对比不强烈都是这个禁忌的一般表现形式,因此一些网站同时违反了这两种形式不足为奇。两个例子,分别来自Angelfire.com(提供入口和Web主机服务)网站和Sciencenter.org(位于纽约的美国科学研究中心)网站。在Angelfire的一个子网站中,粗糙的褐色背景上使用白色字体。Sciencenter 网站中所有页面都使用带图案的蓝色背景,不仅降低了白色字体的易读性,而且几乎无法识别蓝色的链接标签。
解决之道
假设一个网站的主要目的是传达信息,或者是让用户自己操作数据,那么网站中的文字应该非常易读。为了确保背景上的文字易读,设计人员应该遵守下列准则:
。使用纯色的背景 文字下面避免使用带图案的背景。如果你觉得网站或者网站中的某个页面必须使用带图案的背景,那么使非常淡的图案,像水印一样,再在背景上设计一大块没有图案的区域,放置文本。
。浅色上使用深色比深色上使用浅色好 所有的事物都一样,浅色背景上的深色文字比深色背景上的浅色文字容易阅读,因为感觉上从深色背景向浅色文字“渗色”。然而,深色背景上的浅色文字也可以阅读,如果颜色对比足够强烈,而且字体足够粗,可以抵挡当来自背景的“渗色”。
。白色上使用黑色是理想的 如果惟一关心的是易读性,那么最好的组合是在白色背景上使用黑色文字。当然,易读性不是惟一需要考虑的问题:如果整个网站都是黑色字体,白色背景那么,网站就太乏味了。但是,在选择文字颜色和背景颜色时,最好牢记这种理想情况。因此,深色的文字和浅色的背景比较好。
例如,简单将背景“漂白”,可以改善芝加哥联邦储备银行抵押计算器中文字的易读性,与实际的计算器进行比较。
类似地,我可以改善Microsoft网站出错消息的易读性,仍旧使用红色代表错误。使用白色背景,红色文字,代替红色背景,黑色文字,同时将字体的尺寸从10磅增加到12磅,将修改结果与Microsoft.com网站的实际出错消息进行对比。
特例:艺术站点
不是所有的网站都主要用于传达信息或者操作数据,一些网站的主要目的是引人注目或者娱乐。根据平面图形设计专家Kevin Mullet的观点,“这类网站给设计人员充分的自由空间,因为对比度能作为一种审美元素,所以可以使用适合艺术效果的模糊图形背景”。
本课主题:网页中带掩饰文字的问题
相关主题:
以图像方式显示文字的几个问题
文字和背景的对比
Web上要注意的文字设计
文字在计算机和浏览器中的显示大小
文字颜色与背景色的理想搭配
请拨打热线:0571-86586571

