电商 Banner 设计之五大年夜排版技巧

一、平面构成的含义是什么？

平面构成紧张是在二维空间利用点、线、面结合一定的规律所形成的一种视觉措辞，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同时它也不是独立存在的，而是伴随着色彩／肌理／光影等而存在的。
基本上世间万物，所有我们打仗到的或无法打仗到的，看得见的或看不见的事物里都有平面构成的利用和身影。

二、电商Banner图是由什么组成的？

Banner组成要素包含4个方面：文案 、商品／模特、背景、点缀物

而我在之前反复强调过的，Banner的浸染是：宣扬／展示／广而告之／准确传达信息。

三、我们该如何在Banner图设计中利用平面构成呢？

Banner中的所有元素（文案／商品或模特／背景／点缀物）实在都可以看作是平面构成里的点线面这些构成元素。

那么，接下来我们就须要理解3个有关平面构成的观点了：

1、元素与元素之间的排列关系

2、所有元素在一起所表示的构成形式

3、理解几个常用的平面术语

接下来，我们分别理解下这几个观点：

1、元素与元素之间的排列关系

它们之间的排列有下面这么几种：分离／相切／重叠／透叠／结合／减缺／差叠／重叠。

分离：形与形之间不打仗，有一定间隔。

相切：形与形之间的边缘恰好相切。

重叠：形与形之间覆叠关系，由此产生高下前后的空间关系。

透叠：形与形有透明性的相互交叠，但不产生高下前后的空间关系。

结合：形与形相互结合成较大的新形状。

减缺：形与形相互覆叠，覆叠的形状被剪掉。

差叠：形与形相互交叠，交叠的部分产生一个新的形。

重合：形与形相互重合，变为一体。

举几个例子：

2、所有元素在一起所表示的构成形式

从所有元素（点线面）整体看，其构成形式紧张有重复、近似、渐变、变异、比拟、集结、发射、特异、空间与抵牾空间、分割、肌理及错视等等。

下面我们分别来举例解释：

（1）重复

重复，指在同一设计中，相同的形象涌现过两次以上，重复是设计中比较常用的手腕，以加强给人的印象，造成有规律的节奏感，使画面统一。
所谓相同，在重复的构成中紧张是指形状、颜色、大小等方面的相同。
比如：

形状的重复

骨骼的重复

大小的重复

色彩的重复

肌理的重复

方向的重复

重复举例：电影《满城尽带黄金甲》剧照

Banner举例：模特重复排列叠加到背景里，既是一种纹理也是一种模特展示的办法。

（2）近似

近似，近似指的是在形状、大小、色彩、肌理等方面有着共同特色，它表现了在统一中呈现生动变革的效果。
近似的程度可大可小，如果近似的程度大就产生了重复感。
近似程度小就会毁坏统一。
比如：

形状的近似

骨骼的近似

近视举例：台湾的一对双胞胎姐妹

小时候

终年夜后

Banner举例：相同格局不同颜色的鞋子，大小不一的波点。

（3）渐变

渐变，是我常常听说的一种效果，在自然界中能亲自体验到，在行驶的道路上我们会感到树木由近到远、由大到小的渐变。
比如：

形状的渐变

方向的渐变

位置的渐变

大小的渐变

色彩的渐变

骨骼的渐变

光影的渐变

大小渐变举例：故宫淘宝前段韶光的表情包

（重复＋大小渐变）

举个例子：鞋子的排列办法。

背景的纹理形状。

（4）比拟

比拟，有时候是形态上的比拟，有时是色彩和质感的比拟。
比拟可产生明朗、肯定、强烈的视觉效果，给人深刻的印象。
比如：

形状的比拟

大小的比拟

色彩的比拟

肌理的比拟

位置的比拟

重心的比拟

空间的比拟

虚实的比拟

我们举个正经的例子吧：照片ps前后

Banner举例：

（5）密集

密集，密集在设计中是一种常用的组织图面的手腕，基本形在全体构图中可自由散布，有疏有密。
最疏或最密的地方常常成为全体设计的视觉焦点，他实在也是比拟的一种情形，越密集的地方给人觉得间隔越远，反之越近。

点的密集

线的密集

面的密集

密集举例：日本波点女王草间弥生的作品

草间弥生

Banner举例：

（6）发射

发射，是一种常见的自然征象，太阳四射的光芒便是发射的。
发射具有方向的规律性，发命中间为最主要的视觉焦点，所有的形象均向中央集中，或由中央散开，有时可造成光学动感，会产生爆炸的觉得，有强烈的视觉效果。

中央点的发射

螺旋式的发射

同心式的发射

发射举例：星轨／水波／不雅观世音菩萨背后自带的光环

