咳咳，今天想聊一聊作为背景的大图，如何能有效吸引眼球，提高转化率。
在网站设计中利用大图当背景，早已经不是新趋势了。无论是作为焦点图，或是作为博客文章链接的背景。
根据Netflix科技博客，如果不能在90秒内成功吸引用户，用户就会失去兴趣并转而进行其他活动（Netflix）。所以可以想象，当用户，尤其是目标用户打开网站首页，或是相关的活动落地页之后，动了动他的小眼睛（也可能是水汪汪的大眼睛，用户都是上帝，么么哒），没看到能吸引他眼球的东西，他就会关掉，继续看他上次没看完的二次元动漫去了。
那么什么样的图是能有效吸引眼球的呢？很幸运的是Netlix对此进行了多项长期的用户研究，我等吃瓜群众只要拜读结果就可以了~
首先要明白的一点是，不同的图，对于用户的影响确实是不同的。比如下面表格中就是一个例子，首先要明确的是单从影片名称 the Short Game很难理解这部电影整体要表达的意思。
那么在对用户分组后，Netflix设计团队用不同的封面图对不同组用户进行了测试，结果如下，使用第二张图的时候用户反馈是最好的（这个反馈中包括了很多复杂的指标，如用户浏览时的点击率，点击后的观看时间等等，具体就不细说了）。
Netflix单项目多图A/B test结果
那么具体为什么这张图给人的感觉更好呢？这个也在之后统一讲解吧。先来看看接下来的一项调查结果。
在对于同一个产品的多个版本的图片进行测试后，发现下图中标记了向上箭头的几张图效果更好。
Netflix 图片效果追踪测试结果
Netflix 图片效果追踪测试结果
那么这些图又是为啥更吸引用户注意呢？以及什么样的图能更吸引用户呢？我认为，是酱紫滴：
神奇的人脸
相信很多很多的设计心理学书上都会说：“人脸是个神奇的东西，一张脸胜千言，人的大脑对人脸的表情有特殊的处理方式云云...”，这是有道理的，就如经典的《设计师要懂心理学》中讲到的，人的大脑皮层有一处专门处理脸部的区域，可以快速识别并引起特定情绪。
因此，我们会看到，很多提供比较抽象服务的网站（如学校，面对企业的服务）会用一些看起来像目标客户的人的大头照，给用户一种暗示，用我们的产品的人都很满意，用人脸的表情有效的调动用户的共鸣。
因此我们就能看到，在Netflix后面的多图研究中，为啥这几张图转化率更高，他们有啥特点呢？
当然就是人脸（龙脸）比较大啦，而后面这部剧更吊，有大人脸，还有两个，还有互动！
一些案例
（还是美女好办事）
当然有的时候也需要一些人性的诱（se）惑（you）
看到这里大家也发现了，首页焦点图很大，人占得比例相对可以小一些，因为用户是能清楚看到人物的表情的。而像之前的一些小图，虽然有的图里面也有人，但是特别小，很难看清人脸的表情，因此效果不佳。
另外，“人会不自觉地往其他人眼睛看到的地方看去”。因此在适当的时候，可以利用一些小小的技巧，引起人们对商品的关注（案例来源Conversionxl）。
一些案例
图中模特向品牌logo方向看去
所以当我们把一个banner稍微调整一下，就会发现，结构全无。。。。
修改前
鲜艳的颜色
颜色的搭配应该要综合来看，并且与下面提到的设计原理有所结合。从Netflix的几张图来看，一方面要有亮色，可能是一些鲜艳的颜色，也可能是火焰，亮光的效果，并且有亮就要有暗，才能互相对比，增加图片的空间感和视觉冲击力，让图片更生动。
总体来说，利用多种方式制造对比，是比较好的选择，具体方法可以分为：
1. 利用色温进行对比
（哦，我的包包好适合遮太阳）
大家都知道颜色可以分为冷，暖，中性色调，不同温度的色调的对比，利用冷色调衬托出暖色调，可以使暖色调更加醒目。
2. 利用颜色浓度进行对比
这样就是暗和亮的对比，亮色是重点，大块的色块则是暗色，给图片一种层次感和空间感，反而更能突出高亮的颜色，吸引人的眼球。
但是这些都缺不了的就是需要一些鲜艳的颜色，也就是说，是明度和纯度都相对高一些的颜色，这样才能保证他们在众多的banner或背景图中脱颖而出。
这些更适用于多篇幅的banner图，而对于首页焦点图，似乎不需要讲究那么多，因为干扰因素较少。
再插播一条小知识，BBC的纪录片研究发现，红色，相对于蓝色，更容易引起人们的关注和注意，因此在足球比赛中，红色球衣的球队的胜率更高，因为裁判在裁决的时候会不自觉地倾向于红色球队。裁判都会倾向他们，用户当然也会拉~因此我们会看到很多电商网站都用了大面积的红色，或是橙色等相近的暖色调。
平面设计原理的应用
仔细看看一些创意型的网站，可能并不符合前面提到的几点，毕竟创意型的网站，面对的人群也更有想法，他们希望看到的是你的创意。但是
1. 空间感
也可以理解为我们说的“负空间”，即negative space。在图片中，为前景的主题营造一种空间感，可以是增加前景和背景的对比，如前景清晰度更高，更鲜艳，而背景十分平淡。或是突出主体，背景则大量留白。或是利用阴影，重叠等效果制造空间立体感。
一些案例
可惜Carousel已经下线了，心疼Dropbox
2. 三分构图
这不是一个新鲜的理论了，可以看到大部分的banner都是如此构图，因此我们也不可能脱离这种方法。三分割法，即为rule of thirds，是将场景用两条竖线和两条横线分割，就如同是书写中文的“井”字。这样就可以得到4个交叉点，然后再将需要表现的重点放置在4个交叉点中的一个即可。
这样的构图更生动，因此更能营造出一个丰富的画面。
一些案例
当然，要强调的是，焦点图也好，背景图或banner也好，都应该根据所要放置的位置以及风格定位做相应的设计。在不同的浏览环境中，更恰当的处理情况更能让你的背景图的转化率有所提升。
版权：
Netflix的图均来自Netflix，图侵删（虽然估计Netflix也不care）
其他图来源于网络，图侵删
网友评论