九卦

九卦

莫奈为什么从不使用黑色

{%}

作者/David Kadavy

Kadavy公司的总裁,兼500 Startups种子基金的导师。Kadavy公司提供用户界面设计咨询服务,客户包括oDesk、PBworks和UserVoice等。

早先,David曾领导过两家硅谷创业公司和一家建筑公司的设计部门,在大学教授过印刷课程。在爱荷华州立大学攻读平面设计专业美术学士学位期间,他曾在罗马学习古代印刷术。Communication Arts杂志刊登过他的设计作品,他曾在South by Southwest(SXSW)互动大会上做过演讲。

不少画家对颜色以及颜色间的相互作用相当痴迷。为了更好地理解颜色间的相互作用方式,研究画家的作品会对我们的设计很有帮助。当先锋画家们开始挑战写实主义的流行趋势时,印象派画家便尝试运用颜色,将所用介质的内在特质暴露出来,而克劳德·莫奈就是印象派代表画家之一。

莫奈的画作具有活力和生命感,其作品凭借颜色及反差跃然画布之上,但不知何故,莫奈在几乎整个绘画生涯中,总是尽量避免使用黑色。通过理解莫奈运用颜色的方式,可以更好地了解颜色间的相互关系,进而在设计中运用这些知识表现出类似的生命感和深度感。

和其他印象派画家一样,莫奈疯狂地着迷于尝试不同材质的颜料、画笔和画布。所以,正如像素阻碍了Garamond字体在Web中的应用一样,印象派画家使用的工具的特性也塑造了他们的作品。油画颜料(浓厚粘稠)、画笔(仅是绑在一根棍上的一束毛发)的固有特性,以及有时画布本身的质地,都更适合创作带有朦胧感的画作,而不是当时盛行的写实画作。现实主义画家在努力掩盖这些介质的特性,印象派画家却接受并利用了这些特性,就像像素字体或者位图字体利用了像素的特性一样。

在尝试的过程中,印象派画家必须尝试用颜色创作出所需的效果。就像一副色彩丰富的图片在受到256色相色板限制时,看上去像被震动处理了一样,印象派画家尝试着将多种颜色紧凑的并置在一起,以创造出某种颜色的效果。这些并置在一起的颜色所产生的光学混合效果,从远处观看时就呈现出另一种整体的颜色。

印象派画家:色彩大师

画家经过不断地尝试,就形成了一些印象派画家的主要技法,即“点画法”——通过绘制紧邻的颜色点来产生不同的整体颜色效果。乔治·修拉首创了这项画技,他有一副画作的近距离效果看起来和抖动处理后的GIF图片没什么两样,图6-1中显示了Seurat这幅作品的近距离效果图,旁边是一副放大了的,只有8种颜色的模式动态GIF图片。

通过尝试这种创作方式,印象派画家便不再只是简单地复制现实,他们开始分析艺术主体和观众眼睛之间的区域。他们开始探索如何形成水面上的光线反射,波光粼粼的涟漪;分析那些可以赋予物体立体感阴影的颜色组合(而不是纯黑色)。

{%}

图6-1 乔治·修拉尝试并置多种颜色,所以他的点画法效果和抖动处理后的GIF图片很相像 (图片复制David Kadavy,肖像已获Masha Safina许可)

色彩理论:印象派的发现

色彩理论可以解释为什么印象派画家要避免使用黑色。色轮是由原色、次生色和三次色组成的。但色轮中有一个想象中的“冷”色(绿色、蓝色和紫色)和“暖”色(红色、 橙色和黄色)的划分。

之所以有冷色暖色的命名方式,是因为暖色给观众以温暖的感觉,并且起到兴奋的作用,而冷色给观众以凉爽的感觉,并且能起到放松的作用。从文化上来讲,这是有道理的:我们常常将黄色、橙色和红色与太阳或者火焰联系在一起,而将蓝色和水或者冰联系在一起。

暖色奔放洋溢,冷色保守内敛

一般对于观众来说,暖色相奔放洋溢,看起来更亲近一些,而冷色相保守内敛,看起来更疏远一些。

