信息圖表并不適用于對所有網(wǎng)站，而且制作這樣的圖表需要在Photoshop上花費大量時間。但如果你擅長做這個而自己的網(wǎng)站也有這樣的需要，不妨嘗試下，絕對會為你的訪客帶來全新體驗。相比以前，現(xiàn)在的網(wǎng)絡(luò)信息量大，我們可以從中獲取各種信息，而使用信息圖表恰能提升用戶體驗。此設(shè)計應(yīng)用不僅能加快互聯(lián)網(wǎng)發(fā)展，同時可以秉承互聯(lián)網(wǎng)精神。

　　過去你可能從不會考慮幻燈片風(fēng)格的網(wǎng)頁設(shè)計。然而這種風(fēng)格不僅能消除分辨率兼容問題，而且導(dǎo)航欄也更易于使用，還可以完美兼容移動瀏覽器。在即將來臨的2012年里我建議你重新考慮這種設(shè)計，來個布局大翻新吧。

　　Corner Ribbon

閱讀本文，你可能會發(fā)現(xiàn)網(wǎng)頁設(shè)計趨勢難以捉摸，或許你已洞察些許，雖然以下10種設(shè)計應(yīng)用不一定會在2012年成為主流，也很可能會被不斷改進，但這些概念都很值得學(xué)習(xí)。

　　接下來的一年可是設(shè)計師重建頁面導(dǎo)航的絕佳時機。能一直想出好的Idea不容易，但我們就需要不斷挖掘自己。多列式菜單布局更美，讓人看起來更舒服，通過這種設(shè)計方式你可以在logo周圍放置更多鏈接以便用戶訪問。

　　免費字體庫Typekit為對此設(shè)計感興趣的設(shè)計師提供了免費試用。有了這個工具你只需在網(wǎng)站中嵌入一小段JavaScript代碼即可實現(xiàn)CSS效果中的任何字體式樣。今年這種設(shè)計風(fēng)格大熱，尤其很多WordPress設(shè)計師已使用這種方法個性化自己的博客了。

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

　　URL: (編者注：logartis網(wǎng)站做的簡單卻又非常不簡單：整個loading畫面是這棵樹從發(fā)芽之后，開始日出日落長葉與落葉的循環(huán)flash，而且樹上還暗藏玄機。)

　　幾年前，Typekit還是一個不起眼的系統(tǒng)，如今Google Web Fonts提供資金支持后，Typekit一炮打響。操作很簡便：字體庫中的每種字體，Goole都會提供相應(yīng)代碼。

　　其實現(xiàn)在的網(wǎng)頁設(shè)計中圓形要素挺多見，但近幾年勢頭略減。受Web2.0熱潮影響，設(shè)計師更注重基于臺式機的網(wǎng)頁設(shè)計，如陰影和圓角元素。如今使用CSS3，不僅可以輕松實現(xiàn)花俏的方塊效果，還能不借助任何圖片設(shè)計出圓形及其他圖形的圖案。正是受到CSS3的啟發(fā)，設(shè)計師開始從另一個角度考慮圖片問題。一直以來我都有留意設(shè)計師的各種設(shè)計，發(fā)現(xiàn)圓形元素的使用頻率越來越高。這些圓形設(shè)計可以用于導(dǎo)航鏈接、頁腳圖標(biāo)，企業(yè)網(wǎng)站建設(shè)，甚至可以展示個人作品等。

　　Dark Slider with Featured Ribbon

　　8. 自定義字體外觀

　　圖為由Simon Wuyts創(chuàng)建的netontwerp網(wǎng)站

　　URL:

　　想要知道設(shè)計風(fēng)格是否舒適，就必須實踐。閱讀相關(guān)文章以獲取網(wǎng)頁導(dǎo)航設(shè)計的最新趨勢。作為設(shè)計師，想法要超前，并且勇于嘗新。打破傳統(tǒng)理應(yīng)是每個設(shè)計師的菜。

　　我經(jīng)常推薦jQuery插件。網(wǎng)頁設(shè)計必須兼顧用戶體驗、美學(xué)和動畫等多方面因素。隨著jQuery和CSS3的不斷優(yōu)化，現(xiàn)在用很少的代碼就能制作出非?？犰诺男Ч?。

　　2.固定導(dǎo)航

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

　　4. 大幅矢量圖

　　URL:

　　6. jQuery/CSS3/HTML5動畫

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

　　7.絲帶及橫幅圖形

　　我始終相信，總有一天我們會停止談?wù)擁憫?yīng)式網(wǎng)頁設(shè)計這一話題，論壇門戶網(wǎng)站建設(shè)，倒不是因為它不再起作用，而是因為它是必然之趨，人們都想用。但是，我認(rèn)為2012年還不會普及，畢竟現(xiàn)在這還是個新概念，而且很多網(wǎng)頁設(shè)計師對它還不熟。

　　Colorful Ribbons

　　5. 多列式菜單

