第12章　玩转电商设计中常用的色彩搭配

12.1　玩转电商设计色彩搭配之红色

从事电商设计的人应该都知道，红色算得上是国内电商设计中运用得最为广泛的一种颜色，即便是非电商从业者，网购大家都不陌生，我们看一些大众熟悉的电商平台的界面设计就知道，他们的品牌色其实也多是红色系的或暖色系的，如下图所示。

但其实很多人对红色该在什么时候用，或者该怎么用依然缺乏了解，红色用得好则是皆大欢喜，用得不好要么会显得俗气和不干净，要么会显得页面很压抑很腻。

再一个红色寓意红红火火嘛，下面我们来讲一下红色在电商页面设计中的运用。

12.1.1　红色的释义

从性格色彩的层面来说：红色代表热情、热闹、刺激、欲望、奔放、喜庆、血腥等，如下图所示。

从色相、明度、饱和度的层面来说：红色也分为很多种，比如正红、深红、品红、粉红、酒红、绯红、洋红等，如下图所示。

从作用的层面来说：红色代表危险警示／突出强调／错误提醒／性刺激／公布喜讯等等。

12.1.2　红色在电商设计中的运用

正因为红色有以上的感官刺激作用，所以它常运用于一些要体现喜庆、热闹、激发别人欲望或者要体现恐怖情绪的电商或海报设计中，同时红色也常用来作为点缀色出现，以强调某个重要信息。

1．喜庆节日

红色代表喜庆热闹，所以常用在中国的各种喜庆的节日促销电商页面中，比如国庆、元旦、春节、周年庆等重大节日，基本都是以红色作为大背景主色，如左下图所示。

国外的喜庆节日圣诞节当然也是少不了红色的，而且还是红配绿（不过每年都是红配绿也会视觉疲劳，所以很多设计师会通过加入一些其他颜色，或改变一下它们的明度／饱和度／纯度，或采用不同的质感纹理和表现手法给用户一些新鲜感，比如手绘／合成／手工／三维建模之类的表现形式），如右下图所示。

2．公布喜讯

一些专门用来发布喜庆消息的专题页也最爱用红色，比如热烈庆祝谁上市了、谁获奖了、谁结婚了、谁喜得贵子了等等（不过结婚之类的也有很多人用浪漫紫色或萝莉粉色，获奖之类的专题页，如果想要时尚震撼一点的话，很多人会用黑金的色彩搭配）。

3．卖场促销

商场做促销活动／电商平台或店铺做大促的时候，比如双十一、双12/815/618等，如左下图所示。

4．体现时尚个性

将红色运用在毛笔笔触、撕纸效果上，会给人一种潇洒个性的感觉，当然也要控制好度，毕竟过了就会引起恐怖心理了，如右下图所示。

5．突出强调某个重要信息

红色常用来作为辅助色或点缀色，用来突出强调某个重要信息，比如突出强调利益点／购买按钮等信息。

6．如果产品本身就是红色时

其实任何类目任何产品都有红色系列，比如家电数码、服饰鞋包、美妆护肤等，如果干脆将背景也弄成红色与产品融为一体，会带来非常强的视觉效果，而且不会觉得腻。

12.1.3　与红色有关的常用色彩搭配

红色是很热烈的颜色，是暖色，也是一种百搭色，但并不是每个人都玩得好它，可它偏偏又是电商设计中用得最为频繁的一种颜色，接下来给大家列举一些常用的优秀的红色与其他颜色的搭配，如下图所示。

如下图所示，左边是大面积的红色搭配少许相近色或邻近色显得很高档耐看；右边是大面积的大红色＋玫红色搭配色彩协调，再点缀少许绿色和白色，简洁又俏皮耐看。

当红色与这种偏灰的渐变色搭配时，画面立马变得柔和清新脱俗起来。

也只有五彩斑斓的颜色才能压得住红色了。

红色与蓝白黑灰永远都是经典搭配，既可以制造一种复古的感觉，也能给人一种冷静与激情相碰撞的感觉。

红色与青色或与绿色搭配，再加上一些俏皮的构图或点缀，会显得画面非常干净清爽。

红白黑搭配，时尚又经典，不过要注意红色的比例。

红绿配米黄色，圣诞节常用配色，不过也会显得有一点点年代感或复古的感觉，绝对不是现代时尚类型的配色。

在大面积的浅灰色里，只需要点缀少许红色，就可以制造出一种静谧又不显单调的感觉了。

