蘇州上元教育培訓(xùn)中心

初學(xué)者怎么學(xué)好平面設(shè)計(jì)

一，有一個(gè)好的老師，不管這個(gè)老師是人，抑或是書(shū)本。

一個(gè)好的老師，可以讓你少走很多彎路，用**短的時(shí)間，**快的速度學(xué)會(huì)你 想要的東西?？上У氖?，現(xiàn)在的書(shū)大部分都是為了商業(yè)利益，為了自身的利益而出，真正為讀者考慮，真正有水平有內(nèi)容的書(shū)，太少太少。隨便翻看市 面上的一個(gè)平面設(shè)計(jì)書(shū)，除了工具書(shū)，就是例子書(shū)。

二，要有很強(qiáng)的學(xué)習(xí)目的性。

學(xué)攝影的，就要學(xué)會(huì)如何處理照片，學(xué)會(huì)如何構(gòu)圖，如何平衡色調(diào)，如何打 光，如何體現(xiàn)層次感，如何進(jìn)行照片的合成等等。學(xué)商業(yè)美術(shù)的，就要多學(xué)軟件在商業(yè)中的具體應(yīng)用實(shí)例，多做商業(yè)包裝，商業(yè)廣告，POP，海報(bào)。學(xué) 插圖CG設(shè)計(jì)的，就要掌握如何勾勒人物，如何上色，如何體現(xiàn)層次，如何豐富人物表情，如何渲染氣氛與意境。

三，勤學(xué)苦練是基礎(chǔ)。

許多人有一種急功近利的心態(tài)。剛開(kāi)始接觸，就“眼高手低”（看到人家好 的作品，就想做出人家的那種效果），有目標(biāo)有想法是好的，但沒(méi)掌握基礎(chǔ)的東西，一步登天是很難的。多模仿別人的一些優(yōu)秀作品，先想辦法做得和 他們的一模一樣，只有這樣，說(shuō)明你的技巧到家了。

四，悟性與積累并重。

學(xué)藝術(shù)性的東西，需要靈性。有悟性的人一點(diǎn)就通。這一點(diǎn)需要一點(diǎn)天份。 百分之99的努力，外加百分之一的天賦，就成了設(shè)計(jì)天才。但這百分之一是**重要的。

如果不幸沒(méi)有這種天份，也不用擔(dān)心，悟性也是可以培養(yǎng)的。多與大自然接 觸，就會(huì)給你很多的靈感，賦予你靈氣。其次，多接觸一些美的東西，像一些藝術(shù)品，雕塑，音樂(lè)等等。等到有了一定的積累，那時(shí)候你的思維就可以 天馬行空，任你馳騁了。

五，那就是偉大的IDEA了。好的創(chuàng)意是一個(gè)好的作品的靈魂。

在依葫蘆畫(huà)瓢之后，你的技巧已經(jīng)純熟了。那你就需要有自己的東西了。你 要開(kāi)始創(chuàng)作屬于自己的作品。可以首先設(shè)計(jì)自己的簽名開(kāi)始，進(jìn)一步做自己的名片，設(shè)計(jì)自己的VI，整合自己的公司或工作室，呵呵，這樣你就會(huì)積累 一些成就感。

學(xué)任何東西，重要的是要體會(huì)到成就感，有成就感，動(dòng)力就會(huì)越足。從而形 成良性循環(huán)。

平面廣告設(shè)計(jì)師高級(jí)班

