<em id="dx444"><object id="dx444"><input id="dx444"></input></object></em>
新聞觀點

設計一個平面電商banner廣告圖的技巧

標簽: 網站建設 ? 網頁設計 ? banner圖 ? ? | 作者:錦明網絡推廣| VISITORS: | 來源:錦明SEO
17
Oct
2017

如今,在網絡上,Banner廣告無處不在,從網站首頁頁頭的內容推薦到側邊欄,從文章內到圖庫列表中,你會在幾乎所有內容存在的地方找到他們的影子。

Banner廣告在今天網絡市場營銷中是十分重要的一部分,大多公司會使用banner這種形式的有效且低成本的媒介來提高品牌知名度,這就有了很多banner的設計工作在那里他們。

通常情況下,它們看起來漂亮,略顯浮夸,還會蠶食你的網絡瀏覽體驗,盡管我們在想盡一切辦法降低它們給用戶的負面影響,但是壞名聲總是不可避免地同它們綁定到了一起。

實際上,Banner廣告對于用戶的影響是巨大的,合理的運用,肯定是事半功倍的,那么到底要如何設計一個不讓人生厭、轉化率可觀的優秀的的平面Banner廣告圖呢?

一、平面構成的含義是什么?

平面構成是視覺元素在二次元的平面上,按照美的視覺效果,力學的原理,進行編排和組合,它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法,是理性與感性相結合的產物。

而我的理解是:平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言,他可以是抽象的,也可以是具象的,可以是感性的,也可以是理性的,同時它也不是獨立存在的,而是伴隨著色彩、肌理、光影等而存在的。

基本上世間萬物,所有我們接觸到的或無法接觸到的,看得見的或看不見的事物里都有平面構成的運用和身影。

二、Banner圖是由什么組成的?

Banner組成要素包含4個方面:文案、商品/模特、背景、點綴物(可有可無)。

而我在之前反復強調過的,Banner的作用是:宣傳、展示、廣而告之、準確傳達信息。

三、平面banner設計的技巧

在工作我們經常會有banner設計需求,和大項目比較,需求方從設計成本方面考慮,不會給設計師太多的時間,那么我們如何才能在短時間掌握做banner圖技巧呢?

1、主題明確

要突出產品主題,讓用戶一眼就能識別廣告含義,減少過多的輔助干擾元素。切忌,banner被切割的太細碎,內容繁多,沒有瀏覽重心。很多廣告主往往會認為傳達的信息越多,用戶越有興趣,其實并不然,什么都想說的廣告,就是什么都沒說好。

2、重點文字突出

用文字進一步的告訴用戶,是打折或還是新貨上市?如果我們最大的買點就是“4.1”折起,那么毫無疑問,“4.1”折的字樣一定要大,要醒目,其余的則需要相應的弱化。

3、符合閱讀習慣

閱讀視線要符合用戶從左到右、從上到下的瀏覽習慣。

4、用最短時間激起點擊欲望

用戶瀏覽網頁的集中注意力時間一般也就幾秒,所以不需要太多過場動畫,需第1時間進行產品的展示,命中主題,并配以鼓動人心的措辭口號引導用戶。

5、色彩不要過于要醒目

有些廣告主要求使用比較夸張的色彩來吸引訪問者眼球,希望由此提升Banner的關注度。實際上,“亮”色雖然能吸引眼球,但往往會讓訪問者感覺刺眼、不友好甚至產生反感。所以,過度耀眼的色彩是不可取的。

6、產品數量不宜過多

很多廣告主總是想展示更多產品,少則4-5個,多則8-10個,結果使得整個Banner變成產品的堆砌。

Banner的顯示尺寸非常有限,擺放太多產品,反而被淹沒,視覺效果大打折扣。所以,產品圖片不是越多越好,易于識別是關鍵。

7、信息數量要平衡

很多人總認為信息多就,覺得所有信息都很重要,都要求突出,結果其反。

如果banner上滿是吸引點,那用戶只會被注意,所以在Banner的有限空間內做好各種信息的平衡和協調非常重要。

8、留空

banner畫面中需要留空,留空可以使圖形和文字有呼吸的空間,圖片并非越多越好,突出重點是關鍵,必要的產品說明不能少。

四、我們該如何在Banner圖設計中運用平面構成

在前面我們提到,平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言,而Banner中的所有元素(文案/商品或模特/背景/點綴物)其實都可以看作是平面構成里的點線面這些構成元素。

那么,接下來我們就需要了解3個有關平面構成的概念了:

1、元素與元素之間的排列關系

它們之間的排列有下面這么幾種:分離、相切、重疊、透疊、結合、減缺、差疊、重疊。

舉幾個例子:

分離:形與形之間不接觸,有一定距離。