在一些比较俏皮的手绘画面中，红色既可以作为大面积背景色来包容五彩斑斓的多彩色，如下边左图所示；也可以以非常小面积的点缀色出现，用来突出强调某个重要信息，比如价格／利益点／特殊说明文字之类的。

无论你的背景是简单还是复杂，当红色块面积足够大时，它依然会成为焦点。

大红色及深色的结合搭配荧光色会有一种非常诡异个性的感觉。

番茄炒鸡蛋的红黄搭配容易给人一种复古温暖的感觉，但为了画面不至于太腻歪，最好搭配一点冷色或暗色比较好。

当红色运用在一些形状规则排列上时是很容易制造出简洁、时尚感的。

12.1.4　红色运用在不同的质感纹理或形状环境

虽然同样是红色，但是当它运用于不同的形式载体／纹理材质／周围情境时，所传递的感受是不一样的。

红色的带棱角形状vs红色的圆形，哪一个更硬朗，视觉上更咄咄逼人？

红色的液体vs红色的烟雾，哪一个更仙？其实红色液体处理不好的话很容易变成恐怖画面……不过如果能处理得好的话，液体和烟雾都能作为氛围渲染元素，使得产品看上去更唯美或更酷炫。

红色的丝绸或丝带vs红色的块状物体，哪一个更女性化？所以丝带或丝绸常用来点缀一些女性化的产品，而色块点缀则更适用于科技数码产品。

将红色运用于空间立体感的环境中vs运用于扁平的环境中，哪一个更有代入感？这就是3D和2D的区别。

红色周围是无彩色vs周围是多彩色，谁更突出？谁更有氛围？

对比之后当然是在无彩色中比较突出，而在多彩环境下比较有氛围（但是也显得杂乱了）。

那么它们具体运用在电商设计中是什么样的情况呢？我找了一些还不错的红色页面给大家看下：

12.1.5　红色的使用禁忌和注意事项

①　红色作为暖色运用在页面中的时候，画面中切勿全都是暖色系搭配，适当加入一些冷色或无彩色（黑白灰）点缀可以缓解视觉疲劳。

②　无论何种颜色，它在整个画面中的占比都是根据设计需要决定的，而不是随意而为之，你是要弱化某一个信息还是突出某一个信息，都可以根据选择颜色和控制它的比例大小来实现，讲直白点就是要懂得运用对比和衬托的手法。

③　切勿大面积使用太过艳丽或太过暗沉的红色，比如下面这个415京东全球购的页面，原图是这样的：

这张设计稿如果是用很艳丽的红色，如左下图所示，是不是很刺眼很不舒服无法直视了啊？如果用的是很暗淡的红色，如右下图所示，是不是看起来就很脏毫无继续看的欲望了啊？

所以有的人可以把红色用得很高档，但也有很多人红色用不好，要么太刺眼了，要么太暗太脏显得廉价，其实很大部分原因就是因为明度／饱和度／纯度没有把握好了。

④　电商设计中其实很少会用到纯度为百分百的红色，因为会显得很腻很刺眼，这时候不妨将红色向玫红色偏一点，或向橙色偏一点，或者再偏白一点偏暗一点，总之可以自己去尝试，按需选择合适的红色就好，如下图绿色框所示区域：

⑤　当红色不得不与对比色或互补色搭配使用时，最好是能加入一些调和色彩（比如黑白灰），就像右面的百事可乐的LOGO的红白蓝搭配，这里的白色就起到了调和的作用了。

以上我们关于电商设计中使用最为频繁的红色的配色技巧和注意事项就给大家就讲到这里啦，大家学到了吗？马上行动起来运用到工作项目当中去吧！

12.2　玩转电商设计色彩搭配之黑白灰

本节我们来讲一下热闹促销型的电商设计最忌讳的颜色“黑色”在电商设计中的运用。

12.2.1　黑色的释义

先看来自百度百科的解释：黑色可以定义为没有任何可见光进入视觉范围，和白色正相反，白色是所有可见光光谱内的光都同时进入视觉范围内。颜料如果吸收光谱内的所有可见光，不反射任何颜色的光，人眼的感觉就是黑色的。如果将三原色的颜料以恰当的比例混合，使其反射的色光降到最低，人眼也会感觉为黑色。所以黑色既可以是缺少光造成的（漆黑的夜晚），也可以是所有的色光被吸收造成的（黑色的瞳孔）。

而我自己的理解是：黑色它不仅是一种百搭色，它很特殊的一点就在于，你会发现几乎所有的书本报纸杂志正文部分以及你平时的书写基本都是黑色的而不是其他颜色的，中国的水墨画毛笔字也基本都是黑色的，所以黑色会给人一种有文化底蕴的感觉。