1.PS基礎(chǔ)學(xué)習(xí)	熟練掌握選框、畫(huà)筆、圖章、鋼 筆、路徑、修復(fù)等PS各項(xiàng)工具,快速入門(mén)。
2.淘寶修圖	掌握淘寶修圖、批量添加去水印 、調(diào)色上色、圖片編輯技巧。
3.寶貝描述	學(xué)完能快速制作寶貝詳情頁(yè)面， 開(kāi)淘寶店從此不用愁。
4.摳圖技巧	掌握復(fù)雜人像各種摳圖、編輯技 巧，學(xué)完可達(dá)到影樓專(zhuān)業(yè)修圖人員水平。
5.基礎(chǔ)合成	綜合運(yùn)用各種工具，把兩張圖片 巧妙的合成一張，移花接木。
6.剪貼蒙版	掌握剪貼蒙版在PS摳圖過(guò)程中的 運(yùn)用。
7.PS濾鏡	學(xué)習(xí)PS濾鏡及各種外掛濾鏡，制 作各種藝術(shù)特效。
8.圖層樣式	掌握?qǐng)D層樣式，可以簡(jiǎn)單快捷地 制作出各種立體投影，質(zhì)感以及光景效果的圖像特效。
9.形狀圖層	可以方便地移動(dòng)、對(duì)齊、分布形 狀圖層以及調(diào)整其大小，在PS中應(yīng)用極其方便廣泛。
10.交互設(shè)計(jì)	掌握交互設(shè)計(jì)原則，流程規(guī)范， 學(xué)完能做移動(dòng)APP界面、圖標(biāo)設(shè)計(jì)。
11.網(wǎng)頁(yè)BANNER設(shè)計(jì)	實(shí)戰(zhàn)訓(xùn)練，掌握網(wǎng)頁(yè)BANNER排版 、風(fēng)格、顏色搭配技巧，制作高大上、吸睛無(wú)數(shù)的網(wǎng)頁(yè)網(wǎng)頁(yè)BANNER。
12.網(wǎng)頁(yè)設(shè)計(jì)	掌握網(wǎng)頁(yè)設(shè)計(jì)流程、設(shè)計(jì)原理、 尺寸等基礎(chǔ)知識(shí)，學(xué)完能進(jìn)行基本網(wǎng)頁(yè)設(shè)計(jì)。
13.PS實(shí)戰(zhàn)訓(xùn)練	**大量實(shí)戰(zhàn)訓(xùn)練，能勝任網(wǎng)頁(yè) banner設(shè)計(jì)、交互設(shè)計(jì)、海報(bào)設(shè)計(jì)、淘寶美工等工作。

五大步驟！細(xì)說(shuō)Banner圖設(shè)計(jì)之平面構(gòu)成的奧秘

---

@TTTing1?：之前說(shuō)過(guò)要寫(xiě)一系列專(zhuān)門(mén)針對(duì)電商三大構(gòu)成的文章，在上篇文章中已經(jīng)給大家梳理了一篇關(guān)于色彩的：六個(gè)步驟細(xì)說(shuō)電商banner圖設(shè)計(jì)之色彩的奧秘，今天就接著給大家講一下關(guān)于平面構(gòu)成的，包括「平面構(gòu)成的含義，電商banner的組成元素，如何運(yùn)用平面構(gòu)成」等等，都是干貨。

小婷姐的電商設(shè)計(jì)系列好文：

1. 《新人手冊(cè)！聊聊關(guān)于電商設(shè)計(jì)的那些事兒》
2. 《前輩經(jīng)驗(yàn)！聊聊新人設(shè)計(jì)師**容易遇到的12個(gè)問(wèn)題》
3. 《不怕沒(méi)靈感了！SALE 招牌的9種排版設(shè)計(jì)方法歸納（附案例）》
4. 《如何辨別一個(gè)BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（下集）》
7. 《感覺(jué)技不如人？聊聊設(shè)計(jì)師該如何正確認(rèn)知自己的價(jià)值》
8. 《超長(zhǎng)干貨！平臺(tái)電商設(shè)計(jì)師vs店鋪電商設(shè)計(jì)師哪個(gè)好？》
9. 《職場(chǎng)進(jìn)階術(shù)！哪些性格特質(zhì)有助于設(shè)計(jì)師的成長(zhǎng)和提升？》
10. 《設(shè)計(jì)師項(xiàng)目做到一半總是想要放棄怎么辦？（附問(wèn)答合集）》
11. 《超實(shí)用！從人性的角度揭露電商BANNER圖設(shè)計(jì)背后的秘密》