如图6-2左侧部分,收敛的蓝色块看起来就像是红色块中心的空洞。而在图6-2的右侧部分所看到的效果却完全相反,红色块看起来像是要从蓝色块中呼之欲出。暖色相(红色)奔放洋溢,而冷色相(蓝色)保守内敛(图中所选颜色的Lab亮度值相同)。

{%}

图6-2

色相是从色轮中选取的基本纯色。要想构造更复杂的颜色,需要浅或者暗的色相。浅色相实际就是稍浅一些的原色相。调制涂料时,只需在其中加入白色就可以了。暗色相就是原色相的较暗版本。在调制涂料时,基本上只需要加入黑色就可以了。

浅色相呼之欲出,暗色相退缩收敛

就像暖色相奔放,冷色相收敛一样,这也可能是你意料之中的:浅色相呼之欲出,暗色相退缩收敛,如图 6-3所示。在同样的蓝色背景之下,浅的蓝色方块呼之欲出,而暗色相的方块退缩收敛。

{%}

图6-3

背景的重要性

但是,浅的蓝色方块总是呼之欲出吗?当然不是。颜色所处的背景也非常重要。在图6-4中,完全相同的方块放在少许浅的背景色中就没那么引人瞩目,而置于沉闷的暗背景中时却几乎要跃出纸面。

{%}

图6-4

色温与浅色相

因背景不同而造成差异的现象,也同样适用于色轮上两个相对位置的色相。虽然在下面的例子中两边的中心方块都没有选用浅色相或者暗色相(而且所选颜色在Lab颜色空间中有着相同的亮度值),但它们在蓝色背景下的视觉效果却截然相反。在图6-5中,紫色方块的颜色在色轮上和蓝色位置相邻,几乎完全与背景色融为一体,而橙色作为蓝色的互补色(在色轮上和蓝色位置相对),却强烈地从蓝色背景中突显出来。这两种色相(橙色和蓝色)之间的反差如此之大,以至于在两者交汇之处出现了震动感。另外需要注意的是,紫色虽是一种冷色,但它仍比蓝色要暖一些,而这就造成了紫色方块的轻微凸显效果。

{%}

图6-5 尽管这些颜色既不是浅色相也不是暗色相,但橙色方块在蓝色背景中凸显出来的效果要比紫色方块强烈很多

色轮上位置相对的两种色相形成的视觉效果是如此强烈,几乎超过了由浅色相和暗色相带来的视觉效果。即便把浅的蓝色中心方块放置在暗紫色背景之上时,也会产生退缩收敛的效果,如图6-6左侧所示。但相比之下,右图浅的紫色方块却像要从暗的蓝色背景当中猛冲向你一般。

{%}

图6-6

印象派画家们避免使用黑色,并不仅仅是因为自然界中几乎不存在这种颜色,还因为纯色相变化所产生的效果要比暗色相丰富的多。当你使用纯黑色构造对比效果时,就完全错过了纯色相变化产生的效果。

{%}

图6-7

图6-7的左侧部分和上图右侧部分的颜色组合完全相同。注意看深蓝色背景退缩收敛,把浅紫色方块推向观众的效果。而深灰色背景(带有相同感知亮度的中性灰)自然会和紫色方块形成对比反差,但是因为它与紫色方块之间并没有色相关系,所以紫色方块看起来只是浮在背景之上,而且在两种颜色交汇的边缘处产生了令人不快的振动效果。

那么,如何运用这些知识使Web设计更加美观呢?通过了解颜色之间的相互关系,你可以在排版中建立更加明确的信息层次结构。尽管在Web页面中,使用白底黑字的Web设计约定已经被广泛接受,但这通常并不是最具可读性的,也不是最美观的选择。

 

{%}

《黑客与设计:剖析设计之美的秘密》采用逆向解析的方式,庖丁解牛般剖析了一众经典设计。从文艺复兴时期的雕塑,到印象派绘画,再到现代的Mac OS X的Aqua界面以及Twitter的页面设计,还原历史真相,细说风格由来,逐步讲解色彩、排版、比例等设计理论,并在此基础上提出了大量真切可行的设计最佳实践。读来令人耳目一新,信心倍增。