首頁技術文章正文

Banner設計原則和構圖方式

更新時間:2021-12-17 來源:黑馬程序員 瀏覽量:

什么是Banner?

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

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

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

UI設計banner圖

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設計培訓課程

分享到:
在線咨詢 我要報名
和我們在線交談!