Banner設計原則和構圖方式

什么是Banner？

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

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

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

Banner設計特點

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

1. 大小限制嚴格

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

2. 可以被點擊

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

Banner設計原則

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

1. 對齊原則

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

2. 聚攏原則

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

3. 留白原則

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

4. 降噪原則

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

5. 對比原則

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

以上原則內容概括出Banner設計最主要的原則一醒目。

Banner構圖方式

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

1. 左右式

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

2. 正三角式

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

3. 倒三角式

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

4. 對角線式

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

5. 擴散式

擴散式構圖運用射線、光暈等輔助圖形對圖片主體進行突出，構圖活潑有重點，利用透視的方式圍繞口號進行表達，給人以深刻的視覺印象。

猜你喜歡：

網頁UI設計分析：網頁結構分析和網頁分類

網頁UI設計的原則有哪些？

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

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

黑馬程序員UI設計培訓課程