weavora網(wǎng)站近日發(fā)表一篇文章《Web design trends we love》，文中總結(jié)Web設(shè)計(jì)的8大趨勢：單頁面、照片背景、Metro、超大尺寸圖片、注重簡潔、響應(yīng)式Web設(shè)計(jì)、視差滾動(dòng)、“活版印刷”。如果你有不同的意見或推薦，請?jiān)谖恼孪路皆u論處寫出，讓我們一起探討。

注：文章內(nèi)部分鏈接需要翻墻。

單頁面

現(xiàn)在的單頁面都需要頻繁的滾動(dòng)才可以瀏覽，這一點(diǎn)讓客戶和設(shè)計(jì)師十分不滿。但是卻隨處可見，有一種合理的解釋是，用戶習(xí)慣用鼠標(biāo)滾輪瀏覽頁面。但實(shí)際上，如果把一頁的內(nèi)容分成若干頁顯示，反而讓用戶尋找起來更麻煩。一些成功、著名的企業(yè)，包括蘋果在內(nèi)，都在使用單頁面展示他們的產(chǎn)品，其實(shí)這一點(diǎn)很成功。

點(diǎn)擊查看實(shí)例：

• http://www.apple.com/iphone/features/
• http://www.visualboxsite.com/
• http://www.versapay.com/
• http://www.fitbit.com/
• http://cageapp.com/
• http://www.squarespace.com/

照片背景


這種設(shè)計(jì)方式已成功存活了很久，該理念由時(shí)尚品牌攝影師所創(chuàng)。此設(shè)計(jì)是目前所有行業(yè)中使用更多并且相當(dāng)成功的一種方式。以照片為背景給予視覺強(qiáng)烈的沖擊，還可突顯出品牌和展示效果。多用于時(shí)裝、服飾品牌、旅游行業(yè)，以及其他行業(yè)中。

點(diǎn)擊查看實(shí)例：

• http://www.biamar.com
• http://alexarts.ru/en/index.html
• http://www.davidia-int.hr/

“Metro”

這一設(shè)計(jì)基本上是引入了“方塊”元素，如同網(wǎng)格樣式的純色塊加上照片或文本。因?yàn)樗那逦喴讖亩@得用戶認(rèn)可。結(jié)合圖像、文本的純色塊之間產(chǎn)生強(qiáng)烈視覺對比，容易引起用戶視覺興趣，刺激用戶探索下去。

點(diǎn)擊查看實(shí)例：

• http://dynamit.us/
• http://lithium.com/
• http://landor.com/
• http://www.pepsi.com/

超大尺寸圖片



這種設(shè)計(jì)半源自于Mac OS X圖標(biāo)設(shè)計(jì)的流行。當(dāng)程序員推出Mac應(yīng)用程序網(wǎng)站時(shí)，我們經(jīng)常能看到這種超大尺寸圖像的設(shè)計(jì)。這一趨勢已被iOS開發(fā)者繼承下來，成為一種現(xiàn)代設(shè)計(jì)文化。

點(diǎn)擊查看實(shí)例：

• http://www.zennaware.com/cornerstone/index.php
• http://panic.com/
• http://versionsapp.com/
• http://www.piictu.com/
• http://www.enstore.com/

注重簡潔

化繁為簡已成為2012年主要設(shè)計(jì)趨勢，很多網(wǎng)站都采用了圓滑、直觀的設(shè)計(jì)。簡潔設(shè)計(jì)旨在整合或去除不必要的頁面，實(shí)現(xiàn)簡化，只給用戶所需要的東西。往往是通過大號字體、大膽的排版和超大尺寸的圖片來傳達(dá)他們認(rèn)為更重要的東西。

點(diǎn)擊查看實(shí)例：

• http://basecamp.com/
• https://www.dropbox.com/
• http://www.checkoutapp.com/
• http://www.htc.com/

響應(yīng)式Web設(shè)計(jì)



隨著智能手機(jī)和平板電腦訪問Web的增長趨勢，響應(yīng)式Web設(shè)計(jì)已成為現(xiàn)代網(wǎng)絡(luò)發(fā)展的重點(diǎn)之一。一個(gè)頁面在任何設(shè)備上能自動(dòng)調(diào)整更合適的尺寸和格式是至關(guān)重要的。響應(yīng)式Web設(shè)計(jì)確保了你想要的方式，無論是移動(dòng)設(shè)備或是臺式機(jī)，都可以正常呈現(xiàn)出網(wǎng)站內(nèi)容。

點(diǎn)擊查看實(shí)例：

• http://www.nealite.fr/
• http://twitter.github.com/bootstrap/
• http://www.fork-cms.com/
• http://www.floridahospital.com/

視差滾動(dòng)



“視差滾動(dòng)”是指當(dāng)兩個(gè)或兩個(gè)以上平行的對象以不同的速度移動(dòng)所形成的視覺感官。視差滾動(dòng)是一種技術(shù)，它打破了單調(diào)的線性網(wǎng)站。視差滾動(dòng)也許在未來會(huì)變得越來越流行，其實(shí)已有越來越多的瀏覽器都開始對其支持，并且有許多漂亮的景點(diǎn)采用了視察滾動(dòng)。

點(diǎn)擊查看實(shí)例：

• http://benthebodyguard.com/index.php
• http://www.tokiolab.it/ /
• http://chartbeat.com/
• http://inze.it/
• http://titanic.q-music.be/
• http://www.noleath.com/noleath/

“活版印刷”

以往設(shè)計(jì)師常常被用戶電腦上的字體所限制，但隨著谷歌Fonts和Typekit等字體服務(wù)的興起，設(shè)計(jì)師們可以在網(wǎng)頁上使用無限量的字體，極大地提高了網(wǎng)站吸引力。設(shè)計(jì)師們使用該服務(wù)已有段時(shí)間，越來越多的網(wǎng)站也提高了對字體排版的重視。一些網(wǎng)站類似于Typographica，幾乎完全依賴字體，但更終效果著實(shí)不錯(cuò)。

點(diǎn)擊查看實(shí)例：

• http://nicehair.org/
• http://bitfoundry.ca/
• http://daneden.me/type/

這些設(shè)計(jì)在短時(shí)間內(nèi)不會(huì)成為過去式，你可以把它們結(jié)合在一起，創(chuàng)造出屬于你的網(wǎng)站。

原文：weavora