网页banner设计套路干货 学好这5个重点

banner有没有什么能在设计它的过程中遵循或是检视的规则，让今后设计Banner的时候更加的有效？MAKA小编告诉你：有的！这篇，我们就来聊聊网页banner设计中的5个套路。

1.场景优先

这里的“场景优先”指的是要十分明确未来这个Banner的使用场景具体是在哪里。这也是我在指导或是检查设计师做Banner的时候第一个要问对方的问题。而恰恰当我问对方用在哪里的时候，很多设计师甚至做完了也不清楚具体的使用场景，只知道需求方提供的尺寸和他要求的K数。

为什么场景优先这么重要？因为场景决定了Banner设计的重要层级。是移动端还是PC端？是头部Banner还是底部Banner？在整个画面中的比重是大的还是小的？是促销活动还是日常信息露出？等等… …任何重要程度，都是权衡和比较出来的结果。也许需要设计的Banner尺寸不大，但在有限的画幅里面，它的占比很大，那它承担的“传达责任”就会大一些。一级页面里的Banner就比三四级页面里的要重要一些。做普通信息展示的Banner也许没有活动关键信息曝光的Banner重要等等。

位置决定了其重要程度和信息承载量。所以，当你拿到一个Banner设计需求的时候，别着急找素材或是想画面，先问下需求方，这个Banner在哪里使用，最好找到那个投放页面截个屏，当你设计完Banner的时候贴个效果图，把它还原在真实场景下。如果是移动端就要在手机上观看整体效果。做什么Banner就要在它投放的最终场景下观看和挖掘问题。切忌，因为麻烦而忽略这一步。

2.对比

这里的对比不单单是设计手法中图形元素的对比，还包括“画面”和“文案”的画幅比，Banner与投放场景的视觉色差比等等...

首先，“画面”和“文案”的画幅比指的是在整个Banner中，文案与画面的所占整个Banner面积的比重。这不是说要固定某个最优比例，而是说这个你将要设定的比重决定了Banner“信息的传达优先级”，是文案优先画面辅助还是画面视觉优先文案解释说明等等。通过对比，能够影响浏览者有先后顺序的获取你想传达给对方的信息，从而激发其点击或是转化。

3.细节优先还是整体优先

细节重要还是整体重要？其实两个都重要（这真不是一句废话）。如果这个Banner的作用是展示商品、活动奖品或是企图用画面吸引用户阅读的话，那就漂漂亮亮的把产品或是画面图片展示出来，当然在有限的空间里把细节展示的越多、越完美越好。因为具有“打动力”的细节更有机会让用户视线“驻停”。停留越久就越有机会点击。

如果这个Banner的作用是强调文字信息，比如活动时间、产品卖点等等，这时的设计如果过度强调或是放大细节反而会消耗文字信息的的传播能量。

4.简化！简化！说清1点！

有时候我们可以通过一张海报、一个活动页甚至一个易拉宝把大量信息罗列其中，甚至被领导或是客户强迫加内容而且要放大！放大！放大！

受限于尺寸，Banner天然不具备承载大量信息的能力。所以能在有限的空间里通过图文的合理设计说清1点即可！任何繁杂的信息和装饰都需要在设计之初坚决杜绝！

简化！简化！简化！重要的事情说三遍。简化不代表简单或是简陋，而是要让信息和画面合力聚焦在一个核心利益点上。一个Banner说清一件事！

5.统一性与可延展性

如果上面四点说的是检视一个独立Banner设计好坏的方法的话，那么统一性与可延展性就是检视一套Banner设计系统的重要规则。

统一性指的是某套传播系列的风格统一，包含元素的统一，文字、LOGO、行动按钮的使用规则统一。尽量统一字体、版式，甚至有可能的话，统一画面区域，这样容易让Banner的体系感更强。

可延展性指的是在不同场景和平台下的可扩展性。画面在不同的比例下能否协调，大尺寸下图片能否足够延展等等。

最后，总结一下：

相比于教你如何快速做出某个主题的Banner，我写的这篇文章更希望教会你如何在做完一个Banner之后，检视其中是否存在的隐患与问题。

通过自问或是向需求方确认Banner的使用场景，用“多属性的对比”来引导浏览者获取Banner信息的优先级。你要记得：小Banner无法承载老板们什么都想展示或是突出的想法，一个Banner说清1件事！最后有系统性思维建立Banner的设计规则，让其更加的统一，画面可延续。

普通设计师用美丑判断一个Banner设计的好坏。而你，看完这篇文章之后要学会用“逻辑”来检视设计的正确性。这就是你与他们最大的差别。希望今天给大家分享的内容可以帮助到大家。更多banner设计模板素材，尽在MAKA在线制作平台（https://maka.im）。