2009 Web 设计风潮第 2 部分

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

1. 反 Box 式布局

   

2. 单页布局

   

3. 多栏布局 

   

4. 巨型插图与多变背景

   

5. 更多留白

   

6. 社会网络元素

   

7. 讲解式导航菜单

   

8. Status elements (Flickr, Twitter et al)

   

9. 动态 Tab 

   

10. 超大搜索框

    

11. Category visuals

    

12. 作者头像图标 （这也算？-译者）

    

13. 图标和视觉引导

    

14. Tag 索引 (取代 Tag 云)

    

15. 插图风格

    

16. 水彩风格

    

17. 手写风格

    

18. 怀旧风格

    

19. 有机纹理或照片背景

    

20. 证章风格

    

21. 价格标签风格 

    

22. 条带风格

    

    1. 反 Box 布局

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

    

    

    

    

    

    

    

    

    

    

     

    2. 单页布局

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

    

    

    

    

     

    3. 多栏布局

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

    

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

    

    

    

     

     

    4. 巨型插图式与多变背景设计

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

    另外，设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格，抽象画，剪贴画