荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: gary (杀手玫瑰), 信区: Homepage
标 题: 配色方案
发信站: 荔园晨风BBS站 (Wed Sep 26 20:44:01 2001), 转信
http://www.microsoft.
com/China/msdn/technic/library/techart/hess09112000.asp
配色方案
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 两
种环境下都可使用。
在蓝色外随意选择颜色并不能培养起观众对您所提供信息的信心。您需要花时间考
虑网页的版式和设计，而正确地选择颜色只是这项工作的一个方面。希望我此处提
供的信息用助于您将这些概念中的一部分应用到您所设计的网页上。
--
Ｉ Ｂelieve Ｉ Ｃan ...
_____________________________________________________
欢迎光临我的主页 Ｎｅｔｄｒｅａｍｓ!
Http://netdreams.yeah.net
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.28.85]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店