网络新闻版面的色彩设计

第二节　网络新闻版面的色彩设计

一个新闻网站采用何种色彩?多种颜色如何搭配?这是网络新闻版面设计者必然要认真考虑的问题，也是网页设计的重要方面之一。要在网页设计中灵活、巧妙地运用色彩，制作出精美的网页，有必要掌握关于色彩与色彩构成^[3]的一些基本概念与基础知识。

一、色彩基础知识

要理解和运用色彩，必须掌握进行色彩归纳整理的原则和方法，其中最主要的是掌握色彩的属性。色彩的属性可以用以下几个特征值来描述:

(1)色相。色相指的是色彩的相貌，是区别色彩种类的名称。光谱上的红、橙、黄、绿、蓝、紫等六色，通常用来作为基础色相。但是我们能够分辨的色相，不止这一有顺序的六种颜色，在这一顺序中尚有无数的种类存在于其间，例如红色系中有紫红、橙红;绿色系中有黄绿、蓝绿等色彩。

(2)明度。明度也称亮度或光度，用来辨别色彩明暗的程度，体现色彩的深浅差别。在无彩色中，明度最高的色为白色，明度最低的色为黑色，中间存在一个从亮到暗的灰色系列。在有彩色中，任何一种纯度色都有着自己的明度特征。例如，黄色是明度最高的色，处于光谱的中心位置，紫色是明度最低的色，处于光谱的边缘，黄与紫是划分明暗的中轴线。同一色相因混入不同比例的黑、白、灰色形成不同的明度变化，通常，有彩色的明度值参考无彩色的黑、白、灰等级标准，任意彩色可以通过加白或加黑得到一系列有明度变化的色彩。

(3)纯度。纯度也叫彩度或饱和度，是指色彩纯净的程度。光谱中的各种单色光为极限纯度，是最纯的颜色。当一种色彩加入黑、白、灰以及其他色彩时，纯度自然会降低。不同的色相不但明度不等，纯度也不相等，例如纯度最高的色是红色，黄色纯度也较高，但绿色就不同了，它的纯度几乎才达到红色的一半左右。在人的视觉中所能感受的色彩范围内，绝大部分是非高纯度的色，也就是说，大量都是含灰的色，有了纯度的变化，才使色彩显得丰富而有层次。同一个色相，即使纯度发生了细微的变化，也会立即带来色彩性格的变化。

(4)色调。在某一幅设计作品中，其画面总是由具有某种内在联系的各种色彩组成一个完整、统一的整体，形成画面色彩总的倾向，称为色调。色调的种类较多，从色相上分为绿色调、蓝色调、黄色调等;从纯度上分为明亮色调、浅灰色调、暗色调等;从色性上分为冷色调、暖色调、中性色调等。除此之外，还能打破三者的范围而混合运用，例如冷灰色调、暖绿色调等等。

(5)色性。色性指色彩的冷暖倾向。在生活中或绘画上的色彩，总是会给人以或冷或暖的感觉与联想，如红、橙、黄为暖色。冷色容易使人感觉寒冷，而暖色调则使人产生温暖的感觉，介于冷色与暖色之间的紫色和绿色，属于中间性质的色彩，有时会因为倾向暖色而有暖和感，或者因为倾向冷色而有寒冷感，所以紫色与绿色又称为中性色。

二、网页的色彩搭配

在掌握了关于色彩的基本知识之后，对网页的色彩设计与应用就有了一个良好的基础。网页的色彩设计是色彩应用规律与网页作为一种传媒介质所具有的特性相结合的过程，在长期的网页设计实践中，它逐步形成了广为认同的用色原则与技巧。

1.色彩搭配的基本原则

将不同的色彩进行搭配与组合，构成视觉效果良好、风格独特并有强劲冲击力的页面，是进行网页色彩设计与搭配的目的。在确定网页的整体色彩方面，应该综合考虑用户的欣赏习惯，网站的主题、性质、专业特点和艺术规律等。具体来说，应该遵循以下几方面的原则:

(1)色彩的合理性。网页的色彩要漂亮，引人注目，给浏览者留下深刻印象，但也要注意到人眼的生理特点，避免使用大面积的高纯度色相，否则会产生过强的刺激，使人的眼睛容易疲劳。很多网页制作发布以后，页面和浏览器的显示尺寸不相吻合，会造成刺眼的效果，这时通常需要把屏幕两侧(1 024 × 768模式下)的空白面积用适合的辅助色填上，使整个屏幕色彩更加谐调。

