如何使你的banner设计从优秀到卓越（中）

上一篇作者详细从素材规划层面给我们列了个规划三元素，许多童鞋表示太棒了，今天这篇上升到设计层面，特别针对banner设计，对急切想提高banner的转化率和点击率的童鞋来说绝对是神兵利器！

第一篇是九月份分享了的如何使你的素材设计从优秀到卓越（上），全文都是沉甸甸的干货，上次读完意犹未尽的童鞋们赶紧集中精神来给续文点个赞吧 ^_^

一、开始设计前要注意什么
在开始真正设计前，设计师应该弄清楚三个问题，并依此确定设计目标：

• 从规划层得到了什么信息？
• 要转化还是要点击？
• 重效果宣传还是重品牌宣传

这里要特别说说第三点，为什么还要考虑效果或品牌宣传？这是因为不同的目的会得到不同的设计风格。
举个例子，假如说现在要做一个车险的广告，那么就可以先整理一下思路。主要考虑大众兴趣、产品人群、投放环境如何结合，并且这个广告希望达到一个什么目标： 这样就大致得出了车险素材的设计目标及计划：突出车险内容，热点作为辅助元素（一般来说转化比点击更重要），在汽车频道投放，设计风格较高端（重品牌宣传）。 接下来就可以开始具体的设计工作了。
二、文案设计 在设计文案时，需要注意以下几点：

• 了解目标用户的核心需求（产品人群）
• 深入了解投放环境（投放环境）
• 三秒钟让用户看得懂并吸引用户（大众兴趣）

2.1 了解目标用户的核心需求
以上是一组和车险有关的素材，这些素材点击尚可，但转化较一般。可以看出，它们主打的都是各种优惠信息。经过对用户的定性访谈我们了解到：被调研的用户提到理赔、品牌、方便、价格的很多，这些是购买车险的必要元素，只有满足了这些，礼品等元素才有资格成为加分项。之前的推销路线，包括产品设计，一味强调礼品，有可能没有解决用户最关注的需求。 后来设计师又做了一个新的素材，里面没有提到任何礼品，但转化却很高（见下图）。因此正确把握目标用户的核心需求是非常重要的。
（不了解车险的人有很大的好奇心去点击它）
2.2 深入了解投放环境 网易彩票曾经做过两个活动：一个是在邮箱中派发”满2元减1元”优惠券，一个是在大话西游2官网中派发”满10元减5元”优惠券。后者的效果要好很多，这是为什么呢？ 首先邮箱用户的消费需求及消费能力均不如游戏用户，其次邮箱用户不一定有网易宝余额，支付起来非常麻烦，为了1元钱的优惠觉得划不来；而游戏用户不仅有较强的消费需求及能力，且网易宝余额较多，支付起来方便。 所以了解投放环境及对应的用户情况，再决策相应的活动主题及文案，会得到事半功倍的效果。
2.3 三秒钟让用户看得懂并吸引用户 要想让文案吸引用户，首先要保证用户能看懂文案。如果理解起来都有困难，那就很难吸引住用户。并且用户在浏览网站时一般都是匆忙的扫视，含糊不清的文案会让人直接忽略掉。 比如下图的文案：1元+1积分=1000万梦想。这是什么意思？很难理解。
下面这两个素材的文案就要清晰很多。因此网站上的素材推广文案一定要简明易懂、开门见山。
三、内容设计 在设计内容时，可以注意以下几点：

• 三秒钟找到重点（大众兴趣）
• 诙谐而不低俗（产品人群、投放环境）
• 利用人物视线引导（大众习惯）

