一年又過(guò)去了，讓我們來(lái)看看跟著下來(lái)的一年網(wǎng)頁(yè)設(shè)計(jì)將會(huì)有什么新趨勢(shì)。網(wǎng)頁(yè)設(shè)計(jì)如萬(wàn)物般變化萬(wàn)千，但總有其規(guī)律，我們是可以預(yù)見(jiàn)它即將要變化的地方。隨著時(shí)間的遷移，人們的視覺(jué)的改變，網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的改變是必然的，作為網(wǎng)頁(yè)開(kāi)發(fā)者，網(wǎng)頁(yè)設(shè)計(jì)師，需要做的是緊跟時(shí)代的腳步，時(shí)刻關(guān)注網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的變化而變。

　　1、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

　　我相信將來(lái)我們不再會(huì)在趨勢(shì)中討論響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，不是因?yàn)樗鼘?huì)消失，而是網(wǎng)頁(yè)設(shè)計(jì)必需的原則。不過(guò)，我認(rèn)為2012年暫時(shí)不會(huì)出現(xiàn)這樣的局面。因?yàn)樗€屬于比較新的概念，目前還有很多設(shè)計(jì)師對(duì)該概念還不是很熟悉。

　　2012年將會(huì)有更多的移動(dòng)設(shè)備繼續(xù)引進(jìn)和采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者將會(huì)使用將使用流體布局，而不是固定寬度，更多的樣式表被查詢?cè)O(shè)備選擇 – 這樣讓網(wǎng)站在不同屏幕尺寸的設(shè)備都能夠擁有完美的顯示

　　2.固定位置的導(dǎo)航

　　我們看到很多個(gè)人網(wǎng)站和博客已經(jīng)開(kāi)始采用這種設(shè)計(jì)。但我發(fā)現(xiàn)這種風(fēng)潮在2010-2011年期間曾有所回落，但在最近幾個(gè)月開(kāi)始回潮。

　　如果你的網(wǎng)站的導(dǎo)航并不需要放置太多的鏈接，寥寥幾個(gè)主要鏈接為何不保持用戶始終可見(jiàn)？這可以大大提供網(wǎng)站的性能甚至更易于融入整個(gè)頁(yè)面布局。這種設(shè)計(jì)鎖定導(dǎo)航和鏈接/logo在固定的位置，即使用戶固定頁(yè)面也能快速通過(guò)導(dǎo)航訪問(wèn)其他頁(yè)面。

　　現(xiàn)在使用一些jQuery原型即可快速達(dá)到這種效果。即使沒(méi)有JavaScript，也可以使用一些炫酷的CSS Code以達(dá)到效果。在2011年已經(jīng)有很多網(wǎng)站的使用固定的導(dǎo)航欄，即導(dǎo)航不隨頁(yè)面滾動(dòng)或頁(yè)面切換而改變位置和重新載入，始終懸放頁(yè)屏幕的一個(gè)位置。Simon Wuyts 就是用了這一效果，你可以通過(guò)實(shí)例體驗(yàn)這種技術(shù)。

　　以前的你可能從不會(huì)考慮將頁(yè)面設(shè)計(jì)成易于顯示的幻燈片風(fēng)格。不過(guò)，這不單能消除分辨率不兼容的顧慮，而且導(dǎo)航系統(tǒng)更易于使用和對(duì)移動(dòng)瀏覽器完美兼容。在即將來(lái)臨的2012年里我建議你重新考慮這種設(shè)計(jì)，重新對(duì)頁(yè)面進(jìn)行布局。

　　3. 圓形設(shè)計(jì)

　　這一趨勢(shì)其實(shí)已在網(wǎng)頁(yè)設(shè)計(jì)有點(diǎn)明顯，但近幾年有點(diǎn)偃旗息鼓。在Web2.0熱潮，設(shè)計(jì)師更注重基于臺(tái)式機(jī)的趨勢(shì)，如陰影和圓角。但使用CSS3，就可以輕松實(shí)現(xiàn)花俏的方塊效果。

　　此外，你可以設(shè)計(jì)圓形式和陰影不需要使用任何圖片。由于這些功能，設(shè)計(jì)師開(kāi)始從另一個(gè)角度看圖像。一直以來(lái)我都留意設(shè)計(jì)師們的各種設(shè)計(jì)，發(fā)現(xiàn)圓形元素的使用頻率越來(lái)越大。這些圓形設(shè)計(jì)可以作為導(dǎo)航鏈接，頁(yè)腳圖標(biāo)，甚至可用于個(gè)人作品等展示。

　　But the most extreme examples aren’t always the best. 圓形讓圖像看起來(lái)更加光滑舒服，更容易吸引訪客的目光和關(guān)注。使用這些元素特別標(biāo)注設(shè)計(jì)中的特別區(qū)域，如有用的資源和主要的頁(yè)面等。但切勿為了形狀本身而忽略效果，否則適得其反。

    4. 大幅矢量圖

　　你可以在你的網(wǎng)站使用超大的吉祥物打造你的品牌。幾年前你很難在網(wǎng)絡(luò)品牌中找到使用大量矢量圖的案例。但現(xiàn)在設(shè)計(jì)師的專業(yè)水平越來(lái)越高，這樣我想不到比使用可愛(ài)的動(dòng)畫(huà)矢量圖來(lái)營(yíng)銷品牌的點(diǎn)子。

　　Mozilla和Firefox的動(dòng)物形象矢量圖就是一個(gè)不錯(cuò)的例子。MailChimp則又是一個(gè)優(yōu)秀的案例，品牌形象的個(gè)子就更大了。無(wú)論是網(wǎng)站還是 iOS、Android應(yīng)用都能清晰看到那只有趣的猴子郵遞員。

