對(duì)于品牌網(wǎng)站建設(shè)來(lái)說(shuō)宣傳是必不可少的，我們更多的選擇使用banner圖來(lái)傳遞我們網(wǎng)站上的主要信息，好的banner圖可以獲得訪客的關(guān)注，起到宣傳和銷售的效果。然而很多設(shè)計(jì)師在制作banner圖時(shí)，不知道該從哪作為突破口，今天我們來(lái)分享下網(wǎng)站banner圖如何設(shè)計(jì)以及需要注意哪些問(wèn)題。

banner的設(shè)計(jì)如此重要，那優(yōu)秀的banner有哪些共性呢？

● 有強(qiáng)烈的視覺沖擊力，在第一時(shí)間抓住訪客的注意力

● 每張banner只傳達(dá)一個(gè)概念或觀點(diǎn)

● 色彩搭配與網(wǎng)站整理協(xié)調(diào)，符合自己品牌的形象和人群對(duì)品牌熟知的認(rèn)同感

● 正確的對(duì)比度，與CTA元素相區(qū)別，襯托而不喧賓奪主

● 匹配頁(yè)面主題，幫助標(biāo)題直達(dá)瀏覽者最關(guān)注的問(wèn)題

我們?cè)谠O(shè)計(jì)banner時(shí)，經(jīng)常會(huì)發(fā)生因設(shè)計(jì)不當(dāng)導(dǎo)致banner被忽略的問(wèn)題，直接影響點(diǎn)擊率，那體驗(yàn)效果好的banner圖應(yīng)如何設(shè)計(jì)呢？

一、內(nèi)容為王，banner圖上的內(nèi)容，一定程度上決定了圖片的質(zhì)量，不相關(guān)的內(nèi)容會(huì)給客戶帶來(lái)不好的體驗(yàn)，需要注意以下幾點(diǎn)：

1.文案內(nèi)容。獨(dú)特而有個(gè)性的文案內(nèi)容可以拉近我們的產(chǎn)品和訪客的距離，好的文案一般是直觀、簡(jiǎn)短、可以引導(dǎo)用戶執(zhí)行某些操作。

1） 突出產(chǎn)品的主題，讓客戶一目了然，如下圖：網(wǎng)站上產(chǎn)品眾多，將主推廣的產(chǎn)品放置在banner圖上，文案內(nèi)容突出我們是專業(yè)的泵制造商，按鈕設(shè)計(jì)引導(dǎo)客戶繼續(xù)點(diǎn)擊查看產(chǎn)品詳情介紹。

2） 突出企業(yè)品牌和文化。在banner圖設(shè)計(jì)時(shí)注意與公司的企業(yè)文化、品牌定位及形象相結(jié)合，這些都可以通過(guò)banner的風(fēng)格、色彩、和文字直接體現(xiàn)。如下圖：根據(jù)產(chǎn)品的類型定位簡(jiǎn)約的風(fēng)格，設(shè)計(jì)中融合了客戶的logo，注重客戶的品牌宣傳。

二、善用CTA按鈕。

CTA是常見的用戶交互元素，如：“閱讀更多 ”“立即注冊(cè)”等按鈕，好的CTA設(shè)計(jì)是轉(zhuǎn)化的重要步驟，可以引導(dǎo)客戶進(jìn)行下一步的操作，那我們?cè)谠O(shè)計(jì)banner圖上的CTA時(shí)要注意哪些方面呢？

1.放置位置。放置位置建議在文案信息后，引導(dǎo)客戶看完我們的營(yíng)銷信息后進(jìn)行下一步操作。

2.CTA的形狀建議使用按鈕形式，經(jīng)測(cè)試得出：使用按鈕形式的CTA點(diǎn)擊率會(huì)比其他的樣式更高。

3.顏色。一般來(lái)說(shuō)紅色、綠色、黃色是轉(zhuǎn)化率較高的顏色，但我們?cè)谥谱鱞anner圖時(shí)也要結(jié)合網(wǎng)站的整體風(fēng)格及l(fā)ogo色調(diào)來(lái)設(shè)計(jì)。

4.大小。按鈕的尺寸建議略短于上方文案內(nèi)容，這樣會(huì)給訪客以緊張感，增強(qiáng)訪客行動(dòng)力。

5.按鈕上的文案我們要體現(xiàn)價(jià)值，讓訪客有所期待。如“留言免費(fèi)領(lǐng)取樣品”、“免費(fèi)領(lǐng)取課程”等，增強(qiáng)客戶的轉(zhuǎn)化，但注意文字不可過(guò)長(zhǎng)。

6.注意在移動(dòng)端的展示效果。在手機(jī)端要著重注意按鈕的大小，要有足夠的留白效果能讓訪客輕松點(diǎn)擊。

三、banner風(fēng)格和整體網(wǎng)站風(fēng)格要統(tǒng)一。

做banner圖，簡(jiǎn)潔的設(shè)計(jì)比一個(gè)復(fù)雜的元素多的圖效果會(huì)更好。主色調(diào)建議不要超過(guò)三種，在設(shè)計(jì)中為了突出主題，也會(huì)運(yùn)用一些視覺表現(xiàn)手法： 如：民族風(fēng)－會(huì)用古典的、復(fù)古的、文化底蘊(yùn)的效果； 扁平風(fēng)－使用活潑的、簡(jiǎn)單的背景； 工業(yè)風(fēng)－再現(xiàn)應(yīng)用場(chǎng)景，增加真實(shí)感。

四、打造故事情節(jié)的視覺效果

通過(guò)展示banner圖向訪客講述一個(gè)故事，無(wú)形中向客戶灌輸我們的應(yīng)用場(chǎng)景、產(chǎn)品特征等，但切記不宜放太多信息，能讓訪客第一眼抓住重點(diǎn)和核心信息。

五、優(yōu)化網(wǎng)站banner的大小。

1.尺寸大小

我們?cè)谠O(shè)計(jì)時(shí)要注意使用最優(yōu)的尺寸，banner圖分為窄屏Banner和全屏Banner，在早期建站時(shí)考慮到網(wǎng)站打開速度的問(wèn)題，通常使用窄屏尺寸，但這種尺寸無(wú)法適應(yīng)不同的屏幕大小，所以依據(jù)屏幕大小平鋪的banner設(shè)計(jì)就應(yīng)用而生，這種尺寸的banner圖視覺效果更好，使網(wǎng)站顯得更加大氣。

2.占內(nèi)存大小

由于圖片加載需要時(shí)間，在Banner圖做好后，我們要在不損害圖片質(zhì)量的情況下對(duì)圖片的大小進(jìn)行優(yōu)化，減少頁(yè)面加載速度對(duì)轉(zhuǎn)化率的影響,一般建議banner圖的文件小于200K。