1.1.3 Banner设计基础与要求

横幅（Banner）广告用于宣传商品，是网页页面中最吸引眼球的部分之一。一个有价值的Banner不仅需要注重视觉效果，还应考虑品牌价值、产品特色、消费心理、用户习惯、色彩效应、创意元素等多方面的信息。设计Banner通常需要经历3个环节：了解Banner设计需求，确定Banner风格，进行Banner排版设计。掌握不同环节的设计要求，才能设计出符合要求的Banner。

1. 了解Banner设计需求

为了提高Banner设计的准确性、规范性和效率性，进行Banner设计前，需要向需求方确定Banner文案信息、素材、尺寸大小、投放的平台，以及设计Banner的目的，便于确定Banner风格。如本书后续案例中会要求根据素材和商品信息制作PC端、移动端、跨境端3个端口的Banner：PC端Banner尺寸为727像素×416像素；移动端Banner尺寸为608像素×304像素，且文字不宜过多，展现主体内容即可；跨境端Banner尺寸为980像素×300像素，要求采用英文进行制作。

2. 确定Banner风格

不同风格的Banner采用的素材、文案和配色等元素有所不同，带给人的感受也是不同的，下面对电商常见的几种Banner风格进行介绍，帮助读者为不同的商品选择合适的Banner风格。

• 科技炫酷风格。这类风格给人空间感、速度感、力量感和梦幻感，配色一般以蓝、黑、紫等冷色调为主，字体以硬朗、有力量感的字体为主，经常会添加方块、线条、光点、烟雾、光效、网格、金属、数字、代码、星球等元素进行风格渲染，常用于家电、数码、手机、汽车、运动类商品Banner的设计中。图1-4所示为科技炫酷风格的Banner案例。

• 喜庆节日、产品促销风格。这类Banner多营造出一种热闹愉快的氛围，配色一般以红、黄、紫等色调为主，并且画面饱满，很少留白，色彩较丰富、鲜艳，主标题很大，多用刚硬、有棱角、夸张、有视觉冲击力的字体，经常会添加光效、红包、彩带、鞭炮、礼物、金币、舞台、灯光、多边形等元素进行风格渲染，常用于清仓、节庆日、购物节期间Banner的设计。图1-5所示为喜庆节日、产品促销风格的Banner案例。

• 青春、活力风格。这类Banner多采用青春靓丽、有个性的模特，给人青春、有活力和张扬的感觉，画面一般采用饱和度和纯度比较高的多种色彩进行搭配，文案和图形的设计与排版不拘一格、个性十足。图1-6所示为青春、活力风格的Banner案例。

• 中国复古风格。这类Banner具有浓厚的古典气息，配色一般以暗红、黑色、灰色、青色等为主，字体以书法字体为主，文案多用竖形排版、从右向左的顺序，经常会添加古纹、墨迹、印章、祥云、山水画、扇面、剪纸、园林窗格、京剧、灯笼、卷轴等传统元素进行渲染，常用于富有文化气息和历史古韵的商品，如毛笔、折扇、茶叶茶具、酒、檀木制品等。图1-7所示为古典气质、传统复古风格的Banner案例。

• 文艺、小清新风格。这类风格给人淡雅素净、自然朴实、阳光浪漫和诗情画意的感觉，配色一般以浅蓝、浅绿、浅粉等浅色调为主，字体多采用衬线体和纤细的字体，并对笔画进行适当的装饰，经常会添加线条、半圆圈、雨滴、浅色花卉、植物等元素进行意境的渲染。图1-8所示为文艺、小清新风格的Banner案例。

• 简约时尚风格。这类Banner最大的特点是有大量的留白，利用高品质的商品细节来打动消费者，给人极简主义、大空间、“高冷”的感觉，色彩以灰白色系为主，或采用饱和度和纯度低、明度高的色彩，文字除一级标题字号略大些外，其他文案字号较小，起装饰画面的作用，除了采用简单的线条、边框等元素外，通常不采用过多的装饰元素，适合简约风格的家居用品、家具、服装等商品。图1-9所示为简约时尚风格的Banner案例。

