一年又過去了，讓我們來看(kan)(kan)看(kan)(kan)跟著下來的一年網(wang)頁(ye)設(she)計(ji)(ji)將(jiang)會有(you)什么新(xin)趨(qu)勢。網(wang)頁(ye)設(she)計(ji)(ji)如萬物般(ban)變(bian)(bian)化(hua)(hua)萬千，但總有(you)其規(gui)律，我們是可(ke)以預見它即將(jiang)要變(bian)(bian)化(hua)(hua)的地方。隨著時間的遷移，人們的視覺的改變(bian)(bian)，網(wang)頁(ye)設(she)計(ji)(ji)趨(qu)勢的改變(bian)(bian)是必然(ran)的，作為(wei)網(wang)頁(ye)開發(fa)者，網(wang)頁(ye)設(she)計(ji)(ji)師，需要做(zuo)的是緊跟時代的腳(jiao)步，時刻關注網(wang)頁(ye)設(she)計(ji)(ji)趨(qu)勢的變(bian)(bian)化(hua)(hua)而(er)變(bian)(bian)。

　　1、響應式網頁(ye)設計

　　我相信將來我們(men)不(bu)再會在(zai)趨勢(shi)中(zhong)討論(lun)響應式網頁設計(ji)，不(bu)是(shi)因為它(ta)將會消失，而是(shi)網頁設計(ji)必需(xu)的原則(ze)。不(bu)過(guo)，我認為2012年(nian)暫時不(bu)會出現這(zhe)樣(yang)的局面。因為它(ta)還(huan)屬于比較新的概(gai)念(nian)，目(mu)前還(huan)有很(hen)多設計(ji)師對該概(gai)念(nian)還(huan)不(bu)是(shi)很(hen)熟悉。

　　2012年將會(hui)有(you)更多的(de)移動設備繼(ji)續引進和采用響應式網(wang)(wang)頁設計。網(wang)(wang)頁設計師和開發者將會(hui)使用將使用流體布局，而不(bu)是固定寬度，更多的(de)樣式表被查詢(xun)設備選(xuan)擇 – 這樣讓網(wang)(wang)站(zhan)在(zai)不(bu)同屏幕尺寸的(de)設備都能夠擁有(you)完美(mei)的(de)顯示(shi)

　　2.固定(ding)位置(zhi)的導航

　　我們看到很(hen)多(duo)個人(ren)網站和博客已經開(kai)始采(cai)用這(zhe)種設計。但我發現這(zhe)種風潮在2010-2011年期間曾有所回落(luo)，但在最(zui)近幾個月(yue)開(kai)始回潮。

　　如果你的網(wang)站的導航(hang)并不(bu)需要(yao)放置太多的鏈接(jie)(jie)，寥(liao)寥(liao)幾個主要(yao)鏈接(jie)(jie)為何不(bu)保(bao)持用戶(hu)始(shi)終可見？這可以大大提(ti)供(gong)網(wang)站的性(xing)能甚至更易于融(rong)入整個頁(ye)面(mian)布局(ju)。這種(zhong)設計鎖定導航(hang)和(he)鏈接(jie)(jie)/logo在固(gu)定的位置，即使(shi)用戶(hu)固(gu)定頁(ye)面(mian)也能快速通過導航(hang)訪問(wen)其他頁(ye)面(mian)。

　　現在(zai)使(shi)(shi)用(yong)一些jQuery原型(xing)即可快速達到(dao)這種(zhong)(zhong)效(xiao)果(guo)。即使(shi)(shi)沒有JavaScript，也可以使(shi)(shi)用(yong)一些炫酷的CSS Code以達到(dao)效(xiao)果(guo)。在(zai)2011年已經有很多網站的使(shi)(shi)用(yong)固定(ding)的導航欄，即導航不隨(sui)頁面滾動或(huo)頁面切換而改變位(wei)置和重新(xin)載(zai)入，始終懸放頁屏幕的一個位(wei)置。Simon Wuyts 就是(shi)用(yong)了(le)這一效(xiao)果(guo)，你(ni)可以通(tong)過實例體驗(yan)這種(zhong)(zhong)技術。

　　以前的(de)你可能(neng)從不(bu)會(hui)考慮將(jiang)頁(ye)面設(she)計成(cheng)易(yi)于顯(xian)示的(de)幻燈片風格。不(bu)過，這不(bu)單能(neng)消除分(fen)辨(bian)率不(bu)兼容(rong)的(de)顧慮，而且導(dao)航(hang)系統更易(yi)于使用和對(dui)移動瀏覽器(qi)完美兼容(rong)。在(zai)即(ji)將(jiang)來臨的(de)2012年里我建議你重新(xin)考慮這種設(she)計，重新(xin)對(dui)頁(ye)面進行布局。

　　3. 圓形設計

