要是你拿前十年的網(wǎng)站與現(xiàn)在的網(wǎng)站相比，就會(huì)發(fā)現(xiàn)網(wǎng)站設(shè)計(jì)發(fā)生了許多令人可喜的變化：畫面更加簡(jiǎn)潔，功能更加齊全，用戶體驗(yàn)提升了……網(wǎng)站設(shè)計(jì)在不停的變化中，那么站在2012年的角度看，網(wǎng)站設(shè)計(jì)將會(huì)走向何處呢？

 

      第一： 觸摸屏移動(dòng)設(shè)備普及，企業(yè)應(yīng)該為移動(dòng)用戶提供一個(gè)精簡(jiǎn)版本的網(wǎng)站

 

      隨著Android平臺(tái)手機(jī)、iPhone和iPad設(shè)備的普及，意味著更多的瀏覽者需要通過(guò)觸摸這種交互模式。這已經(jīng)成為每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員所必須學(xué)習(xí)的技術(shù)。

移動(dòng)網(wǎng)絡(luò)設(shè)計(jì)的趨勢(shì)表明，建立一個(gè)更完善的移動(dòng)界面更能留住瀏覽者。這樣，你可以保持你主要布局所有的動(dòng)態(tài)內(nèi)容，而為移動(dòng)用戶提供一個(gè)精簡(jiǎn)版本的網(wǎng)站。

 

 

      第二： 讓界面交互設(shè)計(jì)更加靈動(dòng)

 

      更好的從用戶角度分析使用習(xí)慣，做出更人性的界面選擇對(duì)元素的快速反映和預(yù)想一些例子。可能包括側(cè)飛出菜單，下拉框，彈出窗口等等。

 

      如MooTools和jQuery的包括著名的JavaScript庫(kù)，它們讓這一切更容易實(shí)現(xiàn)。更多的瀏覽器開(kāi)始支持這些代碼。最終，瀏覽者會(huì)使用他們感動(dòng)舒適的瀏覽器。

 

      同樣，你應(yīng)該考慮檢查的形式輸入和數(shù)據(jù)。在許多注冊(cè)頁(yè)面上，您會(huì)收到一些小的反應(yīng)。

 

 

      第三：資源分享更加全面

 

      現(xiàn)在已經(jīng)有幾個(gè)社區(qū)專門圍繞Web和圖形設(shè)計(jì)人員提供免費(fèi)下載。越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)師知道如何分享他們的資源和如何尋找他們想要的資源。也有很多站長(zhǎng)開(kāi)始做出一些優(yōu)秀的資源網(wǎng)站來(lái)分享他們所擁有的資源，可以免費(fèi)下載，這個(gè)優(yōu)勢(shì)足夠吸引人。

 

      第四：HTML5和CSS3的標(biāo)準(zhǔn)

 

      我們都知道這兩年來(lái)網(wǎng)頁(yè)代碼的進(jìn)步和升級(jí)要比之前快了很多。新的代碼和標(biāo)準(zhǔn)讓網(wǎng)頁(yè)有了更多的渲染和想像空間。W3C也贏得了很多主流瀏覽器的支持。 在未來(lái)很多年HTML5／CSS3將是WEB開(kāi)發(fā)的趨勢(shì)。

 

      第五：新增絲帶和橫幅

 

      雖然這種設(shè)計(jì)方法是不完全的“新”，它從來(lái)沒(méi)有真正爆發(fā)，直到最近才通過(guò)主流。你可能已經(jīng)看到角落彩帶，旗幟導(dǎo)航欄和小絲帶徽章的例子 。

 

       第六：高級(jí)WordPress的主題

 

      WordPress已經(jīng)發(fā)展到了3.0+版本。已經(jīng)有越來(lái)越多的公司在使用它架構(gòu)網(wǎng)站。一個(gè)高級(jí)的WP主題可以吸引很多人。而且它有著簡(jiǎn)單的安裝過(guò)程，即便不懂得代碼也能夠輕松搞定。

 

      第七：易陰影

      作為對(duì)CSS3的方方面面，它比以往任何時(shí)候都更容易實(shí)現(xiàn)?？蛑械奈谋竞涂蚴皆乜梢赃\(yùn)用各自的屬性來(lái)呈現(xiàn)鮮明的陰影效果。文字陰影語(yǔ)法是很容易記住。

 

      第八：動(dòng)態(tài)排版

      字體的領(lǐng)域包括網(wǎng)頁(yè)設(shè)計(jì)傳統(tǒng)的重要組成部分。已經(jīng)出現(xiàn)了多年來(lái)最顯著的字體包括宋體，黑體，格魯吉亞，和投石機(jī)MS。雖然他們繼續(xù)為在Web標(biāo)準(zhǔn)了深刻的目的，也有大量先進(jìn)的替代方案，網(wǎng)頁(yè)排版。

 

       Typekit為例，只需要幾行代碼包含在您的文檔頭部。在此之后，您可以指定字體名稱，包括追加到你的CSS 。關(guān)于這項(xiàng)技術(shù)的最好的部分是，它主要依賴于JavaScript，所以最終用戶不需要安裝這些字體 。

 

      另一種方法是Google Web字體的行為，以類似的方式來(lái)Typekit 。我建議有興趣的設(shè)計(jì)師，以檢查對(duì)CSS3的@ font - face的媒體查詢，您將得到更多的創(chuàng)造力。此代碼可以用來(lái)導(dǎo)入一個(gè)。TTF或OTF字體文件從您的Web服務(wù)器，包括作為一個(gè)可用的樣式表字體！這么多的備用系統(tǒng)，用于建設(shè)動(dòng)態(tài)字體，我期待2012年舉行的創(chuàng)新和設(shè)計(jì)人才，在這方面的激增。

 

      第九：模式彈出盒

 

      許多開(kāi)放源碼的圖片廊腳本使用的燈箱效果背景變淡比彈出框較深的類型。我真的很喜歡這個(gè)功能，每當(dāng)我看到，盡管它尚未被廣泛使用。

 

      第十：圖片畫廊幻燈片

 

      隨著jQuery的普及，我發(fā)現(xiàn)越來(lái)越多的圖像幻燈片被布局到網(wǎng)頁(yè)中。讓瀏覽者更快更直觀的看到訊息和圖片。

 

      第十一： 生成的圖像縮略圖

      在網(wǎng)頁(yè)中，我們可以同意，內(nèi)容為王。但大多數(shù)設(shè)計(jì)師也會(huì)同意，一個(gè)空白的文本頁(yè)面變得乏味。圖像可以添加額外的香料。其中的一個(gè)方法是使用動(dòng)態(tài)縮略圖，為每一頁(yè)或文章預(yù)覽。

作為另一個(gè)例子Dribbble提供了整個(gè)畫廊的每個(gè)設(shè)計(jì)拍攝的縮略圖列表。在這樣一個(gè)表排式布局，它的超級(jí)容易趕上窺見(jiàn)每個(gè)縮略圖和滾動(dòng)來(lái)查找你要找的 。這種戰(zhàn)術(shù)已被證明是搶了整個(gè)設(shè)計(jì)界的關(guān)注 ！

 

      第十二： 超大圖標(biāo)

      這種獨(dú)特的趨勢(shì)半源于Mac OS X的圖標(biāo)設(shè)計(jì)的普及。作為程序員開(kāi)始推出他們的Mac應(yīng)用程序的網(wǎng)站，大家都過(guò)于頻繁地看到在品牌所代表的巨大尺寸。因此，這種趨勢(shì)也被拾起通過(guò)IOS開(kāi)發(fā)。

 

     以上，是我們根據(jù)目前網(wǎng)站的情況總結(jié)出來(lái)的網(wǎng)站設(shè)計(jì)趨勢(shì)，希望你能緊追時(shí)代潮流，站在用戶角度與用戶習(xí)慣上面，考慮周全，為用戶提供更加方便快捷的網(wǎng)站。