来源:网络 作者:佚名
注意事项：这种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到了嘛？）：
1/点缀作用（渲染氛围用）
2/突出主体（梳理信息层级）
3/平衡画面（整体视觉协调）
4延续风格（涉及到风格统一调性的时候）
5/塑造画面气质（传递恰当的情绪给用户）
就以上五种作用，我在下面会分别举例说明：
1／点缀作用（渲染氛围用）
当你做了一个冷色调的页面拿给你的主管或需求人看，他说画面太冷清的时候，而你又懒得改颜色改形式等等，总之你非常懒不想动，那么不妨试下下面这样周围点缀些暖色的方式（色彩依附的形状和大小面积你自己斟酌咯～只需要记住点缀物是配角，他是烘托气氛用的，永远不要抢了主角的风头，要不然导演不给你这配角安排角色了，怕不怕？）
当你明明做了一个自认为非常热闹促销的页面后，你们主管或者需求人仍然觉得画面太冷清不够热闹而你又不想大改动的时候怎么办？道理同上，Give him or her some color to see see（迷之微笑～）。
2／突出主体（梳理信息层级）
这个通过色彩对比来突出信息层级的作用其实我在前面的知识点里已经讲了哦，翻回到前面去看下吧，我就不继续说一遍了。
3／平衡画面（渐变色使得整体视觉协调）
讲这个知识点的之前，我觉得又有必要插几句嘴了，先要了解一下面几个概念：
邻接色相对比：色相环上相邻的二至三色对比，色相距离大约30度左右，为弱对比类型
类似色对比：色相对比距离约60度左右，为较弱对比类型
中差色对比：色相对比距离约90度左右，为中对比类型
对比色对比：色相对比距离约120度左右，为强对比类型
补色对比：色相对比距离180度，为极端对比类型
