2015網(wǎng)頁設(shè)計趨勢分析

網(wǎng)頁理論
2015-5-31 09:33:51 文/葉浩宇 圖/馬子涵
這篇文章我們討論的是2015年新興的設(shè)計趨勢。作為設(shè)計師的你,你可以通過這篇文章發(fā)現(xiàn)新的靈感。
1.大屏幕體驗
大屏幕的體驗是如今網(wǎng)頁設(shè)計必不可少的一個部分。盡管對于很多人來說,很難接受主頁只有零星幾個詞,取而代之的是圖片和視頻。有的時候,甚至導(dǎo)航都被隱藏成了一個小小的圖標(biāo)。
這兩種類型的網(wǎng)頁設(shè)計可以被標(biāo)簽為“影院效果”和“雜志效果”。前者常常是受到了電影和電視廣告的啟發(fā),而后者往往是從書本或者頁面的提煉出了傳統(tǒng)精華。
這種趨勢形成的緣由可以從兩方面來分析:一是視覺性,而是實用性。當(dāng)用戶登陸上你的頁面時,PC端也好,移動端也好,你應(yīng)當(dāng)給用戶最大的視覺沖擊。
大屏幕的的圖片從去年(2014年)開始流行,隨著圖片品質(zhì)的大大提升和頁面速度的不斷優(yōu)化,我們可以看到那些采用雜志效果的頁面給人的整體感覺提升到了一個新的高度。
現(xiàn)在這種趨勢流行的很快,很多大型網(wǎng)站比如Paypal都用起了這樣的背景。
2.多媒體體驗
多媒體這個概念因為被濫用,所以它聽上去似乎已經(jīng)過時了。在如今,多媒體一詞也需要被重新定義。越來越多的設(shè)計師和程序員在增加多媒體體驗這一條道路上前赴后繼。
在這之前,F(xiàn)lash是這些體驗的平臺。而如今HTML5的CANVAS元素慢慢取代了原來網(wǎng)頁上Flash的地位。
另一個值得一提的用HTML5的例子是音樂家Jonathan Dagan的項目DNA-PROJECT。一打開頁面就是就是一個視頻作為網(wǎng)站的背景,Dagan通過這樣的表現(xiàn)形式,用他的個人經(jīng)歷來講述他的個人音樂專輯的故事。
Raise the river是另一個很棒的項目。不僅僅是因為它的視覺隱喻,更在它的多媒體展現(xiàn)上。頁面滾動的速度和頁面邊小河流淌的速度一致,暗示了每張圖片之間的聯(lián)系,也給了整個頁面更豐富的表現(xiàn)效果。
我們在做頁面設(shè)計的時候,我們做的所有事情就是增強用戶的可用性。這個網(wǎng)頁反其道而行之,它限制了你的滾動,反而會給頁面帶來更好的視覺效果。
3.視差滾動
視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。完美的展示了一個復(fù)雜的過程,讓你猶如置身其中。厭倦了千篇一律,呆板網(wǎng)頁設(shè)計的你不防一試。感受一下下面的Mint Design Company這個網(wǎng)站。
Mint Design Company這個網(wǎng)站巧妙地運用了CSS技術(shù),效果簡單但是視覺效果很棒。
4.有趣的故事
在Boldking的頁面中,和第一個例子類似,當(dāng)你的滾輪滾到一個特定的位置的時候,就展現(xiàn)出了特殊的頁面效果。通常情況下,一般都是一些頁面元素采用淡進和淡出的效果。
這種輕量級的SVG和Java script的運用可以很好地達成這種效果。不僅僅因為帶來的效果很出眾,而且它們的運用才使整個頁面大小為1.5MB。
Colin and Dewi的婚禮這個頁面可以讓用戶專注于閱讀他們的故事。你當(dāng)前僅僅展示了他們故事中的一個部分,如果你需要看下個部分,往下滾動就可以了。
看上去有點像視差滾動的效果,但是3D CSS就完全可以做到隱藏和顯示文字部分的效果。
5.扁平化設(shè)計
在過去三年中,扁平化設(shè)計一直占據(jù)著主導(dǎo)地位。就目前看來,這種趨勢還將繼續(xù)延續(xù)下去,尤其是一些更小的元素,比如圖標(biāo)、菜單和圖片。比如Colin and Dewi這個網(wǎng)站。
扁平化元素看上去非常簡潔,而且大小可控。icomoon.io是一個免費的生成ICON的的網(wǎng)站,非常好用。
Lab 21把扁平化設(shè)計轉(zhuǎn)化為“手工設(shè)計”。
如果你的頁面元素不全都是扁平化的,那也沒有關(guān)系。設(shè)計師經(jīng)常通過看上去與頁面那么協(xié)調(diào)的元素來創(chuàng)造出驚人的效果。扁平化設(shè)計通過不同元素的拼接合成,來形成很好的視覺效果,并且適應(yīng)不同大小的頁面。
我想這種趨勢會和更多的視覺元素混合發(fā)展,就像HábitatWeb這個網(wǎng)站一樣。
6.方框減少
網(wǎng)頁設(shè)計師總是喜歡炫耀自己的思維能夠跳出框框,而且能以不止一種方式跳出方框。姑且稱之為“畫一個框框然后證明你能打破它”理論。矩形顯示器本身就是對網(wǎng)頁設(shè)計師的束縛(別說你見過圓形顯示器)。網(wǎng)頁上的每個HTML元素也是方形的。
但是跟大多數(shù)人一樣,設(shè)計師不喜歡被束縛。下面提供據(jù)我判斷目前處于上升期的幾個趨勢,可以作為證明你不是矩形奴隸的長期戰(zhàn)略計劃。