一、什么是Banner

Banner又叫旗幟，在網站中稱為橫幅廣告，存在目的是讓用戶在瀏覽網頁信息時對廣告信息產生關注，從而獲得網絡營銷的效果。Banner廣告是互聯網廣告中最基本的廣告形式。

網站Banner主要有以下兩個用途，一個是作為品牌、產品的展示，一個是活動的預熱、促銷。

一般使用GIF、JPG格式的圖像文件。同時還可以使用Java等語言使其產生交互性，用Shockwave等插件增強表現力。標準GIF格式以外的網幅廣告被稱為Rich Media Banner。

如果說純粹的文字信息過于枯燥，難以吸引用戶的目光，而Banner剛好克服了這一難點，通過圖片、元素的排版點綴給文字信息增加了“可視性”，相比于枯燥的文字，用戶更喜歡色彩鮮明、文案簡潔的圖片。

二、Banner的風格

Banner的風格有很多，常見的有時尚風、國風、文藝風、炫酷風、簡約風、科技風這幾種。

時尚風：這種風格類似于時尚潮流雜志的排版，最明顯的特點是留白，通過巧妙的配色與排版，營造出獨具一格的畫面。除了略大一些的標題，其他文案字體都很小，給人非常精致的感覺，

國風：這類風格大多使用像中國山水畫、水墨畫、京劇、剪紙、卷軸等帶有傳統(tǒng)色彩的元素或圖案進行設計。

文藝風：這類風格強調清新、唯美、小資的感覺。使用的都是干凈、清爽的背景和元素，給人感覺非常清新。

炫酷風：這類風格通常使用深色背景，通過運用一些有質感的元素與光影特效，來打造炫酷的畫面。

科技風：這類風格與炫酷風的色彩背景相似，都是使用深色背景，科技風著重使用藍、黑、紫這些色調，疊加光效、金屬效果、線條、光點之類的元素，營造出硬朗、空間、未來的感覺。

簡約風：這類風格沒有過多的裝飾元素，文字也很少，整體的感覺非常干凈、簡潔。排版是將素材圖放大、放大、再放大，突出細節(jié)與質感。

三、構圖樣式

由于每個網站所屬的行業(yè)不同、領域不同、產品的屬性也天差地別，而且文案字數和搭配元素也有所不同，導致Banner的構圖和風格需要根據實際需求進行修改。這里只分析提供一些構圖的樣式，不做具體的推薦。

左右構圖：這類構圖最常用，也最簡單。通常是左文右圖或者左圖右文的格式，文案與圖片分區(qū)明顯。左右構圖適用于凸顯文案，所以圖文比例可以參照黃金分割比。

斜切式構圖：與左右構圖很像，利用線條和色彩的碰撞分區(qū)，空間感更強。

居中構圖：這類構圖有文案居中圖片在四周、配圖居中文案在左右、圖文都居中這三種情況。

居中式排版想要凸顯誰就把誰放在畫面中央。除此之外，如果banner中沒有配圖只有文案，一般采用居中式構圖。

平鋪式構圖：這類版式就是平行排列每個產品，每個產品所占的空間比重相同，秩序感強，給用戶的感覺是產品很有品質很安全。

三角形構圖：正如世界上最穩(wěn)定的結構是三角形一樣，三角形構圖中各個產品大小排列分明，構圖穩(wěn)定自然，結構感強。給用戶的感覺是穩(wěn)重。

中心聚焦式構圖：與放射式構圖相同，這類構圖利用透視指向產品或者slogan，空間感很強，也會讓用戶的注意力聚焦在畫面中心的產品或者產品賣點上。

對角線構圖：這類構圖可以放置一個產品或兩個產品，各個產品所占的比重相同，構圖穩(wěn)定有活力，空間感強。

四、如何做好網站Banner設計

下面為方便大家閱讀和理解，這次我根據網站banner的整個設計過程來進行講解。整個設計過程：明確需求→確定尺寸→確定設計風格和版式→構成元素（字體∕圖片∕背景色∕點綴）→調整配色

1、確定尺寸

根據放置的位置不同，banner的尺寸也有區(qū)別。

根據谷歌Adsense統(tǒng)計，最有效、標準的Banner尺寸是:

導航欄Banner：728×90 px

半屏Banner：300×600px

中等矩形Banner：300×250px

長矩形Banner：336×280px

2、文案

1）字體選擇

banner中常用的字體主要有襯線體、非襯線體、書法體。襯線體是模仿中國古代字體和古代碑文上的字體，筆畫有粗細之分，簡單易變形，修飾性強。推薦使用字體：宋體、方正俊黑、華文細黑等。

非襯線體筆畫粗細相同，簡潔有力，容易吸引用戶目光。推薦使用字體黑體、方正蘭亭粗黑、漢儀潤圓等。

