第10章　电商设计中排版的奥秘

我们知道三大构成（色彩构成、平面构成、立体构成）是所有设计从业者都必须掌握的知识，是一切设计的基础，那么专门针对电商设计的平面构成知识有哪些呢？鉴于市面上相关知识介绍的书籍较少，笔者用自己多年的经验、观察、思考、心得，汇总成了本部分内容。

前半部分是基础知识，后半部分运用这些基础知识结合实例讲解，所以建议读者按顺序阅读学习，并需要些时间消化，接下来我们一个一个问题来解剖。

10.1　平面构成的含义是什么？

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

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

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

一个完整的Banner图的组成要素一般包含6个方面：文案、商品、模特、背景、点缀物、LOGO。

但读者也要明白，以上所有元素其实并不是都必须存在，只需存在其中至少一项就够了。

另外，Banner图的作用是：宣传、展示、广而告之、准确传达信息。

10.3　如何在Banner设计中运用平面构成

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

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

10.3.1　元素与元素之间的排列关系

元素与元素之间的排列有如下几种：分离、相切、结合、透叠、重叠、差叠、减缺、重合。

• ◆　分离：形与形之间不接触，有一定距离。
• ◆　相切：形与形之间的边缘正好相切。
• ◆　结合：形与形相互结合成较大的新形状。
• ◆　透叠：形与形有透明性的相互交叠，但不产生上下前后的空间关系。
• ◆　重叠：形与形之间覆叠关系，由此产生上下前后的空间关系。
• ◆　差叠：形与形相互交叠，交叠的部分产生一个新的形。
• ◆　减缺：形与形相互覆叠，覆叠的形状被剪掉。
• ◆　重合：形与形相互重合，变为一体。

而以上的圆形其实可以替换成任何我们能想到的形状元素，我们做的一切设计的排版构图，其实都是这些基本形的变形和延伸，后面我们再举例详述。

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

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

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

1．重复

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

Banner举例：模特重复排列叠加到背景中，这既是一种纹理也是一种模特展示的方式。

2．近似

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

近似举例：双胞胎整体看基本长得一模一样，但是他们又是有细微差别的，所以只是近似。（这里模特其实为同一人，并非双胞胎，只是举例说明）

Banner举例：不同包装颜色的相同酒瓶，大小不一的波点。

摄影举例：如下图所示的碗、餐盘、水壶、水果等其实都可以看作是不同大小和材质的近似圆形。

3．渐变

渐变也是我们平时非常常见的一种效果，在自然界中能亲身体验到，比如在行驶的道路上我们会感到树木由近到远、由大到小的渐变。但是渐变其实是有很多种形式和分类的，比如形状的渐变、方向的渐变、位置的渐变、大小的渐变、色彩的渐变、骨骼的渐变、光影的渐变。

大小的渐变举例：

广告Banner举例：

模特的排列方式：

商品的排列方式：

背景的纹理形状:

4．对比

对比有时是形态上的对比，有时是色彩和质感的对比。对比可产生明朗、肯定、强烈的视觉效果，给人深刻的印象。比如形状的对比、大小的对比、色彩的对比、肌理的对比、位置的对比、重心的对比、空间的对比、虚实的对比。

Banner举例：其实很多买家秀vs卖家秀、PS前vs PS后等何尝不是一种对比呢？只不过这是现实与理想中的对比。

大小对比举例：iPhone 8 Plus vs iPhone 8。

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

Banner举例：背景花朵的排列，有大有小，有疏有密。

5．密集

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

Banner举例：标题文字的排列，有大有小，有疏有密。

6．发射

发射是一种常见的自然现象，比如太阳四射的光芒就是发射的。发射具有方向的规律性，发射中心则成为视觉焦点，所有的视线聚集在一起或由中心散开，有时可造成光学动感，会产生爆炸的感觉，有强烈的视觉效果。比如中心点的发射、螺旋式的发射、同心式的发射。

发射举例：星轨／水波／观世音菩萨背后自带的光环、太阳光发射出的射线等等。

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

7．特异

特异是指构成要素在有次序的关系中有意违反次序，使少数个别的要素显得突出，以打破规律性，特异主要分为以下几种类型：形状的特异、大小的特异、色彩的特异、方向的特异、肌理的特异。

