一、什么是Banner

Banner又叫旗帜，在网站中称为横幅广告，存在目标是让用户在阅读网页信息时对广告信息发生关注，从而牟取网络营销的功效。Banner广告是互联网广告中最根本的广告格式。

网站Banner主要有以下两个用途，一个是作为品牌、产品的呈现，一个是活动的预热、促销。

一般采用GIF、JPG形式的图像文件。同时还可以采用Java等语言使其发生交互性，用Shockave等插件加强表现力。尺度GIF形式以外的网幅广告被称为Rich Media Banner。

假如说纯正的文字信息过于枯燥，难以吸引用户的目光，而Banner刚好战胜了这一难点，通过图片、元素的排版点缀给文字信息增加了“可视性”，比拟于枯燥的文字，用户更喜欢颜色鲜明、文案扼要的图片。

二、Banner的风格

Banner的风格有许多，常见的有时尚风、国风、文艺风、炫酷风、简约风、科技风这几种。

时尚风：这种风格相似于时尚潮流杂志的排版，最显著的特色是留白，通过精巧的配色与排版，营造出独具一格的画面。除了略大一些的题目，其他文案字体都很小，给人非常精致的感到，

国风：这类风格大多采用像中国山水画、水墨画、京剧、剪纸、卷轴等带有传统颜色的元素或图案进行设计。

文艺风：这类风格强调清爽、唯美、小资的感到。采用的都是干净、清新的底细和元素，给人感到非常清爽。

炫酷风：这类风格通常采用深色底细，通过运用一些有质感的元素与光影特效，来打造炫酷的画面。

科技风：这类风格与炫酷风的颜色底细类似，都是采用深色底细，科技风着重采用蓝、黑、紫这些色调，叠加光效、金属功效、线条、光点之类的元素，营造出硬朗、空间、未来的感到。

简约风：这类风格没有过多的修饰元素，文字也很少，整体的感到非常干净、扼要。排版是将素材图放大、放大、再放大，突出细节与质感。

三、构图样式

因为每个网站所属的行业差异、领域差异、产品的属性也天差地别，而且文案字数和搭配元素也有所差异，导致Banner的构图春风格需要依据实际需求进行改动。这里只解析提供一些构图的样式，不做具体的提名。

左右构图：这类构图最常用，也最简朴。通常是左文右图或者左图右文的形式，文案与图片分区显著。左右构图实用于凸显文案，所以图文比例可以参照黄金分割比。

斜切式构图：与左右构图很像，应用线条和颜色的碰撞分区，空间感更强。

居中构图：这类构图有文案居中图片在四周、配图居中文案在左右、图文都居中这三种场合。

居中式排版想要凸显谁就把谁放在画面中心。除此之外，假如banner中没有配图只有文案，一般使用居中式构图。

平铺式构图：这类版式就是平行排列每个产品，每个产品所占的空间比重雷同，秩序感强，给用户的感到是产品很有品质很安全。

三角形构图：正如世界上最不乱的组织是三角形一样，三角形构图中各个产品大小排列分明，构图不乱天然，组织感强。给用户的感到是慎重。

中央聚焦式构图：与放射式构图雷同，这类构图应用透视指向产品或者slogan，空间感很强，也会让用户的留心力聚焦在画面中央的产品或者产品卖点上。

对角线构图：这类构图可以放置一个产品或两个产品，各个产品所占的比重雷同，构图不乱有活力，空间感强。

四、如何做好网站Banner设计

下面为便捷大家浏览和懂得，这次我依据网站banner的整个设计过程来进行解说。整个设计过程：领会需求→确认尺寸→确认设计风格和版式→构成元素（字体∕图片∕底细色∕点缀）→调换配色

1、确认尺寸

依据放置的位置差异，banner的尺寸也有区别。

依据谷歌Adsense统计，最有效、尺度的Banner尺寸是

导航栏Banner：728×90 px

半屏Banner：300×600px

中等矩形Banner：300×250px

长矩形Banner：336×280px

2、文案

1）字体抉择

banner中常用的字体主要有衬线体、非衬线体、书法体。衬线体是模拟中国古代字体和古代碑文上的字体，笔画有粗细之分，简朴易变形，装饰性强。提名采用字体：宋体、方正俊黑、华文细黑等。

非衬线体笔画粗细雷同，扼要有力，容易吸引用户目光。提名采用字体黑体、方正兰亭粗黑、汉仪润圆等。