相切:形與形之間的邊緣正好相切。

重疊:形與形之間覆疊關系,由此產生上下前后的空間關系。

透疊:形與形有透明性的相互交疊,但不產生上下前后的空間關系。

結合:形與形相互結合成較大的新形狀。

減缺:形與形相互覆疊,覆疊的形狀被剪掉。

差疊:形與形相互交疊,交疊的部分產生一個新的形。

重合:形與形相互重合,變為一體。

2、所有元素在一起所體現的構成形式

從所有元素(點線面)整體看,其構成形式主要有重復、近似、漸變、變異、對比、集結、發射、特異、空間與矛盾空間、分割、肌理及錯視等等。

下面我們分別來舉例說明:

(1)、重復

指在同一設計中,相同的形象出現過兩次以上,重復是設計中比較常用的手法,以加強給人的印象,造成有規律的節奏感,使畫面統一。所謂相同,在重復的構成中主要是指形狀、顏色、大小等方面的相同。比如:

形狀的重復

骨骼的重復

大小的重復

色彩的重復

肌理的重復

方向的重復

(2)、近似

近似指的是在形狀、大小、色彩、肌理等方面有著共同特征,它表現了在統一中呈現生動變化的效果。近似的程度可大可小,如果近似的程度大就產生了重復感,近似程度小就會破壞統一。比如:

形狀的近似

骨骼的近似

(3)、漸變

是我常常聽說的一種效果,在自然界中能親身體驗到,在行駛的道路上我們會感到樹木由近到遠、由大到小的漸變。比如:

形狀的漸變

方向的漸變

位置的漸變

大小的漸變

色彩的漸變

骨骼的漸變

光影的漸變

(4)、對比

有時候是形態上的對比,有時是色彩和質感的對比。對比可產生明朗、肯定、強烈的視覺效果,給人深刻的印象。比如:

形狀的對比

大小的對比

色彩的對比

肌理的對比

位置的對比

重心的對比

空間的對比

虛實的對比

(5)、密集

密集在設計中是一種常用的組織圖面的手法,基本形在整個構圖中可自由散布,有疏有密。最疏或最密的地方常常成為整個設計的視覺焦點,他其實也是對比的一種情況,越密集的地方給人感覺距離越遠,反之越近。

點的密集

線的密集

面的密集

(6)、發射

是一種常見的自然現象,太陽四射的光芒就是發射的。發射具有方向的規律性,發射中心為最重要的視覺焦點,所有的形象均向中心集中,或由中心散開,有時可造成光學動感,會產生爆炸的感覺,有強烈的視覺效果。

中心點的發射

螺旋式的發射

同心式的發射

(7)、特異

是指構成要素在有次序的關系里,有意違反次序,使少數個別的要素顯得突出,以打破規律性。

形狀的特異

大小的特異

色彩的特異

方向的特異

肌理的特異

(8)、空間

利用大?。罕热缃筮h小。

利用重疊:前后/上下等關系。

利用陰影:使物體具有立體感/空間感。

利用疏密:比如間隔越小,越密集,感覺就越遠。

利用透視:平行線由寬到窄。

利用色彩:冷色遠離,暖色靠近。

利用肌理:越粗糙越近,越細膩越遠。

矛盾空間:真實不存在的空間,假想的。

虛實關系:遠景/中景/近景。

由陰影營造的空間感

(9)、分割

把整體分成小的部分。比如:

等形分割

自由分割

比例與數量

(10)、肌理

又稱質感,由于物體的材料不同,表面的排列、組織、構造等不同,因而產生粗糙感、光滑、軟硬感。比如:

筆觸的變化

凹凸不平的肌理

噴繪/染

自帶的紋理效果

肌理舉例:木材等


(11)、錯視

因空間距離或周圍環境所造成的視覺差。主要有下面幾種:

 

①、繆勒—萊依爾錯視

圖中兩條線是等長的,由于上下線段兩端的箭頭方向相反,上線段的箭頭占據的空間大,所以上面的線顯的較長。

②、垂直線與水平線的錯視

大多數人往往把垂直線看的比水平線要長,這是高估的錯覺。在水平線長度為8-10mm時,這種錯覺最大。

③、透視錯視

圖中的兩條線是相等的,看起來下面的要短,是因為透視的錯覺。

④、正方形的錯視

標準的正方形左右的邊看上去大于上下的邊。

⑤、黑白錯視

圖中黑白線段,由于白線段明度大,具有膨脹的現象,所以看以來比黑線段長。

⑥、由于圖形結構的影響而產生的錯視

圖中組成三、四、五邊形的邊長都相等,但由于周長和面積的不同,產生邊長的不同。

⑦、對比錯視

