信息动态

网站设计是技术与创意的完美融合!

技术资讯

2009年海外Web2.0风格设计风潮(下)

2009-01-23 11:24:00

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

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


http://www.arcinspirations.com/kobe/




#p#

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


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




#p#

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








#p#

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






#p#

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







#p#

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



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

#p#

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







0532-85810878 473587358 扫码添加微信

扫码添加微信

扫码关注公众号

官方公众号

2054585360