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

- 单页布局

- 多栏布局

- 巨型插图与多变背景

- 更多留白

- 社会网络元素

- 讲解式导航菜单

- Status elements (Flickr, Twitter et al)

- 动态 Tab

- 超大搜索框

- Category visuals

- 作者头像图标 (这也算?-译者)

- 图标和视觉引导

- Tag 索引 (取代 Tag 云)

- 插图风格

- 水彩风格

- 手写风格

- 怀旧风格

- 有机纹理或照片背景

- 证章风格

- 价格标签风格

- 条带风格

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/ 中文来源:COMSHARP CMS 网站(35公里译) |