【色彩搭配篇】电商设计配色之红色的妙用！一篇搞定红色配色问题！

hello，大家好我是亿洋
最近想到要出一套配色的系列文章，通过由浅入深的讲解，带大家掌握色彩搭配的能力和一些小技巧，同时能够应用到我们的电商设计当中，发挥出最大的设计价值，如果大家对此类教程感兴趣的话，后面会持续更新，组成一套电商色彩搭配的教程，可以供大家反复的学习。
OK，废话不多说，直接开始吧。

前言：
“色彩搭配”是指对色彩进行搭配，可以取得更好的视觉效果，这也是我们每一位电商设计师必备的技能之一，在电商当中所呈现出来的每一张图都由色彩搭配理论基础所组成，所以颜色是我们设计当中很重要的一个环节。
今天我们来聊一下“红色（RED）”
下面我们具体看看生活当中他都应用到了我们现实世界的那些事物上。
首先我们看一些红色的案例：
太阳

国旗

婚庆

建筑物

食物

爱情

女性

以上就是我们日常生活当中对于红色的认知，也是目前客观存在的事实事物，都是由红色来作为表达和呈现的。
Ok，我们来看一下第一个问题

首先红色代表着吉祥、喜庆、诱惑、热烈，火热、女性、幸福、温暖、爱情、食欲、豪放、斗志、革命、轰轰烈烈、激情澎湃等，这些都是红色的特性。
其次红色对应到PS当中是如何呈现的呢？我们一起看下这张图：

H代表：色相 S代表：饱和度 B代表：明度
当H不变的情况下也就是色相不变都是红色系的前提下，在当前拾色器当中选择任何区域的颜色都是属于红色范畴内的，只不过对应的明度和饱和度不同而已（最左侧黑白灰除外）
那么第二个问题来了

我们先看一下下面这个案例：

美国数字营销公司曾做过这样一件事，它做了两个内容、排版完全一样的测试页面，唯一不同的就是引导按钮的颜色，一个是红色，一个是绿色。这用来测试不同颜色对用户点击转化率的影响，结果发现在超过2000人次的样本测试中，红色按钮的点击率比绿色按钮高出了21%，为什么会这样呢？在用户的视觉感觉中，红色会更加突出，更容易让他们采取行动，像红色、橙色和黄色这样的暖色调，它们充满活力，令人振奋，让人更有购买欲望，这样的色调符合电商平台想要传递给消费者“买买买”的心里暗示，才能占据消费者心智。
那么红色在设计当中都扮演了哪些角色，起到了哪些作用呢?我们还是通过一些案例去分析理解，莱斯够~
1.电商大促活动官方性质的双11，双12，618等大型的促销活动。

2.喜庆节日比如店铺周年庆，中国的春节，国庆节，中秋节，情人节等。

3.突出重要信息通过用红色作衬托和文字颜色突出主要信息和产品。

4.搭配产品突出品牌调性根据产品本身的红颜色，搭配上红色作为底色，更好的连接了产品和品牌，突出产品特性的表达。

通过上面的4个大方向展示，我们已经了解了红色在电商网页设计当中所呈现的方式，如果红色用的好视觉效果肯定没问题，但是如果用的不好的话，就会导致色彩搭配出现问题，整体视觉效果直接垮掉……如果颜色用的太亮就会导致画面刺眼让消费者观看产生不适感，如果颜色太暗就会有点脏兮兮的感觉，让人很难再继续看下去，我记得我刚开始做电商美工的时候，基本上淘宝随处可见都是大红风格，亮瞎双眼……
那么我们应该如何处理好红色在画面当中的效果呢？平衡这种颜色在画面当中的关系呢？

首先我们要知道一点，配色绝对不是固定的方程式，它是没办法让你直接套用的，但是色彩搭配也是基于一定的理论基础之上的，对于颜色的选用，我建议画面当中颜色一定不要超过3种，控制在3种以内会更好把控整体效果，在了解了颜色基本介绍了应用范围之后我们如何去实际应用好它呢？那这里就涉及到了色彩搭配问题了。

下面我们通过几个配色小技巧来了解一下红色如何更好的跟其他颜色搭配，呈现出最合适的视觉效果吧。
1.单色上面我们说到了拾色器当中红色的选取范围，通过HSB来控制颜色的色相，明度，饱和度，在色相红色不变的情况下，通过调整明度和饱和度来控制颜色的变化。

由上图操作之后我们可以得出结论：饱和度越低，颜色就越柔和；明度越低，颜色就越暗，而饱和度与明度同时降低，颜色就越灰。（如果看总结依旧不理解，直接打开PS分别滑动看看你就清楚了）
按照我们得出的结论来看一个案例：

