您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 視覺(jué)設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

一款優(yōu)秀的網(wǎng)頁(yè)Banner該怎么設(shè)計(jì)

Banner廣告在今天網(wǎng)絡(luò)市場(chǎng)營(yíng)銷中是十分重要的一部分。大多公司會(huì)使用banner這種形式的有效且低成本的媒介來(lái)提高品牌知名度,這就有了很多banner的設(shè)計(jì)工作在那里他們。

   今天我們來(lái)分享一些banner設(shè)計(jì)規(guī)則和技巧。

1.Banner的標(biāo)準(zhǔn)尺寸

d10556e26e3b32f875520f5321c1.jpg

   以上是幾個(gè)banner的最佳尺寸,理想情況下,你的客戶會(huì)在網(wǎng)站上購(gòu)買一個(gè)banner的廣告位讓你來(lái)設(shè)計(jì)。

2.維護(hù)等級(jí)制度

   首先,banner廣告的目的是提高品牌知名度并且引流到你的網(wǎng)站上。它基本組成分為三個(gè)部分:

公司logo:公司logo是建立品牌知名度的主體,要確保它的視覺(jué)優(yōu)勢(shì)。

品牌價(jià)值:banner上除了體現(xiàn)品牌的服務(wù)性質(zhì),也要提供有吸引力的產(chǎn)品,比如產(chǎn)品的優(yōu)惠信息(類似“5折優(yōu)惠”“限時(shí)免費(fèi)”),這應(yīng)該是你的廣告最吸引用戶眼球的地方。

讓用戶采取行動(dòng):在banner上應(yīng)該有類似“點(diǎn)擊這里”“了解更多”“立即查看”“點(diǎn)此注冊(cè)”類似的文字標(biāo)語(yǔ),這樣能讓用戶更好的進(jìn)一步操作。

3.讓設(shè)計(jì)看的簡(jiǎn)單一些

cb1a56e26e8232f875520f4e6fb0.jpg

設(shè)計(jì)簡(jiǎn)單,內(nèi)容直觀明,因?yàn)橛脩艨赡苤淮蛩憧茨愕腷anner一眼。一句話能表達(dá)清楚的不要增添文本復(fù)雜性,讓用戶看著很繁瑣,設(shè)計(jì)底色單一化能更好識(shí)別。限時(shí)免費(fèi)字樣跟其他文本有區(qū)分,讓用戶能在短時(shí)間內(nèi)關(guān)注到主要信息點(diǎn)。

4.使用適合的按鈕

694456e26eb932f875520f99312f.jpg

   根據(jù)banner的類型設(shè)置按鈕,這樣能提高點(diǎn)擊率。當(dāng)你使用的時(shí)候,將他們放在你的副本上面或者在右下方,使用對(duì)比色讓它們跟整組廣告看起來(lái)一致

5.有明確的框架

501256e26ef832f875520f168388.jpg

   用戶會(huì)被banner內(nèi)的框架主題吸引,所以確保你banner廣告邊框中有明確的框架。

   如果你的banner整體是白色的,那么普遍的做法就是在banner內(nèi)有1像素的灰色邊框。如果不是白色,你仍可以像NETFLIX廣告這樣,在周圍增加幾絲淡淡的黑色。

6.讓你的文字能快速可讀

ee4756e26f2e32f875520fed2c45.jpg961956e26f306ac72531cb60cf49.jpg

Do:讓標(biāo)題和正文字體不同尺寸

Don’t:不要用草書字體或者是非常單薄的字體,不要全部大寫或者字體小于10磅(除非是版權(quán)聲明或免責(zé)說(shuō)明)

7.確保設(shè)計(jì)和公司品牌一致性

9b7956e26f6832f875520fc66f02.jpg

   你的banner廣告要連接到相關(guān)產(chǎn)品報(bào)價(jià)頁(yè)中,確保它的設(shè)計(jì)跟公司品牌風(fēng)格看起來(lái)一致,不要讓用戶有混淆。

8.用正確的圖片格式

da5b56e26f8a6ac72531cbcb005d.jpg

   在你做完banner設(shè)計(jì)后,你會(huì)用AI、PS或Flash生成jpg、png、gif、flash格式圖片。

   請(qǐng)記住,flash格式的banner廣告不支持所有設(shè)備,如果不想讓用戶錯(cuò)過(guò)人能能點(diǎn)擊的機(jī)會(huì)可以提供gif格式的banner圖。

9.圖片尺寸不要太大

   當(dāng)用戶滑動(dòng)滾動(dòng)條時(shí)需要及時(shí)看到你的banner廣告,加載速度要很快,所以你的尺寸越小越好。

10.需要時(shí),使用高質(zhì)量圖片

