網(wǎng)頁設(shè)計的8個趨勢
本文將8個網(wǎng)頁設(shè)計趨勢:單頁面、用照片做背景、色塊設(shè)計、超大號的圖片、聚焦簡潔、響應(yīng)式設(shè)計、視差滾動、強(qiáng)調(diào)字體,每個趨勢后面都附了數(shù)個案例,相信對網(wǎng)站設(shè)計師會有一定的參考價值。
單頁面
單個長頁面的設(shè)計一度不受人待見(無論是客戶還是設(shè)計師),但現(xiàn)在整個互聯(lián)網(wǎng)隨處可見。一個合理的解釋是,用戶現(xiàn)在早已習(xí)慣于使用鼠標(biāo)滾輪了,比起在多個頁面間來回查看,用滾輪上下瀏覽要省事得多。
包括蘋果在內(nèi)的一些知名大公司也使用了相當(dāng)長的頁面來展示產(chǎn)品,獲得了很不錯的效果。
更多例子:
- 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/
用照片做背景
出于品牌或展示的目的,把照片用作網(wǎng)站的背景,這樣可以形成強(qiáng)烈的視覺表達(dá)效果。這也是為何你能在時尚、服裝品牌、旅游業(yè)等等行業(yè)看到這樣的設(shè)計辦法。
更多例子:
色塊設(shè)計
這一設(shè)計方法主要是引入了方塊的網(wǎng)格設(shè)計,這些方塊要么是純色塊配上文字,要么是方形照片配上文字。“簡潔”是吸引用戶的一大原因。不同的色塊放在一起形成強(qiáng)烈的對比,容易引起用戶的視覺興趣,進(jìn)而繼續(xù)探索下去。
更多例子:
超大號的圖片
這一潮流的興起多少與Mac OS X 圖標(biāo)設(shè)計的流行有關(guān)。當(dāng)程序員為自己的Mac 程序推出網(wǎng)站時,這樣配有超大號圖片、突出品牌的設(shè)計再常見不過。自然地,這一潮流后來也被iOS 開發(fā)者繼承了下來,成為現(xiàn)代設(shè)計文化的一部分。
更多例子:
- http://www.zennaware.com/cornerstone/index.php
- http://panic.com/
- http://versionsapp.com/
- http://www.piictu.com/
- http://www.enstore.com/
聚焦簡潔
對簡潔的追求貫穿了整個2012年,許多的網(wǎng)站開始尋求明快、直觀的設(shè)計。極簡設(shè)計旨在通過整合或是刪除多余的頁面實現(xiàn)簡化,只給用戶需要的東西。極簡設(shè)計通常會用到大號的加粗字體、以及超大號的圖片,清晰地把重要的東西傳達(dá)出來。
更多例子:
響應(yīng)式設(shè)計
隨著手機(jī)和平板設(shè)備越來越多地進(jìn)入人們的生活,響應(yīng)式設(shè)計也成為了當(dāng)下網(wǎng)站開發(fā)不可忽視的一股力量。一個可自適應(yīng)任何設(shè)備的網(wǎng)頁是很了不起的。響應(yīng)式設(shè)計能確保用戶無論是在移動設(shè)備還是在PC上都能按你的意愿瀏覽內(nèi)容。
更多例子:
- http://www.nealite.fr/
- http://twitter.github.com/bootstrap/
- http://www.fork-cms.com/
- http://www.floridahospital.com/
視差滾動
所謂“視差滾動 (Parallax Scrolling)”就是讓多層背景以不同的速度移動,形成運動視差 3D 效果。隨著越來越多的瀏覽器增加對視差的支持,這一技術(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/
強(qiáng)調(diào)字體
從前,設(shè)計師所能使用的字體受用戶電腦本地已有的字體所限?,F(xiàn)在,借助Google fonts 和Typekit 等服務(wù),從理論上說,你能使用的字體是無限多的,極大增強(qiáng)了網(wǎng)站設(shè)計的吸引力。設(shè)計師利用這一機(jī)會也已有了一段時間了,越來越多的網(wǎng)站也體現(xiàn)了對字體的重視。甚至有些網(wǎng)站如Typographica,字體就占了整個網(wǎng)站設(shè)計的絕大部分,出來的效果也相當(dāng)不錯。
更多例子:
相信以上的這些設(shè)計方法會流行相當(dāng)長的一段時間,當(dāng)然,你也可以發(fā)揮創(chuàng)造力,有機(jī)地組合它們,做出優(yōu)秀的網(wǎng)站。
本文地址:http://m.likemindfilms.com/tutorial/tutorial1211.html