Photoshop淘宝天猫网店设计装修从入门到精通
上QQ阅读APP看书,第一时间看更新

2.3 配色方案:解密网店配色技巧

从视觉的角度而言,顾客最先感知的便是网店装修画面中的色彩。任何色彩都具备色相、明度和纯度3个基本要素。如何正确地运用常见的配色方案,是网店装修设计必备的技能。

2.3.1 对比配色在装修中的应用

在我们生活的世界中,时时处处都充满着各种不同的色彩。人们在接触这些色彩的时候,常常都会以为色彩是独立的:天空是蓝色的,植物是绿色的,而花朵是红色的。其实,色彩就像音符一样,唯有一个个的音符才能共同谱出美妙的乐章。色彩亦是,实际上没有一个色彩是独立存在的,也没有哪一种颜色本身是好看的颜色或是不好看的颜色;相反,只有当色彩成为一组颜色组成中的其中一个的时候,我们才会说这个颜色在这里是协调或不协调、适合或不适合。

前面介绍过色彩是由色相、明度及纯度3种属性所组成,而其中的色相是人在最早认识色彩的时候所理解到的属性,也就是所谓色彩的名称,如红色、黄色、蓝色等。如图2-24所示,为最常见的12色相环。

图2-24 12色相环

因为互补色有强烈的分离性,所以使用互补色的配色设计,可以有效加强整体配色的对比度、拉开距离感,而且能表现出特殊的视觉对比与平衡效果,使用得好能让作品给人以活泼、充满生命力的感受。如图2-25所示,为色相差异较大的对比配色的网店首页效果。

图2-25 色相差异较大的对比配色的网店首页效果

色相的对比,往往是由于差别所产生的。色彩的对比其实也就是色相之间的矛盾关系。各种色彩在色相上产生细微的差别,都能够对画面产生一定的影响。色相的对比搭配可以使画面充满生机,并且具有丰富的层次感。

当然如果将色彩的条件稍微放宽一点,比如,180度互补色的临近色系也搭入配色考虑的话,可以形成的色彩配色就更宽广、更丰富了。

由于互补色彩之间的对比相当强烈,因此想要适当地运用互补色,必须特别慎重考虑色彩彼此间的比例问题。因此,当使用对比色配色时,必须利用大面积的一种颜色与另一个面积较小的互补色来达到平衡。如果两种色彩所占的比例相同,那么对比会显得过于强烈。如图2-26所示,网店装修中使用大面积的黑色与小面积的灰白色形成对比。

图2-26网店装修中的对比配色效果

专家指点

某日本设计师曾经针对色彩的配色提出比例原则75%、25%与5%的配色比例方式,其中的底色为大面积使用的底色,而主色与强调色则是可以利用互补色的特性,来将主色以及强调色都衬托出来,如图2-27所示。

图2-27 配色比例方式

例如,红与绿如果在画面上占有同样面积的时候,就容易让人头晕目眩。可以选择其中之一的颜色为大面积,构成主色,而另一颜色为小面积作为对比色。通常情况下,会以3∶7甚至2∶8的比例来作为分配原则。

2.3.2 调和配色在装修中的应用

“调”具有调整、调理、调停、调配、安顿、安排、搭配、组合等意思;“和”可理解为和一、和顺、和谐、和平、融洽、相安、适宜、有秩序、有规矩、有条理、恰当,没有尖锐的冲突,相互依存,相得益彰等解释。配色的目的就是制造美的色彩组合,而和谐是色彩美的首要前提,它使色调让人感觉到愉悦,同时调配后的颜色还能满足人们视觉上的需求以及心理上的平衡。

我们知道,和谐来自对比,和谐就是美。没有对比就没有刺激神经兴奋的因素,但只有兴奋而没有舒适的休息会造成过分的疲劳,会造成精神的紧张,这样调和也就成了一句空话。如此看来,既要有对比来产生和谐的刺激——美的享受,又要有适当的调和来抑制过分的对比——刺激,从而产生一种恰到好处的对比——和谐——美的享受。总体来说,色彩的对比是绝对的,而调和是相对的,调和是实现色彩美的重要手段。

1.以色相为基础的调和配色

在保证色相大致不变的前提下,通过改变色彩的明度和纯度来达到配色的效果。这类配色方式保持了色相上的一致性,所以色彩在整体效果上很容易达到调和。以色相为基础的配色方案主要有以下几种。

