如何设计吸引人眼球的背景图

咳咳,今天想聊一聊作为背景的大图,如何能有效吸引眼球,提高转化率。

在网站设计中利用大图当背景,早已经不是新趋势了。无论是作为焦点图,或是作为博客文章链接的背景。

根据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)

其他图来源于网络,图侵删

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 冯唐的小说很早之前就看过,电视剧也抽空看了几集,剧情故事且不说,仅仅演员的表演就很有让人看下去的欲望,真不错,国产...
    Stdada阅读 352评论 0 0
  • 堆的定义 概念 若将和此序列对应的一维数组(即以一维数组作此序列的存储结构)看成是一个完全二叉树,则堆的含义表明,...
    AceKitty阅读 958评论 0 1
  • 1、爱·回家 집으로...(2002) 为了方便找工作,妈领着7岁的相宇去乡下的外婆家,想把他暂时留在那里。外婆年...
    简书视觉馆小飞侠阅读 4,140评论 9 146