高個子和矮個子在一起,高的會顯的越高,矮的會顯的越矮。

錯視舉例:比如虛實手繪拼接,比如有些攝影作品:

 

這里要說明的是,錯視在一些視差動畫的網頁頁面里運用的會比較多一些,還有一些app的引導頁,這里Banner舉例的話可能也不太合適,不過也可以給大家看一下:

 

比如這個畫面里的黃色圓點,同樣的黃色圓點,在暗色背景上是很突出的,但在同樣是黃色的背景上就幾乎看不見了,但其實原點是沒變的,只是背景的顏色變了,就導致我們看到了不一樣的結果。

3、了解幾個常用的平面術語

接下來,我們來了解幾個常用的平面術語:和諧統一、對比突出、對稱、畫面平衡、視覺重心、節奏韻律。

(1)、和諧統一

元素與元素之間,或所有元素構成的整體是一種協調的關 系,比如大小/顏色風格等的協調。

(2)、對比突出

即把2個質或者量反差很大的元素放在一起,使人感覺主體鮮明突出,整體又活躍而統一,比如大小、數量、色彩、形狀的對比。

(3)、對稱

假設在一個圖形中間畫一條垂直或水平線后,畫面的左右或上下2邊是可以完全重合的,則我們稱之為對稱。

(4)、畫面平衡

即元素與元素之間,元素與整體之間的大小/形狀/數量/色彩/材質等的分布與視覺上的平衡。

(5)、視覺重心

通過對畫面中元素的數量/顏色/位置/大小/材質等進行處理,畫面中所出現的視覺焦點。

(6)、節奏韻律

畫面中的一種或多種元素按一定的規律排列,會產生音樂一般的旋律感。

以上講了這么多知識點,那么結合這些知識點,我總結繪制了一些比較實用的Banner排版樣式,如下圖所示:

以上呢,我就先總結這么多,其實所有的Banner版式都是大同小異的,因為我們前面提到,Banner是由文案、模特或商品、背景、點綴物組成的,而所有這些元素就相當于我們平面構成里的點線面,當我們改變這些元素的角度、距離、大小、數量、樣式、顏色等,新的版式也就產生了,所以,大家不妨也試試看哦!

五、平面構成之于Banner圖的意義是什么?

Banner中的所有元素其實都相當于平面構成里的點或線或面,而所有元素所組成的Banner畫面其實又是一種情緒和信息的表達,所以我們可以從下面4個方面去理解這個問題:

1、從活動主題的角度

當我們拿到一個設計需求的時候,都會需要確定他的設計風格,而這個風格怎么來確定呢?就是要明白他的定位以及服務的人群是誰,了解他們的興趣愛好,同時我們腦袋里會出現下面這幾個關鍵詞:熱鬧促銷、年輕活力、高冷大牌、時尚個性、規矩保守等。

我們先看幾個Banner實例:

(1)、低價熱鬧促銷

畫面中會有有比較多的點綴物,也喜歡用大面積的暖色,其目的就是為了營造熱鬧的氛圍,給人熱情有親和力的感覺,板式以上下或者居中排版的方式多點,這種方式的視覺也更聚焦一些。

所以熱鬧促銷的頁面可以考慮下面這些排版樣式:

(2)、年輕活力

這種主題的Banner設計其實跟熱鬧促銷的方法類似,只是說,這種畫面里的點綴元素或者模特樣式需要表現得顯得更加俏皮活力一些,色彩上也會比較艷麗或明亮,營造一種青春活力的感覺,排版方式其實沒有什么特別的限制,發揮空間非常大。

所以,年輕活力的頁面可以考慮下面這些排版樣式:

(3)、高冷大牌

這種主題的Banner設計重在體現一種一般人買不起,買了之后會顯得自己特別有優越感的印象,那么畫面中就需要多留白,善用一些簡潔的或有棱角的圖形設計,切忌用一些比較卡哇伊或太柔美復雜的線條,同時,商品或模特的品質要高,總而言之就是給人一種很貴很高端的感覺(窮人買不起,有錢人買了有面子),這個跟低價熱鬧促銷是相反的。

所以高冷大牌的頁面可以考慮下面這些排版樣式:

2、從信息層級的角度

當我們在做一個banner的時候,如果沒有特別的要求,其實我們是有很多個方向選擇的,首先問下自己你是想要突出什么信息呢?是突出商品呢?還是突出文字呢?還是突出整體的氛圍呢?還是強調整體的協調感呢?還是說強調品牌呢?

一般來說,一個好的Banner首先是要保證信息傳達準確,然后再需要保證畫面的協調感和氛圍的。

那么我先給大家看幾個案例舉例:

強調品牌(模特也屬于品牌的一部分)

