我之前說過要寫一系列專門針對(duì)電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個(gè)步驟細(xì)說電商banner圖設(shè)計(jì)之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。
在講之前，我先給大家列一個(gè)內(nèi)容大綱：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
五、總結(jié)
注：前半部分是給大家講解的基礎(chǔ)知識(shí)，后半部分是運(yùn)用這些基礎(chǔ)知識(shí)結(jié)合實(shí)例講解，所以建議從頭到位耐心看完哦，需要些時(shí)間消化（經(jīng)濟(jì)基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個(gè)個(gè)問題來解剖：
一、平面構(gòu)成的含義是什么？
百度百科的解釋是：平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。
而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運(yùn)用和身影。
二、電商Banner圖是由什么組成的？
Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無）。
而我在之前反復(fù)強(qiáng)調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
在前面我們提到，平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構(gòu)成里的點(diǎn)線面這些構(gòu)成元素。
那么，接下來我們就需要了解3個(gè)有關(guān)平面構(gòu)成的概念了：
- 元素與元素之間的排列關(guān)系
- 所有元素在一起所體現(xiàn)的構(gòu)成形式
- 了解幾個(gè)常用的平面術(shù)語
接下來，我們分別了解下這幾個(gè)概念：
1、元素與元素之間的排列關(guān)系
它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。
- 分離：形與形之間不接觸，有一定距離。
- 相切：形與形之間的邊緣正好相切。
- 重疊：形與形之間覆疊關(guān)系，由此產(chǎn)生上下前后的空間關(guān)系。
- 透疊：形與形有透明性的相互交疊，但不產(chǎn)生上下前后的空間關(guān)系。
- 結(jié)合：形與形相互結(jié)合成較大的新形狀。
- 減缺：形與形相互覆疊，覆疊的形狀被剪掉。
- 差疊：形與形相互交疊，交疊的部分產(chǎn)生一個(gè)新的形。
- 重合：形與形相互重合，變?yōu)橐惑w。
舉幾個(gè)例子：
2、所有元素在一起所體現(xiàn)的構(gòu)成形式
從所有元素（點(diǎn)線面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對(duì)比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。
下面我們分別來舉例說明：
（1）重復(fù)
指在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次以上，重復(fù)是設(shè)計(jì)中比較常用的手法，以加強(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)生動(dòng)變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會(huì)破壞統(tǒng)一。比如：
近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹
小時(shí)候
長(zhǎng)大后
Banner舉例： 相同款式不同顏色的鞋子，大小不一的波點(diǎn)。
（3）漸變
是我常常聽說的一種效果，在自然界中能親身體驗(yàn)到，在行駛的道路上我們會(huì)感到樹木由近到遠(yuǎn)、由大到小的漸變。比如：
- 形狀的漸變
- 方向的漸變
- 位置的漸變
- 大小的漸變
- 色彩的漸變
- 骨骼的漸變
- 光影的漸變
大小漸變舉例：故宮淘寶前段時(shí)間的表情包
（重復(fù)＋大小漸變）
舉個(gè)例子：
鞋子的排列方式。
背景的紋理形狀。
（4）對(duì)比
有時(shí)候是形態(tài)上的對(duì)比，有時(shí)是色彩和質(zhì)感的對(duì)比。對(duì)比可產(chǎn)生明朗、肯定、強(qiáng)烈的視覺效果，給人深刻的印象。比如：
- 形狀的對(duì)比
- 大小的對(duì)比
- 色彩的對(duì)比
- 肌理的對(duì)比
- 位置的對(duì)比
- 重心的對(duì)比
- 空間的對(duì)比
- 虛實(shí)的對(duì)比
對(duì)比舉例：買家秀和買家秀。。。
開玩笑了，我們舉個(gè)正經(jīng)的例子吧：照片ps前后
Banner舉例：
（5）密集：
密集在設(shè)計(jì)中是一種常用的組織圖面的手法，基本形在整個(gè)構(gòu)圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設(shè)計(jì)的視覺焦點(diǎn)，他其實(shí)也是對(duì)比的一種情況，越密集的地方給人感覺距離越遠(yuǎn)，反之越近。
密集舉例：
日本波點(diǎn)女王草間彌生的作品
草間彌生
Banner舉例：
（6）發(fā)射
是一種常見的自然現(xiàn)象，太陽四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺焦點(diǎn)，所有的形象均向中心集中，或由中心散開，有時(shí)可造成光學(xué)動(dòng)感，會(huì)產(chǎn)生爆炸的感覺，有強(qiáng)烈的視覺效果。
- 中心點(diǎn)的發(fā)射
- 螺旋式的發(fā)射
- 同心式的發(fā)射
發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)
水波
星軌（攝影）
每次觀世音菩薩出場(chǎng)總是會(huì)自帶光環(huán)（大家小時(shí)候應(yīng)該都比較熟悉這些畫風(fēng)了吧，有點(diǎn)俗氣。。）
Banner舉例：放射線，使得畫面聚焦到中間部分內(nèi)容。
（7）特異
是指構(gòu)成要素在有次序的關(guān)系里，有意違反次序，使少數(shù)個(gè)別的要素顯得突出，以打破規(guī)律性。
- 形狀的特異
- 大小的特異
- 色彩的特異
- 方向的特異
- 肌理的特異
特異舉例：其實(shí)各種類似于連連看的游戲，就是這么個(gè)原理
Banner舉例： 一家人站成一排，個(gè)頭比較小的那一個(gè)就給人一種特異和俏皮的感覺，使畫面不那么單調(diào)。
（8）空間
- 利用大小：比如近大遠(yuǎn)小。
- 利用重疊：前后／上下等關(guān)系。
- 利用陰影：使物體具有立體感／空間感。
- 利用疏密：比如間隔越小，越密集，感覺就越遠(yuǎn)。
- 利用透視：平行線由寬到窄。
- 利用色彩：冷色遠(yuǎn)離，暖色靠近。
- 利用肌理：越粗糙越近，越細(xì)膩越遠(yuǎn)。
- 矛盾空間：真實(shí)不存在的空間，假想的。
- 虛實(shí)關(guān)系：遠(yuǎn)景／中景／近景。
矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀(jì)念碑谷》。
空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)小）。
由陰影營(yíng)造的空間感
（9）分割
把整體分成小的部分。比如：
分割舉例：來自大自然的梯田
分割Banner舉例： 不同比例大小的色塊組成Banner的背景。
商品的排列也可以起到分割畫面的作用。
（10）肌理
又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：
- 筆觸的變化
- 凹凸不平的肌理
- 噴繪/染
- 自帶的紋理效果
肌理舉例：木材等
肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。
（11）錯(cuò)視
因空間距離或周圍環(huán)境所造成的視覺差。主要有下面幾種：
1.繆勒—萊依爾錯(cuò)視
圖中兩條線是等長(zhǎng)的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據(jù)的空間大，所以上面的線顯的較長(zhǎng)。
2.垂直線與水平線的錯(cuò)視
大多數(shù)人往往把垂直線看的比水平線要長(zhǎng)，這是高估的錯(cuò)覺。在水平線長(zhǎng)度為8-10mm時(shí)，這種錯(cuò)覺最大。
3.透視錯(cuò)視
圖中的兩條線是相等的。看起來下面的要短，是因?yàn)橥敢暤腻e(cuò)覺。
4.正方形的錯(cuò)視
標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。
5.黑白錯(cuò)視
圖中黑白線段，由于白線段明度大，具有膨脹的現(xiàn)象，所以看以來比黑線段長(zhǎng)。
6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯(cuò)視
圖中組成三、四、五邊形的邊長(zhǎng)都相等，但由于周長(zhǎng)和面積的不同，產(chǎn)生邊長(zhǎng)的不同。
7.對(duì)比錯(cuò)視
高個(gè)子和矮個(gè)子在一起，高的會(huì)顯的越高，矮的會(huì)顯的越矮。
錯(cuò)視舉例：比如虛實(shí)手繪拼接，比如有些攝影作品
這里要說明的是，錯(cuò)視在一些視差動(dòng)畫的網(wǎng)頁頁面里運(yùn)用的會(huì)比較多一些，還有一些app的引導(dǎo)頁，這里Banner舉例的話可能也不太合適，不過也可以給大家看一下：
比如這個(gè)畫面里的黃色圓點(diǎn)，同樣的黃色圓點(diǎn)，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見了，但其實(shí)原點(diǎn)是沒變的，只是背景的顏色變了，就導(dǎo)致我們看到了不一樣的結(jié)果。
3、了解幾個(gè)常用的平面術(shù)語
如下：
和諧統(tǒng)一／對(duì)比突出／對(duì)稱／畫面平衡／視覺重心／節(jié)奏韻律
和諧統(tǒng)一：
元素與元素之間，或所有元素構(gòu)成的整體是一種協(xié)調(diào)的關(guān) 系，比如大小／顏色風(fēng)格等的協(xié)調(diào)。
Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來很協(xié)調(diào)統(tǒng)一。
對(duì)比突出：
即把2個(gè)質(zhì)或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統(tǒng)一，比如大小／數(shù)量／色彩／形狀的對(duì)比。
Banner舉例：紅色模特部分面積比較大，無論是色彩還是面積優(yōu)勢(shì)，都使得它在檸檬黃背景上特別突出。
對(duì)稱：
假設(shè)在一個(gè)圖形中間畫一條垂直或水平線后，畫面的左右或上下2邊是可以完全重合的，則我們稱之為對(duì)稱。
Banner舉例：典型的對(duì)稱構(gòu)圖咯，Bra就是一個(gè)對(duì)稱的形狀。
畫面平衡：
即元素與元素之間，元素與整體之間的大小／形狀／數(shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。
Banner舉例：左右兩邊色彩面積上是平衡的，但是數(shù)量和形狀上的略微差異，使得畫面不那么單調(diào)。
視覺重心：
通過對(duì)畫面中元素的數(shù)量／顏色／位置／大小／材質(zhì)等進(jìn)行處理，畫面中所出現(xiàn)的視覺焦點(diǎn)。
Banner舉例：模擬撕紙效果形成的破洞，有一種視覺聚焦的效果。
節(jié)奏韻律：畫面中的一種或多種元素按一定的規(guī)律排列，會(huì)產(chǎn)生音樂一般的旋律感。
Banner舉例： 鞋子擺放姿勢(shì)不一樣，產(chǎn)生了一種動(dòng)律感，使畫面不單調(diào)不呆板。
重點(diǎn)（高潮部分）來了！！！！！
以上講了這么多知識(shí)點(diǎn)，那么結(jié)合這些知識(shí)點(diǎn)，我總結(jié)繪制了一些比較實(shí)用的Banner排版
樣式，如下圖所示：
以上呢，我就先總結(jié)這么多，其實(shí)所有的Banner版式都是大同小異的，因?yàn)槲覀兦懊嫣岬剑珺anner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當(dāng)于我們平面構(gòu)成里的點(diǎn)線面，當(dāng)我們改變這些元素的角度／距離／大小／數(shù)量／樣式／顏色等，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。
四、平面構(gòu)成之于電商Banner圖的意義是什么？
Banner中的所有元素其實(shí)都相當(dāng)于平面構(gòu)成里的點(diǎn)或線或面，而所有元素所組成的Banner畫面其實(shí)又是一種情緒和信息的表達(dá)，所以我們可以從下面4個(gè)方面去理解這個(gè)問題：
（1）從活動(dòng)主題的角度：
當(dāng)我們拿到一個(gè)設(shè)計(jì)需求的時(shí)候，都會(huì)需要確定他的設(shè)計(jì)風(fēng)格，而這個(gè)風(fēng)格怎么來確定呢？就是要明白他的定位以及服務(wù)的人群是誰，了解他們的興趣愛好，同時(shí)我們腦袋里會(huì)出現(xiàn)下面這幾個(gè)關(guān)鍵詞：熱鬧促銷／年輕活力／高冷大牌／時(shí)尚個(gè)性／規(guī)矩保守等
我們先看幾個(gè)Banner實(shí)例：
低價(jià)熱鬧促銷：畫面中會(huì)有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營(yíng)造熱鬧的氛圍，給人熱情有親和力的感覺，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺也更聚焦一些。
所以熱鬧促銷的頁面可以考慮下面這些排版樣式：
年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷的方法類似，只是說，這種畫面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營(yíng)造一種青春活力的感覺，排版方式其實(shí)沒有什么特別的限制，發(fā)揮空間非常大。
所以年輕活力的頁面可以考慮下面這些排版樣式：
高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買不起，買了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫面中就需要多留白，善用一些簡(jiǎn)潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺（窮人買不起，有錢人買了有面子），這個(gè)跟低價(jià)熱鬧促銷是相反的。
所以高冷大牌的頁面可以考慮下面這些排版樣式：
（2）從信息層級(jí)的角度：
當(dāng)我們?cè)谧鲆粋€(gè)banner的時(shí)候，如果沒有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強(qiáng)調(diào)整體的協(xié)調(diào)感呢？還是說強(qiáng)調(diào)品牌呢？
一般來說，一個(gè)好的Banner首先是要保證信息傳達(dá)準(zhǔn)確，然后再需要保證畫面的協(xié)調(diào)感和氛圍的。
那么我先給大家看幾個(gè)案例舉例：
強(qiáng)調(diào)品牌（模特也屬于品牌的一部分）
強(qiáng)調(diào)商品以及SALE
強(qiáng)調(diào)整體的氛圍（商品融入在氛圍當(dāng)中了）
強(qiáng)調(diào)SALE
比如大家可以看到我之前給大家總結(jié)的版式，基本上文案信息都是比較突出的，其次商品突出或者強(qiáng)調(diào)整體氛圍：
（3）從品牌調(diào)性的角度
關(guān)于品牌這塊，可能是很多小商家目前不太重視，也覺得自己用不上的，但是各大電商平臺(tái)還有一些比較大的電商品牌都已經(jīng)有這種品牌意識(shí)了，所以不管你是在哪種團(tuán)隊(duì)里，不防也都了解一下。
我們可以從這幾個(gè)方面去看待品牌這個(gè)問題：風(fēng)格延續(xù)／品牌統(tǒng)一／風(fēng)格突破
品牌統(tǒng)一：天貓的貓頭形象，運(yùn)用于各個(gè)品類的廣告當(dāng)中，這一創(chuàng)意既統(tǒng)一了品牌形象，又非常巧妙。
再比如初語：
一直以來，初語的所有模特，在眼睛那里都有一條白線，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統(tǒng)一的品牌視覺形象，最后大家也看到了初語的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：
而它原來的logo是這樣的：
對(duì)比發(fā)現(xiàn)，品牌形象更加統(tǒng)一了，也更有特色了（雖然會(huì)讓一些沒聽過這個(gè)品牌的人以為它是賣面膜的，不過對(duì)于接觸過這個(gè)服裝品牌的人來說還是很好理解的）。
風(fēng)格延續(xù)：這個(gè)在平臺(tái)的比較大型的活動(dòng)里里運(yùn)用較多，比如各個(gè)分會(huì)場(chǎng)的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類商品和文案等）
風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長(zhǎng)轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。
比如QQlogo形象的升級(jí)：
對(duì)于這個(gè)話題，我們后面再抽出一篇文章單獨(dú)來講好了，大家感興趣嗎？
（4）從視覺美感的角度：
當(dāng)一個(gè)Banner在滿足了前面幾個(gè)要求的情況下，如果有能力的話，我們當(dāng)然還是要做到達(dá)到視覺美感的要求的，那么從這個(gè)角度看，平面構(gòu)成之于Banner設(shè)計(jì)的意義是什么呢？
我們可以看下下面幾個(gè)關(guān)鍵詞：平衡畫面／視覺沖擊力／畫面不單調(diào)／富有創(chuàng)意等。
平衡畫面：左中右排版
視覺沖擊力：放射線，中心聚焦
畫面不單調(diào)：將產(chǎn)品的方向或顏色做一些不規(guī)則的排列，避免乏味
富有創(chuàng)意：擬人化處理畫面，營(yíng)造一種身臨其境的場(chǎng)景感
五、總結(jié)
以上，我分別給大家講了這幾個(gè)知識(shí)點(diǎn)：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
到此，平面構(gòu)成之于Banner設(shè)計(jì)的奧秘我就講完了，這次的內(nèi)容量非常大，估計(jì)夠你們消化不止一周了，而我也沒有分為上下篇來寫，原因有二：一方面是跟我自己的性格有關(guān)，我不太習(xí)慣分篇來講一個(gè)知識(shí)點(diǎn)，一個(gè)完整的知識(shí)點(diǎn)不管從哪里切斷我都會(huì)感覺不舒服，就像你吃一個(gè)東西吃得正爽，卻被別人告知說：“另一半要留著下次再吃哦”，雖然這樣子可以增加大家對(duì)下一篇文章的期待，但也會(huì)感覺不爽吧（不過為了大家不要吃撐了最好是收藏起來或轉(zhuǎn)發(fā)出去，以便后面再細(xì)細(xì)看）。
本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.devb.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