特异举例：其实各种类似于连连看的游戏就是运用了特异手法。

Banner举例：所有的鞋子都是正面放置，但将其中一个侧着放置，整个画面立马就不呆板了，在构图方面，摄影和设计其实是相通的。

另外，之前笔者还看到过一个Banner的画面是一家人站成一排，手里拿着花盘将脸遮起来，唯独个头比较小的那一个小女孩将花盆故意不挡着脸露出灿烂的微笑，整个画面给人一种非常温馨俏皮的感觉，画面就不那么单调了，同时也使得小女孩被突出了，这里也是运用到了特异的手法。

所以，如果你想要突出某一样东西，或者想要画面不那么单调，不妨玩一玩特异吧！

8．空间

空间也就是三维的，而非平面二维的，给人的感觉更立体，所以在设计中打造空间感也有很多种手法，比如：

• ◆　利用大小：比如近大远小。
• ◆　利用重叠：前后／上下等关系。
• ◆　利用阴影：使物体具有立体感／空间感。
• ◆　利用疏密：比如间隔越小，越密集，感觉就越远。
• ◆　利用透视：平行线由宽到窄。
• ◆　利用色彩：冷色远离，暖色靠近。
• ◆　利用肌理：越粗糙越近，越细腻越远。
• ◆　矛盾空间：真实不存在的空间，假想的。
• ◆　虚实关系：远景／中景／近景。

矛盾空间举例：一款非常火的游戏《纪念碑谷2》。

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

由阴影营造的空间感：这里的前后空间层级关系其实是通过阴影的处理打造的。

9．分割

将整体按一定的规律分割成很多小的块。比如等形分割、自由分割、比例与数量。

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

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

商品的排列也可以起到分割画面的作用，如下图所示。

10．肌理

肌理又称质感，由于物体的材料不同，表面的排列、组织、构造等不同，因而产生粗糙感、光滑、软硬感，几乎我们看到的任何东西都是有纹理的，但是有的比较明显，看得见触摸得到；有的比较浅，所以肉眼很难分辨。肌理一般有以下几种：笔触的变化、凹凸不平的肌理、喷绘／染、自带的纹理效果。

肌理Banner举例：任何照片或图形其实都可以用来当纹理看待，不同的纹理会体现不同的气质，比如下图的水彩，就感觉比较时尚。

11．错视

因空间距离或周围环境所造成的视觉差。

错视主要有下面几种。

①　缪勒—莱依尔错视

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

②　垂直线与水平线的错视

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

③　透视错视

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

④　正方形的错视

标准的正方形左右两条边看上去大于上下两条边。

⑤　黑白错视

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

⑥　由于图形结构的影响而产生的错视

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

⑦　对比错视

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

错视举例：广告设计以及包装设计常用的一种手法。

2015年乐事薯片正逢20周年庆，在泰国推出了全新包装，每一个包装上都会有一个微笑的图案，只要跟产品合照上传Facebook就可以参加活动，因为乐事是在泰国卖得最好的薯片品牌，所以马上就造成了一股泰国乐事炫笑照（Lay's Smile）的风潮

这种错视手法在摄影中同样也被广泛运用，趣味感立马提升，如下图所示我无意间用手机自娱自乐拍的照片。

这里要说明的是，错视在一些视差动画的网页页面中运用得会比较多一些，还有一些APP的引导页，比如下图所示的这个画面中的黄色圆点，同样的黄色圆点，在暗色背景上是很突出的，但在同样是黄色的背景上就几乎看不见了，但其实原点是没变的，只是背景的颜色变了，就导致我们看到了不一样的结果。

10.3.3　常用的平面术语

这些术语在点评设计作品或者在阐述作品的时候可能会用到，比如和谐统一／对比突出、对称、画面平衡、视觉重心、节奏韵律。

1．和谐统一

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

Banner举例：这里有两方面与文案相呼应，一个是整体明亮欢快的色彩，一个是背景的波点图形与文案相呼应，再加上居中的排版方式使得整体看起来协调统一。

2．对比突出

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

Banner举例：大背景是黄色，而标题部分则用紫色和玫红色渐变，这样一来标题部分就通过对比色和互补色突出了，周围再点缀少量彩色块，既不干扰主体视线，也增强了画面促销氛围。

3．对称

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

