1、響應式網頁設計(jì)
我相(xiàng)信将來(lái)我們不再會在趨勢中討(tǎo)論響應式網頁設計(jì)，不是因爲它将會消失，而是網頁設計(jì)必需的原則。不過，我認爲2012年(nián)後暫時不會出現這樣的局面。因爲它還(hái)屬于比較新的概念，目前還(hái)有很多設計(jì)師(shī)對該概念還(hái)不是很熟悉。
2012年(nián)後将會有更多的移動設備繼續引進和采用響應式網頁設計(jì)。網頁設計(jì)師(shī)和開發者将會使用将使用流體(tǐ)布局，而不是固定寬度，更多的樣式表被查詢設備選擇 – 這樣讓網站在不同屏幕尺寸的設備都(dōu)能夠擁有完美的顯示
2.固定位置的導航
我們看(kàn)到很多個人(rén)網站和博客已經開始采用這種設計(jì)。但(dàn)我發現這種風(fēng)潮在2010-2011年(nián)期間曾有所回落，但(dàn)在較近幾個月開始回潮。
如(rú)果你(nǐ)的網站的導航并不需要放(fàng)置太多的鏈接，寥寥幾個主要鏈接爲何不保持用戶始終可(kě)見(jiàn)？這可(kě)以大(dà)大(dà)提供網站的性能甚至更易于融入整個頁面布局。這種設計(jì)鎖定導航和鏈接/logo在固定的位置，即使用戶固定頁面也能快(kuài)速通過導航訪問(wèn)其他(tā)頁面。
現在使用一些jQuery原型即可(kě)快(kuài)速達到這種效果。即使沒有JavaScript，也可(kě)以使用一些炫酷的CSS Code以達到效果。在2011年(nián)已經有很多網站的使用固定的導航欄，即導航不随頁面滾動或頁面切換而改變位置和重新載入，始終懸放(fàng)頁屏幕的一個位置。Simon Wuyts 就(jiù)是用了這一效果，你(nǐ)可(kě)以通過實例體(tǐ)驗這種技術(shù)。
以前的你(nǐ)可(kě)能從不會考慮将頁面設計(jì)成易于顯示的幻燈片風(fēng)格。不過，這不單能消除分辨率不兼容的顧慮，而且導航系統更易于使用和對移動浏覽器完美兼容。在即将來(lái)臨的2012年(nián)裡(lǐ)我建議(yì)你(nǐ)重新考慮這種設計(jì)，重新對頁面進行布局。
3. 圓形設計(jì)
這一趨勢其實已在網頁設計(jì)有點明顯，但(dàn)近幾年(nián)有點偃旗息鼓。在Web2.0熱(rè)潮，設計(jì)師(shī)更注重基于台式機(jī)的趨勢，如(rú)陰影(yǐng)和圓角。但(dàn)使用CSS3，就(jiù)可(kě)以輕松實現花俏的方塊效果。
此外，你(nǐ)可(kě)以設計(jì)圓形式和陰影(yǐng)不需要使用任何圖片。由于這些功能，設計(jì)師(shī)開始從另一個角度看(kàn)圖像。一直以來(lái)我都(dōu)留意設計(jì)師(shī)們的各種設計(jì)，發現圓形元素的使用頻率越來(lái)越大(dà)。這些圓形設計(jì)可(kě)以作(zuò)爲導航鏈接，頁腳圖标，甚至可(kě)用于個人(rén)作(zuò)品等展示。
But the most extreme examples aren’t always the best. 圓形讓圖像看(kàn)起來(lái)更加光(guāng)滑舒服，更容易吸引訪客的目光(guāng)和關注。使用這些元素特别标注設計(jì)中的特别區域，如(rú)有用的資源和主要的頁面等。但(dàn)切勿爲了形狀本身(shēn)而忽略效果，否則适得(de)其反。
4. 大(dà)幅矢量圖
你(nǐ)可(kě)以在你(nǐ)的網站使用超大(dà)的吉祥物打造你(nǐ)的品牌。幾年(nián)前你(nǐ)很難在網絡品牌中找到使用大(dà)量矢量圖的案例。但(dàn)現在設計(jì)師(shī)的專業水平越來(lái)越高，這樣我想不到比使用可(kě)愛的動畫(huà)矢量圖來(lái)營銷品牌的點子。
Mozilla和Firefox的動物形象矢量圖就(jiù)是一個不錯的例子。MailChimp則又是一個優秀的案例，品牌形象的個子就(jiù)更大(dà)了。無論是網站還(hái)是 iOS、Android應用都(dōu)能清晰看(kàn)到那隻有趣的猴子郵遞員(yuán)。
此外Freelance Switch網站的吉祥物小帥哥，也是我久不能忘的設計(jì)。你(nǐ)可(kě)以在他(tā)們的網站布局發現各種各樣的吉祥物矢量圖。這種做法已經成爲網站美學的新境界，我有理(lǐ)由相(xiàng)信2012年(nián)你(nǐ)将會到處都(dōu)看(kàn)到這些可(kě)愛的矢量标志設計(jì)。
5. 多列菜單
不同于前面的例子，有時候有的網站的鏈接較多需要處理(lǐ)。若按照(zhào)标準型的導航排列會顯得(de)過于淩亂和擁擠，除非你(nǐ)将鏈接放(fàng)置到邊欄。但(dàn)經驗告訴我們，鏈接放(fàng)置在頁面頂部，有利于用戶體(tǐ)驗。
跟着下來(lái)的一年(nián)或者新的趨勢會改變這個局面，設計(jì)師(shī)可(kě)以對頁面導航重建。跟着下來(lái)的一年(nián)或者新的趨勢會改變這個局面，設計(jì)師(shī)可(kě)以對頁面導航重建。思維是一張黑(hēi)白(bái)畫(huà)，但(dàn)卻意境無限，等待你(nǐ)的挖掘。多列布局的導航更美讓人(rén)看(kàn)起來(lái)更舒服，通過這種方式你(nǐ)可(kě)以在Logo周圍顯示更多的鏈接給網站的訪客。
創造舒适的設計(jì)風(fēng)格的較佳方式是實踐，閱讀(dú)較近的關于網頁設計(jì)的一些文章(zhāng)來(lái)學習Web導航設計(jì)的較新趨勢。作(zuò)爲設計(jì)師(shī)，應該擁有跳(tiào)躍的思維，嘗試較新的東西。對标準的導航設計(jì)進行改革是每個設計(jì)師(shī)都(dōu)要堅持的實踐活動。
6. jQuery/CSS3/HTML5動畫(huà)
我經常推薦的jQuery插件(jiàn)。網頁設計(jì)必須包括用戶體(tǐ)驗、美學和動畫(huà)等多方面的内容。随着JQuery和CSS3的不斷進步，現在可(kě)以用很少的代碼就(jiù)能達到非常酷的效果。
過去(qù)的一年(nián)我不斷地學習網絡上相(xiàng)關的教程。了解到jQuery是目前前端效果較優秀的但(dàn)并不是所有浏覽器都(dōu)支持。因此，通過CSS來(lái)實現浏覽器兼容也不失是個好辦法。2012年(nián)越來(lái)越近，相(xiàng)信開發者們又有了新的動态，讓我們拭目以待，期待jQuery/CSS3/HTML5時代的到來(lái)。
7.絲帶及橫幅圖形
在2011年(nián)我就(jiù)開始密切注意到這樣的設計(jì)元素。設計(jì)師(shī)們開始編寫關于設計(jì)絲帶風(fēng)格頁面、橫幅、書(shū)簽或其他(tā)類型的徽章(zhāng)的教程。大(dà)量免費教程的出現使得(de)越來(lái)越多設計(jì)師(shī)開始跟随這樣的趨勢。
你(nǐ)很可(kě)能爲過去(qù)短(duǎn)短(duǎn)的6個月裡(lǐ)出現這種風(fēng)格設計(jì)的網站的數量感到驚訝。勇于嘗新的設計(jì)師(shī)們頻繁在新的軟件(jiàn)和移動應用程序中使用絲帶設計(jì)風(fēng)格。此外你(nǐ)會發現博客免費下載或者熱(rè)門(mén)文章(zhāng)欄目使用這類的橫幅設計(jì)。
8. 簡潔
任何網站都(dōu)有一個目的就(jiù)是使訪客從A點訪問(wèn)到B點。簡單，直觀的界面是較直接的方法。在過去(qù)的5年(nián)，我發現現在越來(lái)越流行簡單的設計(jì)。道理(lǐ)很簡單，頁面元素也少，遊客自(zì)然将目光(guāng)集中在内容和鏈接上。
但(dàn)重新布局一個簡單的界面并不是一件(jiàn)易事。你(nǐ)需要起草導航架構，頁面層次結構，頭部，内容區域等。不過花時間做好規劃可(kě)以大(dà)大(dà)簡化你(nǐ)的工(gōng)作(zuò)。
小結
以上趨勢僅僅是我們根據現階段和以前網頁設計(jì)的發展曆史所預測，但(dàn)未來(lái)是不可(kě)以預知的，因此未來(lái)的網頁設計(jì)會不斷地變化。現在的網頁設計(jì)師(shī)也一直地學習和嘗試新的東西，隻要我們時刻留意網頁設計(jì)的發展，學習新的技術(shù)和設計(jì)，相(xiàng)信所設計(jì)的網頁也會相(xiàng)當不錯的。(來(lái)源：藝術(shù)中國(guó))