　　此外Freelance Switch網(wǎng)站的吉祥物小帥哥，也是我久不能忘的設(shè)計(jì)。你可以在他們的網(wǎng)站布局發(fā)現(xiàn)各種各樣的吉祥物矢量圖。這種做法已經(jīng)成為網(wǎng)站美學(xué)的新境界，我有理由相信2012年你將會(huì)到處都看到這些可愛(ài)的矢量標(biāo)志設(shè)計(jì)。

　　5. 多列菜單

　　不同于前面的例子，有時(shí)候有的網(wǎng)站的鏈接較多需要處理。若按照標(biāo)準(zhǔn)型的導(dǎo)航排列會(huì)顯得過(guò)于凌亂和擁擠，除非你將鏈接放置到邊欄。但經(jīng)驗(yàn)告訴我們，鏈接放置在頁(yè)面頂部，有利于用戶體驗(yàn)。

　　跟著下來(lái)的一年或者新的趨勢(shì)會(huì)改變這個(gè)局面，設(shè)計(jì)師可以對(duì)頁(yè)面導(dǎo)航重建。跟著下來(lái)的一年或者新的趨勢(shì)會(huì)改變這個(gè)局面，設(shè)計(jì)師可以對(duì)頁(yè)面導(dǎo)航重建。思維是一張黑白畫(huà)，但卻意境無(wú)限，等待你的挖掘。多列布局的導(dǎo)航更美讓人看起來(lái)更舒服，通過(guò)這種方式你可以在Logo周圍顯示更多的鏈接給網(wǎng)站的訪客。

　　創(chuàng)造舒適的設(shè)計(jì)風(fēng)格的最佳方式是實(shí)踐，閱讀最近的關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的一些文章來(lái)學(xué)習(xí)Web導(dǎo)航設(shè)計(jì)的最新趨勢(shì)。作為設(shè)計(jì)師，應(yīng)該擁有跳躍的思維，嘗試最新的東西。對(duì)標(biāo)準(zhǔn)的導(dǎo)航設(shè)計(jì)進(jìn)行改革是每個(gè)設(shè)計(jì)師都要堅(jiān)持的實(shí)踐活動(dòng)。

　　6. jQuery/CSS3/HTML5動(dòng)畫(huà)

　　我經(jīng)常推薦的jQuery插件。網(wǎng)頁(yè)設(shè)計(jì)必須包括用戶體驗(yàn)、美學(xué)和動(dòng)畫(huà)等多方面的內(nèi)容。隨著JQuery和CSS3的不斷進(jìn)步，現(xiàn)在可以用很少的代碼就能達(dá)到非常酷的效果。

　　過(guò)去的一年我不斷地學(xué)習(xí)網(wǎng)絡(luò)上相關(guān)的教程。了解到j(luò)Query是目前前端效果最優(yōu)秀的但并不是所有瀏覽器都支持。因此，通過(guò)CSS來(lái)實(shí)現(xiàn)瀏覽器兼容也不失是個(gè)好辦法。2012年越來(lái)越近，相信開(kāi)發(fā)者們又有了新的動(dòng)態(tài)，讓我們拭目以待，期待jQuery/CSS3/HTML5時(shí)代的到來(lái)。

　　7.絲帶及橫幅圖形

　　在2011年我就開(kāi)始密切注意到這樣的設(shè)計(jì)元素。設(shè)計(jì)師們開(kāi)始編寫(xiě)關(guān)于設(shè)計(jì)絲帶風(fēng)格頁(yè)面、橫幅、書(shū)簽或其他類型的徽章的教程。大量免費(fèi)教程的出現(xiàn)使得越來(lái)越多設(shè)計(jì)師開(kāi)始跟隨這樣的趨勢(shì)。

　　你很可能為過(guò)去短短的6個(gè)月里出現(xiàn)這種風(fēng)格設(shè)計(jì)的網(wǎng)站的數(shù)量感到驚訝。勇于嘗新的設(shè)計(jì)師們頻繁在新的軟件和移動(dòng)應(yīng)用程序中使用絲帶設(shè)計(jì)風(fēng)格。此外你會(huì)發(fā)現(xiàn)博客免費(fèi)下載或者熱門(mén)文章欄目使用這類的橫幅設(shè)計(jì)。

　　8. 簡(jiǎn)潔

　　任何網(wǎng)站都有一個(gè)目的就是使訪客從A點(diǎn)訪問(wèn)到B點(diǎn)。簡(jiǎn)單，直觀的界面是最直接的方法。在過(guò)去的5年，我發(fā)現(xiàn)現(xiàn)在越來(lái)越流行簡(jiǎn)單的設(shè)計(jì)。道理很簡(jiǎn)單，頁(yè)面元素也少，游客自然將目光集中在內(nèi)容和鏈接上。

　　但重新布局一個(gè)簡(jiǎn)單的界面并不是一件易事。你需要起草導(dǎo)航架構(gòu)，頁(yè)面層次結(jié)構(gòu)，頭部，內(nèi)容區(qū)域等。不過(guò)花時(shí)間做好規(guī)劃可以大大簡(jiǎn)化你的工作。

小結(jié)
　　以上趨勢(shì)僅僅是我們根據(jù)現(xiàn)階段和以前網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展歷史所預(yù)測(cè)，但未來(lái)是不可以預(yù)知的，因此未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)會(huì)不斷地變化。現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)師也一直地學(xué)習(xí)和嘗試新的東西，只要我們時(shí)刻留意網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展，學(xué)習(xí)新的技術(shù)和設(shè)計(jì)，相信所設(shè)計(jì)的網(wǎng)頁(yè)也會(huì)相當(dāng)不錯(cuò)的。(來(lái)源：藝術(shù)中國(guó))