(2)色彩的独特性。网页的色彩搭配要能体现网站的特色，要有与众不同的色彩，使得浏览者“过目不忘” 。Mei- online.net是国内一个设计很有特色的站点，它的原版设计大胆地采用绛红为主色，并以橙、绿色点缀其间，色彩搭配和布局都有独到之处，非常抢眼。改版后，网站的内容主题在首页就明确地展示出来，此时的页面设计色调下沉，更加切合内容，个性突出，容易抓住受众的视觉神经。

(3)色彩的适宜性。网页的色彩搭配应该与网站的内容、性质和气氛相适应。例如用粉色来体现女性站点的柔美是很好的选择，如果用黑色就很不妥当了。每种色彩在纯度、明度上略微变化就会产生不同的感觉，以绿色为例，绿色中加上较多的黄色，有青春旺盛的视觉意境，可用于青年类网站;如果加上较多的蓝色成分，则显得幽暗阴深，可用于文学艺术类网站。可见，采用适合网站主题的色彩是非常重要的。

(4)色彩的联想性。色彩的心理作用决定了人们在看到不同的色彩时会产生不同的联想，在考虑网页的色彩应用时，应当使色彩与网页的内涵相关联，尽量发挥出人们的这种想象力，如由蓝色想到天空，由黑色想到黑夜，由红色想到喜事等，从而使浏览者产生更深层次的心灵感应。

在网页的色彩设计中还应注意，由于国家、种族、宗教信仰的不同，以及人们生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度存有差异。如儿童喜欢对比强烈、个性鲜明的纯色(如美国迪斯尼乐园的网站)，知识分子则偏好清新雅致的颜色，因此，在设计中要考虑主要目标受众的习惯和喜好。

2.色彩搭配的要点

近年来，网页设计者在用色上总体呈现出这样一种趋势，即从单色到五彩缤纷再回归到主体色突出前提下的“单色” 。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一;在有一定基础和材料后，希望做出一个漂亮的网页，便将最满意的色彩堆砌到页面上，但是时间一长，却发现色彩杂乱，没有个性和风格;于是重新定位美学风格，返朴归真，选择一个切合自己审美趣味的主体色，这时候，往往能设计出色调高雅、个性突出、简洁精美的站点。下面是网页色彩设计中的几个要点，把握得好，在色彩搭配上就不会杂乱无章。

(1)确定网页的主体色。网页的主体色，又叫主色彩或标准色，是指在页面上除了白色为背景外大量使用的某种颜色，它决定了网页色彩风格的基调。主体色一般要用于网站的标志、导航栏、主菜单和主色块(如标题栏)，给人以整体统一的感觉，其他色彩也可以使用，但只能作为点缀和衬托，不能喧宾夺主。不少网站的主体色非常突出并且是持续不变的，使用户一想到那个网站首先就会想到它的主体色，主体色已经成为网站的基本特征。如提到IBM的网站，人们就会说它是深蓝色的。也有不少网站是用两种色彩作为主体色的。先选定一种最主要的色彩，然后选择它的对比色作为次主体色。如确定了蓝色这个主体色后，又选择了黄色作为次主体色，再加上其他配色，整个页面色彩可能比只有一种主体色要丰富，但又不至于花哨。次主体色通常应在与主体色色相对比较大的色彩中选择。遵循主从关系，这是最稳定的处理色彩的原则。如果在同一个页面内平均使用了多种颜色，把握不好的话，就无法确定哪个是主体色，最终使色彩的搭配无章可循，造成用色的无序与混乱。

(2)多用相近色。与主体色具有同类色相对比或近似色相对比关系^[4]的色彩称为相近色。在网页的主体色确定之后，选择与之相近的颜色，搭配起来就相对比较容易。这也可以叫做使用一个色系，即用一个感觉的色彩，如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。这是从色相的范畴来确定相近色。也可以从明度的范畴来寻找相近色。例如，对于一个红色是主体色的网页来说，它的相近色可以在红色里面加白，红色就会越来越亮，明度提高，而加黑，红色就越来越暗，明度降低，由此可以得到与红色相配的其他色彩。还可以从纯度的范畴来寻找相近色。例如，对于一个蓝色是主体色的网页来说，假如在蓝色里面加了黑、白、灰，就会使得蓝色不纯，不再鲜艳，由此得到与之相近的其他色彩。一般来说，色相相同而明度不同或纯度不同的几种颜色比较容易搭配。