同时它在气质上还给人一种坚硬、神秘、端庄、静寂的感觉，但在一些文化习俗上黑色又常常意味着不吉利，在功能上比如在服装设计中黑色又往往能起到一种视觉上显瘦的效果。

我将以上这些都统称为黑色的属性。

12.2.2　黑色占比多少与活动定位之间的关系

只要一提到电商页面设计，我相信大多数人在脑海中闪现的应该是彩色的页面而不是黑色的，除非品类需要或产品本身就是黑色，大部分老板也不会同意你把一个电商页面设计成黑色（一些开明的老板除外），但黑色真的这么招人忌讳吗？黑色就真的不太适合应用于电商设计中吗？其实主要是你没有弄懂黑色占比与活动定位之间的关系罢了。

我用两张我在飞机上拍摄的照片举例:

大家看完后是什么感觉呢？左边的天空是不是感觉很敞亮阳光看着就很热？而右边的黑夜感觉很宁静神秘遥不可及？

我们都知道晴朗的白天和静谧的夜晚是对立的，彩色跟黑色是对立的，它们给人传递的感受也是对立的，类比下来，就好比下面这两种页面，它们所传递的定位也是截然对立的：前者活泼热闹促销，后者冷酷高端。

这种定位规律在一些产品包装上也适用，比如下图：

百雀羚水能量焕耀护肤套装在天猫上的价格是488元（原价），价格是比较亲民的，所以在包装设计以及页面设计方面也是比较亲民的，而右边的日本顶级护肤品牌POLA套装则要上万元一套，所以在包装设计和页面设计用色方面都是往简约高端方向走的。

再取一个折中的专题页设计案例，当多彩色vs黑色与多彩颜色相结合的时候，虽然同样很时尚，但是左图更年轻清爽活力，右图因为加入了黑色的缘故显得更炫酷大牌。

所以我们不妨可以这么理解：一个页面活泼与否，定位如何，其实关键就在于黑色或暗色在这个页面中的占比有多少。

黑色占比越多，这个页面的黑色属性也就越多，所以会体现出诸如神秘／刚强／高端／高冷甚至是恐怖等气质，让人产生距离感，常用于一些想要体现高端产品定位印象的页面或产品设计中，任何类目都适用：

而彩色占比越多，整个画面就越活泼热闹，仿佛是有什么活动表演或者派对，给人一种有亲和力人人都买得起的感觉，常用于一些要体现活泼年轻定位的产品或页面设计中，同样也适用于任何类目，如左下图所示，而白色占比越多，整个页面就越干净、神圣、明亮，给人的感觉就会越空旷、宁静、透气，如右下图所示。

为了方便大家理解，实际上以上我举的例子都是比较极端的，毕竟非常高端的产品是少数，大多数以及大众目前能接受的都是色彩占比不那么极端的，适用于大众的。

同时我们也要注意到一点，一个页面会体现出何种定位调性，除了色彩占比有很大的影响外，元素的形状、密度、纹理、创意风格等也会产生一些影响。

比如这三个页面，同样是黄黑搭配，但因为色彩占比不同、形式不同、风格不同，它们的调性明显是不一样的：左一潮流时尚，左二搞怪活力，左三酷黑简洁。

12.2.3　黑色电商页面的常用色彩搭配技巧

前面我们已经讲过，虽然元素的形状、密度、纹理、创意风格等会对活动定位产生影响，但是对页面是热闹促销还是高冷大牌起决定作用的其实还是黑色或暗色的占比是多少：暗色或黑色占比越多页面越冷酷高端，彩色占比越多页面就越热闹促销，而白色的占比多少则决定了页面的透气程度，页面中白色越多越明亮，人就会感觉越空旷透气。

另外，既然是电商页面，它存在的主要目的就是卖货和展示商品用的，而货是要卖给不同的人群的，所以我们针对不同的人群要给他们传递的感受就会不一样，或热血沸腾，或性冷淡，或舒心，或故意让你难受，但不管怎样，最终出来的页面情绪肯定是要传递到位的，一般有以下几个规则可要注意。

1．黑色常作为主色或背景色

一些想走高端时尚路线以及科技大牌的页面往往比较喜欢用大面积的黑色来塑造一种距离感，也就是很多人常说的“有格调”，但这里要注意的是，这种页面往往会对产品的品质或光影细节有非常高的要求，因为对比太强烈的缘故，视觉太聚焦了，就像全世界的眼睛都在暗中盯着你看，你稍微有一点瑕疵都会暴露无遗。

