网页设计的秘诀:如何用颜色烘托情感
用色的技巧绝对是一门艺术。
纵观人类历史,绘画大师和其他艺术家们总是凭借对色彩的巧妙运用而蜚声全球。在近代,这种艺术开始与商业和贸易结合,最初体现在广告上,现在则是网页设计。用色的技巧,几乎永远存在探索的空间,永远可以提高和精进。
在本文中,我们将讲解基本的颜色理论和配色方案,然后讨论某些色彩对人的情绪产生的影响。
颜色理论
光是这个题目本身就可以写一本书了,所以我们只撷取与 UI 设计相关的部分。根据网页 UI 设计的需要,我们可以把颜色理论分为三部分:
-
对比:颜色的每一种浓度都有它的补色,它们之间的对比比和其他任何颜色都要强烈。你可以用下面的色轮来方便地查找某一种颜色的补色,只需看某种颜色对面的颜色就可以了。
-
互补:颜色并不总是彼此独立的。互补色相互起到强调的作用,恰恰能达到表面上「对比」之外的最佳效果。互补色在色轮上处于相对的位置,例如,紫色的互补色是绿色。
-
振动:每种颜色都能唤起某种特别的情绪。偏亮、暖的颜色(红、橙、黄)一般会使人振奋,并让人更加警觉;而偏深、冷的色调(绿,蓝,紫)更趋向于使人放松和平和。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 上的文章,里面讲解了如何创造属于你自己的颜色风格。
颜色辅助工具
有一点值得庆幸,那就是有很多工具都可以帮助你将颜色理论应用于实际。下面这些预设好的调色工具,会帮你省去很多初始步骤。
-
Adobe Color CC:前身是 kuler,最值得信任的颜色辅助工具之一。
-
Paletton:如果你正需要一个能快速上手的简单工具,这个最能帮助你。新手尤其适用。
-
Flat UI Color Picker:只需要平面 UI 设计工具时,它非常方便实用。
如果想在学习之路上少交点学费,你还可以看看这个,28 个颜色工具网站。
没人要你成为米开朗琪罗那样的大师,但对用色的基本知识是网页设计的必备技能。
就像我们刚说的,颜色有时承担着很多可能不被人注意的作用。无论你选择什么颜色,都一定会在整体上对标识产生影响:无论是最初的视觉冲击,还是唤起最细微的情绪。
http://tech2ipo.com/97253