Banner设计中的平面构成

内容导航：

Banner设计中的平面构成

banner设计常用的8种版式设计

Banner设计技巧方法之图形分割法是什么？

Banner设计关键性要素有哪些?

一、Banner设计中的平面构成

来源：微信公众号 PingMianDesigner（平面设计）

平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言，而Banner中的所有元素，如：文字、图像、背景、点缀物，其实都可以看作是平面构成里的点线面这些构成元素，运用平面构成的设计法则可以更好的完成Banner设计。

元素与元素之间的排列主要有：

①分离，是形与形之间不接触，并有一定距离。

②相切，是形与形之间的边缘正好相切。

③重叠，指形与形之间叠盖、遮挡关系。

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

⑤结合，是形与形相互结合成新的形状。

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

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

⑧减缺是形与形相互叠压，叠压的形状被剪掉，形成新的形状。

从所有元素整体看，其构成形式主要有：

1、重复，指在同一设计中相同的形象出现过两次以上，重复是设计中比较常用的手法，以加强印象，造成有规律的节奏感。例如：形状、骨骼、大小、色彩、肌理、方向的重复等。

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

3、渐变，是Banner设计中常用的一种效果，类似的有形状、方向、位置、大小、色彩、骨骼、光影的渐变等。

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

5、密集，在设计中是一种常用的组织图面的手法，基本形在整个构图中可自由散布、有疏有密。最疏或最密的地方常常成为整个设计的视觉焦点，包括点、线、面的密集等形式。

6、发射，是一种常见的自然现象。发射具有方向的规律性，发射中心为最重要的视觉焦点，所有的形象均向中心集中，或由中心散开，有强烈的视觉效果。有中心点、螺旋式、同心式的发射等。

7、特异，是指构成要素在有次序的关系里，有意违反次序，使少数个别的要素显得突出，以打破规律性。包括形状、大小、色彩、方向、肌理的特异等。

8、空间，可以利用大小产生空间感，例如：近大远小也可以利用重叠，塑造前后、上下等关系；利用阴影可以使物体具有立体感、空间感；通过疏密可以塑造不同的距离感；利用色彩，冷色远离，暖色靠近。

9、分割，把整体分成小的部分，像等形分割、自由分割、比例与数量等。

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

11、错视，因空间距离或周围环境所造成的视觉差。主要有透视错视、黑白错视、由于图形结构的影响而产生的错视、对比错视等。推荐阅读：解析！电商首页的模块布局

①和谐统一，是指元素与元素之间,或所有元素构成的整体是一种协调的关系,比如大小、颜色风格等的协调;

②对比突出，比如大小、数量、色彩、形状的对比。

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

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

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

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

在设计中，所有的 Banner版式都是有一定的规律可循的，Banner是由文字、模特或商品、背景、点缀物等组成的，而所有这些元素就相当于我们平面构成里的点线面，当我们改变这些元素的角度、距离、大小、数量、样式、颜色等，新的视觉效果也就产生了。

设计Banner时需要先确定设计风格，而这个风格的确定可以从活动主题、信息层级、品牌调性、视觉美感等方面去理解，确定Banner所有的构成元素，运用构成技法确定设计风格及设计方向。推荐：电商详情页设计(视频教程)

（此处已添加圈子卡片，请到今日头条客户端查看）

一、banner设计常用的8种版式设计

在banner设计当中，主要有以下几种排版形式：重心型、分割型、倾斜型、满版型、曲线型、对称型、三角形、四角型。这几种形式会比较常出现在banner设计当中，所以我们一一来分析以下几种排版方式。

1、重心型

重心型版式的banner容易让浏览者产生视觉焦点，界面效果强烈且突出。

2、分割型

分割型主要可以分成上下分割和左右分割。因为banner一般是高度比较窄，所以左右分割型会比较常见。上下分割的banner会比较少见。

上下分割，顾名思义，就是把整个版面分为上下两个部分。可以在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。上下分割的banner布局比较少见，上下分割之后，版面的设计要求也比较高。

左右分割，就把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。左右分割布局在banner的设计中最为常见。

3、倾斜型

