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

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

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

移動優先的設計

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

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

 

 

　　A List Apart 上面有一本書叫《Mobile First》，它是由 Luke Wroblewski 編寫的，他帶來了不少和這裏一樣的想法。一次性製做移動優先的設計每每很困難，能夠從小的嘗試開始，慢慢改進。

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

• 經典網頁設計：50個優秀的移動網站設計
• 學習手機網站設計和製做的25個優秀案例
• 精美的 iPhone 和 Android 應用程序網站
• 推薦20個精美的響應式設計網站設計做品
• 85個優秀的國外響應式網頁設計做品範例
• 25佳很精美的流體和響應式佈局設計案例

 

無限滾動

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

 

　　

　　設計人員可能會問，爲何無限滾動很是有用？首先，它提供了一個無縫的界面，無需從新加載頁面。可是，用戶要爲不一樣的頁面生成永久連接就困難了，而這一切是真實存在的問題的，因此說並非每個網站都適合使用無限滾動。我以爲無限滾動最好的地方是，你能夠不斷加載信息而又不須要一個特定的分頁樣式。

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

空白和極簡主義

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

 

　　

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

 

 

　　下面向你們推薦一批很是優秀的簡約風格網站做品案例，相信你能從中得到不少的設計靈感：

• 30個極簡主義風格的國外優秀網站做品
• 20佳優秀的國外簡約風格網頁設計做品
• 15個清爽簡約風格的 HTML5 網站做品
• 20個精美的簡約風格網站設計做品欣賞
• 25個極簡風格優秀做品集網頁設計案例
• 分享40款簡約風格的 WordPress 主題

 

天然的設計元素

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

　　這些元素包括具備圓角，盒陰影以及背景漸變等等，在之前這些效果都是須要圖片來實現的，如今你徹底能夠只使用 CSS3 代碼生成這些效果。2013年，將有更多使用圖片的網頁佈局被 CSS 屬性取代。

 

 

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

大照片背景

　　我之前向你們分享過不少大照片背景在網頁設計中應用的案例，這種應用趨勢並無放緩。事實上，我看到更多的網站使用這種設計風格。這種網站的佈局能夠切合一個很是具體的感受或情感上的顏色和背景樣式。大照片是帶給用戶特殊情感的另一種方式來。

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

 

 

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

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

• 大背景圖片在網頁設計的20個精彩應用
• 25個以全屏照片爲背景的精美網頁做品
• 20佳應用大照片作背景的優秀網站案例
• 大背景在網頁設計中應用20個優秀範例
• 20個應用了大圖片的優秀網站設計案例
• 大背景在網頁設計中應用的30優秀案例

 

簡潔的源代碼

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

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

 

 

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

寫在最後

　　每一年的年初，咱們必定都會發掘出一些網頁設計領域的新模式和設計理念。網絡讓設計師們可以相互進行信息共享和技術討論，不分技術水平的高低，進入網頁設計領域不分遲早，如今就是最好的時代。

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

 

本文連接：2013年最值得關注的網頁設計趨勢（譯自：WDL）

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

hide