(3)保持色彩均衡。保持色彩均衡是比较保险的配色互补原则。即在网页用色中，在多种颜色同时存在的情况下，一定要强调色彩的调和、统一与平衡。平衡的颜色符合多数人的色彩心理。我们知道，明度高的浅亮色看起来较轻，明度低的深暗色则较重。如果在一个页面中运用了较多比较浅的颜色或亮的颜色，就可以用黑色或同色相的深色小面积压一下，点缀一下，这样页面不至于太“轻”，可以使色彩重新归于平衡。

(4)黑、白、灰的应用。在网页设计中，黑、白是最基本和最简单的搭配，白字黑底、黑字白底都非常清晰明了。灰色则是万能色，可以和任何色彩搭配，也可以帮助两种对立的色彩和谐过渡。如果在用色上遇到麻烦，可以大面积地加入白色与灰色，小面积地加入黑色来调节与其他颜色搭配之不当。遇到使用纯度很高的颜色，比如纯蓝、纯黄等，这样的搭配会很鲜艳，视觉感觉就会比较兴奋，如果要降低兴奋度的话，可以搭配上白色与灰色，把颜色明度抬高或降低，这也是一种调节的方法。

3.页面的色彩分配

页面的色彩分配是指在页面的不同区域内色彩搭配的基本规律。粗略地可以把页面分为这样几个区域:内容区、头区、导航区、侧栏和尾区。

(1)内容区。内容区是网页信息的表达空间，一般处于网页中部，也可以叫做主内容区。要求背景要亮，文字要暗，对比度要高。

(2)头区。头区一般由网站logo、用户登录区等部分组成。logo一般要用深色，具有较高的对比度，以便用户能够一眼就看到它。logo通常应与页面其他部分有不同的“风貌”，它可以使用与网页内容不同的字体、图案或颜色组合，也可以采用网页主体色的反色。

(3)导航区。导航区是指导航菜单所在的区域。通常可以把菜单背景颜色设置得暗一些，然后依靠具有较高对比度的字体颜色，将网页内容和菜单明显地区分开来，这样也突出了导航菜单自身。

(4)侧栏。侧栏其实是内容区的一部分，它一般显示专题栏目或附加信息。侧栏应与中部的主内容区具有不同的背景色，从而与主内容区清楚地区分开来。

(5)尾区。尾区一般放置网站的介绍与联络性信息，以及网站的经营许可证等。这个区域是非重点区域，所以在用色上不宜喧宾夺主，可以考虑用与侧栏相同或相近的颜色，也可以用深一些的颜色。

在网页色彩设计中，最忌讳的是将所有颜色都上，同一页面尽量控制在三到四种色彩以内，太多必然让人眼花缭乱。此外，背景色和页面文字的颜色对比尽量要大一些，以便突出主要文字内容。

三、新闻网页的色彩特点

新闻网站以传播新闻信息为主要功能，对其风格的总体要求是清新整肃、稳重大方，新闻网页的色彩应当符合网站的总体风格，或者说为网站的总体风格服务。经过多年的实践，新闻网页在色彩方面已经体现出一些特色。

1.具有一定的色彩冲击力

与商业性网站的色彩斑斓和个人网站的简约清淡相比，新闻网站宜采用对比鲜明、具有冲击力的色彩作为首页的主体色，以吸引眼球。这种冲击力常常来自富有个性的一两种主体色的搭配，以彰显新闻网站的个性——具有整肃感并富有竞争力与号召力。由于主体色构成相对单一，所以宜通过较浓烈的色彩来强化人们的视觉。如果色彩过淡，会有轻飘感，压不住阵。

