写在前面：
我之前说过，我会专门针对电子商务的三大组成部分写一系列文章。在上一篇文章中，我整理了一篇关于色彩的文章：六个步骤来阐述电商横幅设计中色彩的奥秘。所以今天我就给大家讲一篇关于平面构成的文章。
在讲之前，我先给大家列一个内容大纲：
一、平面构成的含义是什么？
二、电商Banner图是由什么组成的？
三、我们该如何在Banner图设计中运用平面构成呢？
四、平面构成之于电商Banner图的意义是什么？
五、总结
注：前半部分是基础知识给大家讲解，后半部分是这些基础知识结合实例的应用来讲解，所以建议从头到尾耐心看完，需要一段时间消化(经济基础决定上层建筑，不看前面看不懂)，接下来我们一个个问题来解剖：。
一、平面构成的含义是什么？
百科的解释是:平面构成是视觉元素根据美的视觉效果和力学原理在二维平面上的排列组合。它是一种通过理性和逻辑推理来创造形象和研究形象之间安排的方法，是理性和感性相结合的产物。
而我的理解是:平面构成是二维空间中点、线、面按一定规律组合而成的一种视觉语言。它可以是抽象的，也可以是具体的，可以是感性的，也可以是理性的，它不是独立存在的，而是与色彩/肌理/光影一起存在的。基本上，世界上所有的东西，所有我们触摸到的或不能触摸到的，可见的或不可见的，都有平面构成的用途和图形。
二、电商Banner图是由什么组成的？
Banner组件包括文案、商品/模特、背景、点缀(可选)四个方面。
而我在之前反复强调过的，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.垂直线和水平线之间的视角错误
大多数人倾向于把垂直线看得比水平线长，这是一种高估的错觉。当水平线长8-10毫米时，这种错觉最大。
2.透视错觉
图中的两条线相等。因为透视的错觉，好像下半部分比较短。
3.平方的错视
标准正方形的左右两边看起来比上下两边大。
4.黑白视觉
图中黑白线段比黑色线段长是因为白色线段比较亮，有膨胀的现象。
5.由于图形结构的影响而产生的误视
图中三个、四个、五个五边形的边都是相等的，只是因为周长和面积不同，所以边也不一样。
6.对比度错视
高个子和矮个子在一起，高个子会显得更高，矮个子会显得更矮。
7.比如现实与现实的手绘拼接，比如一些摄影作品。
这里需要注意的是，一些视差动画网页会用的比较多，还有一些app指南页。Banner在这里举的例子可能不太合适，但也可以展示给你看：
比如这张图中的黄点，同样的黄点，在深色背景上非常突出，但在同样的黄色背景上几乎看不出来，但实际上原点没有变，只是背景的颜色变了，导致我们看到了不同的结果。
3、了解几个常用的平面术语，如下：
和谐/对比/对称/画面平衡/视觉重心/节奏
错视举例：
元素之间有一种和谐的关系，或者所有元素的整体，比如大小/色彩风格的协调。
Banner的例子：整体明亮的色彩，搭配的雨滴，雨伞产品和模特礼服，左中右的排版方式，看起来都非常和谐统一。
和谐统一：
即把两种定性或定量对比很大的元素放在一起，使人感觉主体鲜明突出，整体活跃统一，如大小/数量/色彩/形状的对比。
比如Banner:红色款的面积比较大，在柠檬黄的背景上显得比较突出，无论是颜色还是面积优势。
对比突出：
假设在一个图形的中间画一条竖线或横线后，画面的左、右或上下两边可以完全重合，我们称之为对称。
横幅：典型的对称构图。胸罩是对称的形状。
对称：
即元素之间、元素与整体之间的大小/形状/数量/色彩/材质的分布和视觉平衡。
以Banner为例：左右两侧色区均衡，但数量和形状上的细微差别使画面不那么单调。
画面平衡：
通过处理画面中元素的数量/颜色/位置/大小/材质，画面中出现的视觉焦点。
Banner的例子：模拟撕裂效果形成的洞，有视觉聚焦效果。
视觉重心：画面中的一个或多个元素按照一定的规律排列，会产生旋律的音乐感。
比如Banner:鞋子以不同的姿势摆放，营造出节奏感，让画面不单调呆板。
重点（高潮部分）来了！！！！！
上面说了这么多知识点，所以结合这些知识点，我总结画了一些比较实用的横幅板样式，如下图：
最重要的，我先总结这么多。其实所有的Banner布局都是差不多的，因为我们前面提到Banner是由文案/模特或者商品/背景/装饰组成的，所有这些元素都相当于我们平面构成中的点、线、面。当我们改变这些元素的角度/距离/尺寸/数量/风格/颜色时，新的布局将被创建。因此，您可能希望
四、平面构成之于电商Banner图的意义是什么？
横幅中的所有元素其实都相当于平面构成中的点、线或面，而由所有元素组成的横幅画面其实就是一种情绪和信息的表达，所以我们可以从以下四个方面来理解这个问题：
节奏韵律：
（1）从活动主题的角度：
（2）从信息层级的角度：
（3）从品牌调性的角度
（4）从视觉美感的角度：
当我们得到一个设计需求的时候，我们都需要确定他的设计风格，而这个风格如何确定呢？既要了解他的定位，也要了解他服务的人群是谁，还要了解他们的兴趣爱好。同时，我们的脑海中会出现以下关键词：活泼的推广/年轻的活力/高冷的品牌/时尚的个性/保守的规则等。
让我们先来看几个横幅示例：
（1）从活动主题的角度：图片会有较多的装饰，也喜欢使用大面积的暖色。目的是营造一种活泼的氛围，给人一种热情亲和的感觉。上下或居中的排版方式更多，这种方式的视觉更聚焦。
因此，对于活泼的推广页面，可以考虑以下排版风格：
以低价热闹促销：为主题的横幅设计其实和热闹推广的方法差不多，只是这张图中的点缀元素或者模特风格需要更加俏皮有活力，颜色会更加艳丽或者鲜艳，营造出一种青春活力的感觉。排版方式没有特别的限制，发挥空间很大。
所以年轻有活力的页面可以考虑以下排版风格：
年轻活力：这种主题的横幅设计，重点是给人一种普通人买不起的印象，买了之后会显得特别优越，所以你需要在画面中多留白，善用一些简单或者有棱角的图形设计，避免使用一些比较卡哇伊或者过于女性化复杂的线条。同时商品或者型号的质量要高，总之会给人一种很贵很高端的感觉(穷人买不起，有钱人有面子买)
所以高冷大牌页面可以考虑以下排版风格：
高冷大牌：
我们在做横幅的时候，如果没有特别的要求，其实我们有很多方向可以选择。首先，问问自己想要突出什么信息？是突出的商品吗？还是突出文字？还是突出整体氛围？还是强调整体的协调感？还是强调品牌？
一般来说，好的横幅首先要保证信息传递的准确性，其次要保证画面的和谐与氛围。
那我先给你看几个案例：
强调品牌(模特也是品牌的一部分)
强调整体氛围(商品融入氛围)
强调销售
比如你可以看到我之前给你总结的布局。基本上文案信息比较突出，其次是商品突出或强调整体氛围：
（2）从信息层级的角度：
关于品牌，可能是目前很多小商家不太重视，觉得用不上。但是各大电商平台和一些比较大的电商品牌已经有这个品牌认知度了，所以不管你在什么样的团队，都应该了解一下。
我们可以从这几个方面来看品牌：风格延续/品牌统一/风格突破。
（3）从品牌调性的角度天猫的猫头形象用在各类广告中。这个创意不仅统一了品牌形象，而且非常巧妙。
另一个例子是第一语言：
一直以来，楚玉所有的模特眼里都有一条白线。虽然不明白是什么意思，但是印象特别深刻，形成了统一的品牌视觉形象。最后大家看到了楚玉的新logo，就是提取眼睛的形象。新徽标如下所示：
它最初的标志是这样的：
通过对比发现品牌形象更统一，更有特色(虽然会让一些没听说过这个品牌的人以为是卖面膜的，但是接触过这个服装品牌的人还是很容易理解的)。
品牌统一：广泛应用于平台大型活动，如各分会场的风格延续(排版风格不变，但改变了商品和文案的颜色和类别等。)
风格延续：品牌风格的突破可能与品牌升级或品牌定位改变有关，所以在设计上需要配合这种策略。比如你可能一开始面对的是青少年，但是随着时代的发展，你是否继续为这些青少年服务，和他们一起成长为大龄青年服务？还是继续服务新一代年轻人？这个时候你的用户群发生了变化，当然意味着风格可能需要改变。
例如：QQlogo图片的升级：
对于这个话题，我们再拿出一篇文章来单独说一下。你感兴趣吗？
风格突破：
当一面旗帜满足以上要求，如果它有能力，当然我们还是要满足视觉审美的要求。从这个角度来说，平面构成对横幅设计的意义是什么？
可以看以下几个关键词：画面均衡/视觉冲击/画面不单调/有创意等等。
均衡画面：左中右排版
视觉冲击：辐射，中心焦点
画面不单调：在产品的方向或颜色上做一些不规则的排列，避免无聊。
创意：将图片拟人化，创造一种身临其境的感觉
五、总结
（4）从视觉美感的角度：
以上，我分别给大家讲了这几个知识点：
一、平面构成的含义是什么？
二、电商Banner图是由什么组成的？
三、我们该如何在Banner图设计中运用平面构成呢？
至此，我完成了Banner设计中平面构成的奥秘。这次内容很大，估计够你消化一个多星期了，我也没分上下章节。四、平面构成之于电商Banner图的意义是什么？一方面和我自己的性格有关，不习惯分章节讲一个知识点。一个完整的知识点无论在哪里被砍掉，我都会觉得不舒服，就像你在吃东西一样。但是，别人告诉我“另一半还是留着下次吧”。虽然这样可以增加大家对下一篇文章的期待，但是也会让我觉得不舒服(不过最好还是起来或者转发一下，这样你以后可以仔细看)。
另一方面，因为我的知识点是要编辑成书的，所以我写的比较多，和我的书写的比较接近一点，这也是我把全部精力都放在写这些内容上的原因，虽然我感觉每写完一篇文章我的白头发就多一点，啊哈哈。
最后，希望我所有的人/爱我的人都能从我这里有所收获，无论是精神上还是技术上。至少，说明你的选择是值得的。
面为设计(微信官方账号)
作者：TTTing
