书城社科网络传播实务
21172900000013

第13章 网络传播界面构建(5)

三、字体的应用

研究显示,一般的网络浏览者不会花费时间去阅读大块的文本,无论它们有多重要或写得多好。因此,必须把这些大文本分解为若干小段落。突出重要的地方,放置点击的按钮也可以提高用户的注意力。

在进行页面文字的设计时,我们必须尊重用户的阅读习惯,尤其是文字在页面中的辨识度等问题。如何有效地体现最佳效果,需完善文字的字体、字号以及行距、字间距之间的关系。以信息内容展现为主的门户类网站为例,经过多年的用户阅读习惯培养,用户逐渐接受并适应如下字体规范。

1.字体、字号、字色

中文字体的网页设计首先要基于电脑默认安装的基本字体来进行设计,比如:黑体、宋体、楷体、隶书、幼圆,但这些字体小于12像素时,基本能清楚识别的就剩宋体了。一般网站的字体选择“宋体”(Windows系统宋体,SimSun),而新闻头条则会使用“黑体”或“微软雅黑”等字体,与内容正文进行视觉的区分。

在字号的选择上,使用12号和14号宋体字比较常见,目录页用小字号,这样能放更多的导读信息;而正文页用大字号,使浏览者阅读起来比较舒服。在阅读文字中尽量少使用“斜体”、“抗锯齿”等效果,慎用不容易看清楚的楷体,避免干扰用户的文章阅读。

为了实现更好的用户体验,网站对字色的规范非常严格:每个页面中只能使用一种链接字色,它与无链接辅助性的文字颜色不同。另外,对文字点击访问的状态明确要求,点击访问过的标题字色与鼠标悬停或点击时的颜色不同。

2.行距

文字的间距规律是:字距小于行距,行距小于段距,段距小于块距。12号和14号宋体字的行距通常在22~26像素左右。以12号字为主的信息新闻区中,文字链列表行高通常在22像素。

文字链列表行高24像素多用于宽屏、时尚、娱乐类频道。

以14号字为主的信息新闻区中,文字链列表行高通常为24像素。

行高为24像素的门户网站新闻网页,文字链26像素行高多用于宽屏、时尚、娱乐类网页。

行高为26像素的门户网站时尚、娱乐网页

3.下划线

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所要表达的最主要的信息。但使用时需要谨慎,因为过多使用会使网页难以阅读。在互联网早期,标题下划线传达了一种信息,即点击进入浏览更多。经过多年的变迁以及信息量的增加,网页整篇出现大面积的下划线链接,视觉上感觉压抑并且整体的页面显得杂乱无章。

在这方面,搜狐、雅虎、网易、QQ等门户网站形成共识取消标题下划线,这样的画面看上去非常整洁、舒适,没有压抑感。

新浪网站没有做过多的调整,或许是考虑到忠实用户群体多年来已经培养起阅读习惯。虽然用户习惯比较重要,但用户体验也是很关键的一部分,在页面设计上,我们需要避免用户习惯成为创新的绊脚石。

4.文字对比

有数据显示,超过47%的大众用户更喜欢亮色调的网页设计。内容的可读性是主要原因,大多数的用户不喜欢在深背景看到亮文字内容,这样的对比效果刺眼,给人不舒服的感觉。

在页面设计时应遵循的规律是:内容信息量大的网站采用亮色调的设计,突出页面的易读性;而产品展示为主的商业型网站,需要通过绚丽的色彩以及华丽的图片来吸引用户,因此,多采用饱和度较高的彩色调来体现。我们应该根据网页的具体风格要求来进行选择。

很多深色调的网页,有的很优秀,能吸引、打动广大浏览者,但有很大一部分的网页存在的问题是不易读,没有吸引力,很少打破传统的设计模式。

大多数深色调的网站容易导致视觉疲劳,主要原因是或多或少忽视了对比。如何找到平衡点?如果我们在一个漆黑的屋子里,突然遇到很强的亮光会感觉不适应。但是,如果我们在一个稍微有点弱光的屋子待一会然后再看亮光的话自然会好一些。这个规则同样适用于网页设计,即在深背景与亮色调之间找到对比平衡点。

四、色彩的运用

色彩是网站设计中最重要的一个环节,但往往也是在通盘决定之后最容易被忽视的环节。色彩帮助用户解读信息,大多数用户对网站用色的评判是在下意识里完成的。他们可能不会说出对色彩的意见,但他们潜意识里却对此很介意。

成功的网站对于色彩的使用也很讲究,有时用户会因为颜色而记住它。例如对于紫色这一颜色的使用,用户首先会想到用得很棒的网站应该是Yahoo!,这已经成为其品牌标识系统的重要环节。

在网页设计时需要了解物理学和心理学中有关颜色的理论,以此来优化用户体验。

1.物理学颜色理论

(1)反射颜色

我们周围的世界五颜六色。当物体受到光线照射时,将会把某些波长的光反射到眼睛里。举例来说,纯粹的白光照射苹果,除红色外,所有的颜色光都会被吸收。红色是唯一反射出来能看到的光,因此,人们认为苹果的颜色是红色的。我们所说的颜色,实质上是:某些波长的光在被物体反射回来的过程中被削减。

(2)加法颜色

进行网站设计时,先了解一下显示器的加法颜色,它用一种非常不同的方式显示颜色。因为它自己产生光,自己产生颜色。一般来说,产生丰富色彩的三原色是红、绿、蓝。电脑显示器有着非常高的像素分辨率,因此它并不是逐点使用“加法”颜色的。计算机显示器以一种抖动的形式显示颜色。

2.配色方案

(1)互补色配色

在网页中,使用互补色是美化艺术设计的重要手段。高对比度、完全饱和的互补色能使页面充满活力,一旦应用不好将会使页面不和谐。互补色在其他领域也一样适用。比如在超市货架上,一些色彩鲜明的产品放在一起,百花齐放反而没有重点,如果把互补色的产品放在一起,它们会互相凸显。

我们试着做一个小实验:盯住某一种颜色看一分钟,然后闭上你的眼睛。你会看到被称之为“对比色”的颜色。这种颜色通常是存在于“色相环”中“相对”的方向。

比如,医生整天盯着血液(暗红色),当他闭上眼睛,会看到“互补色”——淡绿色。因此,医院的墙一般都被刷成一尘不染的淡绿色。虽说这可能算不上什么高科技,但“互补性”的色彩系统确实能镇静我们的视觉系统。如果人们在建造医院时都可以受益于色彩理论,在网页设计时同样也可以。

(2)近似色配色

近似色是最安全的选择。它们通常匹配良好,创造宁静、舒适的设计效果。类似、相近的颜色给人的感觉是非常和谐、美观。当我们在页面中使用了类似的配色方案时,在页面中需要有足够的对比度。

(3)三角配色

通常设计者会选择均匀的轮间距离的三个颜色,这种色彩组合被称为颜色三角,此颜色搭配方案往往是非常活跃的。