探究！Banner广告设计
Banner广告也可称为网幅广告、旗帜广告、横幅广告，一般只是一种提示性广告，承载着有限的讯息量，有静态式、动态式和互动式三种表现类型，适用于发布或推广新的产品、塑造网络品牌、树立企业形象，是互联网广告中最基本的广告形式。
要想在有限的空间内很好的宣传企业或产品，提高Banner广告条的点击率，达到理想的广告效果，关键在于Banner广告的设计制作能否准确的传达信息，能否给浏览者留下深刻的印象，使之产生购买欲望。
在有限的广告画面范围内进行版式设计，必须要突出中心内容，给人一目了然、醒目突出的感觉，过于呆板严谨会使浏览者感觉乏味无趣，而混乱堵塞、无序、无主次会使浏览者烦躁不安。
浏览者对广告的色彩是相当敏感的，蓝色系、绿色系和黄色系等鲜明亮丽的颜色会营造一种安详宁静的气氛，对观者的视觉刺激比较大，能吸引浏览者看上一眼。每个Banner广告都有自己的主题，恰当的使用色彩可以加强商品或品牌的辨别性，为设计主题内容服务。
形象化、趣味性的图形图像往往能在第一时间内抓住浏览者的眼球，因而可以用优秀的摄影图片或简洁明确的插画配以文字说明来表达广告的主题。
在处理摄影图片时要注重影调光影，以突出真实性，而绘制插图漫画时要突出简洁单纯的视觉效果，注意趣味性并把握好广告的特定诉求对象。
在绘制图形时还要注意控制文件量的大小，例如：制作gif格式的图形时，避免使用色彩层次过于丰富的效果；阴影、渐变色和模糊的处理不仅会增加图形所占据的颜色数，还会使导出的图像变得生硬而不清晰。
任何一个Banner广告都是在传达着企业或品牌的形象，文字设计一定要服从主题的要求，例如：科技类、建筑业可采用强壮有力的粗体字，体现规整爽朗、简洁之感；儿童用品可采用生动活泼，节奏明快的字体 。
Banner中的文字比较简短，为了突出广告语中的关键词，就要依据人们的阅读习惯，协调好字与字的关系，例如：通过改变字体的大小和颜色，在行距和字距间留以适当的间隔，但字体的大小变化不能太多，一般三到六个层次就可以了。
当Banner广告中的字体种类少时，会给人一种稳定安静感，而种类多时，则会给人一种活泼生动的感觉。在对字体进行艺术化设计和编排时，一定要注意广告文字的易读性、识别性问题，不能为了追求艺术效果而应用一些不易辨认的字体或是随意的改变文字的笔画结构。
动态图像广告的吸引力是静态图像广告条的三倍。动画和声音能激起浏览者的好奇心，但在制作中要慎重的使用一些三维动画和多媒体技术，很容易制约页面的访问速度，也容易给浏览者造成视觉疲劳，影响对页面中文字的阅读。
Banner的动画要尽可能的简单明快，从图形到动作都要设计的精简，动画长度应控制在5秒内，每个画面的停留时间不宜过长，最长不能超过2秒，而且画面之间的衔接应该有一定的节奏，否则浏览者会失去耐心。
浏览者花在广告条上的时间一般只有1至2秒钟，只依靠绚丽的动画是不能立刻抓获浏览者眼球的，而且有的图形、动画并不能准确的表达广告信息，更不用说诱起他们的点击欲了，这就需要加强对广告语的设计，使它能引起浏览者的好奇和兴趣。
Banner里最好只有一条广告信息，文字简短清晰到一句话就能交代明白。一般情况下浏览者只会捕捉感兴趣的关键词，并不会去读完整个句子，可以采用一些幽默夸张、郑重承诺、制造悬念等文字。
如果在设计中使用 请点击、开始等有号召力的字词时，依据人们从左往右视觉流程，应放在Banner广告条的右侧，引导浏览者点击广告，查看信息的详细内容。
总之，在制作Banner前，首先一定要详细的了解到广告主题内容的性质，广告所要达到的宣传目的及该广告的服务对象等基本信息，从而正确的使用色彩、文字、图形图像等设计元素。
① 官方头条号：设计智造 顶级创意设计师必备
② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！
好的banner广告，都是用户设计的
文章从常规的banner广告去展开叙述，对当下常见banner的设计风格等进行剖析，并融入自己的思考和总结，着重从用户的角度去思考一张banner广告的从0到1的过程。
我们分三个维度去探讨：
数据驱动——提高精准性易懂性——增强可读性情感设计——提高点击率 数据驱动——提高精准性当广告投放没有目的性，就很难将产品通过广告传递给目标用户，从而很难实现广告的最大效益化，而大数据时代往往能帮助我们的广告精准地传递给有需求的用户。
1. 通过结果数据分析每当你打开淘宝时，首页的banner广告总是会弹出你近期浏览过的或者是购买过的同类产品，这就是淘宝善于使用个人大数据，从而达到精准推广的效果。
而设计师在设计banner广告图之前，一般会参考之前投放的结果数据，例如：设计A类的广告投放量、阅读量、点击率等等数据去分析A图的好坏，再通过大量的数据比对来分析出A图中哪个单一框架所产生的作用更大，从而为后面的设计做参考。
（ps：广告banner的点击量不仅仅在于视觉，跟产品、投放渠道等也有影响，在结果数据分析时应当注意）
2. 用户需求分析说到需求，很多人想到马斯洛的五大需求：生理需求、安全需求、社交需求、尊重需求和自我实现需求，如果用一句话简单地概括，需求即是用户尚未满足又渴望被满足的愿望。当我们在设计广告banner前，要先思考banner的投放渠道、产品定位等等来分析目标用户的需求，从而让设计更易被目标用户接受
举个栗子：设计一个广告banner投放渠道在拼多多，我们会先通过大量现有的数据分析出拼多多用户群体的三大主要特点：①学历低（文案要做到简洁易懂）②一二线城市以外人群较多（设计风格要贴近用户群体）③追求低价格（突出价格视觉层级）。
从追求低价高端产品入手，从而思考出在设计广告banner图时能不能突出制造对比来抓住用户需求，解决用户痛点。
设计不是千篇一律，也不需要摸着石头过河，而是要有数据的支持，了解用户需求，再根据需求用设计突出用户所在乎的点，才能达到更好的效果。
易懂性——增强可读性易懂性强调设计应从用户获取信息的角度出发，思考如何让用户更加简单地获取广告信息。
1. 三秒原则从淘宝、小米优品等app上可发现banner图片出现的时间只有三秒，也就是说三秒内要传递给用户所有信息，所以这里不仅要做到无障碍设计，还要思考如何设计广告banner让用户快速获取信息。一般从色彩、板式、层次、风格、创意等方向入手，第三点会做详细概括，这里不做延展。
2. 设计可读性常规的广告banner图主要由文案框、产品图/插图框、背景框和按钮框四个框架构成。而易懂性常常体现在文案框的内容和设计上，我们要做到文案尽量简洁通俗、文案内容的行数尽量控制在三行以内，确保可读性；在设计上，我们不仅要做到舒服、显眼，还要有信息层级，合理引导用户第一眼信息内容。
遵循无障碍设计，我们要在设计前分析用户群体、提炼产品卖点，针对不同年龄层用户做到文案可读性。如果面向儿童，我们要做到文案简洁易懂，图文并茂；面向老人，字体要大，需求可视化……
3. 善用行业属性当产品行业在用户的头脑里占据一席之地时，我们在设计广告banner时要善于利用其已有的行业风格，提前告知用户产品类别，便于用户更快获取banner信息。那么如何利用其已有的行业风格呢？这里从色彩设定、风格元素延展去说。
色彩设定：在选择广告banner主色调时，我们会更偏向于行业属性主色调>显眼主色调>情感主色调，（当然也有非常规的，例如节日类的主色调）选择行业属性主色调往往能体现banner独特性。如教育一般为蓝色调，化妆品一般为粉色调……风格元素：这里我们直接用一个例子来也许会更容易理解，比如下图，当没有文案通过风格元素，我们脑海里会马上检索出这个banner广告图的产品以下几个关键词：潮流、社交、恋爱……用固有的用户思维，快速融入广告所要表达的信息。以上两点都是利用用户已有的行业印象，降低读者的认知负担，从而快速获取banner信息。
也许有人会疑问，为何不用品牌，而是用行业的属性去设计广告banner。在思考中我也得出以下两点结论：
用户比较懒，只能接收有限信息，记住的往往是某类行业的大属性；广告banner的主要目的时在于用户接收信息，竞争往往比较小。 情感设计——提高点击率当广告banner已经能做到被用户注意到且快速获取信息后，我们还要思考怎么样才能让用户更有欲望去点击内容，或者在脑海中留下对产品的印象呢？
我们主要从这两个方面入手：
1. 创意拉近用户距离好的设计能引起用户注意，而有趣的设计能让用户感动亲切。创意的方式有很多种，能让用户感到有趣的创意才算好的创意。比如：在设计有道词典笔的banner时，加上磊哥的形象，这样不仅加强banner的权威性，也给banner添加了趣味，从而拉近与用户的距离。
2. 给用户一点感觉banner广告在唤醒用户的眼睛同时，又能告知用户的心灵，那是最好不过的。如何告知用户心灵，我们常常根据产品的特点赋予感觉，比如产品是电饭煲，我们会给用户描述回家的感觉；产品是家具，我们会给用户描述生活……广告是一个让用户感到枯燥的东西，通过情感设计，带动用户情绪，从而达到购买的效果。
除了情感上的设计外，大多数banner广告设计也会给用户以急迫感，比如：在按钮文案上的设计从点击购买”到马上购买”再到立即抢购”，这种急迫感层层递进，促使用户点击成交。
如何判断一个设计作品能不能唤起用户共情，如果在条件有限的情况下，我们可以自己充当那个用户。举个栗子：当我们在设计完一张banner初稿时，我们会通过自检的办法检验一个banner是否能够带动用户情绪。
上图，我们通过自检发现banner的各个元素都能被用户获取，但在情感设计上，或许还可以进一步进行思考。
我们主要做了以下思考：
通过文案中笃局”——有输有赢，所以通过颜色对比来添加趣味性，同时引导用户的注意力。在确保文案的可读性，通过倾斜向上的文案给用户积极向上的感觉，打破版面呆板。 后言在强调用户体验的今天，我们的设计应当做到从用户中来，到用户中去，从用户的角度去提出问题、思考问题、解决问题。归根到底就是想赚用户的钱，就得帮用户提出问题，再帮用户解决问题。
作者：刘华滨，网易有道推广设计，市场营销出身，热爱新媒体、热爱设计，努力成为一名有趣的营销型设计师。
图片：网络+原创
本文来源于人人都是产品经理合作媒体@网易UEDC，作者@刘华滨
广告位（banner）的可视化管理后台逻辑说明
针对APP端的banner展示，怎样做到前后端的有机组合，方便运营人员自行操作（随时更改）广告位呢？本文简单的将可视化banner后台的逻辑做以说明。
百度百科上我们可以看到对banner的定义即横幅广告（Banner Ad.）是网络广告最早采用的形式，也是目前最常见的形式。横幅广告又称旗帜广告，它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页。”
在APP端或者PC端，我们经常看到各种各样大小的广告，有动态和静态区分，一般均为可点击的，或者为了宣告而增加的静态通知图片。
那么针对APP端的banner展示，怎样做到前后端的有机组合，方便运营人员自行操作（随时更改）广告位呢，接下来，我就简单的将可视化banner后台的逻辑做以说明。
前端banner展示我们经常看到，banner存在一个APP的首页，位置可以在顶部，中部或者底部。通常以轮播图的形式展示，3秒/5秒进行轮播。
例如下图这种在首页中部的轮播展示banner图：
展示形式分两种：一种是静态的广告图，另一种是动态的广告图；
前端交互分两种：一种是不可点击的，仅仅是展示一张图片，另一种是可点击的，点击进入对应的网页或者端内页面。
通常情况下，banner都会有一个默认的一直存在的页面，但处特殊情况下的页面，当需要的时候，广告位展示出来，当不需要的时候，广告位隐藏。
举例，比如说通常像首页的banner，就算没有轮播的banner图，通常也都会有一个默认的图片。但像一些特殊页面的广告位，用股票APP来说，新股申购页面的特殊广告位，当有国际配售的新股的时候，广告位会展示出来，方便用户申购，当没有新股的时候，广告位就会隐藏。
例如下图展示的这种，特殊页面的banner是可以设置成隐藏的，无国际配售的时候banner隐藏不展示。
那到底前端的banner展示，怎么做一个可视化的后台页面呢，下面进行介绍
后台页面1. banner管理列表页一般这个列表展示的字段，通常都来源于添加banner时候的定义字段。
具体的字段还是要依据你们业务的复杂程度而定，但通常情况下，以下这些字段是必须存在的：
产品：这个可以定义为扩展字段，开始做这个功能的时候，可能仅仅是针对一个产品，但为了你这个后台的适配性，一般会告诉技术把这个字段预留出来；banner名称：运营人员自行定义区分的字段，有时候该字段也可用来作为banner展示名称内容的获取字段；banner位置：该字段也可定义为是一个扩展字段，不可能仅仅一个页面上存在广告位；权重：该字段一般是设置banner在卡前端的展示位置，比如说有同一页面上设置了6个banner，那这6个banner的排列顺序由该字段设置；图片：一般是做预览用的；上架状态：这个字段一般是根据你设置的banner上架时间和下架时间根据当前时间来判断该banner的状态，一般分为待上架，上架中，已下架。分的更细一点，已下架可以在分为下架和已过期；开始时间和结束时间用来控制banner在前端展示的时间；操作般就是编辑：用来修改此条banner的设置内容。 2. 新增页面banner管理列表页的列表数据来源于什么呢，就来源新增页面，新增页面是位添加一个banner而设置的。
新增页面中特殊说明下一下两个字段，其余字段在列表页中已做说明。
我们都知道，APP中的banner展现分为三种：
第一种就一张宣告的图片，无任何跳转；第二种是点击之后，跳转到一个网页，称之为外部链接；第三种是也可点击跳转，跳转的是APP内的原生页面。那这两个字段TAG和URL地址，就是为了区分这个而建立的用于前后端进行交互的字段。
通常是事先定义好TAG，用它来特指是banner展示的哪一种。
TAG技术会分两种，当是跳转到APP原生页面，无需输入外部链接地址。当为外部链接页面的时候，则需输入外部链接地址。
3. 编辑页面该页面同新增页面，除了向产品，banner位置这种用来唯一区分的字段不可更改外，其余的均可编辑修改
4. 删除banner一般情况下，在可视化的后台中，不做删除操作。例如我们前边说到的banner状态【下架】来表示已过期的banner或者中途操作下架的banner，保存记录在列表页中，可供选择查看。
像这种情况的删除非要做的话可以在数据库中操作。或者在可视化中操作一栏增加删除操作，但需做好日志处理。
5. 搜索搜索可以视你设置的具体字段进行分类，本文中，从上述的可视化后台界面可以看出。针对搜索，可根据产品名称/banner的位置/banner的状态进行搜索。也可增加输入查询项：banner的名称进行模糊搜索查询到对应的banner
以上就是我仅针对APP内的广告位（banner）的可视化后台做简单说明。仅仅是简单试用的初级层面，期待您的批评指正，我们一同进步，也欢迎小伙伴给出更完美的方案供学习。
本文由 @酸辣土豆丝 原创发布于人人都是产品经理。未经许可，禁止转载
