装饰杂志,《装饰》杂志社, 立足当代 关注本土 www.izhsh.com.cn

网页文字设计的可阅读性提高方法探析

  • Update:2010-07-23
  • 隋涌
  • 来源: 装饰杂志社
内容摘要
文字是网站传递信息的重要载体,网站文字设计也是网站视觉设计中重要组成部分,却往往容易被设计人员忽视。网站文字设计同其他要素一样,要体现其功能性和审美性的价值。而网站文字设计的首要任务,则是使浏览者能够清晰的阅读,即要提高文字的可阅读性。本文从文字的易读性和可读性两个要素入手,探讨网站文字设计的技巧。
关键字:网站文字 可阅读性 易读性 可读性
 
 
 
从功能性的角度来说,文字是最直接、最准确的视觉沟通及认知方式,是能最充分表达意思的媒介。从文字的形态和意义来说,是一种经过高度抽象和提炼的视觉符号;它用一些简单、凝练的图形结构来代表一定的客观事物、概念、思想和含义。因此,文字从本质上说,就是一种象征符号。在网站的信息传递过程中,文字无疑是最重要的元素。对于绝大多数网站来说,文字在整个网站的内容中占了3/4甚至更多,从某种意义上说,网页上可以没有颜色,没有图片,但却不能没有文字, 而网站的文字设计往往是不被重视的。
网页上文字的功能无外乎两种,一种是传递理性信息,即网站的内容,供浏览者阅读,这是文字的 “第一功能”;另一种功能是传递感性信息,即传递情感、强化网站的视觉风格,这是文字的辅助功能。目前的大多数网站,尤其是综合性及信息服务类的网站,因页面上的信息繁杂,干扰很多,很容易影响浏览者的视觉秩序。因此,文字信息的设计就显得非常关键,以便实现传递信息的目的。大多数浏览者上网的目的是为了阅读信息,所以我们进行文字设计的目的,就是让浏览者阅读时尽可能轻松如意,保持愉快的心情。因此,我们首先要考虑的要素就是文字的可阅读性。那么如何提高网站文字的可阅读性呢?笔者认为重点就是要提高文字的易读性和可读性。易读性和可读性往往容易混为一谈。“严格地讲,易读性是指一套字型中由字母形状特征所决定的不同字母的可辨识度。而可读性是指文字在页面中是否便于理解”。[1]
 
