细说电商Banner图片设计之色彩的奥秘

2/信息的层级关系

我们知道一个Banner包含有好几个部分，文案/模特或商品/背景/点缀物，而最终他们组合成为一个Banner，其层级是存在主次之分的，可以分为下面几种情况：

(一)以产品或模特为主角(主要突出产品或模特)

(二)以活动标题为主角

(三)以利益点为主角

而背景和点缀物永远不可能是主角，他们只能是配角，同时在这里颜色不是一个独立的分析要素存在，它应该是伴随着平面的知识点来说，所以这里我也会顺带一点平面方面的知识点，举几个例子：

(一)以产品或模特为主角(主要突出产品或模特 )，我们有三个方向可以去发挥：

(1)让商品(模特)的颜色与背景颜色绝对地区分开来，让它成为天空(画面)中最闪亮的一颗星～也就是我们说的色彩对比，色彩对比又包含三种：明度对比/饱和度对比/色相对比，假设下图中的圆就是商品或模特，举个例子：

我们再去色看一下对比的效果，如下图(去色是我们常用的一种查看信息是否突出的方法，令外还有一种距离观察法查看对比效果，比如你也可以离屏幕站远一点查看，或者人保持不动缩小画布查看)：

这样看，哪个对比效果好些?是不是一目了然了?不过还是要说明一点，明度饱和度里任何一项要素发生改变，其他要素也是跟着改变的，比如说你增加了一个颜色的明度，代表你在这个颜色里增加了白色，那么相对应的这个颜色的纯度饱和度肯定也就下降了，不知道我说这些你们明白了没有?(默默点根烟～惆怅脸～)

喔对了，我还要在这里继续插一句嘴：色彩对比不会单独存在，它的运用永远是依附于下面两种方式存在的(增大商品模特面积或者增加商品模特数量)：

(2)通过留白或者大小对比的方式让商品(模特)体积或面积足够大。

(3)通过一定的摆放规律，让商品(模特)数量足够多，因为数量多了总面积自然也就大了嘛～。

(二)以活动标题为主角

跟上面的道理类似，可以运用增大标题面积或者同时结合色彩对比的方式使标题突出成为主角：

(三)以利益点为主角

道理同上(有时候我们做Banner会直接用利益点作为大标题，这种就会使Banner的低价促销的气息会更浓烈些)

总结来说，但我们讲色彩的时候，其实也是在讲平面构成，当我们在讲色彩三要素(明度/纯度/色相)的其中一项的时候，其实也意味着在同时考虑其他要素，因为色彩不会单独存在，色彩要素也不会单独存在(我重复这么多遍，也是操碎了心呢～～)。

3/是否考量了Banner所投放的环境

当我们讲到环境的时候，往往会讲到外部环境和内部环境，也就是站在全局去考虑问题和站在自我的角度去考虑问题，如果你是要在某平台投放 Banner，那么这个平台对你来说就是大环境，具体到你投放的那一小块Banner位置就是小环境。

(1)从平台设计师的角度出发，她肯定是希望你所有的Banner放在这个平台页面里，整体是融合的，不突兀的 ，比如下面的万件好礼免费送和专属活动这块的小Banner，用不同色相表示不同会场或主题，但是每一个色彩的明度饱和度是相似的，设计形式也一样都有自己的规范，这就给人整体统一协调的感觉：

(2)那从商家的角度出发，商家当然是希望 自家的Banner图是最突出的，最亮眼的，最容易被用户发现的，所以设计师需要把自家的图片设计得让人眼前一亮，脱颖而出，这个又要回到前面如何运用对比去突出某个信息的问题了，不清楚的话可以回头看看上面那个关于信息层级的知识点：

比如，上面这些商品图，我用距离观察法，第一眼就看到了左下角的这个巧克力了，为什么呢?因为周围的图片基本是白底或者比较明亮的颜色，而只有他使用了深色背景，明暗对比之后，一下子就出来了(你也可以举一反三去运用，get到了吗?)

其实无论是商家/企业还是个人，都是需要考虑这种Banner投放的外部环境和内部环境的，除非你是在平台工作的设计师，很多时候我们更多的是需要站在个人利益的角度去考虑问题，我们需要让自己的图片更易被人发现。

所以我们会看到，某8design的各种培训广告(我故意模糊了它们，因为不想打广告～)，永远都是花花绿绿，争相斗艳，但殊不知，当别人都花花绿绿的时候，你不用太花枝招展反而更易突出：

所以我们会想到，设计师在发布自己的设计作品到设计论坛或网站的时候，不妨先去看下周围环境都是怎么样的，再去做自己的展示Banner图，这样有利于使自己的作品得到更多的展现机会，比如下面这个是我昨天在站酷首页截的图，大家是不是跟我一样第一眼就会看到的是那个玫红色的Banner图片?而其他的都只会匆匆带过，因为在这个环境里，玫红色是最突出的一种颜色(事实证明，除去dribble这个词比较知名以外，玫红色封面Banner图的阅读数确实也远超其他的作品，你们get到了嘛?)：