• 趣味、可爱风格。这类Banner给人欢乐、温馨、软萌、卡通、可爱的感觉，色彩上多使用暖色调或浅色调，字体上多采用少儿字体、手写字体、卡通字体等，经常会添加线条、星星、云朵、太阳、玩具、风筝等元素点缀画面，这些元素以手绘和矢量图为主，适合一些高端品牌。图1-10所示为趣味、可爱风格的Banner案例。

3. 进行Banner排版设计

排版是指将文字、图片、图形等可视化信息元素进行位置、大小、外观的调整，使之达到美观的视觉效果。在Banner排版过程中，常用到以下排版原则。

• 相关内容对齐、聚拢。将Banner内容分成几个区域，相关内容都聚在同一个区域中。相关的内容要对齐，这样不仅美观，而且方便消费者浏览。

• 适当留白。为了突出重点内容并保持版面的美观，Banner内容不宜过多，版面内容不宜排列得太紧凑，需要留出一定的空白空间、否则容易使消费者视线混乱，产生压迫感。

• 保持画面的和谐统一。元素与元素之间、元素与整体之间是一种协调的关系，如元素的大小、元素的颜色、元素与整体的风格应协调，避免出现不同类型的视觉元素。

• 使用对比突出原则。Banner对比包括颜色对比、文本大小对比、形状对比等，通过对比可以加大不同元素的视觉差异，既方便突出视觉重点，还能增加Banner的活泼性和丰富性，使画面不再呆板、沉寂。

• 把握节奏韵律。Banner中的一种或多种元素按一定的规律排列，会产生音乐一般的韵律感。图1-11所示的拖鞋Banner，对拖鞋进行均匀排列，便于展示拖鞋的不同样式。

• 把握画面的平衡性。画面的平衡性即Banner元素与元素之间，元素与整体之间的大小、形状、数量、色彩、材质等的分布与视觉上的平衡。图1-12所示的女装Banner，在两侧使用文本保持画面的平衡，由于右下侧文本较多，于是在左上侧利用了心形形状来平衡和丰富画面。

在Banner排版过程中，文案与商品（模特）的排版尤为重要，一般呈现为以下几种模式。

• 两栏式。把整个版面分为左右两个部分。可以文案在左，商品在右；也可以文案在右，商品在左。这需要根据需求去选择。一般两栏式Banner会对文案进行装饰或添加背景，以达到左右均衡。图1-13所示为两栏式Banner的效果，左侧为说明性文字，右侧为商品图片，整个画面和谐美观。为了制作动态视觉的Banner，可以根据商品外观和需要，为两栏式Banner的文本或商品设置倾斜效果。

• 三栏式。把整个版面分为左中右3个部分，一般文案在中间，两边放置模特和商品图像。图1-14所示即为三栏式Banner的效果，其画面稳定、文字信息突出。

• 上下式。把整个版面分为上下两个部分。可以文案在上，商品在下；也可以文案在下，商品在上。由于Banner的尺寸高度限制，所以这种类型一般使用较少。图1-15所示为上下式Banner的效果。

• 组合版式。将模特添加到两侧，中间的文案和商品进行上下排列；或将模特添加到一侧，另一侧的文案和商品进行上下排列，图1-16所示为组合版式Banner的效果。

• 满版式。满版式Banner一般以场景或背景颜色填充整个版面，文字在画面中占比较大，为主要展示对象，商品和其他小元素装饰在文字周围。这种版式通常视觉传达比较直观，给人以大气、舒展的感觉，同时视觉冲击力也比较强烈。图1-17所示为满版式Banner的效果，在文字周围添加小元素，使整个效果更加饱满。

• 中心式。中心式Banner的商品或模特在画面中占比较大，为主要展示对象。一般将商品或模特放置在版面中心，在其上层、下层或周围使用文案或其他元素进行装饰。这种版式直观大气，视觉冲击力很强，便于展示商品细节，常用于有模特展示的服装、美妆等Banner的设计中，图1-18所示为中心式Banner效果。