● 同一色相配色:指相同的颜色在一起的搭配,比如,蓝色的上衣配上蓝色的裤子或者裙子。这样的配色方法就是同一色相配色法,如图2-28所示。

图2-28 同一色相配色

● 类似色相配色:指色相环中类似或相邻的两个或两个以上的色彩搭配。例如:黄色、橙黄色、橙色的组合;紫色、紫红色、紫蓝色的组合等都是类似色相配色。类似色相配色的配色在大自然中出现得特别多,有嫩绿、鲜绿、黄绿、墨绿等。

● 对比色相配色:指在色环中,位于色环圆心直径两端的色彩或较远位置的色彩搭配。它包含了中差色相配色、对照色相配色、辅助色相配色。在24色相环中,两色相相差4~7个色,称为基色的中差色。在色相环上有90°左右的角度差的配色就是中差配色;它的色彩对比效果明快,是深受人们喜爱的颜色。在色相环上,色相差为8~10的色相组合,被称为对照色。从角度上说,相差135°左右的色彩配色就是对照色。色相差11~12,角度为165°~180°左右的色相组合,称为辅助色配色。

● 色相调和中的多色配色:在色相对比中,除了两色对比,还有三色、四色、五色、六色、八色甚至多色的对比。在色环中成等边三角形或等腰三角形的3个色相搭配在一起时,称为三角配色。四角配色常见的有红、黄、蓝、绿及红、橙、黄、绿、蓝、紫等色。

2.以明度为基础的调和配色

明度是人类分辨物体色最敏锐的色彩反应,它的变化可以表现事物的立体感和远近感。例如,希腊的雕刻艺术就是通过光影的作用产生了许多黑白灰的相互关系,形成了成就感;中国的国画也经常使用无彩色的明度搭配。有彩色的物体也会受到光影的影响而产生明暗效果,如紫色和黄色就有着明显的明度差。

明度可以分为高明度、中明度和低明度3类,这样明度就有了高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度6种搭配方式。其中,高明度配高明度、中明度配中明度、低明度配低明度,属于相同明度配色。在网店装修中,一般使用明度相同、色相和纯度变化的配色方式,如图2-29所示。

图2-29 以明度为基础的调和配色

3.以纯度为基础的调和配色

纯度的强弱代表着色彩的鲜灰程度。在一组色彩中当纯度的水平相对一致时,色彩的搭配也就很容易达到调和的效果。随着纯度高低的不同,色彩的搭配也会有不一样的视觉感受。如图2-30所示,为以纯度为基础的网店调和配色方案。

图2-30 以纯度为基础的调和配色

专家指点

PCCS(Practical Color Coordinate System)色彩体系提出了色调这个观点。色调经过命名分类后,分布于不同的区域,更加方便配色使用。凡色调配色,要领有三,即同一色调配色、类似色调配色、对比色调配色。

· 同一色调配色:指将相同色调的不同颜色搭配在一起形成的一种配色关系。同一色调的颜色,色彩的纯度和明度具有共同性,明度按照色相略有变化。不同色调会产生不同的色彩印象,将纯色调全部放在一起,会产生活泼感;而婴儿服饰和玩具都以淡色调为主。在对比色相和中差色相的配色中,一般采用同一色调的配色手法,更容易进行色彩调和。

· 类似色调配色:即以色调配图中相邻或接近的两个或两个以上色调搭配在一起的配色。类似色调的特征在于色调和色调之间微小的差异,较统一色调有变化,不易产生呆滞感。

· 对比色调配色:对比色调配色是指相隔较远的两个或两个以上的色调搭配在一起的配色。对比色调配色在配色选择时,会因纵向或横向对比有明度及彩度上的差异,比如:浅色调和深色调配色,即为深与浅的明暗对比。

4.无彩色的调和配色

无彩色的色彩个性并不明显,将无彩色与任何色彩搭配都可以取得调和的色彩效果。通过无彩色与无彩色搭配,可以传达出一种经典的永恒美感;将无彩色与有彩色搭配,可以用其作为主要的色彩来调和色彩间的关系。

专家指点

无彩色的彩色调和配色,在设计单品文案的时候,能够达到突出主体物的作用。

因此,在网店的装修设计中,有时为了达到某种特殊的效果,或者凸显出某个特殊的对象,可以通过无彩色调和配色来对设计的画面进行创作,如图2-31所示。

图2-31 无彩色的调和配色