我们看上面这张年货节的海报图，虽然第一眼看上去非常的热闹喜庆，氛围很到位，但是仔细去看发现红色的饱和度有点过高，一些红色的部分已经爆掉了，而且这种高饱和度的画面让产品和品牌感看上去很廉价，产品失去了细节质感很差，画面也非常的刺眼，长时间观看会导致视觉疲劳，会使消费者不会停留太长时间就会关闭掉页面同时对于产品品牌感传递有所降低。
那么我们根据上面的理论，直接去调整他的明度和饱和度即可（也就是拾色器上面的S值和B值）由于发现图片饱和度和明度过高，我们降低一些明度和饱和度看下效果：

是不是相对于之前的刺眼效果减弱了很多，但是也保留了红色带来的节日氛围，我们通过调整红色的明度和饱和度，最终让画面达到一个最合适最平衡的状态，让画面看上去更加舒服自然，同时可以突出海报图上的产品质感，让产品和整体有了一个更好的搭配效果。
2.双色我们通过色环或者拾色器当中去选择色相跨度相对较小的颜色作为渐变色，30°左右颜色选取就可以了，跨度太大对于新手来说把控不了，这样做是最合适也是最简单的做法。

3.多色上面2种红色的调色方法属于比较基础一些的，只要了解了理论之后上手找找感觉都可以达到很舒服的颜色搭配效果，如果颜色加到了3种呢，我们如何去更好的搭配颜色呢？我们一起看下面这个案例：

我们看到这张海报图的主色调是红色，增加了2个辅助色，一个是黄色一个绿色作为点缀色，为什么这里用了3种颜色甚至更多他看上去依旧还是不乱还是很舒服呢？主要原因就是红色作为主色调在整张海报当中占比很大，辅助色只是局部点缀出现，是在一个可控范围之内，同时黄色和绿色的选用都是都属于红色的邻近色，过度很柔和自然所以画面不会显得非常突兀。

所以在画面当中选择3种颜色的时候，我们需要让红色作为主色调并占据大面积出现，其他颜色也要遵循色彩搭配理论进行选取，选择邻近色或互补色作为搭配，不要出现很强烈的大面积对比色即可。
这里顺便说一下，有时候由于产品的原因或者其他因素导致，如使用红色必须要用到对比色或者互补色的时候，这里有一个小技巧就是通过渐变色或者在中间加一些灰白黑颜色作为调剂色，让画面缓和一些，不至于显得冲突感那么强烈，当然这个色彩比例一定要掌控好，主色调红色一定要是画面的最大比例

实操案例：
根据上面红色色彩搭配原理和一些技巧我们进行一个简单的实操案例，产品选用红色，主题为新品发布，主要目的烘托新品发售的氛围同时突出品牌。

背景可以选择产品本身的颜色带一点渐变色，让整理有一个统一协调的效果，点缀色用黄色来突出产品和文案，由光束贯穿整张画面，并连接文案和产品，起到一个引导的作用，产品周边的光效目的突出产品质感和呼应背景的光线，达到整理画面协调统一的效果。
总结红色作为电商当中使用率很高的一种颜色，如果使用得当会有很好的烘托氛围的效果，其次可以突出画面当中想要重点说明的信息，这也是红色在电商当中最主要的2个作用。
无论是单色，双色，多色的色彩搭配，一定要遵循基本的理论来搭配颜色，这样不会出大错误，视觉效果也不会差太多，对于多色，我需要强调一点的是，切记颜色不要超过3种，无论是电商还是平面甚至有UI设计，都需要遵守这个原则，当然这里说的3种颜色指的色相。

一个好的配色方案一定是根据需求而定的，需求是要突出品牌感还是烘托氛围或者是强烈的促销效果，这些都是要考虑进去的，对应的红色表达形式和色彩搭配也是不同的。
在商业设计上，个人的颜色喜欢并不是很重要，当没有颜色限制的时候，你可以建立自己的个人颜色风格，当服务于商业的时候颜色要随着品牌的商业性去调整，色感这件事我觉得完全可以通过训练来提升，首先眼界要打开，再去谈动手能力的提升。
OK，这一期红色篇到这里就结束了！
希望这篇文章能够对你有所帮助，如果你是新手小白或者对于色彩搭配还存在很多疑惑的地方，请你收藏这篇文章方便以后反复阅读查看，至少要多看几遍才能真正了解红色在电商设计当中的应用效果。
如果你觉得这边文章对你很有帮助，我希望你可以分享给你的朋友或者同事，让更多的人可以有所收获，真正解决配色的问题，当然大家的点赞，转发，留言也决定了我接下来其他颜色的讲解，如果大家对此类教程很感兴趣，请不要吝啬你的小手，行动起来让我看到，如果反响不错我会继续更新色彩搭配的系统教程，争取可以把每一个颜色在电商设计当中的应用都讲解到，如果大家反响一般的话就先暂时停止更新这个系列，毕竟这种干货教程非常的费时间……
如果你喜欢此类教程文章，请点赞+在看+转发，3连之后必有干货！
好了，就到这里吧，我们有缘下期色彩搭配见吧！