编者按:Banner是一款很棒的产品推广工具，覆盖面广，广告持久，方法灵活，互动性强。运营横幅一般作为运营活动的入口，不同业务的不同需求需要不同的横幅设计；本文详细介绍了班纳的创建和运营过程。

运营横幅是线上产品运营最重要的输出之一，相信大家或多或少都接触过；运营横幅一般作为运营活动的入口，其设计需要视觉冲击力和吸引力。

在互联网公司，横幅的运营往往由不同的运营团队完成，甚至在一些跨国企业，横幅的运营由不同国家的运营团队完成。

那么如何保证输出的操作横幅既能保证视觉冲击力，又能体现统一的设计语言呢？

最近笔者参与制定了运营横幅规范，服务对象主要是我公司不同海外运营团队，主要是规范整体运营横幅，提高设计质量的可控性。

下面制定操作条幅规范的过程，希望能给大家带来一些帮助。

一、基石——班纳的设计原则

在设计Banner时，最基本的就是让用户清楚的知道活动的内容，也就是可用性/可读性。这意味着无论我们使用什么设计风格和形式，我们都需要遵循一些基本和核心的设计原则。

1.对齐原则

当我们的眼睛和大脑观察事物并接受认知刺激时，往往会识别出相近、相似、完整的事物。因此，对齐相关内容有助于用户快速获取活动信息。

常见的对齐方式有左对齐、右对齐和中心对齐，建议一个板只使用一种对齐方式。在一个小横幅页面中，如果采用多种对齐方式，实际上信息在用户眼中是分散的，增加了认知成本。

2.对比原则

关于横幅上的关键信息，如折扣和活动，建议增加横幅和周围元素的视觉差异。通过颜色对比、单词权重和颜色块，用户可以快速获取关键信息，增加横幅的视觉丰富度，吸引更多用户

3.留白原则

这里的留白原则主要指两点:

安全距离的留白：留出适当的安全边距，可以保证banner在适配过程中不会出现重要信息看不全的情况。呼吸感：在排版时，元素之间需要留出空间，不建议过于紧凑密集。这样才能让整个画面看起来是“轻松透气”的，减少用户认知信息的负担。

4.聚焦原理

横幅作为一个整体只需要一个视觉重点，其他元素需要相应弱化，也就是需要一个视觉层次。当视觉焦点过多时，用户无法快速获取信息。处处强调，其实没有强调。

5.降噪原理

有时，一些设计师为了增加视觉吸引力，使用了太多的字体、颜色或太复杂的图形。这种“倍增”的行为，其实是在增加用户认知的“噪音”。

第二，骨架横幅的布局规范

主要布局构成包括图文左右布局和文字中间布局，其中图文左右布局分为左右布局和左右布局。

以下是使用不同布局的一些建议:

1.图文的左右排版

当图片的插图不清晰时，建议优先考虑左图和右图的布局。

画面排列不清晰通常是指画面排列主要是根据文案内容绘制的辅助图形，此时用户只看画面无法明确活动内容。

这种情况下，建议优先考虑左图右图的布局。根据尼尔森F视觉模型，我们的浏览习惯通常是从左到右，从上到下，所以把文本信息放在左边有助于用户快速浏览，获取重要信息。

小贴士:如果阅读习惯是从右向左，这个原则不适用。比如运营活动的目标区域是阿拉伯国家，建议使用左右对齐的左图右文布局。

当图片图文并茂时，可以考虑左图右文的布局。

用图片清晰地说明通常意味着用户可以根据图片理解运动物体。

如果移动对象仍然有吸引力，建议优先考虑左图右文的布局，通过有吸引力的移动图片来获得用户的关注。

2.文本居中并排版

当类别多、经营对象广时，建议使用文字中心板突出文字内容，如折扣等信息。

其他元素作为辅助图形，营造操作氛围，增加用户点击的吸引力。

三、外衣——旗帜的颜色

根据产品的品牌配色，以下是配色建议:

选择颜色时可以使用这两个想法:

主色+同色系的辅色主色+对比色

可以避免颜色过多，导致图片过于凌乱，增加用户认知负担。

采用“主色+同色辅色”时，建议用色块突出优惠信息；当采用“主色+对比色”的思路时，可以通过对比色来强调优惠信息的暗示。

图中颜色建议仅供参考。在制定颜色规格时，你需要根据你的产品的品牌调性来定义，不能使用空。

第四，层次——元素——旗帜

我们可以将构成Banner的元素分为三个级别:

文案层元素层背景层

1.复制层

文案的对齐方式有:左对齐、中对齐、右对齐。

文案组合设计常见的形式有:上下组合、上中下组合、综合组合。

一般来说，上下组合和上下组合的使用没有太多限制，主要是根据文案的内容来选择；但建议整合文案组合，使横幅布局与中心布局相匹配。

2.元素层

如果把横幅的元素层拆开的再仔细一点，可以分为主元素和点缀元素。

这部分的图形元素相当于构件库，是设计的构件。当构件库足够丰富时，设计人员可以减少重复工作，提高设计效率。

以我公司为例，我们可以将常用元素分为:人物形态、折扣相关、旅游场景、地标景点等。我们需要做的就是维护和丰富这个组件库。

3.背景层

背景层是整个画面最底层的部分，有很多视觉处理形式可供选择。

比如渐变背景，插画场景，放射性背景等。，可分为点、线、面背景，以及真实照片背景，此处不一一列举。

选择背景时，建议:

背景需要与图形元素风格一致，如果背景与图形元素风格不一致或没有处理好，二者就会显得不融合，会使画面看起来非常有“山寨感”。背景的作用是衬托文字层和主体元素，背景切不可喧兵夺主，弱化了文字信息或者主体元素。

第五，规范需要不断迭代

整个过程结束后，你可以看到整个规范的大框架，但是框架中的细节需要不断填充和优化。

比如在banner的设计库中，每个元素都需要一起进行补充和完善，以丰富“积木”，从而构建出既满足设计的统一性，又具有丰富视觉变化的“作品”。

设计规范是基于团队的现状和对未来的基本判断。规格的用户在使用过程中会遇到新的问题，外部影响因素也在不断变化。因此，定期审查和优化设计规范非常重要。