Banner設(shè)計原則和構(gòu)圖方式

什么是Banner？

Banner一般翻譯為網(wǎng)幅廣告、旗幟廣告、橫幅廣告等，狹義地說是表現(xiàn)商家廣告內(nèi)容的圖片，縣互聯(lián)網(wǎng)廣告中最基本、最常見的廣告形式。

當(dāng)用戶訪問電商網(wǎng)站時，第一眼獲取的信息非常關(guān)鍵，直接影響用戶在網(wǎng)站停留時間和訪問深度。然而僅憑文字的堆積，很難直觀又迅速地傳遞給用戶關(guān)鍵信息，這時就需要Banner將文字信息圖片化，通過更直觀的信息展示提高頁面轉(zhuǎn)化率，因此Banner的設(shè)計十分重要。

Banner一般使用gif格式的圖像文件，可以使用靜態(tài)圖形，也可用多幀圖像拼接為動畫圖像。隨著互聯(lián)網(wǎng)的發(fā)展，新興的Rich Media Banner(富媒體廣告)賦予了橫幅更強(qiáng)的表現(xiàn)力和交互內(nèi)容，但一般需要用戶使用的瀏覽器插件支持。

Banner設(shè)計特點(diǎn)

因?yàn)锽anner設(shè)計應(yīng)用在網(wǎng)站中，所以與傳統(tǒng)紙媒設(shè)計相比較其特點(diǎn)略有不同。除了設(shè)計應(yīng)該遵循的視覺美觀、色調(diào)統(tǒng)一、形式突出等特點(diǎn)外，Banner還具有以下兩個特點(diǎn):

1. 大小限制嚴(yán)格

為了提高網(wǎng)頁的加載速度，設(shè)計Banner時，對其尺寸大小要求比較嚴(yán)格。一般需將Banner的大小控制在100kb以內(nèi)，分辨率設(shè)置為72像素/英寸。過大的Banner會使加載速度過慢影響瀏覽網(wǎng)頁的速度和用戶心情，從而直接影響網(wǎng)站的轉(zhuǎn)化率。

2. 可以被點(diǎn)擊

和傳統(tǒng)紙媒最大的區(qū)別是，Banner 一般都有鏈接，可以通過單擊Banner引領(lǐng)用戶進(jìn)入并了解詳情。可以被點(diǎn)擊的互動性，是Banner與其他設(shè)計特點(diǎn)最大的不同了。通過點(diǎn)擊率，也可以直觀反映出Banner的被認(rèn)可程度。由于點(diǎn)擊會進(jìn)入深入介紹的頁面，頁面的統(tǒng)一性和連續(xù)性也需要在Banner中體現(xiàn)。

Banner設(shè)計原則

通過以上Banner設(shè)計特點(diǎn)可以得出，Banner 的存在就是為了迅速傳遞信息，提高轉(zhuǎn)化率。以此特點(diǎn)為基準(zhǔn)，能夠總結(jié)Banner在設(shè)計方面需要注意的原則。做到這些原則，可以使Banner最大化地實(shí)現(xiàn)爭取眼球、深人瀏覽的效果。

1. 對齊原則

對齊原則指的是相關(guān)的內(nèi)容要對齊，方便用戶視線快速移動，一眼看到最重要的信息。當(dāng)然，關(guān)于對齊原則，有些時候是設(shè)計師為了美觀而設(shè)計的。

2. 聚攏原則

聚攏原則是將內(nèi)容分成幾個區(qū)域，相關(guān)內(nèi)容都聚在一個區(qū)域中。一個Banner最好只有一個主題，不論是文字信息還是圖片信息都是為了這個主題服務(wù)的。

3. 留白原則

在設(shè)計中不要把Banner中的內(nèi)容排得過滿，要留出一定的空間，這樣既減少了Banner的壓迫感，又可以引導(dǎo)讀者視線，突出重點(diǎn)內(nèi)容，過多的話語、圖片和元素反而會導(dǎo)致廣告毫無效果。

4. 降噪原則

顏色過多、字體過多、圖形過繁，都是分散讀者注意力的“噪音”，所以整合很關(guān)鍵:將不同元素整合、去其冗雜，就能達(dá)到降噪的目的。

5. 對比原則

加大不同元素的視覺差異，這樣既增加了Banner的活潑程度，又突出了視覺重點(diǎn)，方便用戶一眼瀏覽到重要的信息。

以上原則內(nèi)容概括出Banner設(shè)計最主要的原則一醒目。

Banner構(gòu)圖方式

構(gòu)圖是指在平面的空間中安排和處理對象的位置和關(guān)系，把局部的元素組成一個整體的畫面，以表現(xiàn)構(gòu)思中預(yù)想的藝術(shù)形象和審美效果。Banner的構(gòu)圖有以下幾種基本形式。

1. 左右式

左右式是最常見的構(gòu)圖方式，該構(gòu)圖方式分別把主題元素和主標(biāo)題左右擺放，直觀展示文案和圖像，給人穩(wěn)定、直觀的感覺。

2. 正三角式

采用正三角形構(gòu)圖，可以使Banner展示立體感強(qiáng)烈，重點(diǎn)突出，構(gòu)圖穩(wěn)定自然，空間感強(qiáng)此類構(gòu)圖方式給人安全感和可靠感。

3. 倒三角式

采用倒三角形構(gòu)圖，一方面突出強(qiáng)烈的空間立體感，同時構(gòu)圖動感活潑，通過不穩(wěn)定的構(gòu)圖方式，激發(fā)創(chuàng)意感，給人運(yùn)動的感覺。

4. 對角線式

采用對角線構(gòu)圖方式能夠改變常規(guī)的排版方式，適合組合展示，比重相對平衡，構(gòu)圖上活潑穩(wěn)定，且有較強(qiáng)的視覺沖擊力。

5. 擴(kuò)散式

擴(kuò)散式構(gòu)圖運(yùn)用射線、光暈等輔助圖形對圖片主體進(jìn)行突出，構(gòu)圖活潑有重點(diǎn)，利用透視的方式圍繞口號進(jìn)行表達(dá)，給人以深刻的視覺印象。

猜你喜歡：

網(wǎng)頁UI設(shè)計分析：網(wǎng)頁結(jié)構(gòu)分析和網(wǎng)頁分類

網(wǎng)頁UI設(shè)計的原則有哪些？

UI設(shè)計發(fā)展史：告訴你什么是UI設(shè)計？

UI設(shè)計行業(yè)常見術(shù)語有哪些？

黑馬程序員UI設(shè)計培訓(xùn)課程