3.1 三秒钟找到重点
上图这三个素材，第一个素材的点击率是最低的，而第三个素材的点击率是最高的。运营推广人员在设计素材内容时，总是怕”浪费”空间，要求设计师不断的往里面塞东西：大段的文案一个字都舍不得删掉，内容元素满满当当，恨不得把想要说的东西一股脑都塞给用户，其实用户却并不会买帐。繁冗的内容反而会让用户找不到重点，白白错失推广机会。
3.2 诙谐而不低俗 有的时候推广人员为了提升点击率，会考虑放一些标题党、或比较敏感的内容，但是这样的效果真的一定好吗？ 上面这两个素材，第一个素材的效果是比较好的，而第二个很差。 第一个素材通过对文字的特殊视觉处理，达到吸引眼球的目的。由于处理巧妙，用户并不会觉得庸俗和低劣，反而会觉得幽默有趣。可以说，这个素材的热点和产品本身结合的还是比较好的。车险是比较高端、严肃的产品，不太适合过于庸俗的设计，因此第二个素材的形式会增加用户对网站的不信任，得不偿失。它的失败就在于热点和产品没有结合好。
3.3 利用人物视线引导
这个图想必大家不会陌生，它是Usable World网站做的一项非常著名的婴儿视觉图片引导注意力的测试。当婴儿脸朝正面时，人们的目光更多的关注婴儿脸部，对产品关注较少；而当婴儿侧身，脸朝向商品介绍时，人们的目标就会随之转移。

这个技巧很棒，在这篇10个提高网站可用性的经验指南中也提到了，同学们可以阅读这篇扩展知识。

我们在设计素材时，也可以使用同样的方式，通过人脸的视线引导用户去关注重要内容。
比如这个素材效果就比较好：我们可能首先会注意到人脸，然后顺着他的目标看到手中的枪，从枪中射出一颗子弹，这颗子弹穿过”低价看大片”的文案，整个过程非常符合从左到右的阅读习惯，一气呵成。
四、视觉设计 在做视觉设计时，需要考虑以下几点：

• 颜色吸引人（考虑大众兴趣、投放环境）
• 营造膨胀感（考虑投放环境）
• 设计风格与投放位置相匹配（考虑投放环境）
• 加载速度快

4.1 颜色吸引人 投放广告当然希望能吸引人的眼球，所以广告的banner颜色很重要。但到底什么颜色更好不是绝对的，不仅要看是否和主题呼应，还要看是否和投放环境相冲突。 比如这个广告就非常不明显，没有从背景中”跳”出来，所以在设计广告banner时，一定要放在正式的投放环境中看一下，而不是单独看banner的效果。
4.2 营造膨胀感 面积越大的banner越容易引人注意，这个是大家都知道的常识。但是遗憾的是，面积和位置往往是固定的，那怎么办呢？这个时候，就要靠设计来帮忙了。 上面这两个素材，哪个更好？大部分人更喜欢第一个，当然也有人喜欢第二个。别急，我们放在实际的投放环境中再看一下。
很明显，第二个素材给人感觉面积更大，更有视觉冲击力。因此判断一个素材是否合适，一定要放在实际的投放环境中来观察。
4.3 设计风格与投放位置相匹配 很多设计师在设计素材时，只关心素材尺寸、内容要求，而不考虑具体投放在什么位置，这样就可能出现这种情况： 比如网易女人频道，本来是非常清新时尚的风格，但是头部插了一个并不美观的绿色保险广告，中间又放了一个年味十足的喜庆风格广告，让这个页面显得非常不伦不类。且不说女人频道的用户是否会对这种题材、风格的广告感兴趣，单说这种”混搭”的风格，对频道形象也是种伤害。 所以建议需求方、投放方、设计师都要注意具体的投放环境，做出更有针对性、更和谐统一的设计。
4.4 加载速度快 用户在浏览网页时是非常迅速的，过大的文件会导致广告banner不能立即显示，从而有可能失去曝光机会。一般常规尺寸的banner广告文件最好不要超过30KB。

五、用A/B测试来检验效果 可以使用A/B测试的方式来解决banner设计中一些不太确定的问题（比如文案、内容、颜色等），使用这种方法很容易大幅度提升素材的效果。 比如一个电影广告素材，是放男主角的头像好，还是放一个更知名的男配角效果好呢？这就可以通过这种方式来进行测试。我们共设计了三版素材，并同时发布，保持相同的曝光量。

最后发现第三版的素材点击效果远高于第一版（转化率差异不大），因此选择了使用第三版甘道夫的头像。 在做A/B测试时，需要注意以下几点：

• 首先是测试点尽量单一，并保证其它因素完全一致。不能又要测按钮颜色，又要测文案内容。比如上例，我们只测banner背景中的头像，其余部分保持一致。
• 其次要保证相同时间、相同位置、相同曝光量。不能先放一天A版，再放一天B版，认为这样就是在做A/B测试了。一定要保证两版同时发布。