千龙网作为首家开通的省级重点新闻网，2000年3月8日首次亮相时选择了黑与白作为主体色，给人留下了较深的印象。而两个多月后开通的东方网，其首页以淡黄色为基调，过分强调了“高雅”，却未能形成“色彩冲击”方面的后发优势，这不能不说是东方网在开通三个月后就进行改版的一个重要原因。东方网改版后给人的第一印象，就是大胆地一扫众多网站首页“轻描淡写”的风格，以红与黑相间的主体色，给人以前所未有的视觉冲击。其后，东方网虽然又进行了几次改版，但一直保留了这一色彩个性极其鲜明的主体色至今。2001年5月25日，千龙网在正式运行一年后首次改版，断然放弃了开网之初的黑白之色，代之以“京城故宫围墙赭红与皇宫金黄色调的搭配”^[5]，色彩对比依然鲜明，又成功地体现了千龙网地处首都地域的风格定位，并给其他新闻网站提供了从地域特色和文化内涵方面寻找首页主体色的设计理念，开拓了人们在首页主体色定位方面的思路。相形之下，东方网则很难回答其“红与黑”与上海这个城市或“东方文化”之间的内在联系，而更多是纯美术层面的选择，因为“红与黑”历来是很抢眼的色彩搭配。

2.首页的色彩色调偏冷

新闻网站的主旨是发布新闻信息或其他综合性资讯，与传统新闻媒体一样，新闻网站也应以客观、公正、冷静的姿态出现在受众面前。报道内容的客观性这一特质，对新闻网站的色彩提出了相应的美学诉求。由于冷色可以满足这一诉求，故色相环中偏冷的色彩在新闻网站的首页得到了广泛的应用。尤其是蓝色系列的色彩最受新闻网站的欢迎，据了解，世界上70%以上新闻网站的首页都为蓝色系列，如人民网的首页就是蓝色的，其蓝色主要是通过首页所选用的字体颜色来体现的。除了蓝色外，还有不少新闻网站的主体色选用黑色与灰色，如纽约时报网站、泰晤士报网站都是黑色的，法兰克福报网站是灰色的。由此可见，新闻网站的首页色彩不但颜色偏冷，而且常常只用一种主体色，从而强化了这类色彩选择所体现出的严肃性及其象征意义。需要注意的是，选用这种单一冷色，色彩的明度不可过高，即页面的颜色不宜太浅，因为新闻网站上通常会有各类新闻照片，还要考虑页面主体色与照片色彩的搭配问题，深一些的颜色能够更好地适应新闻照片中可能出现的各种色彩。

此外，大多数新闻网站的背景色与字色之间都是“白底黑字”的关系，这不仅是因为这种方式对带宽要求最低，也因为人们平时习惯于这样阅读报纸，所以在潜意识中，这种色彩对于把新闻传达到用户的大脑中的效率最高。所以在新闻网页色彩设计中，通常可以遵循“浅底深字”的原则，而不宜底色太深，否则网页上的文字难以辨认。

3.各频道均有不同的主体色

新闻网站一般会有多个频道，国家级新闻网站的频道数多在20个以上，地区级新闻网站的频道数通常也有十多个。虽然新闻网站首页的主体色相对单一，但从整个网站来看，色彩却不应是单一的，而应该相当丰富。这里的原则就是，各个频道应该具有自己的主体色，从而形成网站丰富而统一的色彩。新闻网站在确定了首页的主体色后，就可以确定各个频道的主体色了。确定频道主体色的原则，一是要与首页的主体色相谐调，尤其不能喧宾夺主，以致某个频道的主体色比首页的色彩还要抢眼;二是要使频道的内容特色与色彩的基本属性和象征意义相适应。如健康、旅游、军事、体育频道可以选择绿色系列的色彩，女性、娱乐、音乐类频道可以选择红色或粉色系列的色彩，游戏、汽车频道可以选择灰色或褐色系列的色彩。频道首页的主体色不要像网站首页的主体色那么浓烈、突出，只需要在导航条或栏目名称的条块上适当显现，就可起到以色彩区别频道的作用，这样也不至于冲淡首页的色彩效果。需要注意的是，各频道的色彩(色相)不同，色彩的调性却应基本相同，即明度与纯度大致都应在一个级别上，才会统一和谐。

新闻网站logo的色彩一般是不变的，logo除出现在首页外，一般也应该出现在各个频道及其下级页面的首页，这样logo就从一个侧面对色彩的连贯性与统一性起到了串联作用。