今天給大家講一下關(guān)于平面構(gòu)成的，包括「平面構(gòu)成的含義，電商banner的組成元素，如何運用平面構(gòu)成」等等，都是干貨。

在講之前，我先給大家列一個內(nèi)容大綱：

一、平面構(gòu)成的含義是什么？

二、電商Banner圖是由什么組成的？

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

四、平面構(gòu)成之于電商Banner圖的意義是什么？

五、總結(jié)

注：前半部分是給大家講解的基礎(chǔ)知識，后半部分是運用這些基礎(chǔ)知識結(jié)合實例講解，所以建議從頭到位耐心看完哦，需要些時間消化（經(jīng)濟基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個個問題來解剖：

一、平面構(gòu)成的含義是什么？

百度百科的解釋是：平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學的原理，進行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。

而我的理解是：平面構(gòu)成主要是在二維空間運用點、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時它也不是獨立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運用和身影。

二、電商Banner圖是由什么組成的？

Banner組成要素包含4個方面：文案 、商品／模特、背景、點綴物（可有可無）。

而我在之前反復強調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

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

那么，接下來我們就需要了解3個有關(guān)平面構(gòu)成的概念了：

1、元素與元素之間的排列關(guān)系

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

3、了解幾個常用的平面術(shù)語

接下來，我們分別了解下這幾個概念：

1、元素與元素之間的排列關(guān)系

它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。

分離：形與形之間不接觸，有一定距離。

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

重疊：形與形之間覆疊關(guān)系，由此產(chǎn)生上下前后的空間關(guān)系。

透疊：形與形有透明性的相互交疊，但不產(chǎn)生上下前后的空間關(guān)系。

結(jié)合：形與形相互結(jié)合成較大的新形狀。

減缺：形與形相互覆疊，覆疊的形狀被剪掉。

差疊：形與形相互交疊，交疊的部分產(chǎn)生一個新的形。

重合：形與形相互重合，變?yōu)橐惑w。

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

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

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

（1）重復，指在同一設(shè)計中，相同的形象出現(xiàn)過兩次以上，重復是設(shè)計中比較常用的手法，以加強給人的印象，造成有規(guī)律的節(jié)奏感，使畫面統(tǒng)一。所謂相同，在重復的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如：

1.形狀的重復
2.骨骼的重復
3.大小的重復
4.色彩的重復
5.肌理的重復
6.方向的重復

（2）近似，近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復感。近似程度小就會破壞統(tǒng)一。比如：

1.形狀的近似
2.骨骼的近似

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

1.形狀的漸變
2.方向的漸變
3.位置的漸變
4.大小的漸變
5.色彩的漸變
6.骨骼的漸變
7.光影的漸變

（4）對比，有時候是形態(tài)上的對比，有時是色彩和質(zhì)感的對比。對比可產(chǎn)生明朗、肯定、強烈的視覺效果，給人深刻的印象。比如：

1.形狀的對比
2.大小的對比
3.色彩的對比
4.肌理的對比
5.位置的對比
6.重心的對比
7.空間的對比
8.虛實的對比

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

1.點的密集
2.線的密集
3.面的密集

（6）發(fā)射，是一種常見的自然現(xiàn)象，太陽四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺焦點，所有的形象均向中心集中，或由中心散開，有時可造成光學動感，會產(chǎn)生爆炸的感覺，有強烈的視覺效果。

1.中心點的發(fā)射
2.螺旋式的發(fā)射
3.同心式的發(fā)射

（7）特異，是指構(gòu)成要素在有次序的關(guān)系里，有意違反次序，使少數(shù)個別的要素顯得突出，以打破規(guī)律性。

1.形狀的特異
2.大小的特異
3.色彩的特異
4.方向的特異
5.肌理的特異

（8）空間

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

利用重疊：前后／上下等關(guān)系。

利用陰影：使物體具有立體感／空間感。

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

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

利用色彩：冷色遠離，暖色靠近。

利用肌理：越粗糙越近，越細膩越遠。

矛盾空間：真實不存在的空間，假想的。

虛實關(guān)系：遠景／中景／近景。

（9）分割，把整體分成小的部分。比如：

1.等形分割
2.自由分割
3.比例與數(shù)量

（10）肌理，又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：

1.筆觸的變化
2.凹凸不平的肌理
3.噴繪/染
4.自帶的紋理效果

3、了解幾個常用的平面術(shù)語

和諧統(tǒng)一／對比突出／對稱／畫面平衡／視覺重心／節(jié)奏韻律

和諧統(tǒng)一：

元素與元素之間，或所有元素構(gòu)成的整體是一種協(xié)調(diào)的關(guān)系，比如大?。伾L格等的協(xié)調(diào)。

對比突出：

即把2個質(zhì)或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統(tǒng)一，比如大?。瘮?shù)量／色彩／形狀的對比。

對稱：

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

畫面平衡：

即元素與元素之間，元素與整體之間的大小／形狀／數(shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。

視覺重心：

通過對畫面中元素的數(shù)量／顏色／位置／大?。馁|(zhì)等進行處理，畫面中所出現(xiàn)的視覺焦點。

節(jié)奏韻律

畫面中的一種或多種元素按一定的規(guī)律排列，會產(chǎn)生音樂一般的旋律感。

四、平面構(gòu)成之于電商Banner圖的意義是什么？

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

（1）從活動主題的角度：

（2）從信息層級的角度：

（3）從品牌調(diào)性的角度

（4）從視覺美感的角度：

（1）從活動主題的角度：

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

（2）從信息層級的角度：

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

一般來說，一個好的Banner首先是要保證信息傳達準確，然后再需要保證畫面的協(xié)調(diào)感和氛圍的。

（3）從品牌調(diào)性的角度

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

我們可以從這幾個方面去看待品牌這個問題：風格延續(xù)／品牌統(tǒng)一／風格突破

（4）從視覺美感的角度

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

我們可以看下下面幾個關(guān)鍵詞：平衡畫面／視覺沖擊力／畫面不單調(diào)／富有創(chuàng)意等。

五、總結(jié)

以上，我分別給大家講了這幾個知識點：

一、平面構(gòu)成的含義是什么？

二、電商Banner圖是由什么組成的？

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

四、平面構(gòu)成之于電商Banner圖的意義是什么？

到此，平面構(gòu)成之于Banner設(shè)計的奧秘我就講完了，這次的內(nèi)容量非常大，估計夠你們消化不止一周了。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章標題：五步,細說BANNER圖設(shè)計之平面構(gòu)成的奧秘
本文網(wǎng)址：http://aaarwkj.com/news33/322183.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、、響應式網(wǎng)站、營銷型網(wǎng)站建設(shè)、建站公司、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)