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