zzWeb 2.0 的视觉设计

Web 2.0 的视觉设计

作者:charlee 出处:charlee‘s BLOG
前两天在 del.icio.us 上看到了《The visual design of Web 2.0》这篇文章,读完之后觉得甚有道理,于是发信问原作者Jonathan能否将其翻译成中文,作者爽快地答应了,只要求链接到他的原文。忙了一个晚上终于翻译完了,才发现我的英文水平真的下降了很多很多,甚至连 as far as … be concerned 都不知道是什么意思了……虽然蹩脚的翻译使原文减色许多,但希望能够传达原文的意思。翻译文如下。(Original article


前一阵子维基百科的Web2.0条目包含了一节内容,专门描述Web 2.0的视觉元素,讲述了渐变色、绚丽的图标、反射效果、阴影以及大号字体等等。但是几天之后维基人投票决定撤掉“视觉元素”这一部分。推究其原因,可能是Web 2.0的特性不能通过一系列的视觉规则来精确地定义。如果 Web 2.0 被理解为一种内容生成和发布的途径,那就没必要将其禁锢在视觉效果的框框里。尽管如此,事实上大多数 Web 2.0 网站都有某种独特的艺术风格。也许维基人觉得这不属于Web 2.0的讨论范畴,但我却认为这十分必要。让我们开始 Web 2.0 的视觉之旅,看看所谓“Web 2.0风格”起着怎样的作用。

请相信我是Web 2.0

完美的 Web 2.0 依靠着访问者的力量。用户可以为Web服务制造内容,通过流行的点对点方式像“病毒”一样传播,并依照他们的意愿和喜好来提高内容的质量。但是要让访问者为Web应用程序付出时间和内容,首先需要让他们相信你。为获取人们的信任,绝大多数 Web 2.0 网站都通过绝妙的设计给我们带来了友好、亲切的印象。

春风又绿江南岸

明快的颜色得到了 Web 2.0 网站的青睐。大部分 Web 2.0 网站不约而同地采用了绿色,但是深蓝、橙色和粉红色也十分人气。浓重的主色调表明了幽默的态度,也有助于人们迅速注意到页面上的重要元素。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_color_2.jpg” width=105 border=0 minmax_bound=”true”>

圆角革命

新的CSS技术支持圆角,使得圆角风格再次风靡世界。友好的圆角风格奠定了许多 Web 2.0 网站的舒适、通俗的基调。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=144 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_round_cnr_2.jpg” width=144 border=0 minmax_bound=”true”> FontShop有一篇分析 Web 2.0 图标的精彩文章,表明了圆角字体已成为流行趋势。它为一个公司的视觉形象带来了十分现代的风格。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_round_txt_3.jpg” width=105 border=0 minmax_bound=”true”>

免费无处不在

如果你已吸引访问者注册了你的应用程序,那么你应当毫不吝惜地送他们免费的账户。几乎所有的 Web 2.0 网站都将主要的经费奉献给了一条消息――“我们提供免费服务”。若这条信息出现在无处不在的星形标记中就更好了。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_free_4.jpg” width=105 border=0 minmax_bound=”true”>

照片为大忌

在 Web 2.0 网站上,你找不到任何照片――那是小公司模仿大企业的伎俩。简洁的图标和截图,当这些成为 Web 2.0 网站的形象时,它们就成了今天的规则。三维圆角按钮会让页面变得高贵优雅,不使用则显得古板僵硬。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_icon_1.jpg” width=105 border=0 minmax_bound=”true”>

简单就是美

为提高用户体验,大部分 Web 2.0 应用程序都添加了技术层面或者组织层面,例如用 del.icio.us 管理链接,用 flickr 共享照片,或者用 Backpack 组织任务等,我们必须要熟悉这些新技术,并花些时间来管理我们的内容。好的Web 2.0程序应该十分轻快并易于上手,而巧妙的视觉设计和文字有助于减少入门障碍。巧妙地利用布局、颜色、输入和文本可以最大限度地减小访问者的负担。

越大越好

谈起 Web 2.0 当然是越大越好。这里指的是大号字体。大号文字省眼,与流利的书写配合使得信息更容易吸收。如今,网站的可访问性十分重要,因此有经验的网页设计师可以使用超大文字。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_large_text_2.jpg” width=105 border=0 minmax_bound=”true”>

空白的活力

Web 2.0 网站的布局可以做得很小。巧妙利用空白可以提高页面的易读性和易用性。空白可以分离出重要信息,使眼睛得到休息,并给人以冷静和有秩序的感觉。宽敞的文字布局也使得文字复制更容易。有些 Web 2.0 布局小得近乎无法忍受,但如果设计得好,紧凑的页面也会值得深深品味。0 && image.height>0){if(image.width>=510){this.width=510;this.height=imag
e.height*510/image.width;}}” height=144 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_whitespace_1.jpg” width=144 border=0 minmax_bound=”true”>

好点子

友好、风趣的书写可以让作者和访问者建立良好的关系。A List Apart使得FlickrPhotojojo脱颖而出,这是个许多Web 2.0网站都应该学习的案例。WebTango不仅仅是免费,它提倡的是“free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use(无添加物,无胆固醇,无破坏臭氧层的氯氟烃,最重要的是,免费)”。Tioti不只是拥有标签和RSS,它拥有的是“tagging and RSS up the yazoo”。FFAQQLY的创立者David Liu不是一个不露面的虚拟任务,而是“你注册后的第一个朋友”。eSnips的工具条不只是可定制,它是“有一大串超酷用法的工具条”。想个好点子吧。

意犹未尽

Web 2.0 网站有很多视觉设计倾向,乍一看似乎并没有某种固定的模式,但无一不在追求注意力。“湿桌子”效果(charlee注:反射效果)、“星形”效果、“玻璃”按钮,造就了众多的 Web 2.0 的绮丽。0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}” height=105 alt=”” src=”http://www.chinaui.com/manage/UpLoadFolder/Images/2006/0612/1206/web2_odds_ends_5.jpg” width=105 border=0 minmax_bound=”true”>

总结

我的 Web 2.0 视觉设计之旅就到此结束了。也许“Web 2.0风格”会在一年后过时,但它一定会为延长网站寿命做出巨大的贡献。

参考

What is Web 2.0?
The Logos of Web 2.0
Current style in web design
The Web 2.0 Awards

Leave a Reply