设计
网页色彩设计
网页设计的成败，在很大程度上取决于色彩运用的优劣。
网页的色彩创作拥有自身的设计规则，与其他视觉形式有着较大的差异。
对平面设计而言，色彩是“静止”的，色彩的分布是根据固定的信息去编排的，创作好后，作品也就完成了。
即使是系列平面作品，每幅作品也会具有自己的思量，可以独立思考。
对网站来说，信息是“流动”的，页面的信息会“变更”。
图片信息较多时，图片中的色彩将主宰整个页面，此时的网页色彩风格必定与插图色彩密不可分。
即便创作已经完成了，由于后续信息的更新，可能会对初案风格产生影响。
即便是稍许的偏差，如果不去调整，也可能会把整套风格打散。
面对平面作品，观众只能是被动地接收信息。
而浏览者在查阅网站的同时，和网站之间是互动关系，网站对浏览者而言是可使用的“东西”，此时色彩就不仅仅是传达某种信息了。
更多的时候，色彩的作用在于帮助浏览者阅读信息。
以Telemig Celular为例，我们具体分析一下网站色彩设计的特点。
在分析案例的同时，掌握一些必备的色彩设计技巧和思路。
首页
http://www.
Telemigcelular.
com.br
Telemig Celular 是个少见的以红色为主色调，并把色彩配置得相当出色的网站。
设计师没有运用很明显的辅助色，网站引人注意的颜色除了红色还是红色。
Telemig Celular 的首页设计有个特殊点，就是导航不在页面最上部，而是放置在页面最下部。
103
Web Designer Idea——设计师谈网页设计思维
能够实现这个设计形式的主要原因是：Telemig Celular的首页很短，页面上的内容可以全部出现在第一屏内。
反过来说，只要保证页面上的信息能够完整地出现在第一屏幕上，那么导航放在页面上的任何位置，都可以被视为可用性高。
基于浏览者习惯的考虑，可用性最高的位置仍旧是页面顶部。
观察首页上的色彩分布，除了网站标志是红色的，起到了重要的“主色调为红色”的色彩识别作用外，页顶的红色粗线不仅确立了页面的宽度，也加深了红色在浏览者心中的网站形象感。
网站上的超级链接是红色的，这使得红色的链接文字与灰色的非链接文字错落有致、相互衬托。
插图中的重要信息，如“C a m i s a G y m”“R$39”也是红色的，保持了统一的色彩形象。
1. 信息与色彩
（标志下方的插图，调整了不的同颜色效果）
104
设计
页面格局是四列，左边三列与最右侧的信息分列有着明显的区别。
如果左侧第一列没有采用红色的插图，页面的色彩分布就无法达到平衡，网站的色彩布局风格将被打破。
R e l e n把标志下方的插图重新调整了颜色，使它变为“淡红色”、“棕褐色”、“紫红色”、“黄绿色”、“天蓝色”和“草绿色”。
“淡红色”的色相为红色，保持了原有的视觉效果，红色依旧占主导位置，页面气氛协调一致。
“紫红色”的图例让人感觉到了明显的不确定性，这是因为紫红是偏冷的红色，而网站主调的红是大红，属于暖红。
冷红与暖红的搭配需要谨慎考虑，处理不好就会如图中一般，紫红很突兀，画面不和谐。
“棕褐色”的插图下方是一块湖蓝色，如果仅有棕褐色是能够使页面平衡的，但那一小块蓝色却打破了画面的协调性。
不要看它的面积小，即使再小的色块，都能够使作品走向失败。
“黄绿色”的效果显然不好，这里就不再细述。
“天蓝”虽然不协调，却给原有的页面带来一丝明亮的感觉，这是蓝色特有的色彩情感。
如果把天蓝色调整为更加理智的、偏深一些的蓝色，也许会达到出其不意的效果。
当然，这必须要靠设计师自我的判断，即便同是蓝色，也能分出上百种效果。
“草绿色”的效果比想像中的要好一些，原因是最右列的插图人物的服装是相同的绿色，左右两边呼应，反而构成了平衡。
但以网站整体效果来说，色彩心理已经被改变了，主色调变成红、绿两种色相了。
单色相为主色调，画面偏柔和，如果双色相为主色调，画面效果必须根据两种色相在色相环上处于何种位置来判断。
相邻的色相，画面偏柔和，如红与黄；相反的色相，画面的色彩之间存在强烈的对比关系，好似两股力量在对抗，如蓝与橙。
Telemig Celular 不是英语语种的网站， Relen无法确认标志下方的插图是否会经常更换。
但根据上述的实验，我们可以得知，如果这个位置的插图更换了，不论换成什么颜色，都将对页面的色彩印象产生很大的影响。
这也正说明了网站设计中的图片信息与色彩设计之间的不确定性与多变性。
2. 目的与色彩
（右列的信息位置的背景色，调整了不同的颜色效果）
105
Web Designer Idea——设计师谈网页设计思维
这一次，Relen把最右列的信息位置的背景色更换了，并且调整为尽量使页面色彩达到均衡效果的色相，它们是“桔黄”、“紫”、“灰绿”、“土黄”、“浅褐”、“白”。
逐个分析一下，为什么会选这些色相，以及效果如何。
“桔黄”的选择来自页底的导航文字中的颜色，导航分成了灰色字体部分和桔黄色字体部分，这个特殊的安排，绝对不是为了增加页面的变化或美化页面那么简单，它是为了推荐这几个栏目，或者说为了显示出这几个栏目是重要的。
“桔黄”与页面的色彩气氛融合得较好，其效果也与原图相似，能够保留以红色为主色调的色彩基调。
“灰绿”的选择来自最右侧插图人物的服装色彩，“浅褐”来自插图中半透明的标题背景色，这两者因为能够和页面中其他信息色彩相呼应，所以使画面显得协调。
与此同时，这两种颜色属于复合色，不张扬，适合当做辅助色。
感觉上“浅褐”更加好一些，因“灰绿”的“绿”必定是红的补色,搭配起来比“褐色”情感强烈。
再讨论“紫”、“土黄”、“白”这三种情况之前，我们先猜想一下为什么设计师要在这个位置的信息区加上红色的背景呢？
原因主要有两个。
一是这部分信息需要警示、推荐、以示区别，用了深色背景可以强原因主要有两个。
一是这部分信息需要警示、推荐、以示区别，用了深色背景可以强调出来；二是页面色彩设计的需要。
如果不增加红色的分量，那么红色的主导地位很可能被插图中的色彩分占了。
红色在页面上的力量减弱的同时，网站的色彩特征将会变得混浊，难以定位。
“紫色”比较深，与周围的白色背景对比强烈，能够起到强调效果。
紫色稳重，虽然没有红色抢眼，却削弱了红色的势力。
“土黄”和紫色的情况类似。
如果其他页面大量运用紫色（或土黄），红色就不再是主色调了。
106
设计
“白色”的方式其实是最不合理的，因为它违背了“目的”赋予它的任务。
信息没有突出出来，页面看起来变成了一个十分常见的四分栏格式，设计上的特色没有了。
不仅如此，页面上的红色减弱了，虽然红色依旧是主色调，但红色的面积减少后，页面感觉很轻，链接中的红色变得刺眼起来（因为没有能够分担浏览者注意力的颜色，所以链接的色彩变得鲜明起来），网站整体的感觉似乎没有之前那样稳健了。
这样的页面，尽管没有视觉设计上的错误，但我们仍然认为它是失败的。
经过分析，你是否已经能够体会到网站的色彩创作并不是任意的，而是为目的、信息而服务的呢？
3. 色彩与版式结构
（红色的位置进行了调整）
继续我们的色彩探索，把红色的分栏位置进行调整，可以发现一些新的问题。
首先，当主要的两个红色块分开一定距离时，页面色彩容易达到平衡。
当原第四栏换到了第一栏的位置，而原第一栏任意换到第二、三、四栏时，页面色彩不平衡了，画面向左倾斜。
这是因为标志也在第一栏的位置上，页面下半段的色彩加上页顶标志的颜色，左侧的分量变重
了，产生了倾斜的视觉心理。
其次，如果仅挪动原第一栏到第二、三栏时，页面的效果基本与最初的效果相似，页面色彩左右两侧容易达到平衡。
再次证明了，标志面积虽小，色彩分量却很大。
最后，尝试把带有颜色的两栏并列起来一起挪动。
让他们置于页面正中，或把他们放在左侧。
页面的气氛没有太大变化，但色彩形成的张力随着色块的位置不断产生变化。
虽然没有视觉设计上的错误，但却没有原图效果好。
色彩分布在两侧时画面张力最大，气势开阔，色彩稳定。
由此可见，色
107
Web Designer Idea——设计师谈网页设计思维
彩在页面上分布位置也需要进行严谨的思量，应该在不断调整中，寻找最佳效果。
4. 标志性物体的色彩
标志性物体，不论面积大小，都不能忽视它对页面色彩设计产生的影响力。
尝试把标志颜色换成黑色，以及把顶部粗线的红色换成黑色。
发现换色前后，页面色彩产生了非常大的变化。
首先，黑色标志的出现，使红色显得突兀。
到底是红色最重要还是黑色最重要，似乎难以分辨。
其次，如果顶部的线条色彩与下部信息区的色彩差异过大，页面会显得非常不协调。
一方面，想把粗线换成红色。
另一方面，我们发现粗线也拥有想让红色变成黑色的力量。
由此可见，细小环节的色彩设计也不能忽视，色彩创作要从多个角度，多个层面入手。
108。