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

2009 Web letou产品展示风潮第 2 部分
1、反 Box 式布局

2、单页布局
 

3、多栏布局


4、巨型插图与多变背景
 

5、更多留白
 

6、社会网络元素
 

7、讲解式导航菜单
 

8、Status elements (Flickr, Twitter et al)


9、动态 Tab 
 

10、超大搜索框
 

11、Category visuals

#p#

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


13、图标和视觉引导


14、Tag 索引 (取代 Tag 云)


15、插图风格


16、水彩风格


17、手写风格

18、怀旧风格
 

19、有机纹理或照片背景
 

20、证章风格


21、价格标签风格


22、条带风格

#p#

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

#p#

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


https://www.arcinspirations.com/kobe/

#p#

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

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

#p#

4. 巨型插图式与多变背景letou产品展示
象巨型字体主导当前 Web letou产品展示一样，巨型插图风格letou产品展示似乎也正流行起来，巨型插图可以和巨型字体的结合使用，带来更吸引人，更生动的效果。
另外，letou产品展示师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格，抽象画，剪贴画，剪贴簿，装饰画，怀旧，水彩，有机纹理以及照片背景等。

#p#

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

#p#

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

#p#

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

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

#p#

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