　　任何網(wǎng)站設(shè)計的最終目的就是讓訪客盡快從A點訪問到B點。簡單、直觀的界面是最直接有效的方法。過去5年，簡易風(fēng)儼然成為了主流。道理很簡單：頁面元素少，企業(yè)網(wǎng)站建設(shè)，訪客自然容易將目光集中在網(wǎng)站內(nèi)容和鏈接上。我們可以找到很多這樣的例子。今年5月，我們就列舉過一批非常優(yōu)秀的案例，根據(jù)網(wǎng)站類型，你會需要各種界面元素來營造簡易風(fēng)。但重新布局一個簡單的界面并不容易。你需要事先精心起草導(dǎo)航架構(gòu)、頁面層次結(jié)構(gòu)、頁眉、內(nèi)容區(qū)域等。

　　Green Corner Ribbon Templates

　　URL:

　　以上10大趨勢僅僅是我們根據(jù)網(wǎng)頁設(shè)計的發(fā)展歷史及現(xiàn)階段特征所預(yù)測的，未來到底會怎樣是無法預(yù)知的，網(wǎng)頁設(shè)計趨勢會不斷變化。但可以確定的是，相比以前任何時候，現(xiàn)在的網(wǎng)頁設(shè)計師的學(xué)習(xí)能力是最強的，我們可以期許他們會不斷創(chuàng)新，帶領(lǐng)我們一起融入互聯(lián)網(wǎng)黃金時代。 

　　過去6個月，這種設(shè)計風(fēng)格的網(wǎng)站如雨后春筍般冒出，對此你不必驚訝。勇于嘗新的設(shè)計師們頻繁將其應(yīng)用于新的軟件和app中。此外你會發(fā)現(xiàn)博客的免費下載內(nèi)容或熱門文章欄目都已開始使用這類橫幅設(shè)計。我還專門收集了這類設(shè)計的PSD素材，有興趣的朋友可以嘗試下載來參看下：

　　2011年我就開始密切注意到這樣的設(shè)計元素。設(shè)計師們紛紛開始編寫關(guān)于絲帶風(fēng)格頁面、橫幅、書簽或其他類型圖形的設(shè)計教程。大量免費教程的出現(xiàn)使得越來越多的設(shè)計師開始跟走絲帶橫幅風(fēng)。

　　10. 簡潔

　　雖然這個趨勢對網(wǎng)頁設(shè)計大走向影響不大，但有利于用戶體驗及新媒體的發(fā)展。以前使用這種設(shè)計的網(wǎng)站并不多，即使你不太了解其中所展示的信息也無妨，這些圖表給了讀者足夠多的想象空間，5歲小孩也能參與互動起來。

　　自定義字體最近已趨于主流，甚至開發(fā)人員專為此開發(fā)了免費插件，以簡易化安裝過程。不需要上傳字體，沒有服務(wù)器壓力和幾近零錯誤。因此，博主們應(yīng)該關(guān)注這個趨勢，使用一些適合自己博客的字體，絕對夠個性。

　　可以在網(wǎng)站中使用超大的吉祥物打造品牌。幾年前很難在網(wǎng)絡(luò)品牌中找到使用大量矢量圖的

　　現(xiàn)在使用一些jQuery(圖片放大效果插件)原型即可快速達(dá)到固定導(dǎo)航的效果。甚至不用JavaScript，你也可以使用酷炫的CSS復(fù)制出相同的效果。2011年大部分網(wǎng)頁都使用了固定導(dǎo)航欄，訪客可以逐頁逐頁瀏覽。而Simon Wuyts可謂將固定導(dǎo)航應(yīng)用到了更高境界。

　　URL:

　　3. 圓形元素

　　URL:

　　Simple Product Box

　　圓形可以讓圖片看起來更加光滑舒服，更容易吸引訪客的目光和關(guān)注。使用圓形元素作為特別標(biāo)注來突出設(shè)計亮點，例如羅列有用的資源和主要的頁面時，就可以使用圓形元素的圖標(biāo)。這里同樣是度的問題，過猶不及。切勿為了形狀本身而忽略效果，否則適得其反。

　　倒是越來越多的移動終端將會在2012年把響應(yīng)式網(wǎng)頁設(shè)計推向主流。網(wǎng)頁設(shè)計師和開發(fā)人員會啟用流式布局，不再局限于固定布局，媒體查詢將被用于更多網(wǎng)頁樣式表使各種尺寸的屏幕及移動終端可以訪問到更多站點。

　　此外Freelance Switch網(wǎng)站的小帥哥另我印象非常深刻。你可以在他們的網(wǎng)站布局中發(fā)現(xiàn)各種不錯的吉祥物矢量圖。這種做法已達(dá)到了網(wǎng)站美學(xué)的新境界，我有理由相信2012年你將會看到更多可愛的矢量logo設(shè)計。

　　URL:

　　大部分個人網(wǎng)站或博客會使用固定導(dǎo)航。2010年至2011年間，這項設(shè)計經(jīng)歷過滑鐵盧，而就從前幾個月開始，又悄然復(fù)蘇了。如果你的網(wǎng)站無需很多主導(dǎo)航，只要設(shè)幾個小鏈接就可以。那為何不嘗試固定導(dǎo)航呢?這絕對可以大大改善網(wǎng)站性能，而且能與整個頁面布局完美契合。當(dāng)訪客滾動網(wǎng)站頁面時，運用這項設(shè)計就可以鎖定導(dǎo)航欄及網(wǎng)頁內(nèi)部連接/logo。

　　URL:

　　結(jié)論

　　URL:

　　9.信息圖表