如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想要设计出高质量的banner，首先你得了解什么是banner？banner是网络广告中最常见的广告形式。一般也被人们称之为网幅广告、旗帜广告、横幅广告以及大标题广告等等，它可以是静态的图形，也可以是动画的图像。其作用就是为了体现产品的中心意旨，利用鲜明的内容去表达最主要的情感思想, 从而给整个产品起到宣传的效果！
在如今炙手可热的互联网领域，banner被广泛运用在各个不同类型的互联网平台间，例如网页设计，APP设计中都经常会使用banner这一载体来展现商家的活动以及的产品等等，因此banner在如今的互联网行业里越来越被很多的公司重视，对设计的要求也就越来越高，那么初入行的设计师该如何设计出高质量的banner呢？
一.首先了解你的banner设计需求
1.确定banner文案的内容，以及将会涉及到的设计素材、包括准备投放在什么平台以及它的尺寸大小，这些前期的工都是需要我们和需求方沟通确认定夺下来的。因为这些基本的因素如果没有被确定下来，1.会阻碍设计师的设计灵感！2.在设计的过程中也会给设计师带来很多不确定的因素，导致大大增加改稿的几率，所以前期的准备工作我们一定要做好。
2.确定banner是为了实现什么目的而设计
例如需求方给到的信息是「秒杀」，那我们首先需要了解的就是这个秒杀活动针对的产品是哪一类产品，针对的人群又是哪些，这些不同的因素都会影响到设计的整体风格以及使用元素的搭配。同时还需要考虑到需求方希望这个banner，它能起到什么样的效果以及作用，是引流还是曝光新品又或者是促进交易等等，这些需要和需求方在前期全部确定好，以免在设计的过程中走很多不必要的冤枉路。
二. 确定banner的设计风格
在这里我们可以单独把设计风格理解成小说里各个人物的性格特点，不同性格特点的人物所散发出来的魅力也是不相同的。沉着，紧张，外向，阳光，忧伤等等，这些词语代表着不同的族群，也代表着不同的情绪状态。每一种状态的表现手法肯定也是不一样的，下面就简单介绍几种常见的风格。
1.典型词语：冷傲、时尚
这一风格最大的特点就是文案特别精辟。色系基本都以黑白灰为主。拍摄的素材呈现很高逼格的感觉。
2.典型词语：活力、年轻
这一风格最大的特点就是朝气蓬勃。整个视觉的色彩感和饱和度，纯度都很高。版式的设计也非常的多样化
3.典型词语：素雅、安逸
这一风格最大的特点就是大面积的留白。色彩以灰色以及白色系为主，多运用在一些茶品、家居，纺织棉麻用品等等。
4.典型词语：节假、促销
这一风格最大的特点就是热情洋溢，色彩大多以红、黄、橙偏多，画面很少有留白的空间，大多数都非常丰富饱满，文字刚硬，有菱有角，视觉的冲击感很强
5.典型词语：萌萌哒、甜蜜
这种风格的banner使用点缀和矢量手绘的元素相对于其他类型的banner会较多，整体色感也大多呈现暖色调，给人一种很软的感觉。
6.典型词语：智能、科技
这一风格最大的特点就是概念感和未来感特别强烈，整体颜色多用于蓝，黑色等偏冷的色系，同时光晕、金属、线条和点等元素都是这一类型banner常用的点缀方式
三. 搭建banner的构图框架
确定好需求和设计风格之后，首先要做的就是内容确定一个大概的构图样式之后再去丰富版式里的设计细节
1.左右构图
这种构图在所有banner的设计中最为常⻅也最易掌握，同时也最不易出错，它分为2种形式，一种是左图右字，另一种是右图左字
2.左中右构图
这种构图相比较左右构图形式上会更加丰富些，但是比较难把握。它也分为2种形式，一种是左图中字右图，另一种是左字中图右字，有时我们想要重点突出⼈物，也可以把文案放在画面两侧让人物居中
3.上下构图
这一类型的banner一般为上字下图，虽简洁但却有很多的局限性
4.以⽂字居中的构图
这一类型的banner更多的是为了突出文字的内容，多用于大促一类的banner，同时对字体的设计也非常讲究，好的字体设计往往会更加发挥出这一构图的优势
5.多角度构图
多角度构图最难把握，他属于一个不规则的构图，但却最具有设计感的层次感。这一类型的构图丰富的视觉感给人眼前一亮的感觉，也更容易吸引住人的眼球
四.确定配色方案
好的配⾊一定程度上决定了这个banner质量的好坏，一般运色最基本的方法大致可以分为2种：
一种按照配色规则进行配色：同色系、类似色、补色系。
1.同色系
同色系也称为单色，这种色系的搭配在产品本身颜色比较统一的情况下，可以吸取产品上面较近的颜色，再针对产品特性添加一些合适产品调性的辅助元素，让画面的整体变得统一和协调。
2.类似色
类似色 相比较单一的颜色，它的丰富性和可变化性都比较大，在基于banner整体的主色调以后通过添加辅助的与主色相似的颜色，使整个画面变得丰富活跃起来同时这些配色方式也相对比较好掌握一些
3.补色系
所谓补色，就是在色相环上相距180°的色相，如红色与青色、黄色与蓝色、绿色与品红色等色组。补色之间的调和搭配能够给画面带来华丽、跳跃、浓郁的视觉美感，然而，若补色以高纯度、高明度、等面积搭配，会产生比对比色组更强烈的刺激感，使人无法接受。所以相对于类似色，往往我们利用补色做设计时会考虑补色之间的面积比例，纯度比例，明度比例和空间间隔的比例，平衡画面之间的视觉感！
另一种就是将画面做反差的设计
一般我们会把素材变成黑色感的照片，在然后根据文案内容和整体banner的气质选择一个合适的颜色，已达到突出画面视觉点的目的，让主要的东西可以凸显出来，保证一个视觉冲击感。
五.字体设计
设计banner时候，千万不要把一行文字直接放上去，这样会使你的banner看起来特别的愚蠢，整体的视觉效果也会看上去很无趣、很僵硬。因此我们需要给不同的banner做不同的文字设计，去吸引我们的用户。下面就教大家几个字体设计的方法。(注意商用字体的版权，这很重要）
1.选择合适的系统字体
好的系统字体有时候也可以让banner更具有观赏性，但前提是字体的气质必须和banner的整体视觉气质统一，例如素雅、安逸的banner风格就不适合用粗犷硬朗的字体，而宋体和细黑体这一类字体则表达了文艺、品质的气质。
2.文字排列的倾斜与斜切
有时候设计banner，需要更有视觉冲击力的表现方式，我们可以尝试将文字进行倾斜或斜切透视等处理，因为普通的文字排列形式有时候过于平稳，过于有矩，反而凸显不出来整个banner的动感和层次感。
3.在相对独立的区域中表现文字
在背景颜色比较复杂，或者背景有较多产品需要呈现的时候，我们可以尝试将文字放在一个相对独立的区域或色块中，这样更便于文字阅读，也可以突出主题内容。
4.字体变形的魅力设计banner的时候，设计师经常用到文字变形，将原有的系统字体进行2次加工设计出一种新的字体。这种变形的手法可以大大提升文字的视觉性和趣味性，让整个画面的气氛被烘托得相得益彰。
5.中国风文字
有时候我们设计一些历史文化题材的banner，或者中国传统节日的banner，经常会用到一些中国风的元素，例如毛笔字、粉笔字、钢笔字，书法字等，而这些元素我们也可以把它运用在banner的设计当中，让banner的特性感更加的明显
六.画面内元素的点缀
点缀的元素常见于点、线、面或者一些手绘矢量元素，在确定基本成形的banner后适当的加入这种出彩的小元素会让画面的设计细节感和层次感更加丰富，可以提升整个画面一定程度上的品质感和细腻入微的美
备注（本分享中所有的图只用作于文字说明，不产生任何商业用途）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
