如何设计一款好的 Banner ？

时间：2024-02-14 00:10:01 | 来源：网站运营

时间：2024-02-14 00:10:01 来源：网站运营

如何设计一款好的 Banner ？：Banner 最先起源于纸质媒体的大标题广告，也可作为游行活动中的旗帜。随着互联网时代的迅速发展，Banner 由于其表现方式直接、简单被广泛应用于移动手机端和网页端界面设计中。而现在我们所说的Banner通常指的是PC端的网页Banner和手机移动端的网页Banner。

Banner是当前网络中最常见、最有效、最出效果的一种推广宣传方式。其主要作用是体现设计的中心意旨，形象鲜明表达最主要的情感思想或宣传中心，简而言之就是用来宣传展示然后提高品牌转化。

而Banner与传统的广告相比有以下几个特点：

第一，像素受限。

Banner 需要满足不同的手机、电脑网页的不同尺寸要求，不同尺寸的Banner像素不同，设计师需要针对不同的尺寸有的放矢。

第二，短暂性。

Banner 往往只在特定一天或者两天出现，而且Banner在画面中占比小，人们浏览速度较快，视线停留在Banner上通常只有仅仅几秒。

第三，内容受限。

每张 Banner的篇幅有限，在画面中通常不允许大篇幅文字的出现，因此在设计主题确定的前提下，Banner传达的内容是有限的，设计师可发挥的空间也是有限的。

Banner由于其本身的特质决定了他对吸引用户关注的时间有限，因而Banner需要在短时间内表现出其效果，快速抓住用户的眼球，提高点击量。为此有必要来研究一下Banner的构成元素和表现形式。

Banner的设计要素

1. 文字信息设计

l 明确文字信息层次

通常在一张Banner中，用户能够完全接受并需要的信息一般不超过3个。

因此在Banner设计中，首先禁止堆砌过多的文字信息，少就是多，文字信息应当简洁、直当、一目了然。

其次在Banner仅有的文字信息上，还需要通过排版表现出信息的层次——即突出视觉焦点，使用户一眼就能辩认出信息的重要程度。

l 字体

在Banner字体选择上需要注意字体的易读性和可读性。字体的可读性具有激发兴趣、吸引关注的作用，而易读性则是在很大程度上决定了信息传达的成败。

在Banner文字信息可以分为两种：标题性文字和其他文字。标题性文字作为Banner的视觉中心，需要较高的辨认度，因此更加注重字体的可读性，而其他的说明文字注重的则是易读性。可以通过字体样式、大小、颜色等手段来增强文字的可读性和易读性，例如可以通过选用无衬线字体、手写体或是一些艺术字体来突出标题行文字，增加可读性。

l 空间节奏

文字与元素之间，文字与文字之间的间距、密度同样会影响读者的阅读速度和舒适感，而且也影响着信息传递的效率。合理的文字排列和停顿节奏有利于读者迅速抓住信息重点。

例如以下两张图，上图的文字间距比较下面更大，离人像距离较远，看上去是不是更加舒适？

2. 图像设计

图形、图像在Banner中的用途就是引起注意，起到一个提示的作用。这就要求图像和主题是直接相关联，恰当的图形与图像能够辅助文字信息，帮助读者快速理解Banner的传达的信息；而与设计主题毫无关联的图形或图像则往往会分散用户的注意力，影响信息传达。

3. 色彩设计

色彩对于Banner来说至关重要，色彩是最先给人留下视觉印象的元素。如果要保证用户能够快速地理解并接受信息中包涵的意思，那么，Banner的色彩的应用必须要符合主题，以免混淆用户的第一感觉。

Banner的常见构图

在设计中，读者的观看习惯也是需要考虑关键要素，这样可以合理设置的视觉中心，并引导读者的视线逐渐引申到其他细节上。例如，用户的阅读习惯通常是从上到下，从左到右，因此可以将视觉中心设置在左上方，便于用户阅读。

但是也可以通过其他方式来改变用户的观看习惯，引导用户视线观看路径，而其中最常用的手段就是构图。

Banner的最常见的构图方式主要有——对称式构图、居中式构图、左右构图

l 对称式构图

对称式构图是将画面沿着Banner的中轴线平均分割，将Banner中的元素按照上下、左右对称的方式排列，使中轴线两边的元素保持平衡。对称式构图常常给人整齐、规律、简洁、稳固的感觉。

l 居中式构图

居中式构图是将画面主体放置于画面的中心，成为视觉焦点。这种构图方式最为常见，容易突出主体，保持左右平衡。而且居中式构图不仅方便突出重点信息还方便添加细节，譬如左右两块空余空间可以适当添加其他元素作为装饰。

l 左右式构图

左右式构图通常是按照黄金分割线比例来安排画面中的图片与文字的关系（通常是图文比例约为6：4）。左右式构图尽可能的保证了视觉重心平稳，不出现过度重心偏离的情况，能够体现对齐、对比和亲密性的原则。

参考文献
李婧婧, 韩静华. 基于Banner的信息传达设计[J]. 包装工程, 2016(8):55-58.
袁希晨. Banner设计中的视觉表现形式[J]. 艺术科技, 2016(7).