梁景红新旧两谈 网页色彩（一）

我把01年编写03年出版的专著《个性化网页设计与鉴赏》重新整理。增加一些新的内容，发表于互联网。一是有些内容的确还可以复读，我向过去的自己求学。二是增加一些新的内容，我向当下的自己索要。站在自己的肩膀上，用过去出版的书来抛砖引玉，让今天的自己发掘新智慧。

整理旧说“网页色彩”

色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩的使用在网页设计中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。我深刻的记得，有一次客户对我说，“请不要用红色。”我问她为什么？对方很认真的告诉我：“我觉得红色的网站都倒闭了！”看！这反映出每个人对色彩的认识是多么有趣。对于我们这个圈子来说，“视觉中国”网站的红色并没有让他们关门，而是让他们成为圈子里很著名的一点红。

色彩的情感与内涵也会影响浏览者从感官到理性思维对网站的理解，我们需要慎重的考虑网页设计中色彩的选取与搭配。不光是了解各种色彩理论和方法，实用的网页色彩设计也有一些可寻性规律。想要做好色彩设计，同样需要大量的鉴赏与实践。

我们生活在一个五彩缤纷的世界里，对于每个视力健全的人来说，大多都能够正常地观察色彩和感受色彩。即便是失明的人，也会在心中去憧憬太阳和绿植。想象他们的美好和五颜六色的情怀。自然色彩和设计色彩是截然不同的。

自然色彩是一类以太阳光源为主而产生的自然物体色，如动物的毛皮色、生态本色，这些都是没有受到人类劳动的影响的颜色。而设计色彩是直接与我们日常生活中的衣、食、住、行等相关的色彩。如：服装色彩、烹调色彩、交通工具的色彩、环境色彩、平面设计和产品设计中的色彩等等。设计色彩被广泛运用于视觉、产品、环境三大设计领域之中。设计色彩超越自然物体色，作为纯粹色彩的探索，重在观察色与色之间的对比关系与规律，具有独立的表现意义，不依附于客观形态，以色彩组合表达情感。具有实用价值和经济价值。

图1  网站主体色—蓝色

网页色彩是设计色彩中的一种。不论是单个页面的色彩搭配，还是整个网站的色彩设计，首先要确定主体色（主色调）。主体色可以是一种也可以是几种。通常我们形容一个页面的颜色时会这样说：某某是绿色的；某某是紫色的；某某是黄色的；某某是白色的……早几年的互联网状况要更加纯粹一点，不太重视组合。之后的几年由于Flash的进步，网站颜色体系外扩，更加丰富多彩。偶尔你会很难形容一个网站到底是什么颜色的，你可能会说：可能算是红色和黄色的吧；可能是绿色和蓝色的吧……

如图1中的网页，主体色为蓝色，整个页面是由浅及深的蓝色组成，极深为黑色，极浅为白色，整个画面虚实结合，空间感极好。

图2   网站主体色系—棕色系

另如图2中棕色系的网页，其色彩设计上是以上部的棕色(＃66453C)为主主色，其他辅色以此棕色加白；加灰；加红；加水稀释配出来的。整个页面色彩感觉典雅、古色古味。

把你认为色彩搭配和谐的网页作品，用色块表示出他们的配色方案，有助于帮助你了解和分析色彩分配的规律。

图3   网站主体色—桔黄、草绿、灰色

如果打算在同一个页面内运用了多种颜色，担心把握不好的话，就先确定哪个是主体色。其他的颜色面积不能过大，遵循主从关系。如图3中的网站，桔黄（＃FF9000）是整个页面中颜色面积最大的。所以它是这个页面的主体色，另外主要辅色是草绿色（＃7BA518）和灰色（＃424242）。草绿色和桔黄搭配清爽，加上灰色，感觉别致轻盈。插图个性化强，页面结构简单且动态层的运用，使得这个网站互动感十足。

New TIP 新说“主色调”

1．  新角度理解网页色彩

以前讨论网页色彩是从外部观赏，什么颜色面积最大，什么颜色最显眼，它就是主色彩、主色调。如今我建议读者更多的从构思角度来讨论色彩，什么位置、什么对象是主角。什么颜色可以帮助它们，建立主角的地位、主角应具备的影响力。

这部分可以关注我的新书《写给大家看的色彩书2》，不在这里敖述。

2．新课题是印象为主的多色彩设计

以前的颜色更多是统一而和谐的(图4)，今日有那么多flash、视频、图片充满页面，页面很难被一种颜色框定，主调感减弱，更多是一种模糊的印象。也就是说当今的网站设计很多情况下是要一种感觉，一种印象，而不是一种颜色了（图5）。如何能把多个颜色打包成一个合适客户需要的印象变成主要课题——印象为主的多色彩设计。

图4 主色：紫色 辅助色：绿色 很和谐漂亮

图5 主色彩：淡灰（背景色）每页的图片都更换，框架色淡雅

3．建议大家学习双主色

坦白说，如今我不太倾向于用一种颜色来建构网站。一方面容易被模仿。另一方面容易失色。双主色设计肯定有一定的设计难度，需要更多的色彩实践，可我还是建议大家来学习它。

图6-7 双主色 红色、蓝色

4．无声的网页结构

这很多设计师的主页直接变成极简单的blog，一点网页设计的装饰都没有，就是文字导航，白色的界面。从个人主页到企业网站，这种方式在蔓延。趋向实用性为主要的目的的，同时也明确了对网站内容超越网页结构设计的需求。我把这种网页设计成为无声的网页结构。

图6 主色彩：接近白色 blog形式 内容丰富

5．基础知识千年不变

我在讲座时遇到不少设计师，期待有个什么工具，能够简化自己的配色工作，甚至能够不学习配色就可以配出好看的颜色。

如果真是有这样的工具，我肯定就改行了。谁都可以做色彩设计，那还学它干嘛呢？你真的期待这样的工具吗？我不会期待的。

色彩是随着时代而前进的，它和文化同床共振，它和传播吃一碗饭，它和消费穿一条裤子长大，它和心情是兄弟姐妹。色彩若有了固定的模式，那么就是灰色——象征“哀吊”了。

基础知识千年不变，并不是真的千年，在我们生活在现世的百年里，大抵不会有太大的变化。还是建议大家掌握，并且在工作中体会。与其讨厌，不如面对；）

New Color Box 给你20组双主色配色

我手调了20组双色设计。商务、运动、女性、男性、儿童应有尽有。可供参考。

本文部分内容节选自我的书《个性化网页设计与鉴赏》2003年出版。

新的内容是2012年编写

原文链接：http://blog.sina.com.cn/s/blog_6056b9480102dvpl.html

更多UI博客精选