水波

星轨（拍照）

Banner举例：放射线，使得画面聚焦到中间部分内容。

（7）特异

特异，是指构成要素在有次序的关系里，故意违反次序，使少数个别的要素显得突出，以冲破规律性。

形状的特异

大小的特异

色彩的特异

方向的特异

肌理的特异

特异举例：实在各种类似于连连看的游戏，便是这么个事理

Banner举例：一家人站成一排，个头比较小的那一个就给人一种特异和俏皮的觉得，使画面不那么单调。

（8）空间

利用大小：比如近大远小。

利用重叠：前后／高下等关系。

利用阴影：使物体具有立体感／空间感。

利用疏密：比如间隔越小，越密集，觉得就越远。

利用透视：平行线由宽到窄。

利用色彩：冷色阔别，暖色靠近。

利用肌理：越粗糙越近，越细腻越远。

抵牾空间：真实不存在的空间，假想的。

虚实关系：远景／中景／近景。

抵牾空间举例：前段韶光非常盛行的一款游戏《纪念碑谷》。

空间感Banner举例：画面中的元素可以假想为一些有大有小的点，然后按一定透视空间规律摆放（近大远小）。

由阴影营造的空间感。

（9）分割

分割，把整体分成小的部分。
比如：

等形分割

自由分割

比例与数量

分割举例：来自大自然的梯田

分割Banner举例：不同比例大小的色块组成Banner的背景。

商品的排列也可以起到分割画面的浸染。

（10）肌理

肌理，又称质感，由于物体的材料不同，表面的排列、组织、布局平分歧，因而产生粗糙感、光滑、软硬感。
比如：

笔触的变革

凹凸不平的肌理

喷绘/染

自带的纹理效果

肌理举例：木材等

肌理Banner举例： 背景采取喷墨＋涂色的办法形成了一种很时尚的纹理。

（11）错视

错视，因空间间隔或周围环境所造成的视觉差。
紧张有下面几种：

1.缪勒—莱依尔错视

图中两条线是等长的，由于高下线段两端的箭头方向相反，上线段的箭头霸占的空间大，以是上面的线显的较长。

2.垂直线与水平线的错视

大多数人每每把垂直线看的比水平线要长，这是高估的错觉。
在水平线长度为8-10mm时，这种错觉最大。

3.透视错视

图中的两条线是相等的。
看起来下面的要短，是由于透视的错觉。

4.正方形的错视

标准的正方形旁边的边看上客岁夜于高下的边。

5.黑白错视

图中黑白线段，由于白线段明度大，具有膨胀的征象，以是看以来比黑线段长。

6.由于图形构造的影响而产生的错视

图中组成三、四、五边形的边长都相等，但由于周长和面积的不同，产生边长的不同。

7.比拟错视

高个子和矮个子在一起，高的会显的越高，矮的会显的越矮。

错视举例：比如虚实手绘拼接，比如有些拍照作品

3、理解几个常用的平面术语，如下：

和谐统一／比拟突出／对称／画面平衡／视觉重心／节奏韵律

和谐统一：

元素与元素之间，或所有元素构成的整体是一种折衷的关系，比如大小／颜色风格等的折衷。

Banner举例：整体的通亮色彩，搭配的雨滴小元素，以及雨伞产品和模特装扮，左中右排版办法都看起来很折衷统一。

比拟突出：

即把2个质或者量反差很大的元素放在一起，使人觉得主体光鲜突出，整体又生动而统一，比如大小／数量／色彩／形状的比拟。

Banner举例：赤色模特部分面积比较大，无论是色彩还是面积上风，都使得它在柠檬黄背景上特殊突出。

对称：

假设在一个图形中间画一条垂直或水平线后，画面的旁边或高下2边是可以完备重合的，则我们称之为对。

Banner举例：范例的对称构图咯，Bra便是一个对称的形状。

画面平衡：

即元素与元素之间，元素与整体之间的大小／形状／数量／色彩／材质等的分布与视觉上的平衡。

Banner举例：旁边两边色彩面积上是平衡的，但是数量和形状上的略微差异，使得画面不那么单调。

视觉重心：

通过对画面中元素的数量／颜色／位置／大小／材质等进行处理，画面中所涌现的视觉焦点。

Banner举例：仿照撕纸效果形成的破洞，有一种视觉聚焦的效果。

节奏韵律：画面中的一种或多种元素按一定的规律排列，会产生音乐一样平常的旋律感。

Banner举例：鞋子摆放姿势不一样，产生了一种动律感，使画面不单调不呆板。

重点（高潮部分）来了！
！
！
！
！