2．黑色常与这些颜色搭配使用

而黑色作为一种百搭色，在电商设计中最常搭配的除了白色、金色、大红色以外，还有各种荧光色，比如亮黄、亮绿、亮粉、骚紫以及五颜六色，这些颜色与黑色搭配会形成强烈的色彩对比效果，从而突出想要表达的信息。

举例：黑白配

举例：黑金搭配

举例：红黑配

举例：黄黑配

请参考P222页图。

3．有黑色的地方就该有亮色

一张有感染力的照片往往少不了光的运用，而有光的地方就会有阴影，一张打动人心的页面设计也有同样的规律在里面：页面中有暗就会有明，这样才不会显得过于压抑，画面才更加耐看。

举例：几乎所有的美国大片或者科技大片的海报都喜欢用这个套路:

举例：黑色可以包容任意亮色（荧光色）

还有一些比较男性化的或江湖气息的游戏页面尤其喜欢用黑色或暗色系页面，有一些数码科技类产品的电商页面也可以试试，总之要想体现出很man的感觉，黑色或暗色是必不可少的，如下图所示。

12.2.4　与黑色有关的节日或事件

提到电商设计，当然就少不了各种电商节，其他的电商节我就不说啦，与“黑色”有关的能作为噱头活动去玩的节日或事件有哪些呢？比如著名的黑色星期五、万圣节、4月14日黑色情人节、暗黑电商等。

1．黑色星期五

关键词：国际大牌、促销、折扣、黑色等。

百度百科对黑色星期五的释义如下：

美国圣诞节大采购一般是从感恩节之后开始的。感恩节是每年11月的第四个星期四。因此它的第二天，也就是美国人大采购的第一天。在这一天，美国的商场都会推出大量的打折和优惠活动，以在年底进行最后一次大规模的促销。因为美国的商场一般以红笔记录赤字，以黑笔记录盈利，而感恩节后的这个星期五人们疯狂的抢购使得商场利润大增，因此被商家们称作黑色星期五。商家期望通过以这一天开始的圣诞大采购为这一年获得最多的盈利。

黑色星期五是从美国漂洋过海来到中国的一种电商促销活动，几乎每个大一点的电商平台都会掺合一下，尤其是跨境电商尤为重视，如下图所示。

其实不管是黑色星期五还是其他什么节日活动，在电商设计界来说本质是一样的，就是一个卖货的噱头罢了，不过黑色星期五相关的设计其实都会在画面中加入一些黑色相关的元素，或者即便是走热闹促销路线，也是会偏时尚感一些，而不是单纯搞低价促销，毕竟是从国外引入的节日，给人的固有印象就是不能太低端，如下图所示。

2．万圣节

关键词：南瓜／糖果／黑橙搭配／蝙蝠／幽灵／骷髅头等。

它也是很多人喜爱的一种节日，商家运营们当然也不会错过咯～

3．4月14日黑色情人节

关键词：男生／单身狗／促销／情人节等。

我们可以发现一年里面貌似各种颜色的情人节一大堆，无非就是找噱头做活动让你们买买买，我猜商家运营们的逻辑大概就是，反正你是单你的钱也没处花，不如花在我这里买点安慰好了，哈哈哈!

当别人提到“黑色”的时候，你会想到什么呢？也许会想到黑夜／黑头发／乌鸦／神秘／阴森／距离／严肃／沉寂等等，总之它跟阳光／活力这些比较明朗的字眼是几乎挂不上钩的，这也就解释了为什么设计师在喜庆节日／双十一／618等页面设计中几乎不会运用黑色的原因。

但随着我们的购物选择越来越多样化以及人们越来越有自己的主见的缘故，人们开始想要寻求自己的个性和要求，也越来越厌倦千篇一律，这也直接导致了商家们之间的竞争开始变得越来越激烈，也许以前他们随便推出什么产品，即便是页面设计做得很丑都可以卖得很好，但现在却可能无人问津，所以商家以及设计师们都迫切需要找到新的突破点来满足和挖掘不同客户的喜好，而对黑色的合理运用其实就是突破方式之一。

这让我想起了电影《香奈儿》中的一个情节，在那个所有人都追求蕾丝／花里胡哨／雍容复杂的服装设计的年代，可可香奈尔却偏要穿简洁裁剪的男装黑色礼服等带给人一次又一次惊喜，而她在悲痛欲绝的情况下为纪念他的情人鲍勃而设计的一条小黑裙子也成了香奈尔史上最大的成功。