　　這一趨(qu)勢其實已在網頁設計有點明顯，但近幾年有點偃旗息(xi)鼓(gu)。在Web2.0熱潮，設計師更注重基(ji)于臺(tai)式機的趨(qu)勢，如陰影和圓角(jiao)。但使用(yong)CSS3，就可以輕松實現花俏的方塊效果。

　　此外，你可(ke)以(yi)設(she)(she)計(ji)(ji)圓(yuan)形式(shi)和陰(yin)影不需要使(shi)用(yong)任何圖(tu)片。由于這些功能，設(she)(she)計(ji)(ji)師(shi)開始從(cong)另一(yi)個角度看圖(tu)像。一(yi)直(zhi)以(yi)來(lai)(lai)我都留意設(she)(she)計(ji)(ji)師(shi)們的各種(zhong)設(she)(she)計(ji)(ji)，發現圓(yuan)形元素的使(shi)用(yong)頻率越來(lai)(lai)越大(da)。這些圓(yuan)形設(she)(she)計(ji)(ji)可(ke)以(yi)作(zuo)(zuo)為導航鏈接，頁腳圖(tu)標，甚至(zhi)可(ke)用(yong)于個人作(zuo)(zuo)品(pin)等展示。

　　But the most extreme examples aren’t always the best. 圓形(xing)讓圖像看起(qi)來更加光滑舒服，更容易吸引訪(fang)客的(de)目光和關注。使(shi)用(yong)這些元素特(te)別標(biao)注設計中的(de)特(te)別區(qu)域，如有用(yong)的(de)資(zi)源和主要的(de)頁面等。但切勿為了(le)形(xing)狀本身而忽略效(xiao)果，否則適(shi)得其反。

    4. 大幅矢量圖

　　你(ni)可以在(zai)(zai)你(ni)的(de)(de)網站(zhan)使(shi)用(yong)超大(da)的(de)(de)吉祥物(wu)打造你(ni)的(de)(de)品牌(pai)。幾年(nian)前你(ni)很難在(zai)(zai)網絡(luo)品牌(pai)中找到使(shi)用(yong)大(da)量矢量圖的(de)(de)案例。但現(xian)在(zai)(zai)設計師的(de)(de)專(zhuan)業水(shui)平越(yue)來(lai)(lai)越(yue)高，這樣我(wo)想不到比使(shi)用(yong)可愛的(de)(de)動畫矢量圖來(lai)(lai)營銷品牌(pai)的(de)(de)點子。

　　Mozilla和Firefox的(de)(de)動物形(xing)(xing)象矢量圖(tu)就(jiu)是一(yi)個(ge)不(bu)錯的(de)(de)例子。MailChimp則又是一(yi)個(ge)優秀(xiu)的(de)(de)案(an)例，品(pin)牌形(xing)(xing)象的(de)(de)個(ge)子就(jiu)更大了。無論是網站(zhan)還是 iOS、Android應用都能清(qing)晰看到那只有趣的(de)(de)猴(hou)子郵遞員。

　　此外Freelance Switch網站的(de)吉祥(xiang)物小帥哥，也是我(wo)久不(bu)能(neng)忘的(de)設(she)計(ji)(ji)。你可以在他(ta)們的(de)網站布局發現各種各樣的(de)吉祥(xiang)物矢(shi)量(liang)圖。這種做法(fa)已經成為網站美學(xue)的(de)新境界(jie)，我(wo)有理(li)由相信2012年(nian)你將會(hui)到處都(dou)看到這些(xie)可愛的(de)矢(shi)量(liang)標志(zhi)設(she)計(ji)(ji)。

　　5. 多列菜單

　　不同(tong)于前面的例子，有時候有的網站的鏈接較多(duo)需(xu)要處(chu)理(li)。若按照標準型的導航排列會顯得過于凌亂和擁擠，除非(fei)你將(jiang)鏈接放(fang)置到(dao)邊欄。但經驗告訴我(wo)們，鏈接放(fang)置在(zai)頁面頂部(bu)，有利于用戶體驗。

　　跟(gen)著下(xia)來(lai)(lai)的一(yi)年或(huo)者新的趨勢(shi)會改(gai)變(bian)這個局(ju)(ju)面，設計(ji)師可以(yi)(yi)對頁面導航重建。跟(gen)著下(xia)來(lai)(lai)的一(yi)年或(huo)者新的趨勢(shi)會改(gai)變(bian)這個局(ju)(ju)面，設計(ji)師可以(yi)(yi)對頁面導航重建。思維(wei)是一(yi)張黑白畫，但(dan)卻意境(jing)無(wu)限，等(deng)待(dai)你的挖掘(jue)。多列布(bu)局(ju)(ju)的導航更美(mei)讓人(ren)看起來(lai)(lai)更舒服，通過這種方式你可以(yi)(yi)在Logo周圍顯示更多的鏈(lian)接給網站的訪客。

