今年帶來了強(qiáng)大的新的UI概念，開源項(xiàng)目，以及新的黑客/技巧的網(wǎng)頁設(shè)計(jì)師和開發(fā)人員。那些對網(wǎng)頁設(shè)計(jì)感興趣的人們應(yīng)該都已經(jīng)覺察到網(wǎng)頁設(shè)計(jì)正在穩(wěn)步改善。回首十年之前的2003年，你會發(fā)現(xiàn)互聯(lián)網(wǎng)已經(jīng)走過了很長的道路而且還有很長的路要走。
在本文中，我想跟大家一起回顧一下2013年一些比較流行的網(wǎng)頁設(shè)計(jì)趨勢。有些網(wǎng)頁設(shè)計(jì)模式已經(jīng)持續(xù)多年，但在今年到達(dá)了一個高峰，不但被更多的設(shè)計(jì)師所熟知，而且在技術(shù)上也得到了相應(yīng)的改善。
動態(tài)網(wǎng)頁設(shè)計(jì)
這一直是我最喜歡的話題之一，因?yàn)槠淞钊穗y以置信的進(jìn)步與jQuery插件值得討論。我喜歡演示許多JS庫，但jQuery仍然是我做任何新項(xiàng)目的選擇。
最近我發(fā)現(xiàn)一個資源，它收集了很多非常方便的jQuery插件來幫助提高用戶體驗(yàn)。這個資源上面還有其他的一些插件，但其不斷增多的插件目錄每次都讓我感到頭暈。并且你會發(fā)現(xiàn)很多如浮動標(biāo)簽，輸入驗(yàn)證，自定義單選按鈕，復(fù)選框，甚至可以選擇的下拉菜單等的東西，那些令人眼花繚亂的選擇會讓你更容易放棄通用的輸入方式甚至放棄去自定義設(shè)計(jì)你的漂亮的交互式網(wǎng)頁設(shè)計(jì)。
單頁面布局
沒有大量的上下文信息的網(wǎng)站通常會構(gòu)建成一個單一的頁面。這種趨勢已經(jīng)持續(xù)了多年，但它也已經(jīng)發(fā)展成為一種較新的整體設(shè)計(jì)趨勢。
將網(wǎng)站導(dǎo)航設(shè)計(jì)成隨著用戶鼠標(biāo)滾動而切換的模式已經(jīng)是一種習(xí)以為常的網(wǎng)頁設(shè)計(jì)模式。這種設(shè)計(jì)模式使網(wǎng)站內(nèi)容全部集中于一個頁面上，而導(dǎo)航就像一個滾動條，用來解決頁面的跳轉(zhuǎn)問題。這種視差單頁網(wǎng)站使用動態(tài)背景元素同樣的功能。
設(shè)計(jì)師或創(chuàng)意藝術(shù)家以及網(wǎng)絡(luò)營銷團(tuán)隊(duì)有時會傾向于對這樣的設(shè)計(jì)布局。你可以將你的設(shè)計(jì)工作聚焦與這樣的網(wǎng)站設(shè)計(jì)以及細(xì)節(jié)布局上，單頁面網(wǎng)頁設(shè)計(jì)能夠大大減少HTTP請求的時間。你僅僅需要去考慮一個單頁網(wǎng)站設(shè)計(jì)如何來規(guī)劃，你會發(fā)現(xiàn)這一場頭腦風(fēng)暴能夠給你清晰的指引。
動畫頁面元素
這是在一些好奇的開發(fā)人員的帶領(lǐng)下成為潮流的新興網(wǎng)頁設(shè)計(jì)模式。值得注意的是我發(fā)現(xiàn)網(wǎng)頁動畫在ThemeForest WordPress主題中層多次出現(xiàn)。或者你可以看看這個themeforest wordpress主題bluap CSS3動畫關(guān)鍵幀的例子。
這些網(wǎng)頁的動畫可以用CSS3關(guān)鍵幀設(shè)計(jì)，能夠在瀏覽器窗口檢測到＆#106avascript元素。這種趨勢是完全的審美效果設(shè)計(jì)，因?yàn)樗粫a(chǎn)生任何新的內(nèi)容，或添加到UI，除了整齊的視覺效果之外。并且，不是每一個這樣的設(shè)計(jì)都支持在較舊的計(jì)算機(jī)或移動設(shè)備上訪問。
在Android / iOS移動設(shè)備應(yīng)用軟件庫中這樣的網(wǎng)頁動畫設(shè)計(jì)經(jīng)常出現(xiàn)。由于這些通常是單一的分頁布局應(yīng)用，目的是吸引大量游客前來下載。因而，在將來，我們將看到更多的這些動畫效果網(wǎng)站出現(xiàn)。
無限滾動
當(dāng)我第一次使用這種設(shè)計(jì)模式的時候，我發(fā)現(xiàn)其Cookies跟蹤是一個非常難以破解的存在。但是在WordPress中的CMS系統(tǒng)，你還是可以找到一些免費(fèi)的開源插件來使用。但定制版式，動畫，需要加載的項(xiàng)目等，對于一個沒有＆#106avascript基礎(chǔ)的設(shè)計(jì)師來說還是存在一定的難度的。
不過，我覺得網(wǎng)民們已經(jīng)慢慢習(xí)慣了這種無限滾動的技術(shù)。Reddit Enhancement Suite有一個插件可以使網(wǎng)站在用戶瀏覽到網(wǎng)頁底部的時候自動切換到下一個也沒。目前Tumblr與一些電子商務(wù)網(wǎng)站已經(jīng)開始使用這樣的網(wǎng)頁設(shè)計(jì)模式。源自阿賈克斯的分頁設(shè)計(jì)讓無線滾動網(wǎng)頁比跳轉(zhuǎn)到新的頁面要節(jié)省更多的時間。
cocosa無限滾動的電子商務(wù)網(wǎng)站布局截圖
應(yīng)該注意的是，在任何情況下，這種設(shè)計(jì)模式的倒式設(shè)計(jì)并不存在。而一旦該div開始觸發(fā)一個Ajax調(diào)用（在可能的情況下），它將有助于建立一個鏈接到每一個新頁面的分頁格。無限分頁可以擴(kuò)展成為正式的博客，甚至其他社交網(wǎng)絡(luò)/社交媒體項(xiàng)目。
更精細(xì)的字體設(shè)計(jì)
盡管這一趨勢已經(jīng)流行多年，但我還是很少見到有使用出色的自定義字體網(wǎng)站。CSS3的@ font-face聲明可以訪問您存儲在服務(wù)器上的任何網(wǎng)頁安全字體。
谷歌還通過谷歌網(wǎng)頁字體來提供一個特殊的字體服務(wù)。該團(tuán)隊(duì)經(jīng)常更新一些新的東西但同時保留所有舊的字體。谷歌最好的地方在于使用他們的主機(jī)不需要花費(fèi)你一毛錢，不管你使用了多少流量。其高級字體服務(wù)，如Typekit有一個更大的數(shù)據(jù)庫以供選擇-但這是是有償服務(wù)。
CSS字體棧家庭產(chǎn)生的webapp 2013
撇開這些自定義字體不談，現(xiàn)代筆記本電腦和PC都提供了大量的字體壓縮包。隨著越來越多的電腦用戶升級到更好的系統(tǒng)，我們可以預(yù)期這種趨勢將有所改善。試著用一個在線Web應(yīng)用，如播放CSS字體庫來根據(jù)各地的操作系統(tǒng)預(yù)設(shè)值為您的網(wǎng)站編輯不同的風(fēng)格。
矢量圖標(biāo)
我首先想到的圖標(biāo)總是估計(jì)CSS3網(wǎng)頁字體，它真是盛極一時的很棒的字體庫，其中包括數(shù)百種獨(dú)特的圖標(biāo)。這些可以顯示為特征的圖標(biāo)，或者甚至字形上的用戶接口按鈕。您還可以享受多樣化選擇。
平包圖標(biāo)UI的免費(fèi)贈品開源字體
但矢量圖標(biāo)正在擴(kuò)大遠(yuǎn)遠(yuǎn)超出了普通字體為基礎(chǔ)的解決方案。一起來看看這些圖片圖標(biāo)和貨幣圖標(biāo)，它們都是iOS應(yīng)用程序中的樣式。這些都是使用純CSS代碼生成的并可隨意調(diào)整大小。除此之外還有類似的案例----我只能想象這一趨勢發(fā)展的速度有多快。
另一點(diǎn)，有關(guān)的矢量圖標(biāo)是利用SVG文件類型。這些自然向量不包含像素，但坐標(biāo)軸可以解釋如何繪制圖像。你可以閱讀更多文章以便深入了解可擴(kuò)展的SVG圖像。這些想法大部分都還很新，但絕對具有發(fā)展的潛力。
進(jìn)入2014
每年我都會瀏覽一些使用這些設(shè)計(jì)手法所設(shè)計(jì)的具有代表性的網(wǎng)站。我不認(rèn)為這是趨勢的預(yù)測，而更像是一種發(fā)展模式。網(wǎng)頁設(shè)計(jì)師是非常有創(chuàng)意和最有才華的藝術(shù)家，它們將將打破設(shè)計(jì)極限，將更多猜想變成現(xiàn)實(shí)。以下是值得關(guān)注的一些可能會貫穿整個2014年的網(wǎng)頁設(shè)計(jì)發(fā)展趨勢。
定制數(shù)字媒體
我第一次開始網(wǎng)站建設(shè)是使用Adobe Flash創(chuàng)建的MP3播放器。實(shí)際上這個播放器不太支持＆#106avascript，因?yàn)樵S多瀏覽器都沒有安裝＆#106avascript腳本，并沒有強(qiáng)大的開源庫（例如：MediaElement.js）。
視頻播放器也一樣，你會發(fā)現(xiàn)在YouTube上也是在Adobe Flash + ActionScript中創(chuàng)建的。值得慶幸的是多年的技術(shù)進(jìn)步提供了一個更好的解決方案，集成HTML5視頻使用＆#106avascript / Flash，該MediaElement.js腳本可以稱呼鏡像經(jīng)典的YouTube視頻播放器，還有許多其他的皮膚可以進(jìn)行切換。
MediaElement的腳本W(wǎng)indows媒體播放器的皮膚
該播放器將與HTML5/CSS3/JS在支持的瀏覽器來構(gòu)建。由于HTML5并不能支持所有的腳本，舊的瀏覽器無法支持Flash / Silverlight程序，只能用其他同類的程序來代替。隨著時間的推移，我希望這些新媒體解決方案將成為音頻/視頻播放的標(biāo)準(zhǔn)解決方案。
互動式webapps
Web 2.0這種趨勢從用戶數(shù)據(jù)集開始。數(shù)據(jù)庫和服務(wù)器性能的提高事我們的網(wǎng)站變得更加突出。我能想象在不久的未來某一個階段，HTML5/CSS3/JS Web應(yīng)用程序?qū)⒎⻊?wù)于不同的行業(yè)。
網(wǎng)絡(luò)愛好者往往首先嘗試這些小的網(wǎng)頁APP。我覺得像項(xiàng)目InstantName或GenerateWP。但是想象一下，這些應(yīng)用程序?qū)?yīng)用到房地產(chǎn)，股票和債券，烹飪，制造等領(lǐng)域，如果有一天這些想法被實(shí)現(xiàn)，我們可以看到設(shè)計(jì)師構(gòu)建的HTML5網(wǎng)站會看起來像原生態(tài)的Android或iOS應(yīng)用。
活潑的頁面背景
如果在網(wǎng)頁背景設(shè)計(jì)中使用CSS3將會有多酷？那么視差風(fēng)格的元素使用動態(tài)向量或PNG圖片？我們已經(jīng)可找到以大量使用全屏圖像或視頻的網(wǎng)站---而這可能僅僅是一個更偉大的設(shè)計(jì)的開始。
如果設(shè)計(jì)師對獨(dú)特的背景情有獨(dú)鐘，我們可能會邁進(jìn)一個更廣闊的新世界。讓一個網(wǎng)站在全世界范圍內(nèi)訪問都暢通無阻依然是一個丞待解決的問題，但更集中的W3C標(biāo)準(zhǔn)將讓著想法變得更加容易實(shí)現(xiàn)。
寫在最后：
2013年是令人震驚和歡樂的一年，很多優(yōu)秀的設(shè)計(jì)讓我們大開眼界的同時也給我們節(jié)省了不少的設(shè)計(jì)時間并給我們帶來了更多的設(shè)計(jì)靈感，2014年我們希望更多的令人驚奇的設(shè)計(jì)會出現(xiàn)在我們的眼前。
,