书法体源于中国古代，合适中国风、传统文化和国人慷慨气质的主题。提名采用字体汉仪尚巍手书、李旭科书法等。

小tips：

商用字体要留心版权疑问。

同一画面中采用的字体最好不要过份三种，太多会显得画面混乱无章。

2）文案内容

在banner的设计中，文案内容不需要长篇大论，页面上的文字最好不要过份4行，只要能高效的吸引用户的留心力，精确传达信息就可以。文字篇幅过多会耗损用户的忍耐，也会导致排版布局不美观。

小tips：

同等级的文案内容尽量维持字体、字号、色彩上的一致性，不然页面会显得太混乱。

假如字体色彩雷同，可以依据字号的大小来分辨信息层级。

3、底细抉择

banner的组织包括文案层、底细层、修饰层，底细层又包括图片底细和底细色。

图片底细：

图片元素是banner底细层的重要部门，既包括整个页面的底细图片，也有产品图。尤其是精修过后的产品图，显得更加美丽、有品质，提高用户的信任感。

底细色抉择：

一般颜色的抉择与行业性质相关。差异的色彩、差异的色调能够引起人们差异的感情反映，这就是所谓的颜色联想作用。

以下是差异的色彩所发生的的感受一览表。

红色：是一种激奋的颜色，传达了激动、高潮、豪放和痛快的感情，能使人发生冲动、愤怒、恳切、活力的感到，对眼睛刺激较大，容易发生视觉疲惫，采用时需要稳重斟酌。

黄色：典型阳光、青年、活力满满。一般实用于用户偏青年的产品上，或者食品上，黄色也能让人发生食欲。

蓝色：具有沉稳的特征，是最具凉爽、清爽、技术特色的颜色，传递出镇定、聪明、自信的感情。常用与强调科技和效率的商品或企业中，大多数男性产品也常采用蓝色。

绿色：典型健康、安全、新生和气的感情，能够创建出平衡和不乱的页面气氛。常用于健康、生态、医疗领域的产品网站上。

白色：典型权利、崇高、慎重、现代感、科技、庄重的感到。一般实用于汽车产品、智能科技产品和高档奢华品上。

黑色：典型科技、简朴、清纯、素雅、高档、明快、和谐的感到。一般用在家居、妆扮品、高档产品上。

橙色：是充实活力的色彩，可以让人联想到金色的秋天、丰硕的果实、跳动的火苗，是一个痛快而幸福的色彩。

紫色：典型了神秘莫测、崇高、优雅、浪漫的感受，如紫色的薰衣草被以为是浪漫的。但眼睛对于紫色细微变化的区分力很弱，容易引起疲惫。

小tips：

色彩的抉择需要斟酌到企业的VI 色；

色彩的饱和度不宜过高，底细就是底细，不能喧宾夺主；

假如想要充沛画面的层次感可以斟酌使用渐变功效。

4、点缀元素抉择

点缀元素在banner中可有可无，但是采用了就会让整个画面看上去精致许多。一般来说，点缀元素数目越多，格式越多样；颜色越多，明度越高，越不条例，画面越活跃，反之，越高冷大牌，有逼格。

点缀元素分为光效、几何元素、线条、实物等。几何元素，一般都会比底细深一些，有时也会使用渐变，可以更好的融入底细中。使用几何点缀可以使画面更加活跃。

实物点缀是许多图片常用的策略。常显露在画布边缘且不显示全貌，既能保证画面不空虚，也不会喧宾夺主，这种手法需要留心虚实变化，多用高斯隐约做一些虚化，功效会更显著。

最后，只有到达点缀元素与画面的和平统一，才能让网站banner看起来更有质感，更吸引人。

5、配色网站提名

在banner设计的最后一步，需要调换整体的配色，使画面看起来更加和平。上文也提到了差异色彩所表达的感情，但是要敏捷运用，合乎逻辑搭配也需要多看多练培育审美。下面提名大家一些好用的配色网站。

color hunt

一个非常好用的配色网站，网站提供了非常多的配色方案，对比色、邻近色、相对色都有。点击颜色就会显露色值，假如你喜欢某套配色，直接拿走就行。

Reeoo

这个网站通过色彩的分类来进行检索，提供手机App、iPad App、网页设计、icon设计的精彩案例。点击色彩就会显露以这个色彩为主的案例设计。不仅对于颜色搭配的吸取，对于设计审美的提高也有很大辅助。