您的位置:首页> 日志> 视觉设计 正文

    点的聚合、线的流动、面的分割、有机形的柔和与美、偶然形的独特魅力、预留大面积的Banner空间创作、有效的措辞与行为导向按钮。originality design (33)

 

 

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

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

a.点的聚合

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

originality design (1)

http://www.peminoz.com/ 

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

originality design (3) 

http://www.apple.com/

 

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

originality design (4)  

http://oypro.com/

c.面的分割

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

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

 
originality design (7)
http://www.cult-f.net/

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

 

originality design (8)  

http://www.prville2009.com/

 

 二.Banner设计的形式美法则

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

a.有机形的柔和与美

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


originality design (9)
曲线与个性化的插图形成强烈的对比。

http://www.wildaboutgardening.org/

b.偶然形的独特魅力

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

originality design (10)

偶然形使页面产生趣味性

  

三.有效的设计创意方法

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

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

 
originality design (12)
http://digitalmash.com/

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

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

 
originality design (14)
http://www.campaignmonitor.com/

  

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

originality design (15)
http://srburns.es/

 

originality design (16)
http://www.mailchimp.com/

 

 

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

 

originality design (21)
http://www.kinoz.com/

 

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

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

 
originality design (23)
http://www.darrenhoyt.com/ 

 

originality design (25)
http://digitalmash.com/journal/articles/dynamic-columns/ 

 

originality design (27)
http://www.davidhellmann.com/

  

f.特殊肌理的组合

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

originality design (28)
http://www.habitationsbouladier.com/ 

  
originality design (30)
http://www.njrebel.com/

  

g.让资讯循环动起来

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


originality design (31)

http://glue.be/en/

  参考网址:http://cdc.tencent.com/?p=1820