強調商品以及SALE

強調整體的氛圍(商品融入在氛圍當中了)

強調SALE

比如大家可以看到我之前給大家總結的版式,基本上文案信息都是比較突出的,其次商品突出或者強調整體氛圍:
 

3、從品牌調性的角度

關于品牌這塊,可能是很多小商家目前不太重視,也覺得自己用不上的,但是各大電商平臺還有一些比較大的電商品牌都已經有這種品牌意識了,所以不管你是在哪種團隊里,不防也都了解一下。

我們可以從這幾個方面去看待品牌這個問題:品牌統一、風格延續、風格突破。

(1)、品牌統一

天貓的貓頭形象,運用于各個品類的廣告當中,這一創意既統一了品牌形象,又非常巧妙。

(2)、風格延續

這個在平臺的比較大型的活動里里運用較多,比如各個分會場的風格延續(排版樣式保持一致,只是改變了顏色和品類商品和文案等)。

(3)、風格突破

關于品牌的風格突破,可能是因為涉及到品牌升級或者品牌定位的改變,所以需要在設計上配合這一策略,比如說原先你面對的可能是青少年群體,但隨著時代的發展,你是繼續服務這些青少年群體跟著他們一起成長轉型為服務于大齡青年呢?還是繼續服務新一代的青少年群體呢?這時候你的用戶群體改變了,當然也就意味著風格可能需要作出改變咯。

對于這個話題,我們后面再抽出一篇文章單獨來講好了,大家感興趣嗎?

4、從視覺美感的角度

當一個Banner在滿足了前面幾個要求的情況下,如果有能力的話,我們當然還是要做到達到視覺美感的要求的,那么從這個角度看,平面構成之于Banner設計的意義是什么呢?

我們可以看下下面幾個關鍵詞:平衡畫面、視覺沖擊力、畫面不單調、富有創意等。

平衡畫面:左中右排版。
 

視覺沖擊力:放射線,中心聚焦。
 

畫面不單調:將產品的方向或顏色做一些不規則的排列,避免乏味。

富有創意:擬人化處理畫面,營造一種身臨其境的場景感。

到此,平面構成之于Banner設計的奧秘我就講完了,這次的內容量非常大,估計夠你們消化不止一周了,而我也沒有分為上下篇來寫,原因有二:

一方面是跟我自己的性格有關,我不太習慣分篇來講一個知識點,一個完整的知識點不管從哪里切斷我都會感覺不舒服,就像你吃一個東西吃得正爽,卻被別人告知說:“另一半要留著下次再吃哦”,雖然這樣子可以增加大家對下一篇文章的期待,但也會感覺不爽吧(不過為了大家不要吃撐了最好是收藏起來或轉發出去,以便后面再細細看)。

另一方面,因為我的這些知識點是要編輯到書本里的,所以我多寫一點,那離我完成書本的寫作也就近了一點,這也是我傾盡所有來寫這些內容的原因,雖然每次寫完一篇我就感覺自己的白頭發又多了幾根,啊哈哈!

錦明網絡點評:

如果您的Banner廣告在視覺上跟網站整體融合的很好,這會是個很好的網站,而且能贏得用戶的信任。但是不要讓它融入太多,廣告還是需要用戶能看到或點擊。

Banner廣告一定要設計簡單,內容直觀明確,因為用戶可能只打算看你的banner一眼。一句話能表達清楚的不要增添文本復雜性,讓用戶看著很繁瑣,設計底色單一化能更好識別,限時免費字樣跟其他文本有區分,讓用戶能在短時間內關注到主要信息點。



轉載聲明:本文由滕州網站優化-錦明SEO網絡整理發布
轉載請注明來源:http://www.k30302.cn/new/jianzhan/173.html
相關新聞
最新新聞
最新案例
錦明網絡—幫助企業塑造網絡品牌影響力,您身邊的網絡營銷專家!
分享按鈕 2018年一期东方心经 高碑店市| 乌拉特后旗| 静乐县| 南郑县| 乐山市| 宜兴市| 丹寨县| 昌图县| 寻甸| 中江县| 沁水县| 潮州市| 吉首市| 安多县| 井陉县| 徐州市| 留坝县| 莒南县| 泌阳县| 五寨县| 五河县| 木里| 虎林市| 巴东县| 娱乐| 肇东市| 尤溪县| 晋江市| 武清区| 莱州市| 沭阳县| 西和县| 成都市| 平南县| 涿鹿县| 诏安县| 西华县| 池州市| 乌兰察布市| 乐至县| 吉水县| http://baidu.7polqx.top http://www.airlineeng2.site http://www.lsjnjl.pw http://china.lsjato.club http://163.g5rxnf.top http://www.ablegolf3.cn