网页配色方案 -天瑞科技，深圳电脑维修，深圳电脑维护

　　在我的前几篇文章中，我讨论了在网页中注意使用颜色的重要性。根据我所得到的一些问题和请求来看，你们有些人希望了解如何使用这一信息在站点设计过程中实施配色方案。所以这个月我将对配色方案作一些介绍，并说明如何将某些内容组织起来，以有助于您的网页最大限度地利用当前存在的丰富的颜色。

　　为了便于进行这次讨论，首先我们必须提供一个可视模板，用以比较不同的配色方案。尽管组织网页的方式数不胜数，我还是选择了一个相对标准的版式，其中所包含的组件足以构成某些有趣和有用的颜色组合。

　　我们假想中的网页由以下组件构成：

　　网页标题

　　网页内容

　　导航菜单

　　边栏

　　页脚

　　在与此类似的网页中确定可能采用的配色方式时，首先您必须考虑每一部分对用户的不同重要性。然后使用我在前几篇文章中提供的有关颜色的一些信息，试着确定一个配色方案，从而正确地强调网页中的各部分。

　　假定用户很可能对网页的内容最感兴趣，我们希望尽可能使这一部分容易阅读。可能用户对页脚信息的兴趣最小。导航菜单很重要，但也只有用户希望清楚地了解如何转到站点别的位置时才用到。网页标题应该与网页本身稍微分开一点，作为一个“您当前所在位置”的标志。依据这些原则，我们试着为这一假想的站点设计一个灰度配色方案。

　　网页内容：作为最重要的部分，这一部分的可读性应该最强。这就意味着背景要非常亮，文字要非常暗，对比度要高。此处最显而易见的选择就是白底黑字。

　　网页标题：这一区域也应具有较高的对比度，以便用户能够非常方便看到他在该站点的所在位置。标题通常与页面其它部分有不同的“风貌”，它可以使用与网页内容非常不同的字体或颜色组合。要选择一种简单易行的方式，可以采用网页内容的反色；尽管效果未必都那么好，在这一示例中，黑底白字无疑是相当完美的选择。

　　导航菜单：菜单本身不应太显眼。尽管它对用户很重要，但也不应该与网页内容竞争。相对于考虑用作网页内容背景的颜色而言，我为菜单背景设置的颜色总是暗一些；我会依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。至于这个例子，我们选择在灰色背景上设置黑色字。菜单区域中版权信息等不会被点击到的文字，不需要同一级别可见度，我们将其设置为暗灰色。

　　侧栏：尽管不是所有网页都使用侧栏，它不失为显示附加信息的一个有用方式。它应与网页内容清楚地区分开，同时也需要易于阅读。这就意味着它也应该使用亮色背景、暗色文字以及足够（且适宜）的对比度，以易于阅读。要是不坚持用灰度级方案的话，可以为它选择非常明亮的蓝色或黄色；也可以选择银底黑字。

　　页脚：这一项的最不重要，不应该喧宾夺主。要选择对比度为中等的颜色，但要确保它仍能赏心悦目。网页上的任何内容都不应该使读者在阅读时发生困难。基于此，我们选择银底灰字。

　　看看，这并不难，是吧？

　　方案起步

　　得出自己的配色方案相对来说很直接了当。先着手选择您认为适合于整个设计的一套颜色。可以从公司徽标或某些要显示的重要图形中选择颜色，也可能您只是认为某些颜色非常清新或轻快，所以就选用了它们。

　　举一个能迅速说明问题的例子，我做了一个代表秋天的一个配色方案。首先我找出了可用的一套颜色。这一过程很简单：在某一站点上找一幅带秋叶的图片，然后将它拖动到某一图像编辑工具，从中选择出一套有代表性的颜色。（我对这一选择作了一定程度的改动，以便使用相对浏览器稳定的调色板中的颜色。）

　　接着，我使用这些颜色测试了与整个页面布局相合并的几种不同方式，直到我认为产生的效果看起来颇具吸引力为止。

　　我选择在顶端的标题区域 (#CC3333) 和底端的页脚区域 (#CC6633) 使用更暗一些的颜色。由此建立了一个比较明显的放置页面的边界。我为导航菜单 (#FFCC00) 的背景选用了普通金色，然后为菜单文字选用了网页标题背景的暗色，与网页内容区域中的标题文字相同。

　　我喜欢为网页的主要内容选择白底黑字这一直观简单的方式，这里我就是这样做的。最后，我为侧栏背景选择了有趣的黄色阴影 (#FFFF00), 为其标题文字选择页脚中的暗色。

　　将导航菜单的背景设置为较为柔和的颜色，防止其与主要内容区域发生冲突，转移用户的注意力。或许侧栏的颜色稍嫌强烈了点。如果必须使用过大的侧栏，就可能需要将这一区域的颜色较大幅度地柔和化，即使这样必须采用 256 色模式的用户所无法显示的颜色，也必须如此。

　　在上个月的文章中，我提供了一个交互式示例，它用几种不同的配色方案对同一幅图像进行润色。对于目前这个可视模板，我们也使用这样的几个配色方案。某些情况下，我会增强或减弱颜色的饱和度，以有助于获得良好的对比度。