咳咳拄衰，今天想聊一聊作為背景的大圖，如何能有效吸引眼球饵骨，提高轉(zhuǎn)化率翘悉。
在網(wǎng)站設(shè)計(jì)中利用大圖當(dāng)背景，早已經(jīng)不是新趨勢(shì)了居触。無(wú)論是作為焦點(diǎn)圖妖混，或是作為博客文章鏈接的背景。
根據(jù)Netflix科技博客轮洋，如果不能在90秒內(nèi)成功吸引用戶(hù)制市，用戶(hù)就會(huì)失去興趣并轉(zhuǎn)而進(jìn)行其他活動(dòng)（Netflix）。所以可以想象弊予，當(dāng)用戶(hù)祥楣，尤其是目標(biāo)用戶(hù)打開(kāi)網(wǎng)站首頁(yè)，或是相關(guān)的活動(dòng)落地頁(yè)之后汉柒，動(dòng)了動(dòng)他的小眼睛（也可能是水汪汪的大眼睛误褪，用戶(hù)都是上帝，么么噠）碾褂，沒(méi)看到能吸引他眼球的東西兽间，他就會(huì)關(guān)掉，繼續(xù)看他上次沒(méi)看完的二次元?jiǎng)勇チ恕?/p>
那么什么樣的圖是能有效吸引眼球的呢正塌？很幸運(yùn)的是Netlix對(duì)此進(jìn)行了多項(xiàng)長(zhǎng)期的用戶(hù)研究嘀略，我等吃瓜群眾只要拜讀結(jié)果就可以了~
首先要明白的一點(diǎn)是，不同的圖乓诽，對(duì)于用戶(hù)的影響確實(shí)是不同的帜羊。比如下面表格中就是一個(gè)例子，首先要明確的是單從影片名稱(chēng) the Short Game很難理解這部電影整體要表達(dá)的意思问裕。
那么在對(duì)用戶(hù)分組后逮壁，Netflix設(shè)計(jì)團(tuán)隊(duì)用不同的封面圖對(duì)不同組用戶(hù)進(jìn)行了測(cè)試，結(jié)果如下粮宛，使用第二張圖的時(shí)候用戶(hù)反饋是最好的（這個(gè)反饋中包括了很多復(fù)雜的指標(biāo)窥淆，如用戶(hù)瀏覽時(shí)的點(diǎn)擊率，點(diǎn)擊后的觀看時(shí)間等等巍杈，具體就不細(xì)說(shuō)了）忧饭。
那么具體為什么這張圖給人的感覺(jué)更好呢？這個(gè)也在之后統(tǒng)一講解吧筷畦。先來(lái)看看接下來(lái)的一項(xiàng)調(diào)查結(jié)果词裤。
在對(duì)于同一個(gè)產(chǎn)品的多個(gè)版本的圖片進(jìn)行測(cè)試后刺洒，發(fā)現(xiàn)下圖中標(biāo)記了向上箭頭的幾張圖效果更好。
那么這些圖又是為啥更吸引用戶(hù)注意呢吼砂？以及什么樣的圖能更吸引用戶(hù)呢逆航？我認(rèn)為，是醬紫滴：
神奇的人臉
相信很多很多的設(shè)計(jì)心理學(xué)書(shū)上都會(huì)說(shuō)：“人臉是個(gè)神奇的東西渔肩，一張臉勝千言因俐，人的大腦對(duì)人臉的表情有特殊的處理方式云云...”，這是有道理的周偎，就如經(jīng)典的《設(shè)計(jì)師要懂心理學(xué)》中講到的抹剩，人的大腦皮層有一處專(zhuān)門(mén)處理臉部的區(qū)域，可以快速識(shí)別并引起特定情緒蓉坎。
因此澳眷，我們會(huì)看到，很多提供比較抽象服務(wù)的網(wǎng)站（如學(xué)校蛉艾，面對(duì)企業(yè)的服務(wù)）會(huì)用一些看起來(lái)像目標(biāo)客戶(hù)的人的大頭照钳踊，給用戶(hù)一種暗示，用我們的產(chǎn)品的人都很滿(mǎn)意勿侯，用人臉的表情有效的調(diào)動(dòng)用戶(hù)的共鳴箍土。
因此我們就能看到，在Netflix后面的多圖研究中罐监，為啥這幾張圖轉(zhuǎn)化率更高，他們有啥特點(diǎn)呢瞒爬？
當(dāng)然就是人臉（龍臉）比較大啦弓柱，而后面這部劇更吊，有大人臉侧但，還有兩個(gè)矢空，還有互動(dòng)！
一些案例
當(dāng)然有的時(shí)候也需要一些人性的誘（se）惑（you）
看到這里大家也發(fā)現(xiàn)了禀横，首頁(yè)焦點(diǎn)圖很大屁药，人占得比例相對(duì)可以小一些，因?yàn)橛脩?hù)是能清楚看到人物的表情的柏锄。而像之前的一些小圖酿箭，雖然有的圖里面也有人，但是特別小趾娃，很難看清人臉的表情缭嫡，因此效果不佳。
另外抬闷，“人會(huì)不自覺(jué)地往其他人眼睛看到的地方看去”妇蛀。因此在適當(dāng)?shù)臅r(shí)候耕突，可以利用一些小小的技巧，引起人們對(duì)商品的關(guān)注（案例來(lái)源Conversionxl）评架。
一些案例
所以當(dāng)我們把一個(gè)banner稍微調(diào)整一下眷茁，就會(huì)發(fā)現(xiàn)，結(jié)構(gòu)全無(wú)纵诞。上祈。。挣磨。
鮮艷的顏色
顏色的搭配應(yīng)該要綜合來(lái)看雇逞，并且與下面提到的設(shè)計(jì)原理有所結(jié)合。從Netflix的幾張圖來(lái)看茁裙，一方面要有亮色塘砸，可能是一些鮮艷的顏色，也可能是火焰晤锥，亮光的效果掉蔬，并且有亮就要有暗，才能互相對(duì)比矾瘾，增加圖片的空間感和視覺(jué)沖擊力女轿，讓圖片更生動(dòng)。
總體來(lái)說(shuō)壕翩，利用多種方式制造對(duì)比蛉迹，是比較好的選擇，具體方法可以分為：
1. 利用色溫進(jìn)行對(duì)比
大家都知道顏色可以分為冷北救，暖，中性色調(diào)芜抒，不同溫度的色調(diào)的對(duì)比珍策，利用冷色調(diào)襯托出暖色調(diào)，可以使暖色調(diào)更加醒目宅倒。
2. 利用顏色濃度進(jìn)行對(duì)比
這樣就是暗和亮的對(duì)比攘宙，亮色是重點(diǎn)，大塊的色塊則是暗色拐迁，給圖片一種層次感和空間感蹭劈，反而更能突出高亮的顏色，吸引人的眼球线召。
但是這些都缺不了的就是需要一些鮮艷的顏色链方，也就是說(shuō)，是明度和純度都相對(duì)高一些的顏色灶搜，這樣才能保證他們?cè)诒姸嗟腷anner或背景圖中脫穎而出祟蚀。
這些更適用于多篇幅的banner圖工窍，而對(duì)于首頁(yè)焦點(diǎn)圖，似乎不需要講究那么多前酿，因?yàn)楦蓴_因素較少患雏。
再插播一條小知識(shí)，BBC的紀(jì)錄片研究發(fā)現(xiàn)罢维，紅色淹仑，相對(duì)于藍(lán)色，更容易引起人們的關(guān)注和注意肺孵，因此在足球比賽中匀借，紅色球衣的球隊(duì)的勝率更高，因?yàn)椴门性诓脹Q的時(shí)候會(huì)不自覺(jué)地傾向于紅色球隊(duì)平窘。裁判都會(huì)傾向他們吓肋，用戶(hù)當(dāng)然也會(huì)拉~因此我們會(huì)看到很多電商網(wǎng)站都用了大面積的紅色，或是橙色等相近的暖色調(diào)瑰艘。
平面設(shè)計(jì)原理的應(yīng)用
仔細(xì)看看一些創(chuàng)意型的網(wǎng)站是鬼，可能并不符合前面提到的幾點(diǎn)，畢竟創(chuàng)意型的網(wǎng)站紫新，面對(duì)的人群也更有想法均蜜，他們希望看到的是你的創(chuàng)意。但是
1. 空間感
也可以理解為我們說(shuō)的“負(fù)空間”芒率，即negative space囤耳。在圖片中，為前景的主題營(yíng)造一種空間感偶芍，可以是增加前景和背景的對(duì)比紫皇，如前景清晰度更高，更鮮艷腋寨，而背景十分平淡』溃或是突出主體萄窜，背景則大量留白∪鼋埃或是利用陰影查刻，重疊等效果制造空間立體感。
一些案例
2. 三分構(gòu)圖
這不是一個(gè)新鮮的理論了穗泵，可以看到大部分的banner都是如此構(gòu)圖，因此我們也不可能脫離這種方法谜疤。三分割法佃延，即為rule of thirds现诀，是將場(chǎng)景用兩條豎線和兩條橫線分割，就如同是書(shū)寫(xiě)中文的“井”字履肃。這樣就可以得到4個(gè)交叉點(diǎn)仔沿，然后再將需要表現(xiàn)的重點(diǎn)放置在4個(gè)交叉點(diǎn)中的一個(gè)即可。
這樣的構(gòu)圖更生動(dòng)尺棋，因此更能營(yíng)造出一個(gè)豐富的畫(huà)面封锉。
一些案例
當(dāng)然，要強(qiáng)調(diào)的是膘螟，焦點(diǎn)圖也好成福，背景圖或banner也好，都應(yīng)該根據(jù)所要放置的位置以及風(fēng)格定位做相應(yīng)的設(shè)計(jì)荆残。在不同的瀏覽環(huán)境中奴艾，更恰當(dāng)?shù)奶幚砬闆r更能讓你的背景圖的轉(zhuǎn)化率有所提升。
版權(quán)：
Netflix的圖均來(lái)自Netflix脊阴，圖侵刪（雖然估計(jì)Netflix也不care）
其他圖來(lái)源于網(wǎng)絡(luò)握侧，圖侵刪
