Web 2.0 的视觉设计

前两天在 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 网站不约而同地采用了绿色，但是深蓝、橙色和粉红色也十分人气。浓重的主色调表明了幽默的态度，也有助于人们迅速注意到页面上的重要元素。

圆角革命

新的CSS技术支持圆角，使得圆角风格再次风靡世界。友好的圆角风格奠定了许多 Web 2.0 网站的舒适、通俗的基调。

FontShop有一篇分析 Web 2.0 图标的精彩文章，表明了圆角字体已成为流行趋势。它为一个公司的视觉形象带来了十分现代的风格。

免费无处不在

如果你已吸引访问者注册了你的应用程序，那么你应当毫不吝惜地送他们免费的账户。几乎所有的 Web 2.0 网站都将主要的经费奉献给了一条消息——“我们提供免费服务”。若这条信息出现在无处不在的星形标记中就更好了。

照片为大忌

在 Web 2.0 网站上，你找不到任何照片——那是小公司模仿大企业的伎俩。简洁的图标和截图，当这些成为 Web 2.0 网站的形象时，它们就成了今天的规则。三维圆角按钮会让页面变得高贵优雅，不使用则显得古板僵硬。

简单就是美

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

巧妙地利用布局、颜色、输入和文本可以最大限度地减小访问者的负担。

越大越好

谈起 Web 2.0 当然是越大越好。这里指的是大号字体。大号文字省眼，与流利的书写配合使得信息更容易吸收。如今，网站的可访问性十分重要，因此有经验的网页设计师可以使用超大文字。

空白的活力

Web 2.0 网站的布局可以做得很小。巧妙利用空白可以提高页面的易读性和易用性。空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。宽敞的文字布局也使得文字复制更容易。有些 Web 2.0 布局小得近乎无法忍受，但如果设计得好，紧凑的页面也会值得深深品味。

好点子

友好、风趣的书写可以让作者和访问者建立良好的关系。A List Apart使得Flickr和Photojojo脱颖而出，这是个许多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 的绮丽。

总结

我的 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

输入您的搜索字词 提交搜索表单