网站Banner

简介: 网站Banner风格、样式大解析

一、什么是Banner
Banner又叫旗帜,在网站中称为横幅广告,存在目的是让用户在浏览网页信息时对广告信息产生关注,从而获得网络营销的效果。Banner广告是互联网广告中最基本的广告形式。
网站Banner主要有以下两个用途,一个是作为品牌、产品的展示,一个是活动的预热、促销。
一般使用GIF、JPG格式的图像文件。同时还可以使用Java等语言使其产生交互性,用Shockwave等插件增强表现力。标准GIF格式以外的网幅广告被称为Rich Media Banner。
如果说纯粹的文字信息过于枯燥,难以吸引用户的目光,而Banner刚好克服了这一难点,通过图片、元素的排版点缀给文字信息增加了“可视性”,相比于枯燥的文字,用户更喜欢色彩鲜明、文案简洁的图片。

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

时尚风:这类风格敢于使用色彩,或通过高饱和度的背景,或通过细腻的色彩搭配,营造出独具一格,有设计感的画面。
这种风格类似于时尚潮流杂志的排版,最明显的特点是留白,除了略大一些的标题,其他文案字体都很小,给人非常精致的感觉。
国风:这类风格大多使用像中国山水画、水墨画、京剧、剪纸、卷轴等带有传统色彩的元素或图案进行设计。
文艺风:这类风格强调清新、唯美、小资的感觉。使用的都是干净、清爽的背景和元素,给人感觉非常清新。
炫酷风:这类风格通常使用深色背景,通过运用一些有质感的元素与光影特效,来打造炫酷的画面。
科技风:这类风格与炫酷风的色彩背景相似,都是使用深色背景,科技风着重使用蓝、黑、紫这些色调,叠加光效、金属效果、线条、光点之类的元素,营造出硬朗、空间、未来的感觉。
简约风:这类风格没有过多的装饰元素,文字也很少,整体的感觉非常干净、简洁。排版是将素材图放大、放大、再放大,突出细节与质感。

三、构图样式
左右构图:这类构图最常用,也最简单。通常是左文右图或者左图右文的格式,文案与图片分区明显。左右构图适用于凸显文案,所以图文比例可以参照黄金分割比。
斜切式构图:与左右构图很像,利用线条和色彩的碰撞分区,空间感更强。
图文居中:这类构图有文案居中图片在四周、配图居中文案在左右、图文都居中这三种情况。
居中式排版想要凸显谁就把谁放在画面中央。除此之外,如果banner中没有配图只有文案,一般采用居中式构图。
平铺式构图:这类版式就是平行排列每个产品,每个产品所占的空间比重相同,秩序感强,给用户的感觉是产品很有品质很安全。
三角形构图:正如世界上最稳定的结构是三角形一样,三角形构图中各个产品大小排列分明,构图稳定自然,结构感强。给用户的感觉是稳重,有安全感。
中心聚焦式构图:与放射式构图相同,这类构图利用透视指向产品或者slogan,空间感很强,也会让用户的注意力聚焦在画面中心的产品或者产品卖点上。
对角线构图:这类构图可以放置一个产品或两个产品,各个产品所占的比重相同,构图稳定有活力,空间感强。

相关文章
|
7月前
|
Java 微服务 Spring
开发指南020-banner
以上组件封装了平台的banner
|
Java 开发者
自定义 banner|学习笔记
快速学习自定义 banner
自定义 banner|学习笔记
|
XML 前端开发 Java
首页数据显示-banner 接口 | 学习笔记
快速学习 首页数据显示-banner 接口
434 0
首页数据显示-banner 接口 | 学习笔记
html+css实战142-banner-精品推荐
html+css实战142-banner-精品推荐
111 0
html+css实战142-banner-精品推荐
html+css实战144-banner-精品推荐-内容
html+css实战144-banner-精品推荐-内容
117 0
html+css实战144-banner-精品推荐-内容
html+css实战140-banner-right-内容
html+css实战140-banner-right-内容
69 0
html+css实战140-banner-right-内容
html+css实战143-banner-精品推荐-标题
html+css实战143-banner-精品推荐-标题
114 0
html+css实战143-banner-精品推荐-标题
html+css实战139-banner-right-标题
html+css实战139-banner-right-标题
91 0
html+css实战139-banner-right-标题
html+css实战156-案例-banner
html+css实战156-案例-banner
205 0
html+css实战156-案例-banner
html+css实战137-banner-布局
html+css实战137-banner-布局
102 0
html+css实战137-banner-布局