我之前說過要寫一系列專門針對電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個步驟細(xì)說電商banner圖設(shè)計之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。

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

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

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

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

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

五、總結(jié)

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

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

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

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

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

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

而我在之前反復(fù)強(qiáng)調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。

三、我們該如何在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)成形式主要有重復(fù)、近似、漸變、變異、對比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯視等等。

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

（1）重復(fù)

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

• 形狀的重復(fù)
• 骨骼的重復(fù)
• 大小的重復(fù)
• 色彩的重復(fù)
• 肌理的重復(fù)
• 方向的重復(fù)

重復(fù)舉例：電影《滿城盡帶黃金甲》劇照

Banner舉例：?模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。

（2）近似

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

• 形狀的近似
• 骨骼的近似

近視舉例：臺灣的一對雙胞胎姐妹

小時候

長大后

Banner舉例：?相同款式不同顏色的鞋子，大小不一的波點。

（3）漸變

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

• 形狀的漸變
• 方向的漸變
• 位置的漸變
• 大小的漸變
• 色彩的漸變
• 骨骼的漸變
• 光影的漸變

大小漸變舉例：故宮淘寶前段時間的表情包

（重復(fù)＋大小漸變）

舉個例子：

鞋子的排列方式。

背景的紋理形狀。

（4）對比

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

• 形狀的對比
• 大小的對比
• 色彩的對比
• 肌理的對比
• 位置的對比
• 重心的對比
• 空間的對比
• 虛實的對比

對比舉例：買家秀和買家秀。。。

開玩笑了，我們舉個正經(jīng)的例子吧：照片ps前后

Banner舉例：

（5）密集：

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

• 點的密集
• 線的密集
• 面的密集

密集舉例：

日本波點女王草間彌生的作品

草間彌生

Banner舉例：

（6）發(fā)射

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

• 中心點的發(fā)射
• 螺旋式的發(fā)射
• 同心式的發(fā)射

發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)

水波

星軌（攝影）

每次觀世音菩薩出場總是會自帶光環(huán)（大家小時候應(yīng)該都比較熟悉這些畫風(fēng)了吧，有點俗氣。。）

Banner舉例：放射線，使得畫面聚焦到中間部分內(nèi)容。

（7）特異

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

• 形狀的特異
• 大小的特異
• 色彩的特異
• 方向的特異
• 肌理的特異

特異舉例：其實各種類似于連連看的游戲，就是這么個原理

Banner舉例：?一家人站成一排，個頭比較小的那一個就給人一種特異和俏皮的感覺，使畫面不那么單調(diào)。

（8）空間

• 利用大?。罕热缃筮h(yuǎn)小。
• 利用重疊：前后／上下等關(guān)系。
• 利用陰影：使物體具有立體感／空間感。
• 利用疏密：比如間隔越小，越密集，感覺就越遠(yuǎn)。
• 利用透視：平行線由寬到窄。
• 利用色彩：冷色遠(yuǎn)離，暖色靠近。
• 利用肌理：越粗糙越近，越細(xì)膩越遠(yuǎn)。
• 矛盾空間：真實不存在的空間，假想的。
• 虛實關(guān)系：遠(yuǎn)景／中景／近景。

矛盾空間舉例：前段時間非常流行的一款游戲《紀(jì)念碑谷》。

空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)?。?/p>

由陰影營造的空間感

（9）分割

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

• 等形分割
• 自由分割
• 比例與數(shù)量

分割舉例：來自大自然的梯田

分割Banner舉例：?不同比例大小的色塊組成Banner的背景。

商品的排列也可以起到分割畫面的作用。

（10）肌理

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

• 筆觸的變化
• 凹凸不平的肌理
• 噴繪/染
• 自帶的紋理效果

肌理舉例：木材等

肌理Banner舉例：?背景采用噴墨＋涂色的方式形成了一種很時尚的紋理。

（11）錯視

因空間距離或周圍環(huán)境所造成的視覺差。主要有下面幾種：

1.繆勒—萊依爾錯視

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

2.垂直線與水平線的錯視

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

3.透視錯視

圖中的兩條線是相等的?？雌饋硐旅娴囊?，是因為透視的錯覺。

4.正方形的錯視

標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。

5.黑白錯視

圖中黑白線段，由于白線段明度大，具有膨脹的現(xiàn)象，所以看以來比黑線段長。

6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯視

圖中組成三、四、五邊形的邊長都相等，但由于周長和面積的不同，產(chǎn)生邊長的不同。

7.對比錯視

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

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

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

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

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

如下：

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

和諧統(tǒng)一：

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

Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來很協(xié)調(diào)統(tǒng)一。

對比突出：

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

Banner舉例：紅色模特部分面積比較大，無論是色彩還是面積優(yōu)勢，都使得它在檸檬黃背景上特別突出。

對稱：

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

Banner舉例：典型的對稱構(gòu)圖咯，Bra就是一個對稱的形狀。

畫面平衡：

即元素與元素之間，元素與整體之間的大?。螤睿瘮?shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。

Banner舉例：左右兩邊色彩面積上是平衡的，但是數(shù)量和形狀上的略微差異，使得畫面不那么單調(diào)。

視覺重心：

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

Banner舉例：模擬撕紙效果形成的破洞，有一種視覺聚焦的效果。

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

Banner舉例：?鞋子擺放姿勢不一樣，產(chǎn)生了一種動律感，使畫面不單調(diào)不呆板。

重點（高潮部分）來了?。。。。?/strong>