网易设计师：能让用户掏钱的Banner 是如何设计的？

网易UEDC – 刘华滨 ：章从规的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的各个元素都被户获取，但在情感设计上，或许还可进一步进行思考。

我们要做了思考：

• 通过文案中「笃局」–输赢，所以通过颜色对比添加趣性，同时引导用户的注意力。
• 在确保案的可读性，通过倾斜向上的案给户积极向上的感觉，打破版面呆。

结语

在强调用户体验今天，我们设计应做到从用户来，到用户去，从用户度去提出问题、思考问题、解决问题。归根到底是想赚用户钱，帮用户提出问题，再帮用户解决问题。

欢迎关注作者的公众：