e76856e26fb432f875520fd3060e.jpg

   選擇相關(guān)的圖像、圖形或直接關(guān)系到用戶的產(chǎn)品圖片,可以提高你banner的質(zhì)量。

ef1f56e26fcf32f875520fda8074.jpg

   如果你買不起專業(yè)設(shè)備或者請(qǐng)不起名模,你可以在網(wǎng)上買圖,現(xiàn)在的高質(zhì)量圖片很多。

   圖片不是總在banner設(shè)計(jì)中使用的,因?yàn)槲淖謴V告會(huì)排版更好看更具殺傷力。

11.灌輸緊迫感

2a1e56e26fef32f875520ff89e4c.jpg

顏色鮮艷或者對(duì)比度極強(qiáng)的視覺(jué)效果會(huì)賦予文本緊迫感。

12.選擇適合的顏色

   在選擇顏色的時(shí)候,要考慮到用戶的情緒,這也是他的第一感官。

   顏色會(huì)有不同的文化體現(xiàn),讓人有不同而想法,在選擇時(shí)要研究你的目標(biāo)受眾。

   下面是顏色的一個(gè)心理分析,大家可以參考一下:

紅色:危險(xiǎn),激情,憤怒,興奮,速度,和愛(ài)情有關(guān)。最強(qiáng)大的色彩和有吸引力的所有觀眾,也被稱為刺激食欲。適度使用。 

橙色:活力,幸福有關(guān)。沒(méi)有壓倒紅色,它充滿活力,邀請(qǐng)和友好(它是行動(dòng)按鈕)

黃色:幽默,陽(yáng)光,樂(lè)觀,能量有關(guān)。的黃色觸摸可以捕獲觀看者的注意力,它甚至比橙色和紅色更有活力和應(yīng)使用明智,但太多黃色會(huì)刺激用戶的眼睛。

綠色:健康,新鮮,豐富,環(huán)境,發(fā)展,培育和新的開(kāi)端有關(guān)。這是對(duì)眼睛最簡(jiǎn)單的顏色。 

藍(lán)色:安全,信任,清晰度,平靜,理智,形式,高雅,真理,茶點(diǎn),發(fā)涼,陽(yáng)剛之氣有關(guān)。

紫色:與奢華,皇室成員,貴氣,智慧,魔術(shù),野心,女性氣質(zhì)和創(chuàng)造力有關(guān)。它有一個(gè)觀眾舒緩,鎮(zhèn)定的作用。

粉色:有愛(ài),甜蜜,女人味,和嬰兒有關(guān)。最有女人味的顏色。

黑色:邪惡,神秘,權(quán)力,聲望,悲傷和形式有關(guān)。它的傳統(tǒng),并在白色背景上的企業(yè)的黑色文字是最可讀的顏色組合。

白色:純度,清潔度,現(xiàn)代性,不育,簡(jiǎn)單,誠(chéng)實(shí),純真,童貞,善良有關(guān)。

棕色:與自然,木材,皮革,和謙卑有關(guān)。平衡了更深的顏色,和好背景色和紋理。

灰色:中立性和實(shí)用性有關(guān)。當(dāng)作為后臺(tái)用它加劇了其他顏色。

最后,在廣告設(shè)計(jì)時(shí),請(qǐng)確定您是在RGB顏色模式設(shè)計(jì)。您的banner廣告任何時(shí)候只屏幕上顯示。

13.考慮使用動(dòng)畫


896e56e2704632f875520f9bcd67.jpg

   Banner中用動(dòng)畫是十分有效的,但你要確保它不會(huì)從廣告信息中心脫離出來(lái)。

   如果是用動(dòng)畫,需要讓它簡(jiǎn)單一些,不超過(guò)15秒,并且不要循環(huán)在3次以上。此外動(dòng)畫的最后一幀應(yīng)該是個(gè)號(hào)召性質(zhì)的。

14.脫穎而出的效果


   你的廣告是個(gè)補(bǔ)充效果,但需要在整體頁(yè)面中脫穎而出。

4e3b56e2706932f875520f15224f.jpg

   如果您的廣告在視覺(jué)上跟網(wǎng)站整體融合的很好,這會(huì)是個(gè)很好的網(wǎng)站,而且能贏得用戶的信任。但是不要讓它融入太多,廣告還是需要用戶能看到或點(diǎn)擊。

   Banner廣告好不好主要看它的性能。也許它是世界上最丑陋的banner,但如果性能很好,那么它是一個(gè)成功的設(shè)計(jì)。

[教程作者:IDC創(chuàng)新設(shè)計(jì)中心]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui3217.html
最受歡迎扁平化UI設(shè)計(jì)配色方案集
網(wǎng)頁(yè)設(shè)計(jì)如何快速打造場(chǎng)景氛圍
圖趣網(wǎng)微信
建議反饋
×