《前沿視點》——2013年最值得關注的網頁設計流行趨勢

  在過去的幾年裏,我們看到建設網站的方式發生了巨大的變化。隨着瀏覽器對 HTML5/CSS3 Web 標準的支持的不斷增強,越來越多的用戶已經轉移到移動平臺。在設計界,有很多獨特的想法,每隔一段時間就發生變化!

   在這篇文章中,我想介紹一些我們已經看到正不斷變化的趨勢。其中,許多設計理念已經存在了很長一段時間。但是,我認爲在2013年裏,這些獨特的想法將會更加的蓬勃發展。網上提供了很多可以免費下載的開源項目和用戶界面,這樣設計人員可以專注於自己的領域。

移動優先的設計

  響應設計的理念並不僅僅只網站能夠縮放到更小的尺寸,設計師的意識形態也應該發生改變。這裏向大家推薦 DesignShack 上的一篇文章,其中談到了這個想法。

  往往更容易規劃最重要的界面元素,讓他們排布成爲一個移動的佈局。如果這些元素不合適這樣,你將不得不刪除一些。同時,你可以規劃佈局將如何應對的窗口變大。您將有空間包含一個側邊欄,也可能是2個,以及許多其它的頁面元素。

 

 

  A List Apart 上面有一本書叫《Mobile First它是由 Luke Wroblewski 編寫的,他帶來了很多和這裏同樣的想法。一次性製作移動優先的設計往往很困難,可以從小的嘗試開始,慢慢改進。

  移動網站設計和響應式網站設計的優秀案例:

 

無限滾動

  許多社交媒體網站已經開始應用無限滾動效果到信息面板、時間線和用戶訂閱的內容裏。這種效果是由於 Twitter 和 Tumblr 獨特的佈局風格而流行起來的,最近 Pinterest的 也在其主頁上採用了這種無限的頁面滾動。

 

  

  設計人員可能會問,爲什麼無限滾動非常有用?首先,它提供了一個無縫的界面,無需重新加載頁面。但是,用戶要爲不同的頁面生成永久鏈接就困難了,而這一切是真實存在的問題的,所以說並不是每一個網站都適合使用無限滾動。我覺得無限滾動最好的地方是,你可以不斷加載信息而又不需要一個特定的分頁樣式。

  例如,博客歸檔文件就不合適使用無限滾動,因爲讀者可能會想直接進入到第15或25頁,而不是向下滾動多次。但是 Tumblr 以及 Pinterest 卻非常適合使用,因爲這些信息是動態的,不斷變化的,使用 Ajax 方式加載數據進來會讓用戶覺得更加舒服

空白和極簡主義

  極簡主義已經是討論了很多年的話題了,早已經是網頁設計的一部分,但是也在不斷進化,以適應這個新的發展趨勢。極簡主義的設計能夠讓用戶關注主要內容。但是,即使內容非常密集的網站,可以利用較小的區域中的空白以釋放空間。

 

  

  另一個大的誤解是,認爲空白設計應該是白色的。但事實上黑色風格的佈局也是有空白的,因此這個“空白”的意思其實應理解爲“空的區域”。在頁面中留下一些空間,讓用戶的視覺能夠很好的分離內容,能夠更容易消化內容,給用戶留下美好的第一印象。

 

 

  下面向大家推薦一批非常優秀的簡約風格網站作品案例,相信你能從中獲得很多的設計靈感:

 

自然的設計元素

  CSS3 給網頁設計領域帶來了如此多的變化:通過 @font-face 可以載入更多自定義字體以及關鍵幀動畫都展示出 CSS 更先進的功能。即使是最基本的 CSS3 屬性已影響了自然的設計佈局的使用。

  這些元素包括具有圓角,盒陰影以及背景漸變等等,在以前這些效果都是需要圖片來實現的現在你完全可以只使用 CSS3 代碼生成這些效果。2013年,將有更多使用圖片的網頁佈局被 CSS 屬性取代。

 

 

  我一直很喜歡 Dabblet 這個網站,它爲每個新頁面都使用了背景漸變效果。這個 WEB 應用程序可以和 GitHub Gist 框架結合使用,允許開發人員實現構建 HTML/CSS 原型。整個界面是基於 CSS3 實現,你可能會注意到在短短几年的時間,Web 領域已經發生了很大的變化。

大照片背景

  我以前向大家分享過很多大照片背景在網頁設計中應用的案例,這種應用趨勢並沒有放緩。事實上,我看到更多的網站使用這種設計風格。這種網站的佈局可以切合一個非常具體的感覺或情感上的顏色和背景樣式。大照片是帶給用戶特殊情感的另外一種方式來。

  然而,我認爲這種趨勢不是適合每個人。正確的情況是,你的網頁上有足夠的空間,大的背景下能帶給訪客外形美觀的視覺感受。最大的問題是要讓佈局適合內容,內容要清晰可讀。這就是爲什麼大背景圖片的最佳應用場景通常是在目標頁(着陸頁)或一些公司和機構的網站。

 

 

  這種獨特的風格也非常適合用於設計作品集網站和個人網站,可以與你的訪客提供一個更深層次的聯繫。在您的網站上的訪客會好奇你是誰,你做了什麼。提供一張照片,展示了一個簡短的自我介紹,讓訪客知道你是誰,那將是非常不錯的。大照片也可用於顯示您的創造性工作,比如插畫,矢量圖片,甚至是你自己的照片。

  在網頁中應用大圖片作爲背景的優秀案例:

 

簡潔的源代碼

  衆多優秀的 CSS 框架讓 Web 開發人員的編碼時間大大縮短,這意味着在短短的幾分鐘內,使用合適的工具,你可以建立一個完整的兩列或三列的網站佈局。這也意味着使用更少的 HTML 標籤就可以實現相同的效果。

  構建代碼簡潔的網站意味着一切都更精簡,要少得多。這是好事,因爲更小的文件尺寸意味着能更快的從服務器加載。另外,簡潔的代碼使得編輯佈局的時候也能迅速而簡潔,沒有任何困難。多學習其他優秀的開發人員的經驗,能夠幫助你編寫更優美的 HTML & CSS 代碼。

 

 

  我向大家推薦的兩個最好的資源——Github 以及 Stack Overflow。前者有很多開源的源代碼,你可以下載並應用到實際的網站項目中。後者是一個非常有用的問答社區,開發者在上面互相尋求幫助。這些網站提供許多的好材料,幫助你編寫乾淨,可讀的代碼。

寫在最後

  每年的年初,我們一定都會發掘出一些網頁設計領域的新模式和設計理念。網絡讓設計師們能夠相互進行信息共享和技術討論,不分技術水平的高低,進入網頁設計領域不分早晚,現在就是最好的時代。

  我上面列舉的這些趨勢是對2013年網頁設計領域的一些推測,並不一定每個都能在今年得到很好的傳播和發展,讓自己不落後的最好的辦法積極關注新趨勢,閱讀最新的博客文章和教程,掌握最新的 Web 標準。此外,如果您有任何意見或建議,歡迎留言和大家一起交流。

 

本文鏈接:2013年最值得關注的網頁設計趨勢(譯自:WDL

編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

hide

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章