五步,细说BANNER图设计之平面构成的奥秘

今天给大家讲一下关于平面构成的，包括「平面构成的含义，电商banner的组成元素，如何运用平面构成」等等，都是干货。

在讲之前，我先给大家列一个内容大纲：

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

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

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

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

五、总结

注：前半部分是给大家讲解的基础知识，后半部分是运用这些基础知识结合实例讲解，所以建议从头到位耐心看完哦，需要些时间消化（经济基础决定上层建筑嘛，前面不看后面也就看不懂了），接下来我们一个个问题来解剖：

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

百度百科的解释是：平面构成是视觉元素在二次元的平面上，按照美的视觉效果，力学的原理，进行编排和组合，它是以理性和逻辑推理来创造形象、研究形象与形象之间的排列的方法，是理性与感性相结合的产物。

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

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

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

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

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

在前面我们提到，平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言，而Banner中的所有元素（文案／商品或模特／背景／点缀物）其实都可以看作是平面构成里的点线面这些构成元素。

那么，接下来我们就需要了解3个有关平面构成的概念了：

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

2、所有元素在一起所体现的构成形式

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

接下来，我们分别了解下这几个概念：

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

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

分离：形与形之间不接触，有一定距离。

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

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

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

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

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

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

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

2、所有元素在一起所体现的构成形式

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

下面我们分别来举例说明：

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

1.形状的重复
2.骨骼的重复
3.大小的重复
4.色彩的重复
5.肌理的重复
6.方向的重复

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

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

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

1.形状的渐变
2.方向的渐变
3.位置的渐变
4.大小的渐变
5.色彩的渐变
6.骨骼的渐变
7.光影的渐变

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

1.形状的对比
2.大小的对比
3.色彩的对比
4.肌理的对比
5.位置的对比
6.重心的对比
7.空间的对比
8.虚实的对比

（5）密集，　密集在设计中是一种常用的组织图面的手法，基本形在整个构图中可自由散布，有疏有密。最疏或最密的地方常常成为整个设计的视觉焦点，他其实也是对比的一种情况，越密集的地方给人感觉距离越远，反之越近。

1.点的密集
2.线的密集
3.面的密集

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

1.中心点的发射
2.螺旋式的发射
3.同心式的发射

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

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

（8）空间

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

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

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

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

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

利用色彩：冷色远离，暖色靠近。

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

矛盾空间：真实不存在的空间，假想的。

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

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

1.等形分割
2.自由分割
3.比例与数量

（10）肌理，又称质感，由于物体的材料不同，表面的排列、组织、构造等不同，因而产生粗糙感、光滑、软硬感。比如：

1.笔触的变化
2.凹凸不平的肌理
3.喷绘/染
4.自带的纹理效果

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

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

和谐统一：

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

对比突出：

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

对称：

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

画面平衡：

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

视觉重心：

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

节奏韵律

画面中的一种或多种元素按一定的规律排列，会产生音乐一般的旋律感。

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

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

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

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

（3）从品牌调性的角度

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

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

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

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

当我们在做一个banner的时候，如果没有特别的要求，其实我们是有很多个方向选择的，首先问下自己你是想要突出什么信息呢？是突出商品呢？还是突出文字呢？还是突出整体的氛围呢？还是强调整体的协调感呢？还是说强调品牌呢？

一般来说，一个好的Banner首先是要保证信息传达准确，然后再需要保证画面的协调感和氛围的。

（3）从品牌调性的角度

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

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

（4）从视觉美感的角度

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

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

五、总结

以上，我分别给大家讲了这几个知识点：

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

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

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

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

到此，平面构成之于Banner设计的奥秘我就讲完了，这次的内容量非常大，估计够你们消化不止一周了。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

文章标题：五步,细说BANNER图设计之平面构成的奥秘
本文网址：https://www.cdcxhl.com/news33/322183.html

成都网站建设公司_创新互联，为您提供用户体验、、响应式网站、营销型网站建设、建站公司、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联