在講之前，我先給大家列一個(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ǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來(lái)我們一個(gè)個(gè)問(wèn)題來(lái)解剖：

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

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

而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線(xiàn)、面結(jié)合一定的規(guī)律所形成的一種視覺(jué)語(yǔ)言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的?；旧鲜篱g萬(wàn)物，所有我們接觸到的或無(wú)法接觸到的，看得見(jiàn)的或看不見(jiàn)的事物里都有平面構(gòu)成的運(yùn)用和身影。

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

Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無(wú)）。

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

三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？

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

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

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

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

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

接下來(lái)，我們分別了解下這幾個(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)線(xiàn)面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對(duì)比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。

下面我們分別來(lái)舉例說(shuō)明：

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

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

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

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

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

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

近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹

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

（3）漸變，是我常常聽(tīng)說(shuō)的一種效果，在自然界中能親身體驗(yàn)到，在行駛的道路上我們會(huì)感到樹(shù)木由近到遠(yuǎn)、由大到小的漸變。比如：

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

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

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

舉個(gè)例子：?鞋子的排列方式。

背景的紋理形狀。

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

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

對(duì)比舉例：買(mǎi)家秀和買(mǎi)家秀 。。。

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

Banner舉例：

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

1. 點(diǎn)的密集
2. 線(xiàn)的密集
3. 面的密集

密集舉例：日本波點(diǎn)女王草間彌生的作品

Banner舉例：

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

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

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

△ 水波

△ 星軌（攝影）

△ 每次觀世音菩薩出場(chǎng)總是會(huì)自帶光環(huán)（大家小時(shí)候應(yīng)該都比較熟悉這些畫(huà)風(fēng)了吧）

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

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

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

特異舉例：其實(shí)各種類(lèi)似于連連看的游戲，就是這么個(gè)原理：

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

（8）空間

利用大?。罕热缃筮h(yuǎn)小。

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

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

利用疏密：比如間隔越小，越密集，感覺(jué)就越遠(yuǎn)。

利用透視：平行線(xiàn)由寬到窄。

利用色彩：冷色遠(yuǎn)離，暖色靠近。

利用肌理：越粗糙越近，越細(xì)膩越遠(yuǎn)。

矛盾空間：真實(shí)不存在的空間，假想的。

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

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

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

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

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

分割舉例：來(lái)自大自然的梯田

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

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

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

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

肌理舉例：木材等

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

（11）錯(cuò)視，因空間距離或周?chē)h(huán)境所造成的視覺(jué)差。主要有下面幾種：

1. 繆勒—萊依爾錯(cuò)視

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

2. 垂直線(xiàn)與水平線(xiàn)的錯(cuò)視

大多數(shù)人往往把垂直線(xiàn)看的比水平線(xiàn)要長(zhǎng)，這是高估的錯(cuò)覺(jué)。在水平線(xiàn)長(zhǎng)度為8-10mm時(shí)，這種錯(cuò)覺(jué)**大。

3. 透視錯(cuò)視

圖中的兩條線(xiàn)是相等的。看起來(lái)下面的要短，是因?yàn)橥敢暤腻e(cuò)覺(jué)。

4. 正方形的錯(cuò)視

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

5. 黑白錯(cuò)視

圖中黑白線(xiàn)段，由于白線(xiàn)段明度大，具有膨脹的現(xiàn)象，所以看以來(lái)比黑線(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í)手繪拼接，比如有些攝影作品：

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

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

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

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

和諧統(tǒng)一：

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

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

對(duì)比突出：

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

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

對(duì)稱(chēng)：

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

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

畫(huà)面平衡：

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

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

視覺(jué)重心：

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

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

節(jié)奏韻律

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

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

重點(diǎn)（高潮部分）來(lái)了?。。。?！

以上講了這么多知識(shí)點(diǎn)，那么結(jié)合這些知識(shí)點(diǎn)，我總結(jié)繪制了一些比較實(shí)用的Banner排版樣式，如下圖所示：

以上呢，我就先總結(jié)這么多，其實(shí)所有的Banner版式都是大同小異的，因?yàn)槲覀兦懊嫣岬?，Banner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當(dāng)于我們平面構(gòu)成里的點(diǎn)線(xiàn)面，當(dāng)我們改變這些元素的角度／距離／大小／數(shù)量／樣式／顏色等，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。

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

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

（1）從活動(dòng)主題的角度：

（2）從信息層級(jí)的角度：

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

（4）從視覺(jué)美感的角度：

（1）從活動(dòng)主題的角度：

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

我們先看幾個(gè)Banner實(shí)例：

低價(jià)熱鬧促銷(xiāo)：畫(huà)面中會(huì)有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營(yíng)造熱鬧的氛圍，給人熱情有親和力的感覺(jué)，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺(jué)也更聚焦一些。

所以熱鬧促銷(xiāo)的頁(yè)面可以考慮下面這些排版樣式：

年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷(xiāo)的方法類(lèi)似，只是說(shuō)，這種畫(huà)面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營(yíng)造一種青春活力的感覺(jué)，排版方式其實(shí)沒(méi)有什么特別的限制，發(fā)揮空間非常大。

所以年輕活力的頁(yè)面可以考慮下面這些排版樣式：

