网页设计的秘诀：如何用颜色烘托情感

 

用色的技巧绝对是一门艺术。

纵观人类历史，绘画大师和其他艺术家们总是凭借对色彩的巧妙运用而蜚声全球。在近代，这种艺术开始与商业和贸易结合，最初体现在广告上，现在则是网页设计。用色的技巧，几乎永远存在探索的空间，永远可以提高和精进。

在本文中，我们将讲解基本的颜色理论和配色方案，然后讨论某些色彩对人的情绪产生的影响。

颜色理论

光是这个题目本身就可以写一本书了，所以我们只撷取与 UI 设计相关的部分。根据网页 UI 设计的需要，我们可以把颜色理论分为三部分：

1. 对比：颜色的每一种浓度都有它的补色，它们之间的对比比和其他任何颜色都要强烈。你可以用下面的色轮来方便地查找某一种颜色的补色，只需看某种颜色对面的颜色就可以了。

   

2. 互补：颜色并不总是彼此独立的。互补色相互起到强调的作用，恰恰能达到表面上「对比」之外的最佳效果。互补色在色轮上处于相对的位置，例如，紫色的互补色是绿色。 

3. 振动：每种颜色都能唤起某种特别的情绪。偏亮、暖的颜色（红、橙、黄）一般会使人振奋，并让人更加警觉；而偏深、冷的色调（绿，蓝，紫）更趋向于使人放松和平和。CNN 在网页顶部菜单栏中使用红色的标识来加强警醒度，就很符合网站突发新闻的内容。

   

网页设计中的颜色理论远远不只是视觉审美的问题，它能给你的业务带来颠覆性的作用。如果不信，可以读读转型顾问 Jeremy Smith 的文章，里面解释了如何利用颜色心理学来拓展你的业务。

寓意： 颜色的情绪暗示

没人会否认情绪与颜色之间的关联————事实上，自中世纪以来，人类一直在研究颜色对心理的影响。自然，网页设计师们也希望能够很好地驾驭它，因为合适的颜色才能给你的网页带来合适的风格。

我们分析了 Vandeley Design 和 Smashing 杂志的研究员们给出的建议，并结合我们自己在 UXpin 上的经验对这些建议进行了筛选。

需要注意的是，世界各地不同的文化对颜色的理解是不同的。我们对情绪的联想多与西方文化相关联，如果想更深层次地了解不同文化对颜色的解读，可以读读 Web Design Depot 这篇详尽的文章。

红色：

代表：力量，重点，青春

作为最具刺激性的颜色，红色使人振奋、血液循环加快。它是热情和力量的象征，是最引人注意的颜色，因此常被用在警示和重要通知上。

No Way NSA（美国国家安全局）的网站上使用红色再合适不过，因为他们需要让网站上发布的预警信息引起人们的警戒。而在页面的第一个段落中使用红色尤其明智，因为人们从心理上会想要「远离危险区域」，从而将页面上滑，这自然而然就促使用户们浏览了更多的内容。

然而，红色如果使用不当，也可能适得其反。因为它能引起愤怒，或至少是过激反应。如果你追求的是轻松的氛围，使用时需谨慎（或者至少用浅一些的红），或者干脆不用。

橙色：

代表：友好，能量，独特

作为暖色系中最柔和的颜色，橙色相当通用。作为主色时，它迷人、充满活力，而作为辅色使用时，它也可以含蓄地体现出这些特性。橙色还可以制造出运动感和能量感。

在「芬达」商标中，橙色已经成为了其中的一部分，此外在芬达带有卡通的暖心风格的网页上，橙色也被很好地利用，表达了一种亲和、而又不失创造性的感觉。

黄色：

代表：快乐，激情，古老（深黄色）

黄色是一种更加通用的颜色，具体取决于它的深浅度。

亮黄是最有活力的颜色，而且不像红色风格那么强烈。而中间色的黄带给人一种舒服的感觉，同时依旧不失活泼。深黄（包括金色）则带有古老的风格，并有永恒、智慧、和奢华之感。

上面的例子来自网页设计代理 Flash Media，深黄色散发着能量，尊贵，和权威感。这彰显了公司用他们的专业和技能创造价值的诉求。

绿色：

代表：成长，稳定，金融主题，环保主题

绿色是暖色和冷色之间的过渡，尽管它稍有些偏向于冷色。这意味着绿色既有蓝色的放松效果，又保有黄色的一部分充满活力的特质。这样，它就营造出了一种非常平衡、稳定的氛围。深色调的绿更加能带来有关金钱和财富的联想，这一点可以在上面的 Ameritrade 上体现出来。

蓝色：

代表： 冷静，安全，开放（浅蓝），可靠（深蓝）

如同黄色一样，不同深度的蓝有着不同的含义。总体上看，所有的蓝都能让人感觉放松和安全，不过浅蓝会看上去更友好，深色则更阴郁。社交媒体如 twitter 和 facebook，利用了浅蓝和中等深度的蓝色的优点。而公司的网站上则用深蓝来体现力量和可靠感。

项目设计代理 Van Vliet & Trap 很巧妙地使用了深蓝色，在背景的花朵中使用这种蓝，除了从视觉上暗示出他们在花朵设计上的专业以外，同时也渗透信任和可靠。这确实起到了作用，他们已经开始策划婚礼等高端视觉活动（虽然这多少有点让人头疼）。

紫色：

代表：奢华，浪漫（浅紫），神秘（深紫）

紫色自古就与皇室紧密相连，带有奢华甚至是堕落的意味。

总体上，紫色让人感觉奢靡，这使得它变成潮流和奢侈品（甚至巧克力，像上面的 cadbury）普遍之选。浅色的紫如薰衣草色（掺杂粉色）代表浪漫，而深色调看上去更加华贵和神秘。黑色： 

代表：力量，边缘，复杂

黑色是最强烈的中性色，几乎存在于所有网页中。

它可以衬托其他颜色，从而展现不同的特性，也可以通过大量的使用来统领所有的颜色。它蕴含在中性之中的力量使它成为大篇幅文本的首选用色，但作为主色，它会给人边缘化，复杂，乃至邪恶的感觉。

对于大多数网页而言，黑色用来营造一种第一眼看上去专业而永恒的感觉。当它与白色字体相搭配，体现在极简风格的布局中时，就凸显出了它的优雅，这一点你可以在 Bose 的「梦想与达成」（「Dream and Reach」）的微网页中看到。

白色：

代表：纯净，高尚，简洁

在西方文化中，白色是与高尚、纯洁、无辜联系最紧密的颜色。

极简风格的网页最常用白色作为背景色。它最不引人注意，在页面上能更好地衬托其他颜色。

这在艺术家 Kaloian Toshev 的 awwwards-winning 网页上得到了很好的体现。白色背景使观者的注意力放到了他的艺术作品上，同时制造了一种艺术画廊般的优雅氛围。

灰色：

代表：中性，礼节，忧郁

尽管在某种情境下它看上去沉静而伤感，但灰色仍然是代表传统、专业的合适之选。然而，灰色的最大优点在于丰富的色度---从白到黑，利用深浅度的改变可以带来各自与众不同的效果。只要善加利用，它是一个非常有效的工具。

在平面 UI 网站 AWWWARDS 上将它与亮色相搭配，灰色的背景就看上去比往常显得更加现代。

米黄：

代表：环绕

米黄是所有颜色的通配色，它的主要作用是衬托其他颜色。

就它本身而言，米黄是阴暗的（尽管这代表着谦逊）。然而，它那种可以衬托周围颜色的特点，这使它成为了一个有趣的设计手段。因此，米黄几乎总是作为次要色或者背景色来使用。

深度的米黄（就像 Dishroom 网页上那样）能产生一种质朴、几乎像纸一样的纹理，而浅色的看上去更清新。在这个案例中，环绕在商标周围的浅米黄，使字体周围变暗，点出餐馆使用天然食材制作新鲜时尚的美食的主题。

象牙白：

代表：舒适，高雅，简洁

就情绪上的反应来说，象牙白（和乳白）和白色稍有区别。

象牙白比白色看上去更温暖（或者说没那么苍白），这使它看上去更舒服，同时仍然显得简洁和充盈。

如果你想看更多的关于颜色和情绪的分析，看看这篇来自 1stWebDesigner 的文章，其中对 20 个顶级品牌的用色进行了解构分析。

配色方案

每个网页都有自己的配色方案，把各自的主色用在主要区域。就像我们前面提到的，这些颜色的重复使用影响着用户的思维和情绪，尤其是在潜意识层面。所以使用时应多加注意。

颜色的搭配有许多方式，我们先说其中效果最好、最常用的：

1. 三色配色——三色配色是最基本和最平衡的。它利用了颜色的振动和互补，但去掉了对比的玩味感，是最安全可靠的配色方案。在 12 色色轮中，你可以选择任何三个相距 120 度的颜色：一种用于背景，另外两个用在内容和选项中。

FLORIDA FLOURISH 网站充分利用了颜色本身，就达到了非凡的效果。文本标签和植物使用红绿对比，沙漠上方天空用上蓝色和橙色，这样红/橙和蓝/绿的互补从整体看上去非常不错。

2. 相似配色——这是一种最近新流行起来的配色方案，专门针对互补色。它非常强调被选色的寓意，例如，红橙黄的配色方案会看上去非常有活力和生命力，这种方案很便于使用，关键在于采用颜色的何种寓意，然后将其延伸。

通过在网页上使用蓝色、孔雀蓝和绿色，Blinksale 创造了一种平和而安全的氛围。同时，也要注意到他们在口号上使用了对比色----黄色，来引起注意。

我们刚才讨论的仅仅是颜色理论如何能提升你的网页设计观感，至于利用到何种程度，取决于你自己。如果你想了解更多，可以看看这篇 Smashing Magazine 上的文章，里面讲解了如何创造属于你自己的颜色风格。

颜色辅助工具

有一点值得庆幸，那就是有很多工具都可以帮助你将颜色理论应用于实际。下面这些预设好的调色工具，会帮你省去很多初始步骤。

1. Adobe Color CC：前身是 kuler，最值得信任的颜色辅助工具之一。

2. Paletton：如果你正需要一个能快速上手的简单工具，这个最能帮助你。新手尤其适用。

3. Flat UI Color Picker：只需要平面 UI 设计工具时，它非常方便实用。

如果想在学习之路上少交点学费，你还可以看看这个，28 个颜色工具网站。

没人要你成为米开朗琪罗那样的大师，但对用色的基本知识是网页设计的必备技能。

就像我们刚说的，颜色有时承担着很多可能不被人注意的作用。无论你选择什么颜色，都一定会在整体上对标识产生影响：无论是最初的视觉冲击，还是唤起最细微的情绪。

 

http://tech2ipo.com/97253