這是 COMSHARP CMS 團隊翻譯的2009年海外Web設計風潮的第二部分，著重講解了反 Box 式布局，單頁布局，多欄布局，巨型插圖設計，更多留白，社會網(wǎng)絡元素，講解式導航菜單，以及動態(tài) Tabs 等設計風格，和 Smashing Magazine 推出的所有類似文章一樣，里面包含了大量的，非常漂亮的實例。 本文第一部分請參閱：2009年海外Web設計風潮（上）。

2009 Web 設計風潮第 2 部分
1、反 Box 式布局

2、單頁布局
 

3、多欄布局


4、巨型插圖與多變背景
 

5、更多留白
 

6、社會網(wǎng)絡元素
 

7、講解式導航菜單
 

8、Status elements (Flickr, Twitter et al)


9、動態(tài) 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 布局，就是不再拘泥與傳統(tǒng)的 Box 布局模型，而是采用一種更有創(chuàng)意的的布局，然而需要指出，這種創(chuàng)意布局需要非常注意易用性問題，一種新的創(chuàng)意布局需要時間去慢慢成熟。

#p#

2. 單頁布局
單頁布局是使用一個單一的頁面展示站點的全部內容，這并不意味著站點內容少，這個頁可能很復雜，包含了大量圖形和動畫效果，加載的時間也會有些長。比如，用戶點擊導航菜單后，該欄目下的新內容會在舊內容處通過漸入漸出，滑入滑出等動畫效果顯示出來，而頁面其它部分始終保持不變。（白宮的最新網(wǎng)站的首頁就有這個意思 - 譯者）


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

#p#

3. 多欄布局
多欄布局（大于3欄）通常比較復雜，但通過適當設計，會對訪問者帶來更好的訪問體驗。最近幾年，Web 內容爆炸，用戶停留在一個網(wǎng)站的時間越來越少，就要求  Web 設計者盡可能有效地展示數(shù)據(jù)，既要讓訪問者多停留，又要讓他們更容易發(fā)現(xiàn)他們希望看到的內容。

多欄設計一般用于雜志布局或展示型布局站點，一般使用網(wǎng)格布局技術實現(xiàn)。多欄布局一般使用概述/細節(jié)式結構，首先用多欄展示概述式內容，然后進入詳細內容的展示。Mozilla Labs 就是一個很好的例子。

#p#

4. 巨型插圖式與多變背景設計
象巨型字體主導當前 Web 設計一樣，巨型插圖風格設計似乎也正流行起來，巨型插圖可以和巨型字體的結合使用，帶來更吸引人，更生動的效果。
另外，設計師們越來越喜歡使用那些色彩鮮艷的圖形提供背景，包含各種風格，抽象畫，剪貼畫，剪貼簿，裝飾畫，懷舊，水彩，有機紋理以及照片背景等。

#p#

5. 更多留白
這是近年來最值得期待，也是最有意義的 Web 設計風潮，設計師們在頁面留白方面越來越慷慨。（這也是我非常欣賞的一種風格，只可惜在我們國內，仍有大量的客戶認為滿當當?shù)捻撁嬲f明你的公司實力雄厚 - 譯者。）

#p#

6. "社會"網(wǎng)絡元素
任何人都喜歡流量與認可，在 Web 設計中加入社會網(wǎng)絡元素，可以鼓勵你的訪問者參與進來。（不過在 Web 2.0 日漸式微的今天，也許滿頁花里胡哨的社會網(wǎng)絡元素正逐漸變得讓人厭煩 - 譯者）

#p#

7. 解釋風格的導航
傳統(tǒng)的水平導航條，一般是一些標題連接或圖標鏈接，用戶很難從這些短短的信息中真正知道這些導航所代表的內容，解釋性導航會在欄目導航菜單上提供進一步解釋內容，讓用戶更好地理解這些欄目代表的內容。

這類導航一般使用更容易表達內容的大圖標，加解釋性文字，鼠標 Hover 效果也必不可少。

#p#

8. 動態(tài) Tabs
這類設計一般在頁面加載時，將多個 Tab 中的內容一次性加載，通過 Javascript 或 CSS 效果，實現(xiàn)鼠標指向某個 Tab 時，該 Tab 中的內容立即顯現(xiàn)。（微軟官方站近一年來一直是這個設計風格的代表。- 譯者）