编者按：今日这篇好文把电商Banner 的设计想法都说得七七八八了，如何用图案提升节奏感+用修饰活泼气氛；分割底细怎么做；大色块底细如何配色等等，全是电商Banner 常见的技能。值得一提的是文中案例非常充沛，能大大降低新手的吸取难度。

哈喽大家好！已经很久没有更新分享了，没有啥好的点子了。该分享的都分享的干净了，那为什么现在收拾这些分享给大家呢。

还是但愿能辅助大家更快的了解Banner设计的一些技能，另外也是有一些新的方法想和大家切磋。

部门案例起源于网络 多有得罪请恕罪哈。

01）Banner 5宝

1. 图案图形节奏感

3. 修饰碎屑氛围足

5. 分割底细更活泼

7. 底细色彩大色块

9. 最终宝

10. 02）案例改稿分享

    是不是你也会显露这些疑问：

    1. 画面脏

    3. 页面空

    5. 细节缺陷

    6. 一、图案图形节奏感

       图案指的什么

       图案比拟大家都知道，也或多或少用过。图案放大可以变得大方，缩小也可以很精致。

       而Banner中常常会显露的图案大都是几何外形的重复或旋转得到的图形，用来做为底细的纹理来充沛底细的细节感。有时候有人常常会说底细里少了点什么，下次你不妨尝试一下用用。不是一定要用，假如你需要可以尝尝功效呢。

       举个范例：

       使用一个几何外形通过平移重复得到的图案，在利用在纯色的底细上我把它称之为图案。

       案例中的底细使用了纯色底细搭配，没有过多的色彩。在这种场合下为了使底细避免过

       于简朴，所以加上了菱形图案来充沛底细的细节和层次。

       图形指的什么

       有人可能会问了，图案和图形的区别是什么呢。图案是通过仿制平移得到的，而图形可以通过仿制平移和轮回放大某个外形得到的图形。图形比图案的节奏感往往会更强一些，图形需要手动去调换和仿制，可以做更多的不同化重复。而图案则是规律性更好。

       再举个范例：

       图1：案例中的图形是通过雷同的圆角矩形，长度和宽度的变化来组合成了更强的节奏感。它可以是颜色变化多端，也可以是单色深浅变化。

       图2：案例用了三角形向上轮回重复采用，并且通过变更色彩深浅加强了空间感。其实上面还加了一成三角线的图案，不知道小伙伴们你们看到没。

       看对比01-底细有图案和没有的区别：

       我就拿一个三角形图案Banner对比添加和不添加图案的感受，在没有添加图案的场合下固然这个案例在其他方面我做了挺多视觉表现，但是没有图案还是会感到少了一点节奏感和细节。当我们为底细层添加了图案之后，画面变得丰满、同时也增加了促销的感受。

       看对比02-底细有图案和没有的区别：

       同样是没有和有图案的对比（为了大家看的显著一点我把图案加深了一些，由于是线条图案图片缩小就不是很清楚了）图案不仅可以是外形、它也可以是线条。很显著的感受到第一张图促销气氛已经可以知足了，但是通常我们会为了让底细更有细节会添加一些图案。（个人意见 仅供参考）

       图案的利用

       第一个案例中用到了3种图案，圆、星、竖条都是来烘托页面底细。其中竖条属于图形重复。

       第二个案例用到了相似波浪线的图案，这些图案老是会给人与生俱来的节奏感。

       图形的利用

       案例中是由多边星形由小发散的图形，是不是有很强的节奏感。图案不仅是平铺重复得到，它还可以由一个根本型放大-仿制-放大这样轮回得到的图形（也可以说是放射性构成）

       在这样一个底细纯白的视觉上面，大胆的采用单个倾斜长条仿制得到的底细图形，与模特姿态和五彩缤纷的元素组合起来精巧的发生了有节奏感。

       二、修饰碎屑氛围足

       Banner设计中常常用到会有彩礼飘带、矩形、三角形、红包形状、横条等修饰。

       案例中都具备图案、图形，密集的点点图案使底细更有细节、圆形的多个仿制的图案让画面更丰满，飘起来的修饰是不是也有大有小。

       三个需要留心的方面

       1）有大有小

       最根本的底层，由于大小发生空间感、节奏感，如下图左1

       2）别克隆

       别克隆的意思就是不要所有元素都重复的采用，案例中的三角形有描边的、填充的、几何体，元素更充沛了，但适可而止。如中间图

       3）有深有浅

       案例中三角形的色彩有深浅看到了吧，这样做是让画面不会很平没有远近感到。如图右1

       三、分割底细更活泼

       有人问我这个Banner用什么分割呢？圆形、矩形？当场我就愣住了，只想悄悄。这个你自己想用什么分割都可以呀，差异的分割给人差异的视觉感受。搞清晰你想要的就知道用什么了。

       由于它在Banner设计中的确是很有功效的，所以我们不仅需要实践，还要进行对比解析，这一我们才会成长的更快嘛。

       一个案例来演示下，同一主题差异分割的利用。

       矩形的分割利用

       △ 无分割

       △ 有分割

       在这里举例矩形的分割，倾斜的会更加利落一些。还有别的方式我就不一一举例了，大家

       多留神观测和收集（案例只是来举例分割的其他方面我就没有调换）

       圆形、三角形的分割利用

       △ 圆形

       △ 三角形

       圆让人看起会有圆滑、包容的感受，而三角形是干净利落究竟的感受。外形的大小、位置，在文案后面还是模特（商品）后面，都是可以变动的。差异的场所感到会不一样。

       底细的分割会让你的画面变得有层次，多尝试就会有缓慢对分割有一定的熟悉和感受。

       四、底细色彩大色块第四宝色块

       大面积色块的利用，在Banner设计中特别显著。也是非常有效，天猫、淘宝、京东等这些内地电商平台的活动常常是以色块底细为主。色块在很久之前就很流行，作为一种风格。在大色块底细上面，黑色的文案、图案就成为了视觉焦点。在色块底细上利用相似时尚的波普元素，画面节奏感就出来了。

       案例如下：

       案例中底细色彩是整个蓝色大色块，在这样的场合下。黑色的文案就显得非常突出了，成为了视觉的焦点。所以有时候我们会看到天猫、淘宝、京东的促销活动中的会场Banner常常会这样做，一是让主题文案成为视觉的焦点，二是延展其它会场便捷套用。没有过多的特效处置，这样大大的节俭了时间成本。

       用色块底细的时候该留心什么

       最重要的就是配色了，色彩尽量不要过份三种。模特或产品的色彩不要和底细色彩跳跃太大，列如上面的案例底细是蓝色，那么其它的色彩可以是青色、紫色、黄色搭配起来会对照畅快。可能你会说黄色和蓝色相隔那么远，黄色是和任何色彩都可以很好的搭配的，所以你会看到官方的Banner图中显露黄色的益处点、小色块。

       假如你用不好对比色、互补色、近似色等这些配色理论。那我们就把这些简化成2个点

       01）暗色配亮色、亮色配暗色

       02）深色配浅色、浅色配深色

       暗色配亮色、亮色配暗色

       暗色和亮色没有规定说哪一个色彩就是暗色或亮色，假如非要说那就是黑和白了。某一个色彩暗和亮是可以管理的，就像是色彩深浅。但是我们以饱和度最高的场合下，从最根本的红橙黄绿青蓝紫来说，假如它们对比起来就发生了暗和亮的。

       这里的分类表明的不是绝对的，由于一个蓝色非常亮，但是假如和黄色比起来是不是蓝色相对暗了呢。，每个色彩都有它最亮的色值，当然不会过份黑色和白色。白黑才是最亮和最暗的。就像 假如这个世界没有瘦子那么就不会有瘦子一样。

       所以我们会通过调色彩饱和度的深浅来让它变暗或亮，当然假如要深度的认识配色原理，还是要从对比色、互补色等这些原理去了解，才能更加的透明。