倾斜型的banner比较偏个性化一些，多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计，造成版面强烈的动感和不稳定因素，这种设计比较引人注目。

4、满版型

满版型的banner比较好理解，通常是版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。

5、曲线型

图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。多出现在运动型的banner设计中。

6、对称型

对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。banner对称一般以左右对称居多。

7、三角形

在圆形、四方形、三角形等基本形态中，正三角形(金字塔形)是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。

8、四角型

四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面，给人以严谨，规范的感觉。下图是四角型的一种，同时也用到了左右分割的排版设计。

以上简单给大家分析讲解了常见的几种版式形式，每种版式设计并非以一种表现形态出现，比如四角型的banner可能会结合对称性的出现或是中轴型，所以大家在分析banner的时候不要以单一的一种视角去分析。因为一张banner的设计可能同时存在好几种版式形式。

不同的排版可以给人不同的视觉感受，好的排版会让banner更加的出彩。版式也没有绝对的好坏，只有适合和不适合。希望今天给大家分享的内容可以帮助到大家。

二、Banner设计技巧方法之图形分割法是什么？

Banner设计可以说是日常工作中最主要的一块需求，banner不比大型项目，从设计成本上来讲不可能给太多的时间给设计师，所以这也引发了我对如 何更有效率地完成一个banner的思考。构成banner的重点主要有三个方面，即风格，排版以及配色。先定风格，再做大致的排版 和配色，然后根据整体再来调整，最后再优化细节。呢么banner设计的原则是什么呢？
一、对齐原则
相关的内容要对齐，方便用户视线快速移动，一眼看到最重要的信息。
二、聚拢原则
将内容分成几个区域，相关内容都聚在一个区域中。
三、留白原则
千万不要把banner排得密密麻麻，要留出一定的空间，这样既减少了banner的压迫感，又可以引导读者视线，突出重点内容。
四、降噪原则
颜色过多、字体过多、图形过繁，都是分散读者注意力的”噪音”。
五、重复原则
排版时，要注意整个设计的一致性和连贯性，避免出现不同类型的视觉元素。
六、对比原则
加大不同元素的视觉差异，这样既增加了banner的活泼，又突出了视觉重点，方便用户一眼浏览到重要的信息。

三、Banner设计关键性要素有哪些?

1、网站Banner图构图

构图是网站建设和设计中最重要也是最基础的一部分，我们在设计网站Banner图中都需要先经过排版，确定出Banner整体效果之后，我们在进行创意性的整体填充，这样做的目的就是让Banner样式更加丰富。其实网站Banner中最根本还是图文的集合，我们在设计Banner中可以按照下面几种图文集合的方式进行：左字右图、左图右字、左中右构图、上下构图、文字作为主体居中、不规则构图，按照这种排版方式我们就可以做出效果和内容更加丰富的Banner。

2、Banner中字体呈现出来的效果

字体在Banner中表现出来的作用无可替代，因为字体的气质和样式以及画质直接决定banner设计中好坏，如果Banner中字体设计出来特别难看，这在用户心中就会直接大打折扣。因此，我们在选择字体就就需要采用宋体和细黑体两种形式，这样设计出来Banner整体看起来更符合网站，也更符合整体网站和谐性。

3、Banner配色

Banner配色通常都是根据网站内容和网站整体风格进行适当搭配，这样做的好处就在于让网站Banner图中颜色调节饱和度和明度。例如，我们在设计网站Banner的时候，可以采取黄黑白这三种颜色搭配的方式进行，这样做出来的效果更加颜色效果对比鲜明，而且视觉效果更加具有冲击力。推荐阅读:网站优化首页轮播图设计的技巧

4、Banner装饰

无论做任何网站都需要进行内容、颜色和图片的装饰，因此在网站Banner中同样也是如此，我们在Banner中加入一些小的元素和小装饰这样让Banner更加具有设计感，起到点缀和丰富画面的作用。

我们再设计Banner中就需要进行点、线、面相互组合，相互平衡，设计出来的Banner图更加丰富多彩，再加上字体的选择与设计、配色的分析、装饰的应用彰显出Banner与众不同。