配色方案

Robert Hess
2000年9月

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

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

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

• 网页标题
  
  
• 网页内容
  
  
• 导航菜单
  
  
• 边栏
  
  
• 页脚

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

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

单击此处可查看更大的图像 (6.23K)

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

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

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

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

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

看看，这并不难，是吧？

方案起步

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

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

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

单击此处可查看更大的图像 (6.33K)

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

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

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

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

单击每幅图像可查看更大的版本。

模拟颜色	冷色
暖色	单一的蓝色

您可以看到我为“模拟”方案选用了颜色背景的地方，甚至在这一小型的缩略图中，都可以看出整个页面的色调所发生的根本性变化。有时候这样做效果不错，但却并不是经常能奏效。

现在，只是为了娱乐一下，看一看我们的可视模板模拟万维网中某些实际站点所用配色方案的效果。

单击每幅图像可查看更大的版本。

MSN Communities 上所用的颜色	MSDN Online 上所用的颜色
Amazon.com 上所用的颜色	C|Net News 上所用的颜色

MSN Communities（英文） 站点的版式几乎就是我们可视模板的严格对照，我们的模型与实际的东西非常接近。您可以注意到该站点使用的是单色配色方案。

MSDN Online（英文） 站点的版式就不是那么接近。图形元素在 MSDN Online 站点中扮演了一定的角色，而我们这个快速完成的模板实际上不允许加入这类元素。您可以看到基本配色方案所起的作用。只要有了基本方案，即可设计出支撑网页的图形，同时又确保不会与已经使用的基本颜色冲突。

Amazon.com（英文） 的版式与我们的模板相当接近。然而别忘了，该站点实际上是大量站点的集合；尽管它们需要遵循紧密结合的方案，它们中的每一个还是需要某些独特的视觉线索。Amazon .com 实现这一效果的主要方式就是：更改我所谓的标题栏采用的颜色。在这一示例中，我显示的是他们“Book”站点所采用的配色方案。如果您的站点有这类要求，确保您可以修改整个方案中的一个或两个颜色，以便稍微区别一下每一区域。

最后，显示 C|Net news 站点（英文）的颜色的模板并未与他们站点的版式匹配，但却显示了所有颜色之间的相互配合。我还可以想象出同一配色方案与一家著名胶片冲洗公司的网页的完美契合。您知道我所谈论的是哪一家公司，这就说明了颜色所能携带的重要信息。

提供帮助的工具

看我这个人多好，我还为您准备了一个基于 DHTML 的工具（英文），以帮助您试验自己的配色方案。它在 Internet Explorer 4.x 或 Internet Explorer 5.x 两种环境下都可使用。

在蓝色外随意选择颜色并不能培养起观众对您所提供信息的信心。您需要花时间考虑网页的版式和设计，而正确地选择颜色只是这项工作的一个方面。希望我此处提供的信息用助于您将这些概念中的一部分应用到您所设计的网页上。

 

---

Robert Hess 主持 MSDN Show（英文）。

已归档的 More or Hess 专栏

		2000
8月14日		色环（英文）
7月10日		使您的世界绚丽多彩（英文）
6月12日		只是惊奇而已：在浏览器中进行高速缓存（英文）
5月9日		这些是什么东西，它们看起来又像什么（英文）
4月10日		避免 Spam-merce（英文）
3月13日		服务简史（英文）
2月14日		回到 Windows 2000 的未来（英文）
1月10日		处于发展之中的接口（英文）
		1999
12月13日		达到极限 — 以及超越极限（英文）
11月8日		某个人的安全是另一个人的监狱（英文）
10月11日		和任何事物一起在任何地方运行
9月13日		您可以使用的脚本（英文）
8月9日		进行更深度的 Web 连接（英文）
7月12日		把它带到 'Net（英文）
6月14日		XML：关于 BizTalk 的讨论（英文）
4月12日		新浏览器、新功能、新选择（英文）
3月30日		技术的后续步骤（英文）
2月8日		Web，用还是不用（英文）
1月11日		对脚本的挖掘（英文）
		1998
12月14日		使用 Web 应用程序轻松的一面（英文）
11月16日		使您的 Web 应用程序的通达与其所获等同的技巧（英文）
10月20日		应用程序的正确工具（英文）
8月17日		应用 Web（英文）
7月17日		请面对它：我和您同属一类吗？（英文）
6月17日		通道：拨号的又一次旋转（英文）
5月20日		深呼吸，然后轻松开始（英文）
4月20日		常识与理智（英文）
3月23日		您的 Web 方法是什么？（英文）
2月23日		安全之舞（英文）
1月26日		您的 HTML 兼容吗？（英文）
		1997
12月23日		开始受约束（英文）
11月25日		使我开始（英文）
10月20日		请崇拜我，我是一名 Web 设计员（英文）
9月22日		风格：不会轻松到来（英文）
6月2日		是为彼此制作的吗？使您的站点浏览器兼容（英文）
5月1日		废除用户税（英文）
3月27日		Vulcan 文档（英文）
2月27日		丑陋的 Web（英文）