高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買(mǎi)不起，買(mǎi)了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫(huà)面中就需要多留白，善用一些簡(jiǎn)潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線(xiàn)條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺(jué)（窮人買(mǎi)不起，有錢(qián)人買(mǎi)了有面子），這個(gè)跟低價(jià)熱鬧促銷(xiāo)是相反的。

所以高冷大牌的頁(yè)面可以考慮下面這些排版樣式：

（2）從信息層級(jí)的角度：

當(dāng)我們?cè)谧鲆粋€(gè)banner的時(shí)候，如果沒(méi)有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問(wèn)下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強(qiáng)調(diào)整體的協(xié)調(diào)感呢？還是說(shuō)強(qiáng)調(diào)品牌呢？

一般來(lái)說(shuō)，一個(gè)好的Banner首先是要保證信息傳達(dá)準(zhǔn)確，然后再需要保證畫(huà)面的協(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)于品牌這塊，可能是很多小商家目前不太重視，也覺(jué)得自己用不上的，但是各大電商平臺(tái)還有一些比較大的電商品牌都已經(jīng)有這種品牌意識(shí)了，所以不管你是在哪種團(tuán)隊(duì)里，不防也都了解一下。

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

品牌統(tǒng)一：天貓的貓頭形象，運(yùn)用于各個(gè)品類(lèi)的廣告當(dāng)中，這一創(chuàng)意既統(tǒng)一了品牌形象，又非常巧妙。

再比如初語(yǔ)：

一直以來(lái)，初語(yǔ)的所有模特，在眼睛那里都有一條白線(xiàn)，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統(tǒng)一的品牌視覺(jué)形象，**后大家也看到了初語(yǔ)的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：

而它原來(lái)的logo是這樣的：

對(duì)比發(fā)現(xiàn)，品牌形象更加統(tǒng)一了，也更有特色了（雖然會(huì)讓一些沒(méi)聽(tīng)過(guò)這個(gè)品牌的人以為它是賣(mài)面膜的，不過(guò)對(duì)于接觸過(guò)這個(gè)服裝品牌的人來(lái)說(shuō)還是很好理解的）。

風(fēng)格延續(xù)

這個(gè)在平臺(tái)的比較大型的活動(dòng)里里運(yùn)用較多，比如各個(gè)分會(huì)場(chǎng)的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類(lèi)商品和文案等）

風(fēng)格突破

關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說(shuō)原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長(zhǎng)轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶(hù)群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。

比如QQlogo形象的升級(jí)：

對(duì)于這個(gè)話(huà)題，我們后面再抽出一篇文章單獨(dú)來(lái)講好了，大家感興趣嗎？

（4）從視覺(jué)美感的角度

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

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

平衡畫(huà)面：左中右排版

視覺(jué)沖擊力：放射線(xiàn)，中心聚焦：

畫(huà)面不單調(diào)：將產(chǎn)品的方向或顏色做一些不規(guī)則的排列，避免乏味：

富有創(chuàng)意：擬人化處理畫(huà)面，營(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)注小婷姐的微信公眾號(hào)「TTTink-D」，一個(gè)干貨與文筆俱佳的美女設(shè)計(jì)師：

微信公眾號(hào)簡(jiǎn)介：專(zhuān)注開(kāi)拓電商設(shè)計(jì)思維，不定期分享一些個(gè)人見(jiàn)解干貨，當(dāng)然也會(huì)分享一些頂級(jí)創(chuàng)意、攝影、人生感悟方面的好文啦。

「配色達(dá)人速成三部曲」

Step 1：打好色彩基礎(chǔ)是關(guān)鍵呦！
《設(shè)計(jì)師配色寶典！教你從零開(kāi)始學(xué)配色（一）》

Step 2：進(jìn)階技巧！向高手模仿是捷徑！
《配色弱有救了！教你利用圖片創(chuàng)建獨(dú)有的色彩方案》

Step 3：直接開(kāi)掛！不保證頂尖但一定正確！
《秒變配色高手！怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》

【聯(lián)展網(wǎng) 原創(chuàng)文章 】

================關(guān)于聯(lián)展網(wǎng)================
“聯(lián)展網(wǎng)“是國(guó)內(nèi)人氣**高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：****全的設(shè)計(jì)師圖書(shū)導(dǎo)航：/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、**頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：

相關(guān)推薦：

---

蘇州平面設(shè)計(jì)培訓(xùn)   蘇州平面設(shè)計(jì)培訓(xùn)班   蘇州平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu)