設(shè)計與開發(fā)之間本有一線界限,但當(dāng)時代步入又一個十年,這個線變得更加模糊甚至感覺不到它的存在。
使用PS設(shè)計網(wǎng)頁版面,足矣?或許五年前是吧!現(xiàn)在的互聯(lián)網(wǎng)用戶要求越來越多。沒有內(nèi)涵的華麗很快就會被丟棄。如果你追求華而不實的設(shè)計,那么相信你很快會被時代遺棄。
2011年不再屬于單純的華麗而是注重功能。新的一年或者未來十年的設(shè)計趨勢是響應(yīng)設(shè)計(responsive design)、持續(xù)聯(lián)系(constant connection)和虛擬現(xiàn)實(virtual reality)。
作為設(shè)計師的你,2011年會作神馬打算?真正的設(shè)計師設(shè)計的東西不是為了嘩眾取寵而是在藝術(shù)和功能上做到兩全其美。。
膚淺的贊賞易得膚淺的設(shè)計也易被遺忘。出色的設(shè)計師猶如造夢師,給用戶創(chuàng)造一個夢境,讓用戶感覺到如此真實而不知道自己是在夢中。這樣的夢需要幾個元素:優(yōu)秀的配色,直觀的設(shè)計,良好的交互性和快的響應(yīng)速度。
此外,永遠(yuǎn)不要低估簡約的力量。2011年,你的設(shè)計不但要考慮筆記本、臺式電腦,還要考慮智能手機、上網(wǎng)本和平板電腦等設(shè)備。你都準(zhǔn)備好了嗎?
2011年網(wǎng)頁設(shè)計趨勢有何變化?一起關(guān)注11個網(wǎng)頁設(shè)計趨勢熱點:
1、更多的CSS3 + HTML5
這是期待已久的事情。在過去的幾年設(shè)計師已經(jīng)開始關(guān)注和使用CSS3+HTML5,但在2011年CSS3+HTML5將會得到更廣泛的應(yīng)用。網(wǎng)頁 設(shè)計師最終會拋棄Flash。Flash不再是昔日的王者,新技術(shù)(指CSS3+HTML5)將會取而代之。2011年,F(xiàn)lash漸行漸遠(yuǎn),魔術(shù)師“HTML5”成為舞臺的主角:
當(dāng)然,說HTML5代替Flash為時還早。從上面的兩幅截圖你可以知道Flash和HTML5還是有差距的。因此,2011年兩者會各自保持屬于自己的位置。
不過2010年以前網(wǎng)頁設(shè)計師濫用Flash的現(xiàn)象會慢慢減少。現(xiàn)在很少設(shè)計師會整個網(wǎng)站都是用Flash設(shè)計,他們會在一些可用的地方使用 HTML5替代Flash,使網(wǎng)站變得簡單運行更快速。然而,目前HTML5還不能夠取代Flash,F(xiàn)lash的某些效果HTML5暫時還不能夠?qū)崿F(xiàn)。
然而最值得人興奮的是CSS3的應(yīng)用越來越廣,在某些地方甚至超越PS(Adobe表示有鴨梨),因為利用CSS3來實現(xiàn)文字陰影、圖片圓角和圖片透明實在是easy job。如果你還不會,是時候去了解CSS3和HTML5。
2、簡單的配色方案
沒有比純色的背景更直觀更簡潔。純色可以有很多種表達(dá)方式。不要老是黑白灰神馬的,太不給力了。多點考慮綠、黃或者紅作為你的網(wǎng)頁主色調(diào)。當(dāng)然,顏色最好保持使用2到3種。調(diào)整顏色的透明度,或許會給你意想不到的效果。比如:
只是簡單的綠色,通過調(diào)節(jié)透明度設(shè)計出如此美觀的Twitter可視化工具??梢溃哼@個網(wǎng)頁只是用了XHTML/CSS和Javascript,給力吧!
紅色絕對經(jīng)典,如果配色做得好給人的視覺沖擊就更……。上面的網(wǎng)站獨特的紅色和易友好的文字設(shè)計讓人不得不為之折服
3、移動互聯(lián)網(wǎng)時代的到來
智能手機,ipad和上網(wǎng)本隨處可見,OMG,2011年這個現(xiàn)在將會更加明顯。這意味著你的設(shè)計需要考慮更多的設(shè)備。
創(chuàng)建適合移動設(shè)備的網(wǎng)站不是簡單地在原有的設(shè)計去掉華麗的元素,那將會是沒有靈魂的設(shè)計。盡管在原有的設(shè)計再設(shè)計一個支持移動設(shè)備網(wǎng)站是件痛苦的事情。幸運的是,新的技術(shù)讓一切變得更簡單。
在使用CSS3的情況下,設(shè)計移動網(wǎng)頁方便多了。最重要的是你可以修改一個CSS文件完成整個網(wǎng)站修改以符合用戶使用不同設(shè)備進(jìn)行瀏覽網(wǎng)頁。
你也可以設(shè)計一個移動設(shè)備專屬的網(wǎng)站,但相信那個網(wǎng)站不久還是要改版的,以現(xiàn)在科技產(chǎn)品的發(fā)展速度來看。越來越多的移動網(wǎng)站包括原始網(wǎng)站的瀏覽選項。
如果你不提供這個選項或者你的原始網(wǎng)站沒有針對移動網(wǎng)絡(luò)標(biāo)準(zhǔn)優(yōu)化,那你并未準(zhǔn)備好迎接移動互聯(lián)網(wǎng)時代的到來。據(jù)相關(guān)預(yù)測,智能手機銷量將會超越個人PC。趕快準(zhǔn)備好,迎接移動設(shè)備大軍的來臨。
4、Parallax Scrolling
先來解釋下Parallax Scrolling,Parallax scrolling 是讓多層背景以不同的速度移動,形成運動視差 3D 效果,雖然純屬視覺效果,但在內(nèi)容滾動時形成的視覺體驗仍然非常出色。
2011年的網(wǎng)頁設(shè)計趨勢熱點就是要創(chuàng)造這樣的深度視覺效果。Parallax Scrolling可以通過一些簡單的CSS技巧或jQuery插件來實現(xiàn)(示范站點:站點1 站點2)。
Parallax scrolling運用于網(wǎng)頁設(shè)計的次要元素中可以起到很好的效果:如header、footer或者背景。不過最好不要運用于網(wǎng)站導(dǎo)航,那顯得有點不倫不類。