一、如何提高网页上文字的易读性
1、文字形态对易读性的影响
文字的结构特征是人类经过数千年创制、流传、改进而约定俗成的。网页上文字的主要任务就是通过其外形特征使浏览者识别,给人以清晰的视觉印象,从而保证信息的准确传递。这种文字的外形特征就是字体,字体是文字符号视觉形式的风格及类型,通常集中表现在文字的笔画书写特点及文字的间架结构和空白的特征处理上。
在网页设计中,根据网站的内容及表现的需求,设计者可以根据不同字体的特性,谨慎、灵活地选择使用。网页中最常使用的中文字体是以宋体、黑体为主的印刷字体,尤其宋体字笔画粗细适中,疏密布局合理,久读不易疲劳且阅读速度快,有很好的易读性,是网页正文的常用字体。同时,宋体字是HTML页面的缺省显示字体,所以应用最为广泛。黑体笔画粗细均匀,不如宋体灵秀,但它形态浑厚有力、朴素大方,具有极强的注目性,但易读性不如宋体,所以经常被用作标题文字。2006年,微软雅黑随着Windows Vista一起发布,在使用ClearType功能的液晶显示器中,微软雅黑比以前在Windows XP中预设的宋体更加的清晰易读。其他的中文印刷字体如楷体、仿宋等,在网页上的应用相对很少。中文的手写体形态自由,特征明显,但易读性稍弱,而且与网页上常用的正文字体很难协调,所以这类字体在网页中的使用率极低。
网页上使用的外文字体主要是指由拉丁字母构成的文字体系,尤其以英文占重要比例。英文字母按其结构可归纳为衬线体、无衬线体、装饰体和手写体。衬线体使用衬线或粗细变化,使字体笔画的末端得到加强,提高了小号文字的可读性。除此之外,很多衬线字体还会采用加强竖向笔划,夸张字形等方法进一步改善它的可读性。因此,这种字形特点使衬线体具有很好的阅读性,尤其适合用于篇幅较长的文本,其典型代表文字是“Times New Roman”。无衬线体文字的粗细对比不是很明显,笔画体粗细均匀,清楚醒目,朴素有力,是标题和正文都适用的字形。无衬线体笔画末端没有装饰性部分,看起来更清爽。其字体形状正好和屏幕上的像素搭配,因而具有很好的易读性。但需要注意的是,因为无衬线体通常笔划粗细均匀,所以在小字号显示的时候,易读性会降低,容易引起视觉疲劳。因此,这种字体更适合用于网页上的标题和导航文字等简短的文字段。最常用的无饰线体有“Arial”和“Helvetica。装饰体也称花体,字形生动自由,装饰性强,具有较强的注目性,能够产生特殊的视觉效果。但文字易读性差,一般只适合用于标题,偶尔会用于较短的文本。英文手写体与中文手写体的特点相同,字型自由灵活,充满活力,具有很强的风格特征。相对于中文字体来说,英文字体的设计非常成熟,字型种类很多。因此,在网页上英文字体的使用相对灵活很多,选择的余地比较大。
相对正文字体来说,标题文字或广告区域的文字使用要灵活一些,通常会根据网站的主题选用适宜的印刷字体或手写字体。日本设计公司Hybridworks在界面、图标、壁纸等数码艺术领域很有造诣,该公司网站的主要目的是展示其创作的作品,页面结构简单,但在图形表现方面非常细腻。[i]页面的左上方是作品的展示区域,浏览者在点击浏览每一幅作品时,这一区域标题文字所使用的字体都有所不同,使网站在简单的布局结构下富于变化,并有效地降低了浏览者的审美疲劳。(如图1、2)
图1
图2
2、其他要素对易读性的影响
网页上文字的大小影响着信息的识别性,同时文字的大小也可以区分功能并影响网页的视觉风格。字号是区分文字大小的衡量标准。在进行网页设计时,最常使用的字号单位是点制(pt)和像素(px),点制又称为磅制。对于网页来说,公认的正文字字号是9磅。另一种流行的网页字体大小的表示法是像素, 12px是最常用正文字字号。它在不同的显示分辨率下,看上去都比较舒服。 随着显示器尺寸的不断增大和分辨率的不断提高,为了便于浏览,14px的正文字的使用也会增多起来。
另外,网页上使用的字体还受到技术因素的影响。浏览者访问网页看到的文字的样式取决于客户端电脑所安装的字体,网页上如果使用了客户端电脑没有安装的字体,系统会将字体自动转换为默认字体,即中文的新宋体或英文“Verdana”,“Arial”等。如果网页中需要使用一些特殊字体,为了正常显示,可以使用图片来显示。全部由FLASH技术开发的网站,由于导出时可以将文字一同打包输出因此在字体的选择上比较灵活。
 
