查看完整版本: [转]Web2.0视觉风格进化论 之一

tension 2007-6-21 09:37

[转]Web2.0视觉风格进化论 之一

[color=#ffffff][color=black]Evolution of Web2.0 Visual Styles
Web2.0視覺風格進化論[/color]
[img]http://bbs.blueidea.com/attachments/2007/1/20/Web2.0_TlBd205ms0Gi.png[/img][/color] [img]http://bbs.blueidea.com/images/blue/attachimg.gif[/img]


[b]导语[/b]

在设计论坛之前的讨论中曾经谈到过“[url=http://bbs.blueidea.com/thread-2667788-1-1.html][color=#0000ff]设计师应该抓住这个时代的情感[/color][/url]”,这是设计师的设计嗅觉和职业特性的体现,那么在纷纷扰扰中“裂变”的Web2.0向我们袭来之时,作为设计师的你,抓住了Web2.0的趋势与风格了吗?现在我们从设计演变的角度,通过分析和鉴别,来让我们的设计师们快速的进行“向 Web2.0风格的进化”过程!

[b]引论[/b]

[b]什么是“风格”
What is the "Style"?[/b]

什么是“风格”? 汉语词典中说它是:一个时代、一个民族、一个流派或一个人的文艺作品所表现的主要的思想特点和艺术特点。
简而言之,它应该包含 ①时代特色 ②思想特色 ③表现特色。在英文中,“风格”的对应词是“Style”[color=dimgray](发音:时'代要)[/color],然而,“In Style”的意思译成中文是“有品味”。那么我们是不是把上面那句话也可以理解成为“一个有品味的设计师应该抓住今天的风格”呢?是了,如果作为一个设计师,连当下的风格都把握不住,又如何去创造或者引领未来的风格?

[b]风格的视觉组成元素[/b]

既然我们是讨论 视觉风格,就应当了解一种特别的视觉风格到底是由哪些部分构成——我努力的想去找到一些前辈大师的言论来当外套,让我的论点显得更“优雅华丽”一些,但是很可惜的没有如愿。我只好把我的见解就这样“赤裸裸”的展现出来。:)
我仔细的回味了传统美术和设计史中对各阶段风格的描述,认为能反映一个“成熟的风格”的特征元素应该是以下四个方面:

[img]http://bbs.blueidea.com/attachments/2007/1/20/Web2_P1_Bad3yBYPJhDU.png[/img]


[b]① 色彩倾向:[/b]如同我在之前的一篇文章《[url=http://www.blueidea.com/design/doc/2006/3258.asp][color=#0000ff]关于时间和色彩的游戏[/color][/url]》里面谈到的那样,色彩的规划在现代设计中的地位已经跃升到最高的地位。这一点我想各位都不会怀疑,即便是时隔久远,你也不会将“[url=http://140.126.32.82/arthistory/Impressionism.htm][color=#0000ff]印象派风格[/color][/url]”的色彩和“[url=http://140.126.32.82/arthistory/baroque.htm][color=#0000ff]巴洛克风格[/color][/url]”的色彩相混淆;或者说得简单点,你绝不会听到“可乐”想到绿色,而听到“雪碧”想到红色,这就是因为它们有不同的“色彩风格”。

[color=darkslategray]图注:印象派的色彩追求感性,笔调欢快。巴洛克属华丽的古典风格,色彩理性,忠实而严谨。其实你也可以把印象派理解成为大光圈高快门速度的高饱和度照片,而巴洛克是追求精致的小光圈慢快门写实照片。[/color]

在后续的文章里,我们会一起来看看这些关于Web2.0视觉风格的特征元素,因为色彩一节比较特殊而重要,我决定将它放在最后来讲,因为我怕可能会越讲越长,让整个文章的结构打乱掉。(其实我准备给蓝色的说辞是:希望先发些相关的内容,看看点击量和关注程度来决定后续的内容。唉,蓝色是我遇到的最没有机心的人,是机心不是心机,没错。)

写到这里我觉得我似乎在血液里也开始涌动着Web2.0的泡泡,它影响我的行文风格发生了些许小小的变化,不是吗?这就是潜移默化的进化过程。

[img]http://bbs.blueidea.com/attachments/2007/1/20/Web2_P2_toD3QSqRBwbs.png[/img]

[b]② 结构布局:[/b]这个在传统美术中叫做构图,书法叫章法,国画叫布局,现代设计中叫构成,排版上称版式设定……说这么多,无非是想告诉你:你了解其中的任何一个词汇,你就明白我想表达什么了。举例来讲,即便你没练过书法,你也不会把颜体和欧体相混淆,因为颜体的丰腴宽厚的结构特征和欧体的险峻严整会让你过目不忘,这是结构上的风格区分。

书法太难理解?OK,想一下中世纪欧洲宫廷的梳妆台和你在“[url=http://www.ikea.com/ms/zh_CN/][color=#0000ff]宜家[/color][/url]”([url=http://www.ikea.com/][color=#0000ff]IKEA[/color][/url])买回来的电脑桌有什么不同就好了。

[color=darkslategray]图注:我老是在怀疑用书法作比喻会不会产生岐义,因为书法的结构和用笔(也就是表现方法)是捆绑在一起的,你不可能用左边颜体的笔画去写右边欧体的间架。但是设计中却是可以用不同的表现方法套用在同一个结构上的,希望没有给大家带来困惑。[/color]

乔纳山(Jonathan)的“[url=http://www.blueidea.com/design/doc/2007/4432.asp][color=#0000ff]Web2.0的视觉设计[/color][/url]”([url=http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/][color=#0000ff]The visual design of Web 2.0[/color][/url])中认为Web2.0的布局排版部分占的比重不是太大,但是我觉得他指的是布局的难度系数而不是布局的展现方式。就像下围棋,Web2.0可能就是一盘布局简单的棋,但是你不能说布局简单厮杀就不精彩,就没有胜负可言,那就错了。

[img]http://bbs.blueidea.com/attachments/2007/1/20/Web2_P3_lSGPxGEYUVPU.png[/img]

[b]③ 造型方法:[/b]作为一个艺术家,掌握多种艺术方法和找到合适的造型方法来完成自己的作品,恐怕是一生的追求。就像 [url=http://www.artcyclopedia.com/artists/picasso_pablo.html][color=#0000ff]毕加索(Pablo Picasso)[/color][/url] 对着一头[url=http://www.allposters.com/gallery.asp?CID=A20547CA364F40BD8C1DFA1559DD9F74&txtSearch=Picasso&image1.x=22&image1.y=13][color=#0000ff]公牛 (Le Taureau)[/color][/url]画七八遍一样,很多勤奋的人都在这么干。设计师也面对同样的问题,同样的题材可以有好多种表现的方法,你能想到有多少种,在于你的创造力;你能否找到合适表现你的题材的那种,在于你的判断和鉴赏力。想要成为一个优秀的设计师,就必须锻炼这两种力。现在你应该了解什么是一个“Powerful Design”了。

[color=darkslategray]图注:公牛,我只采用了首尾和中间的4个,其实毕加索画了11个同样的这个牛,目的是探索抽象的方法,摆在一起就显示出从写实到抽象的进化过程。右边的苹果Logo,也是显示出不同时期的进化过程,最右下角那个你也许觉得陌生,那就是传说中的Web2.0的苹果Logo。[/color]

Web2.0应该从现有的造型方法中选择一个什么样的方式,或者派生,或者改良出一个怎样的造型方式来与众不同呢?我们的后续文章会慢慢告诉你。:)

[img]http://bbs.blueidea.com/attachments/2007/1/20/Web2_P4_nSpvNACEU7qd.png[/img]

[b]④ 笔调特色:[/b]笔调这个词很好,很传神,它既可以用来对比不同的艺术家的作品,也可以用来对比某个艺术家自己的不同作品。
比如,我们可以说 [url=http://www.artcyclopedia.com/artists/van_gogh_vincent.html][color=#0000ff]梵高(Vincent van Gogh)[/color][/url] 的“[url=http://www.artcyclopedia.com/goto/prints-375608][color=#0000ff] 星夜(Starry Night) [/color][/url]”和“[url=http://www.allposters.com/-sp/Sunflowers-Posters_i373567_.htm][color=#0000ff] 向日葵(Sunflowers) [/color][/url]”笔调完全不同,这里的“笔调”,不光是指“笔触”,还指画面所带给我们的可以感知的画作者创作时的一种心态。同样的内容,笔调不同就产生不同的情态。

[color=darkslategray]图注:左边梵高的画作对比很好的表达了“笔调”的解释。右边的图是想告诉你不同时代的同一题材的表现差异,同样是莲花图案,传统的古典手法和现代数码的风格是如此迥异。[/color]

Web2.0带给我们一种新的态度,开放的,交互的,松散的,闲适的,不断进步的……那么在这种情绪和氛围的影响下我们应该表现出什么样的东西呢?或者反过来讲,用什么样的笔调来表现才能体现这种态度来告诉大家:我已经是Web2.0了!呢?

[color=purple]请关注我们这个话题,也请积极发表你的观点和看法!
我们会在后续的内容中和你一起展开Web2.0的全面进化活动![/color]
页: [1]
查看完整版本: [转]Web2.0视觉风格进化论 之一