以下內(nèi)容由摹客團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流信柿，摹客iDoc是支持智能標(biāo)注和切圖的產(chǎn)品協(xié)作設(shè)計(jì)平臺(tái)冀偶。
Banner廣告對(duì)于增加在線流量至關(guān)重要，但如何才能設(shè)計(jì)出大家想要點(diǎn)擊的網(wǎng)頁Banner？網(wǎng)頁Banner設(shè)計(jì)的重點(diǎn)是通過應(yīng)用基本的設(shè)計(jì)準(zhǔn)則，系統(tǒng)地創(chuàng)建有效的Banner廣告瓣颅。在這篇文章中，小編為大家整理了15條關(guān)于創(chuàng)建成功的網(wǎng)頁橫幅設(shè)計(jì)小建議誊涯。
網(wǎng)頁Banner是什么?
網(wǎng)頁Banner是目前互聯(lián)網(wǎng)中最常見的營(yíng)銷形式之一，它以各種形式存在。網(wǎng)頁Banner也是最有可能創(chuàng)造點(diǎn)擊量的設(shè)計(jì)方式。
Banner廣告是嵌入在網(wǎng)頁上的廣告圖像搀罢，展示產(chǎn)品或品牌蝗岖，并鏈接到廣告商的網(wǎng)站侥猩。大多數(shù)公司以這樣或那樣的形式使用它們，因?yàn)樗且环N成本合理抵赢、追蹤性好欺劳、傳達(dá)效率高的宣傳形式唧取，非常適合用來提升品牌知名度。
如何設(shè)計(jì)出優(yōu)秀的Banner廣告?
如何設(shè)計(jì)和創(chuàng)建網(wǎng)頁Banner廣告才能帶來點(diǎn)擊?下面是關(guān)于設(shè)計(jì)Banner廣告的一些建議和通用指南划提。
1.使用有效枫弟、標(biāo)準(zhǔn)的Banner尺寸
根據(jù)谷歌Adsense統(tǒng)計(jì)，最有效鹏往、標(biāo)準(zhǔn)的Banner尺寸是:
導(dǎo)航欄Banner——728×90 px
半屏Banner——300×600px
中等矩形Banner——300×250px
長(zhǎng)矩形Banner——336×280px
2. 選擇正確的Banner廣告位
建議購買網(wǎng)頁頂部或者是接近網(wǎng)頁主要內(nèi)容的位置淡诗。?
3.保持層次結(jié)構(gòu)
Banner廣告設(shè)計(jì)依賴于每個(gè)廣告之間的正確平衡，所以要注意你的層次結(jié)構(gòu)伊履。有效的Banner廣告是為了提高品牌知名度和增加網(wǎng)站流量而設(shè)計(jì)的韩容。它們有三個(gè)基本組成部分:
（1）公司Logo
公司Logo必須要建立品牌知名度。確保它在視覺上占主導(dǎo)地位唐瀑，但不要像價(jià)值主張或CTA那樣占主導(dǎo)地位群凶。
（2）價(jià)值主張
價(jià)值主張主要展示你所提供的產(chǎn)品或服務(wù)，并通過誘人的折扣和價(jià)格吸引大家的注意力哄辣。比如“高質(zhì)量”请梢、“半價(jià)”或“限時(shí)優(yōu)惠”。這些關(guān)鍵詞應(yīng)該占據(jù)廣告的大部分空間力穗，也是瀏覽者第一眼能看到的東西毅弧。
（3）CTA按鈕
行動(dòng)號(hào)召/CTA一般是指邀請(qǐng)用戶單擊的文本或按鈕。像“了解更多”当窗、“開始行動(dòng)”或“現(xiàn)在開始”這樣的短語就是很好的例子形真。這個(gè)部分應(yīng)該是Banner廣告獲取點(diǎn)擊量的重點(diǎn)。
4. 保持簡(jiǎn)單
保持內(nèi)容和視覺上的簡(jiǎn)單超全，因?yàn)闉g覽者對(duì)網(wǎng)頁上的Banner往往可能只是匆匆一瞥咆霜。
5. 適當(dāng)?shù)厥褂冒粹o
根據(jù)Banner的類型，按鈕通常會(huì)增加廣告的點(diǎn)擊率(CTR)嘶朱。如果你要使用按鈕蛾坯，把它們放在文本的右下角，應(yīng)用有品味的對(duì)比色疏遏。注意脉课，風(fēng)格顏色在整個(gè)廣告中需要始終保持一致倘零。
6. 有一個(gè)明確的框架
瀏覽者的眼睛一般都會(huì)被框架內(nèi)的主題所吸引疫鹊，成功的Banner廣告一般都有一個(gè)清晰的框架脂矫。如果你的Banner背景是白色的牺堰，通常的做法是在Banner周圍放置一個(gè)1像素的灰色邊框哺眯。
7. 保持文本的可讀性
將標(biāo)題和正文設(shè)置為不同的大小；界面上所有的文字內(nèi)容在應(yīng)該少于4行。不要使用草書/手寫體，極細(xì)的字體坏瞄，全大寫，或字體小于10號(hào)(除非是免責(zé)聲明或版權(quán)聲明)睦柴。
8. 使用動(dòng)畫
動(dòng)態(tài)的網(wǎng)頁Banner廣告通常比靜態(tài)的Banner廣告效果好诽凌，而且在網(wǎng)頁Banner設(shè)計(jì)中非常有效，但是你必須確保它們不會(huì)分散廣告的信息坦敌。
如果是長(zhǎng)動(dòng)畫或者視頻侣诵，不要超過15秒的時(shí)間，并考慮讓你的畫面最后有明確的行動(dòng)號(hào)召狱窘，提高轉(zhuǎn)化率杜顺。如果是短時(shí)間的循環(huán)動(dòng)畫，不要重 復(fù)循環(huán)3次以上蘸炸。
9. 互補(bǔ)躬络，但要突出
如果你的Banner能在視覺上融入了網(wǎng)站特色，則更有可能贏得瀏覽者的信任搭儒。然而穷当，不要讓它融入太多，會(huì)失去瀏覽者的關(guān)注淹禾。Banner廣告總是需要是突出的和可點(diǎn)擊的馁菜。
10. 與品牌保持一致
將Banner廣告鏈接到一個(gè)登陸頁面，其中包括你的折扣優(yōu)惠铃岔。確保廣告與你的品牌和登陸頁面相匹配汪疮，這樣潛在的客戶才不會(huì)感到困惑。
11. 營(yíng)造一種緊迫感
通過使用對(duì)比鮮明的粗體顏色毁习，給文本帶來一種視覺上的緊迫感智嚷。Banner廣告并不總是需要柔和。
12. 善用意象(僅在需要時(shí))
選擇相關(guān)的圖形和照片纺且，增強(qiáng)你的信息和直接相關(guān)的產(chǎn)品纤勒。這里沒有抽象概念。
買不起專業(yè)攝影或超模照片?選擇一張廉價(jià)的圖庫圖片也行隆檀。如果可以的話摇天，盡量選擇由設(shè)計(jì)師創(chuàng)作的原始插圖或圖形。
記住恐仑，在Banner廣告中不一定要使用圖像泉坐。頂級(jí)的文案和漂亮的排版可以創(chuàng)造同樣有效的結(jié)果。
13. 選擇合適的顏色
應(yīng)用不同的顏色會(huì)帶來不同的聯(lián)想裳仆，你需要考慮清楚想喚起觀眾的哪種情緒腕让。顏色是用戶在Banner中首先會(huì)注意到的。
顏色也是主觀的，在不同的文化中有不同的聯(lián)想纯丸。在選擇顏色時(shí)偏形，一定要研究你的目標(biāo)受眾。下面是一組顏色和它們?cè)谖鞣接^眾中所代表的典型情感觉鼻。
紅色：激情俊扭、憤怒、興奮和愛坠陈。這種強(qiáng)烈的色彩對(duì)大多數(shù)觀眾都有吸引力萨惑，但要適度使用。如果你想要一個(gè)經(jīng)典仇矾、成熟或嚴(yán)肅的造型庸蔼，避免使用紅色。
橙色：充滿活力贮匕。橙色不像紅色那樣讓人無法抗拒姐仅，但它仍然遠(yuǎn)離人群，散發(fā)著活力刻盐；這是一個(gè)很好的CTA按鈕顏色萍嬉。
黃色：歡樂、陽光和友愛隙疚。黃色很搶眼壤追，散發(fā)出一種活力，既年輕供屉、可接受度也高行冰。
綠色：健康、新鮮伶丐、財(cái)富悼做、環(huán)境、成長(zhǎng)哗魂、培育和新的開始肛走。它對(duì)眼睛也很好。
藍(lán)色：安全录别、信任朽色、清晰、成熟组题、寧靜葫男、智慧、正式崔列、清爽梢褐、冷漠和男性氣質(zhì)。藍(lán)色出現(xiàn)在超過一半的商標(biāo)中。
紫色：奢華盈咳、尊貴耿眉、奢華、智慧鱼响、魔力鸣剪、女性氣質(zhì)、創(chuàng)造力热押。它對(duì)瀏覽者有一種鎮(zhèn)靜的效果西傀。
粉紅色：愛情斤寇、甜蜜桶癣、女性、青春和嬰兒娘锁。粉紅色通常與所有女性相關(guān)牙寞，但有一個(gè)基于亮度和色調(diào)的真實(shí)范圍。
黑色：排他性莫秆、神秘性间雀、現(xiàn)代性、權(quán)力镊屎、威望惹挟、奢華和正式。它是傳統(tǒng)的缝驳，白色背景上的黑色文本是最易讀的顏色組合连锯。
白色：純潔，清潔用狱，現(xiàn)代运怖，貧瘠，簡(jiǎn)單夏伊，誠實(shí)摇展，天真。白色創(chuàng)造了經(jīng)濟(jì)感和青春的感覺溺忧。
棕色：自然咏连，木材，皮革鲁森，嚴(yán)肅捻勉，男子氣概，堅(jiān)韌刀森，謙遜踱启。棕色可以中和較強(qiáng)的顏色，適合背景色和紋理。
灰色：中立性和實(shí)用性埠偿。當(dāng)用作背景時(shí)透罢，灰色可以襯托其他顏色。
14. 文件盡量小一點(diǎn)
根據(jù)谷歌Adwords統(tǒng)計(jì)顯示冠蒋，當(dāng)涉及到文件大小時(shí)羽圃，文件越小越好—最好保持在150 kb以下。為了避免瀏覽者向下滾動(dòng)并錯(cuò)過它抖剿，文件小的Bannner可以快速完成頁面加載朽寞。
15. 使用正確的文件格式
通常，設(shè)計(jì)成果一般是JPG, PNG, GIF或HTML5文件斩郎。記住脑融，F(xiàn)lash廣告在這一點(diǎn)上已經(jīng)過時(shí)了，所以盡量選擇其他幾個(gè)圖像文件格式缩宜。
準(zhǔn)備好去設(shè)計(jì)更好的網(wǎng)頁Banner吧!
以上只是一些對(duì)Banner廣告設(shè)計(jì)的小建議肘迎，但要?jiǎng)?chuàng)造出真正很棒的、高效的Banner锻煌，需要花更多的心思妓布。如果你不是專業(yè)設(shè)計(jì)師或者沒有時(shí)間設(shè)計(jì)，也可以考慮聘請(qǐng)一位有才華的創(chuàng)意人員宋梧，為你設(shè)計(jì)完美可點(diǎn)擊的Banner廣告匣沼。
學(xué)習(xí)工具，但不受限于某種工具捂龄。摹客iDoc释涛，高效協(xié)作，從產(chǎn)品到開發(fā)跺讯，只要一個(gè)文檔枢贿，讓你的團(tuán)隊(duì)高效協(xié)作！
