浅析Banner构成与创意设计

当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。

一.Banner的构成与设计形态分解

自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。

a.点的聚合

点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。

http://www.peminoz.com/

http://icondock.com/

无数图形的点聚合在一起，增强画面的韵律感

http://www.apple.com/

b.线的流动
线分为四类：直线、曲线、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。

http://oypro.com/

http://www.dongfeng-nissan.com.cn/3Ddrive/

严谨的线条，使页面稳重富有理性

c.面的分割

面在设计中的概念，可以理解为点的放大，点的密集或线的重复。Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一

http://rareformbranding.com/

清晰突出的图片所产生的第一视觉点

http://www.cult-f.net/

色块与线条间不同比例的分隔画面，使页面具有形式美感

http://www.prville2009.com/

二.Banner设计的形式美法则

在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。

a.有机形的柔和与美

有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。

曲线与个性化的插图形成强烈的对比。

http://www.wildaboutgardening.org/

b.偶然形的独特魅力

偶然形是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同。

偶然形使页面产生趣味性

三.有效的设计创意方法

a.预留大面积的Banner空间创作

Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。

http://tearoundapp.com/

http://digitalmash.com/

b.有效的措辞与行为导向按钮

在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和目光。

http://www.guifx.com/

http://www.campaignmonitor.com/

c.插图及清新手绘让页面倍感亲切

http://srburns.es/

http://www.mailchimp.com/

http://www.hdlive09.co.uk/

d.引入肢体语言让画面变得生动

http://www.kompakt.cz/

http://www.ronniesan.com/

http://www.tolingo.com/

http://www.kinoz.com/

e.丰富的产品展示组合效果

用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。

http://www.htc.com/asia/

http://www.darrenhoyt.com/

http://deaxon.com/

http://digitalmash.com/journal/articles/dynamic-columns/

http://www.shopify.com/

http://www.davidhellmann.com/

f.特殊肌理的组合

适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一。

http://www.habitationsbouladier.com/

http://www.foxie.ru/

http://www.njrebel.com/

g.让资讯循环动起来

使用滑动效果来将更多信息填进到Banner区域。这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的Javascript库及其插件，让这类效果更加活灵活现。

http://glue.be/en/

通过以上大量的案例对比，希望能给您带来更多灵感碰撞，感谢您的阅读 ^_^

赞 (0)

相关推荐

  • banner这样做才好看

    一个好的banner,不但要主题明确,抓人眼球,层次感也是让banner看起来好不好的一个很重要的影响因素,很多新手设计师可能没注意到这点,导致做出来的海报总是不能令人满意.今天小编给大家带来的文章是 ...

  • [浅析]苹果新iPad该买不该买?买iPad Air 2还是iPad mini 3?

    北京时间2014年10月17日凌晨1点，苹果iPad Air 2新品发布会如期举行，不出意外苹果公司推出了升级版本iPad Air 2和iPad mini 3,但并未推出传言的12.9英寸大号iPad ...

  • 浅析英文版urface平板电脑如何使用

    WIN平板surface现在已经有了中文版本，但是不少朋友为一睹surface芳容，在中文版还没出现时便主动出击拿下英文版，如果英文过六级使用当然无阻碍，但是英文要是连三级都没过的话……是不是想问英文 ...

  • 浅析windows7预读文件的功能和设置

    浅析windows7预读文件的功能和设置：在对win7版操作系统文件进行整理的过程中，系统文件以及程序都会是Ghost win7操作系统(雨林木风ghost win7系统下载)用户的主要针对对象。那么 ...

  • 如何快速制作flash banner

    制作网页时，你是否想有一个属于自己的flash banner呢，其实并非你想象中那么困难，本教程为大家介绍如何使用Aleo Flash Intro Banner Maker制作flash banner ...

  • 浅析win7下IE8主页被篡改的修复过程

    浅析win7下IE8主页被篡改的修复过程 很多网友都有这个烦恼，在打开住页面时，页面就会开始变化，不再是自己熟悉的版本主页，所以要解决IE8被篡改的问题，我们就要充分的挖掘Windows7的系统“潜能 ...

  • banner的用处是什么

    网络上经常听到Banner这个名词,他是什么呢?又有何作用呢?Banner其实是指网幅图象广告:以GIF,JPG等格式建立的图象文件,定位在网页中,大多用来表现网络广告内容,同时还可使用Java等语言 ...

  • Axure怎么使用动态面板制作banner图片轮播?

    Axure就不多介绍了,一般对产品岗位比较了解的都知道,常用的原型工具.这里为大家做一个用动态面板做简单的banner图片轮播的方法. 一.基础准备工作 1.打开Axure,页面名称命名为“图片轮播” ...

  • 怎么在WPS的PPT中制作创意设计风时间轴

    怎么在WPS的PPT中制作创意设计风时间轴

    今天给大家介绍一下怎么在WPS的PPT中制作创意设计风时间轴的具体操作步骤.1. 如图,在打开的PPT文档页面,点击插入选项中的形状,在打开的菜单中,选择曲线选项.2. 在页面上,绘制出想要的曲线,如 ...