WEB2.0设计精髓——视觉引力
![](http://image15.360doc.cn/DownloadImg/2010/09/2912/5627699_1.jpg)
作者:三石
日期:2010年08月18日分类:视觉设计
提到WEB2.0设计风格,给我们的印象很直观,大面积的区域划分色块,高质量的渐变效果,优秀的页面大配图,精美的图标设计,质感到位的大按钮等等。是什么让个性独特的设计师们会对这样一种风格所亲睐,在此,本人仅以粗浅的认识提出自己的见解:WEB2.0的设计精髓——视觉引力。
先上图
![](http://image15.360doc.cn/DownloadImg/2010/09/2912/5627699_3.jpg)
从图上可以清晰的感受到,同样内容的两张图,我们的观看顺序变化了,说明通过视觉处理方式的改变,视觉引力产生了,作为连接后台数据和用户之间的桥梁,设计师们可以利用对视觉引力的操控,引导用户去了解和感受产品。这是一个浅显易懂的例子,于是乎我们经常在web2.0站点上看到大号主标题,为了达到标题突出性,必然在主体周围会留出对比空间,这一做法既符合产品追求简洁,清晰的诉求,更让平面设计上点线面疏密对比穿插产生视觉美感的艺术形式得到充分展现,当设计师和产品经理都在一种处理方式中得到满足感,那么他的成功也就显而易见了。再看看国内掀起的微博热潮吧,为何各大微博在设计上可说是大同小异,大面积背景色和白色内容区域的展现已经成为微博的视觉识别方式(个性化换肤功能除外),从微博的特点上分析就很容易理解这种做法了,作为简短型文章的分享传播平台,和博客不同,每篇文章的占用空间小,更新频率快,不容易形成视觉集中区域,为解决这个问题,微博设计师们利用背景颜色和图案把白色内容展示区域包裹起来,这样的处理方式把视觉中心点引向了被包裹住的内同区域,进一步设计师们更可以利用大面积背景做他们朝思暮想的个性化设计,于是大家开始轻松愉快的在微博里观赏内容了。不止是微博,我们看到大大小小的web2.0站点大都采取类似的处理方式来展现主要内容,归根到底,都是为加强视觉引力的结果。
这么说来,web2.0设计师们岂不很简单了,大标题字,对比度背景,主题突出了,内容清晰了,设计就到位了吗?我们再看一些细节吧:(这里借用一张对比图)
![](http://image15.360doc.cn/DownloadImg/2010/09/2912/5627699_4.jpg)
图一:我明白了,两个按钮是前进后退。
图二:明白了,前面可能还有更有意思的东西哦。
图三:看来商家强烈推荐购买哦。
图四:代表什么?
从美观性上来说他们有差距吗?我们经常也看到类似质感表现的大按钮和图标,这里又要说到引力的作用了,你的站点是做什么的,想让用户干什么,在web2.0的设计中,我们经常能感受到这种细节表现方式对我们的引导,视觉引力不光展现在大环境的烘托,还细致到每一个细节的运用、搭配,设计师对自己的设计必须有一条清晰的路线做指引,这条路线是和产品经理,交互设计师,不断的交流碰撞融合,对目标用户深入调查研究得出的。我相信,平面设计功底比较扎实的设计师们在颜色搭配,空间节奏,图形创意上能把页面设计得像web2.0风格一样,但是却少有设计师能把握各个环节,把清晰的线路体现在各个细节处理上,至始至终贯穿视觉引力对用户的牵引指导思想。也经常在网络上看到关于web2.0风格设计的文章,大家对各种质感运用,光影效果,按钮样式,板块分割等技术处理环节的研究很深入,能学习到很多符合web2.0视觉体验的处理方法。因为大多数设计师们感觉到了这种设计的形式美,自己在设计中也想努力去呈现出这样的美,却始终不得其法,所以经常看到很多类似web2.0设计风格的页面设计,他们感觉上是使用了web2.0的一些设计模式,但在真正使用中却没有舒适感。所以说表象的呈现是没有支点的,会随风漂移,不是web2.0设计的核心。我们做web2.0设计,需要这样的支点,围绕视觉引力这一支点,我们可以创意出更多种多样的设计方式,他不再是固定的一种形式,而是充满着激情与惊喜。
随着互联网行业的发展,web2.0被越来越多的用户所接触,作为视觉设计师,面临着为用户提供更多更广的设计风格以适应不同的个体,如何把握视觉创新和体验之间的协调性,我想,当我们以视觉引力为主导思想把控设计,会源源不断的产生出更多更精彩的web2.0设计。