　　創造(zao)舒適的設計風格的最(zui)(zui)(zui)佳方式是(shi)實(shi)踐，閱讀最(zui)(zui)(zui)近的關(guan)于網頁設計的一些(xie)文章來學習Web導(dao)航設計的最(zui)(zui)(zui)新趨勢。作為設計師(shi)，應該(gai)擁有跳躍(yue)的思維，嘗試最(zui)(zui)(zui)新的東(dong)西。對標準的導(dao)航設計進行改革是(shi)每個設計師(shi)都要堅持的實(shi)踐活動(dong)。

　　6. jQuery/CSS3/HTML5動畫(hua)

　　我經常推薦(jian)的jQuery插件。網頁設計必須包括用戶體(ti)驗、美學和(he)動畫(hua)等多方面的內容。隨著JQuery和(he)CSS3的不斷進步，現在(zai)可以用很少的代碼就能達(da)到非常酷的效(xiao)果。

　　過(guo)去的一年我(wo)不(bu)斷地(di)學習網絡上相關的教程。了解到(dao)(dao)jQuery是(shi)目前(qian)前(qian)端效(xiao)果最優秀(xiu)的但并(bing)不(bu)是(shi)所(suo)有瀏(liu)覽(lan)器都支(zhi)持(chi)。因此，通過(guo)CSS來實現瀏(liu)覽(lan)器兼容(rong)也不(bu)失是(shi)個好辦(ban)法。2012年越來越近，相信開發(fa)者們又有了新(xin)的動態，讓我(wo)們拭目以(yi)待，期待jQuery/CSS3/HTML5時代的到(dao)(dao)來。

　　7.絲(si)帶及橫幅圖形

　　在(zai)2011年我就開(kai)始密切注(zhu)意(yi)到這樣(yang)的(de)設(she)計元(yuan)素。設(she)計師們(men)開(kai)始編寫關于設(she)計絲帶(dai)風格頁面、橫幅(fu)、書簽或其他類型(xing)的(de)徽章的(de)教程(cheng)。大量(liang)免(mian)費教程(cheng)的(de)出現使得越(yue)來越(yue)多設(she)計師開(kai)始跟隨這樣(yang)的(de)趨勢。

　　你很可(ke)能為(wei)過去短(duan)(duan)短(duan)(duan)的(de)(de)(de)6個月里出現這(zhe)(zhe)種(zhong)風(feng)格(ge)設計(ji)的(de)(de)(de)網站的(de)(de)(de)數量感到(dao)驚訝。勇于嘗新(xin)的(de)(de)(de)設計(ji)師們頻繁在(zai)新(xin)的(de)(de)(de)軟件(jian)和(he)移動(dong)應用程序(xu)中使用絲帶設計(ji)風(feng)格(ge)。此外你會發現博客免費(fei)下載或者熱門文章欄目(mu)使用這(zhe)(zhe)類的(de)(de)(de)橫幅設計(ji)。

　　8. 簡潔

　　任何(he)網站都(dou)有一個目的(de)就是(shi)使(shi)訪客從A點(dian)訪問(wen)到B點(dian)。簡(jian)單(dan)(dan)，直觀的(de)界面(mian)是(shi)最直接(jie)的(de)方法。在過去(qu)的(de)5年，我發現現在越來越流行簡(jian)單(dan)(dan)的(de)設計(ji)。道(dao)理很簡(jian)單(dan)(dan)，頁面(mian)元素也少，游客自然將目光集中(zhong)在內容和鏈(lian)接(jie)上。

　　但重新布局一(yi)個簡單的界面(mian)并不是(shi)一(yi)件易事。你需要(yao)起草導航架構(gou)，頁面(mian)層(ceng)次結構(gou)，頭部，內容區域等(deng)。不過花時間做好(hao)規劃可(ke)以大大簡化你的工作。

小結
　　以(yi)上趨勢僅(jin)僅(jin)是我(wo)們根據現階段和(he)(he)以(yi)前網(wang)(wang)(wang)頁(ye)設(she)計(ji)的(de)發展歷史所(suo)預測，但未(wei)來(lai)是不可以(yi)預知的(de)，因此未(wei)來(lai)的(de)網(wang)(wang)(wang)頁(ye)設(she)計(ji)會不斷地(di)變(bian)化。現在的(de)網(wang)(wang)(wang)頁(ye)設(she)計(ji)師也一(yi)直地(di)學(xue)習(xi)和(he)(he)嘗試(shi)新的(de)東西，只要我(wo)們時刻留意(yi)網(wang)(wang)(wang)頁(ye)設(she)計(ji)的(de)發展，學(xue)習(xi)新的(de)技(ji)術和(he)(he)設(she)計(ji)，相信所(suo)設(she)計(ji)的(de)網(wang)(wang)(wang)頁(ye)也會相當不錯的(de)。(來(lai)源(yuan)：藝(yi)術中國)