上一篇：Javascript常犯的一个错误 - 下一篇：WordPress Theme: Simple Web 2.0 Orange 发布

版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2006/11/30/the-visual-design-of-web-20-chinese/以及本声明。

前两天在 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

---

上一篇：Javascript常犯的一个错误 - 下一篇：WordPress Theme: Simple Web 2.0 Orange 发布