Banner举例：典型的对称构图，比如女性的Bra其实就是一个对称的形状。

4．画面平衡

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

Banner举例：左右两边色彩面积上是平衡的，但是色相以及元素的数量和形状上的则略微有些差异，使得平衡的同时又不那么单调。

5．视觉重心

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

Banner举例：这张Banner的视觉重心就在红色圆这里，一个是因为圆形本来就处在画面中间，另一方面是因为红色在这里是最显眼的颜色。

6．节奏韵律

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

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

海报举例：下图所示的彩笔并不是水平规规矩矩地放一行，而是错落有致的，画面立马就感觉动起来了，不会显得呆板。

结合以上讲的知识点，笔者总结绘制了一些比较实用的Banner排版样式，如下图所示。

Banner是由文案、模特或商品、背景、点缀物组成的，而所有这些元素就相当于我们平面构成中的点线面，当我们改变这些元素的角度、距离、大小、数量、样式、颜色等时，新的版式也就产生了，所以，大家不妨也试试看吧。

10.4　平面构成之于电商Banner的意义

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

1．从活动主题的角度

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

下面我们先看几个Banner实例。

低价热闹促销：画面中会有比较多的点缀物，也喜欢用大面积的暖色，其目的就是为了营造热闹的氛围，给人热情有亲和力的感觉，版式以上下或者居中排版的方式居多，这种方式的视觉也更聚焦一些。

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

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

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

高冷大牌：这种主题的Banner设计重在体现一种一般人买不起，买了之后会显得自己特别有优越感的印象，那么画面中就需要多留白，善用一些简洁的或有棱角的图形设计，切忌用一些比较可爱或太柔美复杂的线条，同时，商品或模特的品质要高，整体排版也是比较简洁而不浮夸，总而言之就是给人一种很贵很高端的感觉，这与低价热闹促销是相反的。

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

2．从信息层级的角度

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

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

下面来看几个案例。

强调品牌，突出LOGO（模特也属于品牌的一部分）：

强调商品以及SALE:

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

强调利益点信息：

版式方面，基本上文案信息都是比较突出的，其次商品突出或者强调整体氛围：

3．从品牌调性的角度

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

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

品牌统一：比如天猫的猫头形象，当它被运用于各个品类和品牌的广告中时，这一创意既统一了品牌形象，又非常巧妙，我们可以看几个品牌2017年推出的天猫双十一海报：

再比如女装品牌初语：

一直以来，初语的所有模特，在眼睛那里都有一条白线，给人印象特别深刻，形成一个统一的品牌视觉形象，最后大家也看到了初语的新LOGO，就是提取了眼睛那里的形象，新LOGO如左下图所示，而它原来的LOGO是右下图这样的。

对比发现，品牌形象更加统一了，也更有特色了（虽然会让一些没听过这个品牌的人以为它是卖面膜的，不过对于接触过这个服装品牌的人来说还是很好理解的，原版LOGO虽然简洁明了但是特色不突出，改版后的LOGO则气质和特色都有了）。

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

风格突破：关于品牌的风格突破，可能是因为涉及品牌升级或者品牌定位的改变，所以需要在设计上配合这一策略，比如说原先面对的可能是青少年群体，但随着时代的发展，是继续服务这些青少年群体跟着他们一起成长转型为服务于大龄青年呢？还是继续服务新一代的青少年群体呢？这时候用户群体改变了，当然也就意味着风格可能需要作出改变。

比如QQ的LOGO形象的升级：

4．从视觉美感的角度

当一个Banner在满足了前面几个要求的情况下，如果有能力的话，当然还是要达到视觉美感的要求的，那么从这个角度看，平面构成之于Banner设计的意义是什么呢？我们可以从下面几个关键词入手：平衡画面／视觉冲击力／画面不单调／富有创意等。

平衡画面：左中右排版。

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

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

富有创意：虚实相结合的场景打造，既给人一种身临其境的场景感又富有趣味。

到此，平面构成之于Banner设计的奥秘就讲完了，内容非常多，估计大家一周也消化不了，而我也没有分为两章来写，因为这些知识点不管从哪里切断我都会感觉不舒服，就像你吃东西吃得正爽，却被别人告知说：“另一半要留着下次再吃哦”，你喜欢这种感觉吗？我想还是不要了吧，哈！