Banner基础设计方法

网页设计的Banner作为表达网站价值或者传达广告信息的视觉主体，一直在根据网络环境的变化而变化着，从表现形式到尺寸大小，再到创意的多元化，因此更需要我们网页设计师们对其设计创意进行丰富和完善，才能真正达到宣传的目标。

Banner规格尺寸大小不一，文件大小也有一定的限制，这就使得在设计上增加了许多障碍，怎么在方寸间把握平衡，变得十分重要。Banner中的视觉要素主要包括：背景、图片及文字，此外Banner的投放环境对其设计也有极大的影响，这些都是设计时需要考虑的重点要素。

一、banner 的构成

1.关于版式

大体上 banner 版式可分为两种：图文左右排版、文字居中。当 banner 中需要包含具体的素材，如某位大咖，某件产品时，一般会选择左右排版。并且图文比例约为6：4（接近0.618的黄金比例）。

2.关于字体

banner 中常用的字体有三种：衬线体（serif）、非衬线体（sans-serif）、书法体（cursive）。

都说字体有各自的性格，衬线体笔画有粗细之分，它模仿的是中国古代字体和古代碑文上的字体，因此衬线体能给人古典，文艺的感觉，适合用于文艺气息或与女子的相关设计。

非衬线体笔画简洁，笔画较粗，体现现代，简约的特性，适合用于苍劲有力，与男子相关的设计。

书法体源自中国古代，能体现中国文化和挥洒墨水的豪气，适用于文艺主题和金戈铁马般的豪迈主题。

注意：商用字体需要注意版权，这点很重要。

例：

3.关于颜色

在生活中，色彩心理学让人们对颜色的认知有很大的影响。

黑色：黑色是一种代表品质、权威、稳重、时尚的色彩，同时也含有冷漠、悲伤、防御的消极情感。

白色：传递一种简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。

灰色：代表睿智、老实、执着、严肃、压抑的色彩。

红色：传递喜庆、自信、斗志、权威、性感的情感。

绿色：是自然界中最常见的颜色，代表生命力、青春、希望、宁静、和平、舒适、安全的情感。

蓝色：是三原色中的一种，代表永恒、灵性、清新、自由、放松、舒适、宁静、商务。

紫色：是一种代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵性、创造性的颜色。

黄色：代表阳光、青春、活力、时尚、尊贵、年轻轻快、辉煌、希望的颜色。

因此在设计中选择主色调也要遵从如上。

例如活泼年轻的内容可选择纯度较高的蓝绿色、绿色等作为主色调。

关于颜色的搭配，我一般会在花瓣上找些主题相近的 banner 作参考。

此外推荐几个配色网站：

https://coolors.co/palettes

https://color.adobe.com

https://uigradients.com

4.关于点缀

大约有3种。椭圆点缀，圆角矩形点缀，实物点缀。圆形圆角矩形点缀可适当加些渐变和阴影。

为了不让实物点缀太过抢眼，可以适当做些弱化，比如降低透明度或是做些模糊处理。

5.关于背景

大约有3种，纯色背景，实物背景，材质背景。根据画面的需要可以选择合适的底图。

二、banner 设计的注意事项

(1)Banner的文字用一两句话来表达即可。

(2)广告语要朗朗上口，突出重点。

(3)图形无须太繁杂，文字尽量使用黑体等粗壮的字体。

(4)图形尽量选择颜色数少。

(5)尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样会增加图形所占据的颜色数，增大体积。

(6)产品数量不宜过多。摆放太多产品，反而被淹没，视觉效果大打折扣。

三、如何做好banner 设计

一般来说，Banner分为两个部分：文字和图片。虽然图片占比比较大，但是不加入文字说明的话，有比较多的情况用户是看不懂的，所以文字理所当然也是Banner的主角，文字的设计和排版在Banner图里显得尤为重要。要做一个好的Banner图必须要抓住用户的心理，把握用户的需求来进行设计。

1.满版法则

这种banner是将图片铺满整个版面，让画面呈现出更加饱满充实的设计效果，有很强的冲击力，表达的情感也更加丰富。

2.抠图法则

很多banner是将人物抠出来，对图片进行二次加工，可以很好的强调主体，有很强的空间感，像一般电商网站，视频网站会更多的采用这种banner方式。

3.分割法则

这种banner是将图片分割开来，使画面主题清晰，有很明确的独立性，简单大气。非常适合电商网站来做活动或者促销。

4.叠加法则

在图片上叠加文字，可以让图片和文字产生互动，突出主题，更加丰富设计的画面感。像一些音乐、电影等主题的banner常常会用这种设计方法。

5.场景法则

在一些电影、电视剧，MV常常会用到这种场景组合的方式，可以营造很好的氛围感，让设计内容变得更有代入感，让画面更加生动。

6.左右法则

这种是一种比较常见的设计法则， 画面可以有很好的平衡感，相互对称，很适合一些综艺、影视、音乐方面的banner设计。

7.重复法则

这种设计方法是将某一个元素重复设计，保证画面的统一感，注意重复之间的间距离。适合演唱会、音乐、个人专题等方面的banner设计。