咳咳，今天想聊一聊作為背景的大圖，如何能有效吸引眼球，提高轉(zhuǎn)化率。
在網(wǎng)站設(shè)計(jì)中利用大圖當(dāng)背景，早已經(jīng)不是新趨勢了。無論是作為焦點(diǎn)圖，或是作為博客文章鏈接的背景。
根據(jù)Netflix科技博客，如果不能在90秒內(nèi)成功吸引用戶，用戶就會失去興趣并轉(zhuǎn)而進(jìn)行其他活動（Netflix）。所以可以想象，當(dāng)用戶，尤其是目標(biāo)用戶打開網(wǎng)站首頁，或是相關(guān)的活動落地頁之后，動了動他的小眼睛（也可能是水汪汪的大眼睛，用戶都是上帝，么么噠），沒看到能吸引他眼球的東西，他就會關(guān)掉，繼續(xù)看他上次沒看完的二次元?jiǎng)勇チ恕?/p>
那么什么樣的圖是能有效吸引眼球的呢？很幸運(yùn)的是Netlix對此進(jìn)行了多項(xiàng)長期的用戶研究，我等吃瓜群眾只要拜讀結(jié)果就可以了~
首先要明白的一點(diǎn)是，不同的圖，對于用戶的影響確實(shí)是不同的。比如下面表格中就是一個(gè)例子，首先要明確的是單從影片名稱 the Short Game很難理解這部電影整體要表達(dá)的意思。
那么在對用戶分組后，Netflix設(shè)計(jì)團(tuán)隊(duì)用不同的封面圖對不同組用戶進(jìn)行了測試，結(jié)果如下，使用第二張圖的時(shí)候用戶反饋是最好的（這個(gè)反饋中包括了很多復(fù)雜的指標(biāo)，如用戶瀏覽時(shí)的點(diǎn)擊率，點(diǎn)擊后的觀看時(shí)間等等，具體就不細(xì)說了）。
那么具體為什么這張圖給人的感覺更好呢？這個(gè)也在之后統(tǒng)一講解吧。先來看看接下來的一項(xiàng)調(diào)查結(jié)果。
在對于同一個(gè)產(chǎn)品的多個(gè)版本的圖片進(jìn)行測試后，發(fā)現(xiàn)下圖中標(biāo)記了向上箭頭的幾張圖效果更好。
那么這些圖又是為啥更吸引用戶注意呢？以及什么樣的圖能更吸引用戶呢？我認(rèn)為，是醬紫滴：
神奇的人臉
相信很多很多的設(shè)計(jì)心理學(xué)書上都會說：“人臉是個(gè)神奇的東西，一張臉勝千言，人的大腦對人臉的表情有特殊的處理方式云云...”，這是有道理的，就如經(jīng)典的《設(shè)計(jì)師要懂心理學(xué)》中講到的，人的大腦皮層有一處專門處理臉部的區(qū)域，可以快速識別并引起特定情緒。
因此，我們會看到，很多提供比較抽象服務(wù)的網(wǎng)站（如學(xué)校，面對企業(yè)的服務(wù)）會用一些看起來像目標(biāo)客戶的人的大頭照，給用戶一種暗示，用我們的產(chǎn)品的人都很滿意，用人臉的表情有效的調(diào)動用戶的共鳴。
因此我們就能看到，在Netflix后面的多圖研究中，為啥這幾張圖轉(zhuǎn)化率更高，他們有啥特點(diǎn)呢？
當(dāng)然就是人臉（龍臉）比較大啦，而后面這部劇更吊，有大人臉，還有兩個(gè)，還有互動！
一些案例
當(dāng)然有的時(shí)候也需要一些人性的誘（se）惑（you）
看到這里大家也發(fā)現(xiàn)了，首頁焦點(diǎn)圖很大，人占得比例相對可以小一些，因?yàn)橛脩羰悄芮宄吹饺宋锏谋砬榈摹６裰暗囊恍┬D，雖然有的圖里面也有人，但是特別小，很難看清人臉的表情，因此效果不佳。
另外，“人會不自覺地往其他人眼睛看到的地方看去”。因此在適當(dāng)?shù)臅r(shí)候，可以利用一些小小的技巧，引起人們對商品的關(guān)注（案例來源Conversionxl）。
一些案例
所以當(dāng)我們把一個(gè)banner稍微調(diào)整一下，就會發(fā)現(xiàn)，結(jié)構(gòu)全無。。。。
鮮艷的顏色
顏色的搭配應(yīng)該要綜合來看，并且與下面提到的設(shè)計(jì)原理有所結(jié)合。從Netflix的幾張圖來看，一方面要有亮色，可能是一些鮮艷的顏色，也可能是火焰，亮光的效果，并且有亮就要有暗，才能互相對比，增加圖片的空間感和視覺沖擊力，讓圖片更生動。
總體來說，利用多種方式制造對比，是比較好的選擇，具體方法可以分為：
1. 利用色溫進(jìn)行對比
大家都知道顏色可以分為冷，暖，中性色調(diào)，不同溫度的色調(diào)的對比，利用冷色調(diào)襯托出暖色調(diào)，可以使暖色調(diào)更加醒目。
2. 利用顏色濃度進(jìn)行對比
這樣就是暗和亮的對比，亮色是重點(diǎn)，大塊的色塊則是暗色，給圖片一種層次感和空間感，反而更能突出高亮的顏色，吸引人的眼球。
但是這些都缺不了的就是需要一些鮮艷的顏色，也就是說，是明度和純度都相對高一些的顏色，這樣才能保證他們在眾多的banner或背景圖中脫穎而出。
這些更適用于多篇幅的banner圖，而對于首頁焦點(diǎn)圖，似乎不需要講究那么多，因?yàn)楦蓴_因素較少。
再插播一條小知識，BBC的紀(jì)錄片研究發(fā)現(xiàn)，紅色，相對于藍(lán)色，更容易引起人們的關(guān)注和注意，因此在足球比賽中，紅色球衣的球隊(duì)的勝率更高，因?yàn)椴门性诓脹Q的時(shí)候會不自覺地傾向于紅色球隊(duì)。裁判都會傾向他們，用戶當(dāng)然也會拉~因此我們會看到很多電商網(wǎng)站都用了大面積的紅色，或是橙色等相近的暖色調(diào)。
平面設(shè)計(jì)原理的應(yīng)用
仔細(xì)看看一些創(chuàng)意型的網(wǎng)站，可能并不符合前面提到的幾點(diǎn)，畢竟創(chuàng)意型的網(wǎng)站，面對的人群也更有想法，他們希望看到的是你的創(chuàng)意。但是
1. 空間感
也可以理解為我們說的“負(fù)空間”，即negative space。在圖片中，為前景的主題營造一種空間感，可以是增加前景和背景的對比，如前景清晰度更高，更鮮艷，而背景十分平淡。或是突出主體，背景則大量留白。或是利用陰影，重疊等效果制造空間立體感。
一些案例
2. 三分構(gòu)圖
這不是一個(gè)新鮮的理論了，可以看到大部分的banner都是如此構(gòu)圖，因此我們也不可能脫離這種方法。三分割法，即為rule of thirds，是將場景用兩條豎線和兩條橫線分割，就如同是書寫中文的“井”字。這樣就可以得到4個(gè)交叉點(diǎn)，然后再將需要表現(xiàn)的重點(diǎn)放置在4個(gè)交叉點(diǎn)中的一個(gè)即可。
這樣的構(gòu)圖更生動，因此更能營造出一個(gè)豐富的畫面。
一些案例
當(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的圖均來自Netflix，圖侵刪（雖然估計(jì)Netflix也不care）
其他圖來源于網(wǎng)絡(luò)，圖侵刪
