web 2.0时代的网页设计风格

原文链接

最近对uuzone进行refactor, 除了代码的重构，项目的UI, look&feel都做了不少调整：

* 大幅度简化了CSS和HTML代码，虽然我们从2004年11月就把站点完全切换为完全靠CSS来定义样式的结构，但毕竟过去对css的理解还太肤浅，因此导致css代码非常臃肿，html代码的结构也“臭不可闻”（你可以看看源代码，那些有多丑）

* 采用开发/任务为主导的页面UI设计, 而不是美工主导的UI设计。 一个 不好用的东西，再漂亮又有什么用？ 而且现在的风格趋向是简单，而KISS(Keep It Simple, Stupid) 一直是设计界的最高境界。 美工主导的设计还有一个弊病是美工对代码和程序不够了解，而开发人员由于不需要对最终美化负责而被“惯”坏了变得越来越不重视样式风格

我们在优化的过程中，参考了大量的国内外优秀站点。 其中看到这篇文章对我们的启发很大：http://www.webdesignfromscratch.com/current-style.cfm

这篇文章的作者概括了目前流行的一些web 2.0风格的站点的一些流行元素：

Simple layout  简单页面结构

大部分采用css来控制的简单2栏或3栏结构，甚至是1栏的。 没有人再用table来控制layout.

3D effects, used sparingly 

3D效果，但保守地使用（不是太重和累赘）。

淡淡的倒影，几乎是web 2.0站点的流行装饰:

醒目的爆炸形logo...甚至有篇文章说，站点上要没有这个爆炸型logo就不算web 2.0 :)

Soft, neutral background colours

淡背景色。

Strong colour, used sparingly

 强色调。 看到odeo的时候这种红色冲击非常明显

Cute icons, used sparingly

很cool的图标， 往往很吸引人，但不能滥用

Plenty of whitespace

页面比较松散，很多空隙。 我认为这也会是一个趋势，因为用户的屏幕分别率越来越大， 太紧凑给人压迫感。所以最新的这些站点往往空白很大：

Nice big text

大字体。 可惜中文字体大一些后会有些难看，在英文站点里，大字体漂亮而且醒目，是不错的设计。 我相信这也是因为用户的屏幕分别率越来越大而带来的必然趋势。

给大家看看我们新的设计的一角， 的确借鉴了本文总结的很多思想：

还看到一篇文章说了目前web 2.0的很多logo设计：http://www.fontshop.com/fontfeed/archives/web-20-logos.cfm 其中一个趋势就是采用一些异型新字体来简单做logo, 这样一个稍微有审美能力的人就能弄个不错的logo出来，不需要花n多的钱让设计师去搞！

我们uuzone的这个logo就是我自己让美工拿着n种字体拼凑，很简单就定下来的。

国内很多号称web 2.0的站点设计还是非常落后，甚至css都还没有很好地使用。 尤其一些有钱的大站点，至今还采用很落后的页面设计技术。 不过taobao值得称道，他们的站点设计是不错的，而且也是采用不错的设计技术和理念。

web 2.0对站点的设计师提出了新的要求，不是会画photoshop, 拿dreamwaver, frontpage做些html就能出来混的了！ 现在会拿着notepad（我更多用editplus:)）写css, html代码的那才牛！ 

这些新趋势，让美工（或者严格说一个纯美工）对一个web站点的影响变得比1.0时代更加不那么重要了。懂更多知识，了解更多系统，注重用户感受的设计者才能是web 2.0页面设计的主导。 如果你是从事着美工或者网页开发，一定要考虑好好换换脑筋、更新知识结构，并且要像时尚设计师那样了解最新的流行设计和流行色， 别还把自己框过去的老套里啦！