二、如何提高文字的可读性
1、与可读性相关的文字要素
文字的字距和行距是决定文字可读性的重要因素。通过显示器阅读大段的文字,容易使人产生疲劳,字距过大或过小更加会影响阅读。一般来说,字距的大小是由字体结构来决定的。对于中文字体来说,四边的占用率小的文字,字距的要求也相对小,字距太宽视觉效果就会散;而对四边的空间利用率高的字符,字距相对就要稍大一些,才能让阅读者感觉舒适。网页上的正文字通常使用宋体,字距通常也采用“标准字距”。标题文字或指示性文字的间距可根据实际版面的需求,考虑各视觉要素之间的关系进行灵活设定。
行距的计算方式是从上一行文字的顶端到下一行文字的顶端。行距过小,容易造成上下文的干扰;行距过大,会降低文字的延续性。通常的行距设定是字高的1.25倍至2倍之间,西文字的行距通常小于中文字的行距。在实际的设计过程中,对行距的调整往往会影响页面的气质。因此,对行距的设定不是一成不变的,要根据文字的内容和功能,及应具有的情感效应和视觉效果,进行细致的处理。
对于网页浏览来说,每一行的长度对可读性的影响也是很大的。在排版时要注意一行中文字的数量,对于通栏来说,如果字数超过35个字,通常就会对阅读造成不利的影响。也就是说,设计者在规划整个页面的时候就要考虑到文字的栏宽。在网页设计中,除了最终的内文页使用通栏较多,因而版心稍宽,行长稍长之外,其他页面的版心的宽度都会处理得比较得当,通常会采取分栏的方式。
另外,文字的编排方式对网站文字的可读性影响也很大。网页中的文字编排方式受到网站信息量和网站风格的影响。信息量很大的网站,如门户网站或新闻网站,为了能让用户快速浏览信息,会采取严谨、简洁、统一的文字编排方式,文字群则采用“齐头齐尾”的排版方式,以增强文字的秩序感,便于阅读。而信息量小的网站,文字编排则非常灵活,但也要遵循基本的编排规律,注意文字的对比、统一、节奏和平衡,注意合理的视觉引导和空间的把握。网络媒体与传统平面媒体的本质区别就是它的交互性,这是网络媒体的最显著特点,也是它的优势所在。比如英国心脏基金会网站的设计就即满足了文字的审美性,又考虑了文字的可读性和导航的清晰性。[ii]该网站的版面布局十分讲究,首页的中心部位是由红色文字组成的心脏图形,这些文字恰是网站的导航。当鼠标移动到文字之上,相对应的一级导航文字仍以原来的红色显示,而其下级导航文字变成浅红色,其他文字则变成灰色(如图3),这样的设计便于浏览者把握网站的栏目内容。当鼠标点击该文字之后,与该栏目无关的导航文字会向页面右侧移动消失,而该栏目及其下级栏目的导航文字会像页面左上方移动并组成新的形态,成为二级页面的页面标题和二级导航,这样的变化在延续首页风格的同时又富于变化,并且满足了页面的功能需求(如图4)。
图3
图4
 
2、色彩对文字可读性的影响
白底黑字是网页上所惯用的文字和背景的色彩搭配方案,也是最不容易造成视觉疲劳的配色方案。当然,目前的网站数量无法计数,网站类型和风格也林林总总,不可能千篇一律都使用白底黑字。因此,我们也看到了不少在色彩搭配方面颇具个性的网站,一般以公司网站、艺术类、设计类、个人类及小型广告站点居多。针对这类网站的文字色彩应用来说,在突出个性的同时,一定要注意文字与背景对比度,这包括明度上的对比、纯度上的对比以及冷暖的对比。对比太弱的话,就会影响浏览者的阅读。尤其是大段文字,更要重视文字与背景的关系,决不能仅仅为了追求视觉效果而忽视网站的可用性。如交互设计团队2Advanced一直追求创新与设计技术的革命,该公司目前的网站V5版依然保持一惯的鲜明风格。[iii]在文字和背景处理方面,网站采用的是邻近色,虽然色相接近,但注意了明度上的对比,因此没有影响文字的可读性,这种文字与背景的中度对比表现方式,配合网页图形的“Matte Painting”,使整个网页的质感非常细腻,层次也越加丰富,产生了很强的表现力。(如图5、6)
图5
图6
 
三、结论
网页设计的本质是合理运用视觉理论,实现网页信息快捷、有效的传达。文字、图形、色彩是视觉传达的三大要素,其中,文字更是网站传递内容信息的最有效载体。在发展非常迅速的网络媒体设计中,文字不再是安静的符号,还可以成为运动的音符,甚至成为网站创意的灵魂。文字设计和其他设计要素一样,即要遵循已有的平面理论,又要考虑网络媒体本身的特点,同时考虑用户感受,才能更好地实现其可用性及审美性。
*注:本文为“北京市属高等学校人才强教计划资助项目”
 
参考文献
 
注释:

1. 日本设计公司Hybridworks网址,http://www.hybridworks.jp/
2. 英国心脏基金会网址,http://www.bhf.org.uk/annualreview2008/#/home/
3. 交互设计团队2Advanced网址,http://www.2advanced.com/