設(shè)計(jì)與開發(fā)之間本有一線界限，但當(dāng)時(shí)代步入又一個(gè)十年，這個(gè)線變得更加模糊甚至感覺不到它的存在。使用PS設(shè)計(jì)網(wǎng)頁版面，足矣？或許五年前是吧！現(xiàn)在的互聯(lián)網(wǎng)用戶要求越來越多。沒有內(nèi)涵的華麗很快就會(huì)被丟棄。如果你追求華而不實(shí)的設(shè)計(jì)，那么相信你很快會(huì)被時(shí)代遺棄。2011年不再屬于單純的華麗而是注重功能。新的一年或者未來十年的設(shè)計(jì)趨勢是響應(yīng)設(shè)計(jì)（responsive design）、持續(xù)聯(lián)系（constant connection）和虛擬現(xiàn)實(shí)（virtual reality）。

作為設(shè)計(jì)師的你，2011年會(huì)作神馬打算？真正的設(shè)計(jì)師設(shè)計(jì)的東西不是為了嘩眾取寵而是在藝術(shù)和功能上做到兩全其美。膚淺的贊賞易得膚淺的設(shè)計(jì)也易被遺 忘。出色的設(shè)計(jì)師猶如造夢師，給用戶創(chuàng)造一個(gè)夢境，讓用戶感覺到如此真實(shí)而不知道自己是在夢中。這樣的夢需要幾個(gè)元素：優(yōu)秀的配色，直觀的設(shè)計(jì)，良好的交 互性和快的響應(yīng)速度。此外，永遠(yuǎn)不要低估簡約的力量。2011年，你的設(shè)計(jì)不但要考慮筆記本、臺(tái)式電腦，還要考慮智能手機(jī)、上網(wǎng)本和平板電腦等設(shè)備。你都 準(zhǔn)備好了嗎？

2011年網(wǎng)頁設(shè)計(jì)趨勢有何變化？一起關(guān)注11個(gè)網(wǎng)頁設(shè)計(jì)趨勢熱點(diǎn)：

1. 更多的CSS3 + HTML5

這是期待已久的事情。在過去的幾年設(shè)計(jì)師已經(jīng)開始關(guān)注和使用CSS3+HTML5，但在2011年CSS3+HTML5將會(huì)得到更廣泛的應(yīng)用。網(wǎng)頁 設(shè)計(jì)師最終會(huì)拋棄Flash。Flash不再是昔日的王者，新技術(shù)（指CSS3+HTML5）將會(huì)取而代之。2011年，F(xiàn)lash漸行漸遠(yuǎn)，魔術(shù)師 “HTML5”成為舞臺(tái)的主角：

當(dāng)然，說HTML5代替Flash為時(shí)還早。從上面的兩幅截圖你可以知道Flash和HTML5還是有差距的。因此，2011年兩者會(huì)各自保持屬于 自己的位置。不過2010年以前網(wǎng)頁設(shè)計(jì)師濫用Flash的現(xiàn)象會(huì)慢慢減少�，F(xiàn)在很少設(shè)計(jì)師會(huì)整個(gè)網(wǎng)站都是用Flash設(shè)計(jì)，他們會(huì)在一些可用的地方使用 HTML5替代Flash，使網(wǎng)站變得簡單運(yùn)行更快速。然而，目前HTML5還不能夠取代Flash，F(xiàn)lash的某些效果HTML5暫時(shí)還不能夠?qū)崿F(xiàn)。

然而最值得人興奮的是CSS3的應(yīng)用越來越廣，在某些地方甚至超越PS（Adobe表示有鴨梨），因?yàn)槔�用CSS3來實(shí)現(xiàn)文字陰影、圖片圓角和圖片透明實(shí)在是easy job。如果你還不會(huì)，是時(shí)候去了解CSS3和HTML5。

2. 簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達(dá)方式。不要老是黑白灰神馬的，太不給力了。多點(diǎn)考慮綠、黃或者紅作為你的網(wǎng)頁主色調(diào)。當(dāng)然，顏色最好保持使用2到3種。調(diào)整顏色的透明度，或許會(huì)給你意想不到的效果。比如：

只是簡單的綠色，通過調(diào)節(jié)透明度設(shè)計(jì)出如此美觀的Twitter可視化工具�？梢�知道：這個(gè)網(wǎng)頁只是用了XHTML/CSS和Javascript，給力吧！

紅色絕對(duì)經(jīng)典，如果配色做得好給人的視覺沖擊就更……。上面的網(wǎng)站獨(dú)特的紅色和易友好的文字設(shè)計(jì)讓人不得不為之折服

3. 移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來

智能手機(jī)，ipad和上網(wǎng)本隨處可見，OMG，2011年這個(gè)現(xiàn)在將會(huì)更加明顯。這意味著你的設(shè)計(jì)需要考慮更多的設(shè)備。

創(chuàng)建適合移動(dòng)設(shè)備的網(wǎng)站不是簡單地在原有的設(shè)計(jì)去掉華麗的元素，那將會(huì)是沒有靈魂的設(shè)計(jì)。盡管在原有的設(shè)計(jì)再設(shè)計(jì)一個(gè)支持移動(dòng)設(shè)備網(wǎng)站是件痛苦的事情。幸運(yùn)的是，新的技術(shù)讓一切變得更簡單。

在使用CSS3的情況下，設(shè)計(jì)移動(dòng)網(wǎng)頁方便多了。最重要的是你可以修改一個(gè)CSS文件完成整個(gè)網(wǎng)站修改以符合用戶使用不同設(shè)備進(jìn)行瀏覽網(wǎng)頁。

你也可以設(shè)計(jì)一個(gè)移動(dòng)設(shè)備專屬的網(wǎng)站，但相信那個(gè)網(wǎng)站不久還是要改版的，以現(xiàn)在科技產(chǎn)品的發(fā)展速度來看。越來越多的移動(dòng)網(wǎng)站包括原始網(wǎng)站的瀏覽選 項(xiàng)。如果你不提供這個(gè)選項(xiàng)或者你的原始網(wǎng)站沒有針對(duì)移動(dòng)網(wǎng)絡(luò)標(biāo)準(zhǔn)優(yōu)化，那你并未準(zhǔn)備好迎接移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來。據(jù)相關(guān)預(yù)測，智能手機(jī)銷量將會(huì)超越個(gè)人 PC。趕快準(zhǔn)備好，迎接移動(dòng)設(shè)備大軍的來臨。

4. Parallax Scrolling

先來解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動(dòng)，形成運(yùn)動(dòng)視差 3D 效果，雖然純屬視覺效果，但在內(nèi)容滾動(dòng)時(shí)形成的視覺體驗(yàn)仍然非常出色。2011年的網(wǎng)頁設(shè)計(jì)趨勢熱點(diǎn)就是要?jiǎng)?chuàng)造這樣的深度視覺效果。Parallax Scrolling可以通過一些簡單的CSS技巧或jQuery插件來實(shí)現(xiàn)（示范站點(diǎn)：站點(diǎn)1站點(diǎn)2）。Parallax scrolling運(yùn)用于網(wǎng)頁設(shè)計(jì)的次要元素中可以起到很好的效果：如header、footer或者背景。不過最好不要運(yùn)用于網(wǎng)站導(dǎo)航，那顯得有點(diǎn)不倫不類。

Old Pulteney Row to the Pole在網(wǎng)站背景使用了Parallax Scrolling特效，打開該網(wǎng)站然后往下拉即可看到效果。

標(biāo)簽： 網(wǎng)頁設(shè)計(jì) 趨勢 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。