如何规范高效做出banner

banner设计是每个UI设计师工作中都经历过的项目，它是产品主要的组成元素之一，其重要性大家都知道。我就在这个方面走了很多弯路，所以想写点心得和大家共勉，仅供参考。

大纲目录：

1.banner分类认知

2.拆分法解析

3.五大原则

4.注意事项

1.banner分类认知

banner的作用类别有运营推广，频道入口，外部广告，公告这几种，第一种应用占比最大。常见的三种不用样式：轮播图banner，胶囊banner，白底模板banner

· 轮播图banner：通常放在首页的顶部，用来承载运营推广等重要信息，也是我们最常见的banner。

· 白底模板banner：一些运营强度较弱，权重中等的专题活动会用到白底模板banner，常见样式是左文右图，主标题，副标题和小插画组成，一般出现在首页中下位置。

· 胶囊banner：电商产品用得较多，样式大体是个全圆角矩形，这类banner时效性特别强，一两天后就会撤销，有特大且短时的促购信息会用到，一般穿插在首页中上部展示。

按风格分类大致有：时尚类，文艺类，插画类，炫酷类，简约类，复古类，图片类

1.时尚类：适用于电商，娱乐等产品

2.文艺类：适用于社交，音乐等产品

3.插画类：范围较广，多在金融，教育，社交，娱乐等产品出现

4.炫酷类：适用于科技，工具，效率等产品

5.简约类：适用于电子商务，高端电商等产品

6.复古类：适用于音乐，游戏等产品，有关节日的活动也经常用到

7.图片类：适用范围较广，注意文字要清晰，不要和背景融合。

2.banner拆分法

banner由多元素组成，设计一个优秀的banner并不易。但是我们把一个banner拆开，会发现再复杂也是一部分一部分组的。就像把一件事拆分开若干个小事件，一步一步完成，就不会难了，banner也是如此。banner内在包括：色彩，构图，风格等；但外在主要由文案，产品图，背景，点缀着几部分组成。比如以下这个banner，拆分开就是，红色背景，产品配图，点缀图形和标题信息。

设计的时候，我们按照这个拆分法一步一步执行，思路能更清晰，效率更高。

3.五大原则

五个需要遵循的原则：凸显性，对齐性，统一性，对比性，结构平衡。

1.凸显性：banner的标题文案和背景一定需要明显拉开层次，不能和背景融合得过于严重，这样不能很好地突出主题，识别度会降低。banner设计目的是让用户一眼可以注意到主要的信息，如果用户在一两秒内看不清内容，就会离开，我们需要尽可能避免这种损失。

2.对齐性：banner的内容都要有一个对齐的准则，尤其是文案，每个元素都有自己应该处于的位置，要有秩序化，才有舒适感。

3.统一性：字体最好不超过两种，字体太多容易导致内容杂乱，干扰过强，风格不统一。

4. 对比性：了解各项信息的权重大小，重要的信息要加强显示，次要信息可以弱化，通过颜色，字号，字重，或者添加视觉元素的手法来表现。

5.结构平衡：整体布局应该协调，重心稳当，避免头重脚轻，“摇摇欲坠”的情况出现。

4.注意事项

1.点缀。慎用点缀，尽量克制，用得不好的话，过多花哨的元素，会影响主体，干扰阅读。还是那句话，设计不是炫技，要考虑到商业目的。

2.字体。文案的标题，切记注意字体版权问题，能设计字体最好不过，如果这方面能力薄弱，就安份使用可商用的字体吧。字体改动不要过度，不要画蛇添足导致辨识度过低，那就弄巧成拙了。

3.按钮。有时为了提高用户参与度和点击率(当然有时候或许是为了丰富文案内容)，会在banner上增加类似于“立即参与”的按钮或者“满X减X”的卖点标签。这个按钮和标签必须在整体上突出显示，拉开与文案和背景的层次，才能吸引用户注意力。

4.尺寸。如果banner需要在多个平台投放，就需要设定多次尺寸了，以满足不同平台尺寸要求。如果是网站通栏轮播图，内容要控制在1000px以内。缩略图等较小尺寸的最好模拟上线效果，确保辨识度达标以及整体风格搭配。

5.流程。简述一下大致流程：接到需求后，跟对接人员确认好需求目标，文案和交付日期。先不着急动手设计，先思考适合运用哪种风格，设定大概构图、版式和色彩。提交对接人员是否符合需求，确认后着重视觉输出。完成后内部可简单评审一下，定稿后适配好需要的尺寸，完成交付。谨记：切勿闭门造车，有不清楚的需求点及时沟通，避免频频返工修改，浪费不必要的时间。最后希望大家设计一稿就过！

相关推荐：无感：APP设计如何使用弹框以及弹框的注意事项​zhuanlan.zhihu.com无感：输入框设计，设计样式及设计要点​zhuanlan.zhihu.com无感：UI底部标签栏设计总结​zhuanlan.zhihu.com