2010年網頁設計流行趨勢 - 2
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、解釋風格的導航
傳統的水平導航條,一般是一些標題連接或圖標鏈接,用戶很難從這些短短的信息中真正知道這些導航所代表的內容,解釋性導航會在欄目導航菜單上提供進一步解釋內容,讓用戶更好地理解這些欄目代表的內容。






這類導航一般使用更容易表達內容的大圖標,加解釋性文字,鼠標 Hover 效果也必不可少。
8、動態 Tabs
這類設計一般在頁面加載時,將多個 Tab 中的內容一次性加載,通過 Javascript 或 CSS 效果,實現鼠標指向某個 Tab 時,該 Tab 中的內容立即顯現。(微軟官方站近一年來一直是這個設計風格的代表。- 譯者)






http://expressionengine.com/
http://www.komodomedia.com/
http://www.apple.com/trailers/paramount/eagleeye/
http://www.forgetfoo.com/
原文出處:smashingmagazine
翻譯文章來自:68design.net
原文的範例圖片還包含有網站的連接,如需直接參考網站,請到原文處點選連接!
Related posts:









我要留言!