書法體源于中國古代，適合中國風、傳統(tǒng)文化和國人豪邁氣質的主題。推薦使用字體漢儀尚巍手書、李旭科書法等。

小tips：

商用字體要注意版權問題。

同一畫面中使用的字體最好不要超過三種，太多會顯得畫面雜亂無章。

2）文案內容

在banner的設計中，文案內容不需要長篇大論，頁面上的文字最好不要超過4行，只要能高效的吸引用戶的注意力，準確傳達信息就可以。文字篇幅過多會消耗用戶的耐心，也會導致排版布局不美觀。

小tips：

同等級的文案內容盡量保持字體、字號、顏色上的一致性，不然頁面會顯得太雜亂。

如果字體顏色相同，可以根據字號的大小來區(qū)分信息層級。

3、背景選擇

banner的結構包括文案層、背景層、裝飾層，背景層又包括圖片背景和背景色。

圖片背景：

圖片元素是banner背景層的重要部分，既包括整個頁面的背景圖片，也有產品圖。尤其是精修過后的產品圖，顯得更加精美、有品質，提高用戶的信任感。

背景色選擇：

一般色彩的選擇與行業(yè)性質相關。不同的顏色、不同的色調能夠引起人們不同的情感反應，這就是所謂的色彩聯想作用。

以下是不同的顏色所產生的的感受一覽表。

紅色：是一種激奮的色彩，傳達了興奮、激情、奔放和歡樂的情感，能使人產生沖動、憤怒、熱情、活力的感覺，對眼睛刺激較大，容易產生視覺疲勞，使用時需要慎重考慮。

黃色：代表陽光、年輕、活力滿滿。一般適用于用戶偏年輕的產品上，或者食物上，黃色也能讓人產生食欲。

藍色：具有沉穩(wěn)的特性，是最具涼爽、清新、專業(yè)特點的色彩，傳遞出冷靜、智慧、自信的情感。常用與強調科技和效率的商品或企業(yè)中，大多數男性產品也常使用藍色。

綠色：代表健康、安全、新生和睦的情感，能夠創(chuàng)造出平衡和穩(wěn)定的頁面氛圍。常用于健康、生態(tài)、醫(yī)療領域的產品網站上。

黑色：代表權力、高貴、穩(wěn)重、現代感、科技、莊嚴的感覺。一般適用于汽車產品、智能科技產品和高端奢侈品上。

白色：代表科技、簡單、純潔、素雅、高端、明快、和平的感覺。一般用在家居、化妝品、高端產品上。

橙色：是充滿活力的顏色，可以讓人聯想到金色的秋天、豐碩的果實、跳動的火苗，是一個歡樂而幸福的顏色。

紫色：代表了神秘、高貴、優(yōu)雅、浪漫的感受，如紫色的薰衣草被認為是浪漫的。但眼睛對于紫色細微變化的分辨力很弱，容易引起疲勞。

小tips：

顏色的選擇需要考慮到企業(yè)的VI 色；

顏色的飽和度不宜過高，背景就是背景，不能喧賓奪主；

如果想要豐富畫面的層次感可以考慮采用漸變效果。

4、點綴元素選擇

點綴元素在banner中可有可無，但是使用了就會讓整個畫面看上去精致很多。一般來說，點綴元素數量越多，形式越多樣；色彩越多，明度越高，越不規(guī)則，畫面越活潑，反之，越高冷大牌，有逼格。

點綴元素分為光效、幾何元素、線條、實物等。幾何元素，一般都會比背景深一些，有時也會采用漸變，可以更好的融入背景中。采用幾何點綴可以使畫面更加活潑。

實物點綴是很多圖片常用的手段。常出現在畫布邊緣且不顯示全貌，既能保證畫面不空洞，也不會喧賓奪主，這種手法需要注意虛實變化，多用高斯模糊做一些虛化，效果會更明顯。

最后，只有達到點綴元素與畫面的和諧統(tǒng)一，才能讓網站banner看起來更有質感，更吸引人。

5、配色網站推薦

在banner設計的最后一步，需要調整整體的配色，使畫面看起來更加和諧。上文也提到了不同顏色所表達的情感，但是要靈活運用，合理搭配也需要多看多練培養(yǎng)審美。下面推薦大家一些好用的配色網站。

color hunt

一個非常好用的配色網站，網站提供了非常多的配色方案，對比色、鄰近色、相對色都有。點擊色彩就會出現色值，如果你喜歡某套配色，直接拿走就行。

Reeoo

這個網站通過顏色的分類來進行檢索，提供手機App、iPad App、網頁設計、icon設計的精彩案例。點擊顏色就會出現以這個顏色為主的案例設計。不僅對于色彩搭配的學習，對于設計審美的提高也有很大幫助。

本文鏈接：http://www.azlx8.cn/article/1075.html