2.1 色彩常识:色彩设计知识解析
把店铺装修好,让自己的店铺更好看一点,更漂亮一点,这样就会在视觉上吸引顾客,给店铺带来更多的生意。对进入店铺的顾客来说,他们首先会被店铺中的色彩所吸引,然后根据色彩的走向对画面的主次进行逐一的了解。本节主要对网店的色彩设计知识进行讲解,这些基础知识也是后期网店装修配色中的关键所在。
2.1.1 无色系与彩色系
为了便于认识网店装修配色中的色彩变换,认识色彩的基本属性与基本规律,我们必须对色彩的种类进行分类与了解。丰富多样的颜色可以分成两大类:无彩色系和有彩色系。有彩色系的颜色具有3个基本特性:色相、纯度(也称彩度、饱和度)、明度,在色彩学上也称为色彩的三大要素或色彩的三属性。其中,饱和度为0的颜色为无彩色系。
在网店装修设计中,无彩色系和有彩色系都占有举足轻重的地位。无论是以有彩色为主体的画面效果,还是以单纯黑白灰构成的画面效果,都能给人带来一种奇幻无比的色彩感觉。充分、合理地利用色彩的类别与特性,可以使网店装修的画面获得意想不到的效果。
1.无彩色系
无彩色系是指白色、黑色和由白色黑色调和形成的各种深浅不同的灰色。无彩色按照一定的变化规律,可以排成一个系列,由白色渐变到浅灰、中灰、深灰到黑色,色度学上称此为黑白系列。如图2-1所示,为无彩色系的店铺首页。
图2-1 无彩色系的店铺首页
无彩色没有色相的种类,只能以明度的差异来区分,如图2-2所示。无彩色没有冷暖的色彩倾向,因此也被称为中性色。
图2-2 无彩色系
在无彩色系中,纯白是理想的完全反射的物体;纯黑是理想的完全吸收的物体。在现实生活中,并不存在纯白与纯黑的物体。颜料中采用的锌白和铅白只能接近纯白;煤黑只能接近纯黑。色彩的明度可用黑白度来表示,越接近白色,明度越高;越接近黑色,明度越低。黑与白作为颜料,可以调节物体色的反射率,使物体色提高明度或降低明度。
无彩色中的黑色是所有色彩中最黑暗的色彩,通常能够给人以沉重的印象,而白色是无彩色中最容易受到环境影响的颜色。如果设计的画面中白色的成分越多,画面效果就越单纯。而灰色则处于白色和黑色之间,它具有平凡、沉默的特征,很多时候在店铺装修中作为调节画面色彩的一种颜色,可以给顾客带来安全感和亲切感。如图2-3所示,为服装店铺装修中设计的商品详情页面。
图2-3 商品详情页面
2.有彩色系
彩色是指红、橙、黄、绿、青、蓝、紫等颜色,不同明度和纯度的红橙黄绿青蓝紫色调都属于有彩色系。有彩色是由光的波长和振幅决定的,波长决定色相,振幅决定色调。如图2-4所示,为使用有彩色系进行配色的网店装修图片。
图2-4 使用有彩色系进行配色的网店装修图片
专家指点
在图像的制作过程中,根据有彩色的特性,可以通过调整其色相、明度以及纯度之间的对比关系,或通过各色彩间面积调和,可以搭配出色彩斑斓、变化无穷的网店装修画面效果。
2.1.2 颜色的三种属性
现在让我们更进一步地研究色彩是怎样表达的。如图2-5所示,是两个红色圆圈。下面通过对比来分析色彩的3种基本属性。
图2-5 两个红色圆圈
● 色相:它们都是红色的。
● 明度:左边的颜色明显要比右边的更亮一些。
● 纯度:左边的纯度更高,右边的显得灰暗一些。
这就是为什么这两个红色圆圈颜色一开始看上去好像差不多,但仔细一看就不同了。因此我们说,色彩可以通过色相、明度和纯度3种属性综合表达。
1.色相
苹果是红色的,柠檬是黄色的,天空是蓝色的。当我们考察不同色彩的时候,时常用色相来表示,如图2-6所示。我们用色相这一术语将色彩区分为红色、黄色或蓝色等类别。
图2-6 色相条与色相渐变条
专家指点
色相是色彩的最大特征。所谓色相,是指能够比较确切地表示某种颜色色别的名称,也是各种颜色直接的区别,同样也是不同波长的色光被感觉的结果。
色相是由色彩的波长决定的,以红、橙、黄、绿、青、蓝、紫代表不同特性的色彩相貌,构成了色彩体系中的最基本色相。色相一般由纯色表示。
虽然红色和黄色是完全不同的两种色相,但我们可以混合它们来得到橙色。混合黄色和绿色可以得到黄绿色或青豆色,而绿色和蓝色混合则产生蓝绿色。因此,色相是互相关联的,我们把这些色相排列成圈,这个圈就是“色环”,如图2-7所示。
图2-7 色环
专家指点
色环其实就是在彩色光谱中所见的长条形的色彩序列,只是将首尾连接在一起,使红色连接到另一端的紫色,色环通常包括12种不同的颜色。
暖色:暖色由红色调构成,如红色、橙色和黄色。这种颜色选择给人以温暖、舒适、有活力的感觉。这些颜色产生的视觉效果使其更贴近观众,并在页面上更显突出。
寒色(也称冷色):冷色来自蓝色调,如蓝色、青色和绿色。这些颜色使配色方案显得稳定和清爽。它们看起来还有远离观众的效果,所以适于做页面背景。
Lab颜色空间模型是当前最通用的用于表达物体色彩的量度系统,它是由国际照明委员会(CIE)在1976年统一制定的。在Lab颜色空间里,明度标示为L,色相和彩度分别用a和b表示。数值越大,色彩越亮越纯;相反,数值越接近零值,则色彩越晦暗。如图2-8所示,为Lab颜色空间的平面图像。
图2-8 Lab颜色空间的平面图像
专家指点
Lab色彩模型由明度(L)和有关色彩的a、b三个要素组成。
L表示明度(Luminosity), L的值域由0~100, L=50时,就相当于50%的黑。
a表示从洋红色至绿色的范围,b表示从黄色至蓝色的范围。a和b的值域都是由+127至-128,其中+127 a就是红色,渐渐过渡到-128 a的时候就变成绿色;同样原理,+127 b是黄色,-128 b是蓝色。
色更偏红,绿色更偏青,黄色略带红,蓝色有点偏青色)。所有的颜色就以这3个值交互变化所组成的。例如,一块色彩的Lab值是:L=100、a=30、b=0,这块色彩就是粉红色。(注:此模式中的a轴、b轴颜色与RGB不同,洋红
在进行网店装修的配色中,选择不同的色相,会对画面整体的情感、氛围、风格等产生影响。如图2-9所示,为两种不同色相搭配下的店铺装修效果。
图2-9不同色相搭配下的店铺装修效果
2.明度
有些颜色显得明亮,而有些却显得晦暗。这就是为什么亮度是色彩分类的一个重要属性的原因。例如,柠檬的黄色就比葡萄柚的黄色显得更明亮一些。那如果将柠檬的黄色与一杯红酒的红色相比呢?显然,柠檬的黄色更明亮。可见,明度可以用于对比色相不同的色彩,如图2-10所示。
图2-10 明度
在网店装修的配色过程中,明度也是决定文字可读性和修饰素材实用性的重要元素。在设计画面整体印象不发生变动的前提下,维持色相、纯度不变,通过加大明度差距的方法可以增添画面的张弛感,如图2-11所示。
图2-11 色彩的明暗程度会随着光的明暗程度变化而变化
专家指点
明度是眼睛对光源和物体表面的明暗程度的感觉,主要是由光线强弱决定的一种视觉经验。简单来说,明度可以简单理解为颜色的亮度,不同的颜色具有不同的明度。任何色彩都存在明暗变化。其中黄色明度最高,紫色明度最低,绿、红、蓝、橙的明度相近,为中间明度。另外,在同一色相的明度中还存在深浅的变化。例如,绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。
同时,在网店装修的配色中,明度也是色彩的精髓,色彩的明度差异比色相的差别更容易让人将主体对象从背景中区分出来。图像与背景的明度越接近,辨别图像就会变得更困难。如图2-12所示,为同一图像在不同明度背景上的识别效果,
图2-12 同一图像在不同明度背景上的识别效果
3.纯度
纯度用来表现色彩的鲜艳和深浅。色彩的纯度变化,可以产生丰富的强弱不同的色相,而且使色彩产生韵味与美感。
纯度是深色、浅色等色彩鲜艳度的判断标准。纯度最高的色彩是原色,随着纯度的降低,就会变化为暗淡的、没有色相的色彩。纯度降到最低就会失去色相,变为无彩色。
如图2-13所示,用色相相同的柠檬和卡其布做比较,很难用明度来解释这两种颜色的不同,而纯度这一概念则可以很好地解释为什么我们看到的柠檬与卡其布的颜色如此不同。因此,除了色相和明度,我们研究色彩时应该加上它的第三种属性:纯度。
图2-13 柠檬与卡其布的颜色
纯度通常是指色彩的鲜艳度。从科学的角度看,一种颜色的鲜艳度取决于这一色相发射光的单一程度。人眼能辨别的有单色光特征的色,都具有一定的鲜艳度。不同的色相不仅明度不同,纯度也不相同。
纯度是说明色质的名称,也称饱和度或彩度、鲜度。色彩的纯度强弱,是指色相感觉明确或含糊、鲜艳或混浊的程度,如图2-14所示。高纯度色相加白或黑,可以提高或减弱其明度,但都会降低它们的纯度。如果加入中性灰色,也会降低色相纯度。
图2-14 纯度表
以红色为例,向纯红色中加入一点白色,纯度下降而明度上升,变为淡红色。继续加入白色的量,颜色会越来越淡,纯度下降,而明度持续上升。加入黑色或灰色,则相应的纯度和明度同时下降。同一色相的色彩,不掺杂白色或者黑色,则被称为纯色。在纯色中加入不同明度的无彩色,会出现不同的纯度,如图2-15所示。
图2-15 不同纯度的红色
色彩的纯度决定了色彩的鲜艳纯度。纯度越高的色彩,其图像的效果给人的感觉越艳丽,视觉冲击力和刺激力就越强;相反,色彩的纯度越低,画面的灰暗程度就越明显,其产生的画面效果就越柔和,甚至是平淡。
因此,在网店装修的配色过程中,要把握好色彩的纯度运用,才能营造出不同的视觉画面,让色彩的视觉效果与店铺的风格一致。如图2-16所示,为低纯度和高纯度配色商品摆放效果。
图2-16 不同纯度对比配色商品摆放
2.1.3 色调奠定主旋律
在大自然中,我们经常见到这样一种现象:不同颜色的物体或被笼罩在一片金色的阳光之中,或被笼罩在一片轻纱薄雾似的、淡蓝色的月色之中;或被秋天迷人的金黄色所笼罩;或被统一在冬季银白色的世界之中。这种在不同颜色的物体上,笼罩着某一种色彩,使不同颜色的物体都带有同一色彩倾向,这样的色彩现象就是色调。
色调是指网店页面中画面色彩的总体倾向,是大方向的色彩效果。在网店装修的过程中,往往会使用多种颜色来表现形式多样的画面效果,但总体都会持有一种倾向,是偏黄或偏绿,是偏冷或偏暖等。这种颜色上的倾向就是画面给人的总体印象,被称为色调,如图2-17所示。
图2-17 不同色调的店铺装修效果
色调是色彩运用中的主旋律,是构成网店装修画面的整体色彩倾向,也可以称为“色彩的基调”。画面中的色调不仅仅是指单一的色彩效果,还是色彩与色彩直接相互关系中所体现的总体特征,是色彩组合的多样、统一中呈现出的色彩倾向。
1.色调色相的倾向
色相是决定色调最基本的因素,对色调起着重要的作用。色调的变化主要取决于画面中设计元素本身色相的变化。例如,某个网店呈现为红色调、绿色调或黄色调等,其指的就是注册画面设计元素的固有色相,就是这些占据画面主导地位的颜色决定了画面的色调倾向,如图2-18所示。抱枕网店装修画面中使用了大面积的绿色调。绿色作为一种中立颜色,代表生命、生机,有自然气息,符合该商品的主题特征。
图2-18 色调色相的倾向
图2-18 色调色相的倾向(续)
2.色调明度的倾向
当构成画面的基本色调确定之后,接下来的色彩明度变化也会对画面造成极大的影响。画面明亮或者暗淡,其实就是明度的变化赋予画面的不同明暗倾向。因此,在对一个网店装修的画面进行构思设计时,采用不同的明度的色彩能够创造出丰富的色调变化,如图2-19所示。
图2-19色调明度的倾向
专家指点
在店铺的装修画面中使用大面积的低明度色彩时,浓重、浑厚的色彩会给人深沉、凝重的感觉,并表现出具有深远寓意的画面效果。
3.色调纯度的倾向
在色彩的三大基本属性中,纯度同样是决定色调不可或缺的因素。不同纯度的色彩所赋予的画面感觉也不同。我们通常所指的画面鲜艳度或昏暗均是由色彩的纯度所决定的。
在网店装修中,色调纯度的倾向,一般会根据商品具体的色彩来确认。不过,就色彩的纯度倾向而言,高纯度色调和低纯度色调都能赋予画面极大的反差,给顾客带来不同的视觉印象,如图2-20所示。
图2-20 色调纯度的倾向