论文部分内容阅读
上次虫虫和大家一起学习了如何把握网站设计的整体流程，不过说教的东西太多，今天就来点实际的——让我给你点“颜色”看看。正在看这篇日志的你，现在随便打开一个网页，在还没看清具体内容时，给你第一印象的是不是这个网页的整体色调？俗话说“人靠衣装马靠鞍”，所以给网页设计一个适当的配色方案，就能给访问的人留下一个好印象。所谓“配色方案”，简单说就是如何设置背景、前景、图片、文字、链接等网页元素的颜色，并让它们协调起来。再扩大一点，还要考虑到整个网站的不同页面的色彩如何搭配，才能让网站既有统一的风格又能有不同的变化。
设计出好的配色方案，那可不是一朝一夕之功，现在让我从基础的色彩理论开始学起，那这个网站什么时候才能建起来？看来我只有实施“拿来主义”，借鉴一下其他成功网站的配色方案了。
第1步 首先根据自己网站的特点寻找“猎物”。比如虫虫我决定制作的是个与网页设计相关的网站，那么像Adobe、Corel等设计界知名的企业的网站自然而然进入我的视野。如图1所示，就是Corel公司中国网的主页。
第2步 知其然还要知其所以然，对要借鉴的网页进行理论分析，才能最大限度吸取它的精华。我们可以把网页中的颜色分成三大类来进行分析。
主体颜色：页面中所占面积最大的颜色，这个网页中显然是白色。
突出颜色：页面中使用得最少的颜色，这就使得它在整个网页中特别醒目，这个网页中应该是绿色。绿色的蟾蜍图像及绿色的“X3”字样，突出显示了Corel近期要宣传的产品。
辅助颜色：为了让页面色彩丰富，还会使用其他一些辅助的颜色进行搭配，这个网页中，灰色、蓝色、黑色都可以看着是辅助色。
小提示:从名画中提取配色方案
每一幅世界名画，它的色彩搭配都会有独到之处，我们同样也能从这些名画中提取出网页配色方案。这里以凡·高的油画《向日葵》（Vase with Fifteen Sunflowers）为例做一个尝试：在Photoshop中打开凡·高向日葵油画的电子版；执行“滤镜→像素化→马赛克”命令，把马赛克的值设置为50；现在从马赛克效果的图片中很容易就能提取出主体、突出、辅助这三类颜色了（见图2）。
第3步 上次说到，网页设计最好先画出框架草图。现在我们在这个草图的基础上，还可以标出配色方案了。如图3所示，根据上一步中得到的配色方案，分别给不同的版块标出色彩值。接下来在Photoshop中按示意图设计出网页的框架就可以了，如图4所示，就是虫虫今天的成果啦，呵呵。
当然了，上面只是权宜之计，真正的网页设计师，我想还是应该要好好学习色彩理论。看来这半个月虫虫又有得学了，大家如果有关于色彩理论方面的好书或网站，别忘了推荐一下哦，好东东要大家共享啊。
小知识:什么是Web安全色？
你设计的网页在自己的电脑上看起来非常不错，但是在别人的电脑上打开时却可能出现颜色失真的情况。这是因为不同的显示器（类型、品牌，甚至仅型号不同）、不同的操作系统（如Windows、Mac等）或者不同的浏览器软件（如IE、Firefox、Opera等），对同一颜色值可能显示不一致造成的。于是人们通过无数次反复分析论证，终于找出了216种所谓的Web安全色（210彩色加6种非彩色），理论上来说，它们在各种不同的环境中显示效果基本一致。所以在用上述方法获得配色方案后，可以采用“就近”原则使用Web安全色替换原配色方案中的颜色。
设计出好的配色方案，那可不是一朝一夕之功，现在让我从基础的色彩理论开始学起，那这个网站什么时候才能建起来？看来我只有实施“拿来主义”，借鉴一下其他成功网站的配色方案了。
第1步 首先根据自己网站的特点寻找“猎物”。比如虫虫我决定制作的是个与网页设计相关的网站，那么像Adobe、Corel等设计界知名的企业的网站自然而然进入我的视野。如图1所示，就是Corel公司中国网的主页。
第2步 知其然还要知其所以然，对要借鉴的网页进行理论分析，才能最大限度吸取它的精华。我们可以把网页中的颜色分成三大类来进行分析。
主体颜色：页面中所占面积最大的颜色，这个网页中显然是白色。
突出颜色：页面中使用得最少的颜色，这就使得它在整个网页中特别醒目，这个网页中应该是绿色。绿色的蟾蜍图像及绿色的“X3”字样，突出显示了Corel近期要宣传的产品。
辅助颜色：为了让页面色彩丰富，还会使用其他一些辅助的颜色进行搭配，这个网页中，灰色、蓝色、黑色都可以看着是辅助色。
小提示:从名画中提取配色方案
每一幅世界名画，它的色彩搭配都会有独到之处，我们同样也能从这些名画中提取出网页配色方案。这里以凡·高的油画《向日葵》（Vase with Fifteen Sunflowers）为例做一个尝试：在Photoshop中打开凡·高向日葵油画的电子版；执行“滤镜→像素化→马赛克”命令，把马赛克的值设置为50；现在从马赛克效果的图片中很容易就能提取出主体、突出、辅助这三类颜色了（见图2）。
第3步 上次说到，网页设计最好先画出框架草图。现在我们在这个草图的基础上，还可以标出配色方案了。如图3所示，根据上一步中得到的配色方案，分别给不同的版块标出色彩值。接下来在Photoshop中按示意图设计出网页的框架就可以了，如图4所示，就是虫虫今天的成果啦，呵呵。
当然了，上面只是权宜之计，真正的网页设计师，我想还是应该要好好学习色彩理论。看来这半个月虫虫又有得学了，大家如果有关于色彩理论方面的好书或网站，别忘了推荐一下哦，好东东要大家共享啊。
小知识:什么是Web安全色？
你设计的网页在自己的电脑上看起来非常不错，但是在别人的电脑上打开时却可能出现颜色失真的情况。这是因为不同的显示器（类型、品牌，甚至仅型号不同）、不同的操作系统（如Windows、Mac等）或者不同的浏览器软件（如IE、Firefox、Opera等），对同一颜色值可能显示不一致造成的。于是人们通过无数次反复分析论证，终于找出了216种所谓的Web安全色（210彩色加6种非彩色），理论上来说，它们在各种不同的环境中显示效果基本一致。所以在用上述方法获得配色方案后，可以采用“就近”原则使用Web安全色替换原配色方案中的颜色。