以上讲了这么多知识点，那么结合这些知识点，我总结绘制了一些比较实用的Banner拍版

样式，如下图所示：

以上呢，我就先总结这么多，实在所有的Banner版式都是大同小异的，由于我们前面提到，Banner是由文案／模特或商品／背景／点缀物组成的，而所有这些元素就相称于我们平面构成里的点线面，当我们改变这些元素的角度／间隔／大小／数量／样式／颜色等，新的版式也就产生了，以是，大家不妨也试试看哦。

四、平面构成之于电商Banner图的意义是什么？

Banner中的所有元素实在都相称于平面构成里的点或线或面，而所有元素所组成的Banner画面实在又是一种感情和信息的表达，以是我们可以从下面4个方面去理解这个问题：

（1）从活动主题的角度：

（2）从信息层级的角度：

（3）从品牌调性的角度

（4）从视觉美感的角度：

（1）从活动主题的角度：

当我们拿到一个设计需求的时候，都会须要确定他的设计风格，而这个风格怎么来确定呢？便是要明白他的定位以及做事的人群是谁，理解他们的兴趣爱好，同时我们脑袋里会涌现下面这几个关键词：热闹匆匆销／年轻活力／高冷大牌／时尚个性／规矩守旧等。

我们先看几个Banner实例：

低价热闹匆匆销：画面中会有有比较多的点缀物，也喜好用大面积的暖色，其目的便是为了营造热闹的氛围，给人激情亲切有亲和力的觉得，板式以高下或者居中排版的办法多点，这种办法的视觉也更聚焦一些。

以是热闹匆匆销的页面可以考虑下面这些排版样式：

年轻活力：这种主题的Banner设计实在跟热闹匆匆销的方法类似，只是说，这种画面里的点缀元素或者模特样式须要表现得显得更加俏皮活力一些，色彩上也会比较艳丽或通亮，营造一种青春活力的觉得，排版办法实在没有什么特殊的限定，发挥空间非常大。

以是年轻活力的页面可以考虑下面这些排版样式：

高冷大牌：这种主题的Banner设计重在表示一种一样平常人买不起，买了之后会显得自己特殊有优胜感的印象，那么画面中就须要多留白，善用一些简洁的或有棱角的图形设计，切忌用一些比较卡哇伊或太柔美繁芜的线条，同时，商品或模特的品质要高，总而言之便是给人一种很贵很高真个觉得，这个跟低价热闹匆匆销是相反的。

以是高冷大牌的页面可以考虑下面这些排版样式：

（2）从信息层级的角度：

强调品牌（模特也属于品牌的一部分）

强调商品以及SALE

强调度体的氛围（商品融入在氛围当中了）

强调SALE

比如大家可以看到我之前给大家总结的版式，基本上文案信息都是比较突出的，其次商品突出或者强调度体氛围：

（3）从品牌调性的角度

关于品牌这块，可能是很多小商家目前不太重视，也以为自己用不上的，但是各大电商平台还有一些比较大的电商品牌都已经有这种品牌意识了，以是不管你是在哪种团队里，不防也都理解一下。

我们可以从这几个方面去看待品牌这个问题：风格延续／品牌统一／风格打破。

品牌统一：天猫的猫头形象，利用于各个品类的广告当中，这一创意既统一了品牌形象，又非常奥妙。

再比如初语：

一贯以来，初语的所有模特，在眼睛那里都有一条白线，虽然不明白什么意思，但是给人印象特殊深刻，形成那个了统一的品牌视觉形象，末了大家也看到了初语的新 logo，便是提取了眼睛那里的形象，新logo像下面这样：

而它原来的logo是这样的：

比拟创造，品牌形象更加统一了，也更有特色了

风格延续：这个在平台的比较大型的活动里里利用较多，比如各个分会场的风格延续（排版样式保持同等，只是改变了颜色和品类商品和文案等）

（4）从视觉美感的角度：

当一个Banner在知足了前面几个哀求的情形下，如果有能力的话，我们当然还是要做到达到视觉美感的哀求的，那么从这个角度看，平面构成之于Banner设计的意义是什么呢？

我们可以看下下面几个关键词：平衡画面／视觉冲击力／画面不单调／富有创意等。

平衡画面：左中右排版

视觉冲击力：放射线，中央聚焦

画面不单调：将产品的方向或颜色做一些不规则的排列，避免乏味。

富有创意：拟人化处理画面，营造一种身临其境的场景感。

五、总结以上，我分别给大家讲了以下几个知识点：

一、平面构成的含义是什么？

二、电商Banner图是由什么组成的？

三、我们该如何在Banner图设计中利用平面构成呢？

四、平面构成之于电商Banner图的意义是什么？