2009年海外Web设计风潮（下）

这是 COMSHARP CMS 团队翻译的2009年海外Web设计风潮的 第二部分，着重讲解了反 Box 式布局，单页布局，多栏布局，巨型插图设计，更多留白，社会网络元素，讲解式导航菜单，以及动态 Tabs 等设计风格，和 Smashing Magazine 推出的所有类似文章一样，里面包含了大量的，非常漂亮的实例。 本文第一部分请参阅：2009年海外Web设计风潮（上）。

2009 Web 设计风潮第 2 部分

1. 反 Box 式布局
    
2. 单页布局
3. 
4. 多栏布局
5. 巨型插图与多变背景
6. 更多留白
7. 社会网络元素
8. 讲解式导航菜单
9. 动态 Tab

  1. 反 Box 布局
Smashing Magazine 曾有一篇文章，讲到反 Box 布局。所谓反 Box 布局，就是不再拘泥与传统的 Box 布局模型，而是采用一种更有创意的的布局，然而需要指出，这种创意布局需要非常注意易用性问题，一种新的创意布局需要时间去慢慢成熟。















2. 单页布局
单页布局是使用一个单一的页面展示站点的全部内容，这并不意味着站点内容少，这个页可能很复杂，包含了大量图形和动画效果，加载的时间也会有些长。比如， 用户点击导航菜单后，该栏目下的新内容会在旧内容处通过渐入渐出，滑入滑出等动画效果显示出来，而页面其它部分始终保持不变。（白宫的最新网站的首页就有这个意思 - 译者）









3. 多栏布局
多栏布局（大于3栏）通常比较复杂，但通过适当设计，会对访问者带来更好的访问体验。最近几年，Web 内容爆炸，用户停留在一个网站的时间越来越少，就要求 Web 设计者尽可能有效地展示数据，既要让访问者多停留，又要让他们更容易发现他们希望看到的内容。



多栏设计一般用于杂志布局或展示型布局站点，一般使用网格布局技术实现。多栏布局一般使用概述/细节式结构，首先用多栏展示概述式内容，然后进入详细内容的展示。Mozilla Labs 就是一个很好的例子。





4. 巨型插图式与多变背景设计
象巨型字体主导当前 Web 设计一样，巨型插图风格设计似乎也正流行起来，巨型插图可以和巨型字体的结合使用，带来更吸引人，更生动的效果。

另外，设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格，抽象画，剪贴画，剪贴簿，装饰画，怀旧，水彩，有机纹理以及照片背景等。









5. 更多留白
这是近年来最值得期待，也是最有意义的 Web 设计风潮，设计师们在页面留白方面越来越慷慨。（这也是我非常欣赏的一种风格，只可惜在我们国内，仍有大量的客户认为满当当的页面说明你的公司实力雄厚 - 译者。）









6. "社会"网络元素
任何人都喜欢流量与认可，在 Web 设计中加入社会网络元素，可以鼓励你的访问者参与进来。（不过在 Web 2.0 日渐式微的今天，也许满页花里胡哨的社会网络元素正逐渐变得让人厌烦 - 译者）







7. 解释风格的导航
传统的水平导航条，一般是一些标题连接或图标链接，用户很难从这些短短的信息中真正知道这些导航所代表的内容，解释性导航会在栏目导航菜单上提供进一步解释内容，让用户更好地理解这些栏目代表的内容。





这类导航一般使用更容易表达内容的大图标，加解释性文字，鼠标 Hover 效果也必不可少。



8. 动态 Tabs
这类设计一般在页面加载时，将多个 Tab 中的内容一次性加载，通过 Javascript 或 CSS 效果，实现鼠标指向某个 Tab 时，该 Tab 中的内容立即显现。（微软官方站近一年来一直是这个设计风格的代表。- 译者）








 
本文国际来源：http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/