2010年海外Web設計趨勢的第二部分，著重講解了反 Box 式佈局，單頁佈局，多欄佈局，巨型插圖設計，更多留白，社會網絡元素，講解式導航菜單，以及動態 Tabs 等設計風格。

例如: 1、反 Box 佈局
曾有一篇文章，講到反 Box 佈局。所謂反 Box 佈局，就是不再拘泥與傳統的 Box 佈局模型，而是採用一種更有創意的的佈局，然而需要指出，這種創意佈局需要非常注意易用性問題，一種新的創意佈局需要時間去慢慢成熟。

http://hipsterist.com/
http://www.getlondonreading.co.uk/Home/
http://www.colourpixel.com/
http://nikolamircic.com/archive/sms/
http://theautumnfilm.com/red-white-sale/us.html

2、單頁佈局

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

http://www.arcinspirations.com/kobe/
http://www.taptaptap.com/#groceries
http://fishmarketing.net/
http://www.teamviget.com/

3、多欄佈局

多欄佈局（大於3欄）通常比較複雜，但通過適當設計，會對訪問者帶來更好的訪問體驗。最近幾年，Web 內容爆炸，用戶停留在一個網站的時間越來越少，就要求  Web 設計者盡可能有效地展示數據，既要讓訪問者多停留，又要讓他們更容易發現他們希望看到的內容。

多欄設計一般用於雜誌佈局或展示型佈局站點，一般使用網格佈局技術實現。多欄佈局一般使用概述/細節式結構，首先用多欄展示概述式內容，然後進入詳細內容的展示。Mozilla Labs 就是一個很好的例子。

http://labs.mozilla.com/
http://www.thedarlingtree.com/

4、巨型插圖式與多變背景設計

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

http://www.mailchimp.com/power_features/
http://www.webdesignerdepot.com/

5、更多留白

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

http://signup.createsend.com/signup.aspx
http://www.wilsonminer.com/posts/

6、”社會”網絡元素

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

http://www.komodomedia.com/
http://www.psdtuts.com/
http://www.peakflowdesign.com/wordpress/essential-wordpress-toolkit-for-creating-new-themes/

7、解釋風格的導航

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

http://www.davidhellmann.com/

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

8、動態 Tabs

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

http://e­xpressionengine.com/
http://www.komodomedia.com/
http://www.apple.com/trailers/paramount/eagleeye/
http://www.forgetfoo.com/

原文出處：smashingmagazine
翻譯文章來自：68design.net

原文的範例圖片還包含有網站的連接，如需直接參考網站，請到原文處點選連接！

2009年網頁設計流行趨勢(下)

Related posts:

1. 2010年網頁設計流行趨勢 - 1
2. 10 個精選網頁素材網站