轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 來(lái)源： http://www.cnblogs.com/lhb25/archive/2013/02/01/web-design-trends-in-2013.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請(qǐng)點(diǎn)這里  

在過(guò)去的幾年里，我們看到建設(shè)網(wǎng)站的方式發(fā)生了巨大的變化。隨著瀏覽器對(duì) HTML5/CSS3 Web 標(biāo)準(zhǔn)的支持的不斷增強(qiáng)，越來(lái)越多的用戶已經(jīng)轉(zhuǎn)移到移動(dòng)平臺(tái)。在 設(shè)計(jì)界，有很多獨(dú)特的想法，每隔一段時(shí)間就發(fā)生變化！

 　　在這篇文章中，我想介紹一些我們已經(jīng)看到正不斷變化的趨勢(shì)。其中， 許多設(shè)計(jì)理念已經(jīng)存在了很長(zhǎng)一段時(shí)間。 但是，我認(rèn)為在2013年里，這些獨(dú)特的想法將會(huì)更加的蓬勃發(fā)展。 網(wǎng)上提供了很多可以免費(fèi)下載的開(kāi)源項(xiàng)目和用戶界面 ，這樣設(shè)計(jì)人員可以專注于自己的領(lǐng)域。

響應(yīng)設(shè)計(jì)的理念并不僅僅只網(wǎng)站能夠縮放到更小的尺寸，設(shè)計(jì)師的意識(shí)形態(tài)也應(yīng)該發(fā)生改變 。這里向大家推薦  DesignShack  上的一篇文章，其中談到了這個(gè)想法。

　　往往更容易規(guī)劃最重要的界面元素，讓他們排布成為一個(gè)移動(dòng)的布局。 如果這些元素不合適這樣，你將不得不刪除一些。 同時(shí)，你可以規(guī)劃布局將如何應(yīng)對(duì)的窗口變大。 您將有空間包含一個(gè)側(cè)邊欄，也可能是2個(gè)，以及許多其它的頁(yè)面元素。

 

 

　　A List Apart 上面有 一本書叫《Mobile First 》 ， 它是由  Luke Wroblewski  編寫的，他帶來(lái)了很多和這里同樣的想法。一次性制作移動(dòng)優(yōu)先的 設(shè)計(jì)往往很困難，可以從小的嘗試開(kāi)始，慢慢改進(jìn)。

 

 

許多社交媒體網(wǎng)站已經(jīng)開(kāi)始應(yīng)用無(wú)限滾動(dòng)效果到信息面板、時(shí)間線和用戶訂閱的內(nèi)容里。這種效果是由于 Twitter 和 Tumblr 獨(dú)特的布局風(fēng)格而流行起來(lái)的， 最近  Pinterest的  也在其主頁(yè)上采用了這種無(wú)限的頁(yè)面滾動(dòng)。

 

　　

　　設(shè)計(jì)人員可能會(huì)問(wèn)，為什么無(wú)限滾動(dòng)非常有用？首先 ，它提供了一個(gè)無(wú)縫的界面，無(wú)需重新加載頁(yè)面。 但是，用戶要為不同的頁(yè)面生成鏈接就困難了， 而這一切是真實(shí)存在的問(wèn)題的，所以說(shuō)并不是每一個(gè)網(wǎng)站都適合使用 無(wú)限滾動(dòng)。 我覺(jué)得無(wú)限滾動(dòng)最好的地方是，你可以不斷加載信息而又不需要一個(gè)特定的分頁(yè)樣式。

　　例如，博客歸檔文件就不合適使用無(wú)限滾動(dòng)，因?yàn)樽x者可能會(huì)想直接進(jìn)入到第15或25頁(yè)，而不是向下滾動(dòng)多次。 但是 Tumblr 以及 Pinterest 卻非常適合使用，因?yàn)檫@些信息是動(dòng)態(tài)的，不斷變化的，使用  Ajax 方式加載數(shù)據(jù)進(jìn)來(lái)會(huì)讓用戶覺(jué)得更加舒服 。

空白和極簡(jiǎn)主義

　　極簡(jiǎn)主義已經(jīng)是討論了很多年的話題了， 早已經(jīng)是網(wǎng)頁(yè)設(shè)計(jì)的一部分，但是也在不斷進(jìn)化，以適應(yīng)這個(gè)新的發(fā)展趨勢(shì)。極簡(jiǎn)主義的設(shè)計(jì)能夠讓用戶關(guān)注 主要內(nèi)容。 但是，即使內(nèi)容非常密集的網(wǎng)站，可以利用較小的區(qū)域中的空白以釋放空間。

 

　　

　　另一個(gè)大的誤解是，認(rèn)為空白設(shè)計(jì)應(yīng)該是白色的。 但事實(shí)上黑色風(fēng)格的布局也是有空白的，因此這個(gè)“空白”的意思其實(shí)應(yīng)理解為“空的區(qū)域”。 在頁(yè)面中留下一些空間，讓用戶的視覺(jué)能夠很好的分離內(nèi)容， 能夠更容易消化內(nèi)容，給用戶留下美好的第一印象。

 

 

　　下面向大家推薦一批非常優(yōu)秀的簡(jiǎn)約風(fēng)格網(wǎng)站作品案例，相信你能從中獲得很多的設(shè)計(jì)靈感：

 

自然的設(shè)計(jì)元素

　　CSS3 給網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域帶來(lái)了如此多的變化： 通過(guò) @font-face 可以載入更多自定義字體以及關(guān)鍵幀動(dòng)畫都展示出 CSS 更先進(jìn)的功能。 即使是最基本的 CSS3 屬性已影響了自然的設(shè)計(jì)布局的使用。

　　這些元素包括具有圓角，盒陰影以及背景漸變等等，在以前這些效果都是需要圖片來(lái)實(shí)現(xiàn)的 ， 現(xiàn)在你完全可以只使用 CSS3 代碼生成這些效果。 2013年，將有更多使用圖片的網(wǎng)頁(yè)布局被 CSS 屬性取代。

 

 

　　我一直很喜歡 Dabblet 這個(gè)網(wǎng)站，它為每個(gè)新頁(yè)面都使用了背景漸變效果。這個(gè) WEB 應(yīng)用程序可以和 GitHub Gist 框架結(jié)合使用，允許開(kāi)發(fā)人員實(shí)現(xiàn)構(gòu)建 HTML/CSS 原型。整個(gè)界面是基于 CSS3 實(shí)現(xiàn)，你可能會(huì)注意到在短短幾年的時(shí)間，Web 領(lǐng)域已經(jīng)發(fā)生了很大的變化。

大照片背景

　　我以前向大家分享過(guò)很多 大照片背景在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用的案例，這種應(yīng)用趨勢(shì)并沒(méi)有放緩。 事實(shí)上，我看到更多的網(wǎng)站使用這種設(shè)計(jì)風(fēng)格。這種 網(wǎng)站的布局可以切合一個(gè)非常具體的感覺(jué)或情感上的顏色和背景樣式。 大照片是帶給用戶特殊情感的另外一種方式來(lái)。

　　然而，我認(rèn)為這種趨勢(shì)不是適合每個(gè)人。 正確的情況是，你的網(wǎng)頁(yè)上有足夠的空間，大的背景下能帶給訪客外形美觀的視覺(jué)感受。 最大的問(wèn)題是要讓布局適合內(nèi)容，內(nèi)容要清晰可讀。 這就是為什么大背景圖片的最佳應(yīng)用場(chǎng)景通常是在目標(biāo)頁(yè)（著陸頁(yè)）或一些公司和機(jī)構(gòu)的網(wǎng)站。

 

 

　　這種獨(dú)特的風(fēng)格也非常適合用于設(shè)計(jì)作品集網(wǎng)站和個(gè)人網(wǎng)站，可以與你的訪客提供一個(gè)更深層次的聯(lián)系。在 您的網(wǎng)站上的訪客會(huì)好奇你是誰(shuí)，你做了什么。 提供一張照片，展示了一個(gè)簡(jiǎn)短的自我介紹，讓訪客知道你是誰(shuí)，那將是非常不錯(cuò)的。 大照片也可用于顯示您的創(chuàng)造性工作，比如插畫，矢量圖片，甚至是你自己的照片。

 

 

　眾多優(yōu)秀的 CSS 框架讓 Web 開(kāi)發(fā)人員的編碼時(shí)間大大縮短， 這意味著在短短的幾分鐘內(nèi)，使用合適的工具，你可以建立一個(gè)完整的兩列或三列的網(wǎng)站布局。 這也意味著使用更少的 HTML 標(biāo)簽就可以實(shí)現(xiàn)相同的效果。

　　構(gòu)建代碼簡(jiǎn)潔的網(wǎng)站意味著一切都更精簡(jiǎn)，要少得多。 這是好事，因?yàn)楦〉奈募叽缫馕吨芨斓膹姆?wù)器加載。 另外，簡(jiǎn)潔的代碼使得編輯布局的時(shí)候也能迅速而簡(jiǎn)潔，沒(méi)有任何困難。多 學(xué)習(xí)其他優(yōu)秀的開(kāi)發(fā)人員的經(jīng)驗(yàn)，能夠幫助你編寫更優(yōu)美的 HTML & CSS 代碼。

 

 

　　我向大家推薦的兩個(gè)最好的資源—— Github  以及  Stack Overflow 。前者 有很多開(kāi)源的源代碼，你可以下載并應(yīng)用到實(shí)際的網(wǎng)站項(xiàng)目中。 后者是一個(gè)非常有用的問(wèn)答社區(qū)，開(kāi)發(fā)者在上面互相尋求幫助。 這些網(wǎng)站提供許多的好材料，幫助你編寫干凈，可讀的代碼。

寫在最后

　　每年的年初，我們一定都會(huì)發(fā)掘出一些網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的新模式和設(shè)計(jì)理念。網(wǎng)絡(luò)讓設(shè)計(jì)師們能夠相互進(jìn)行 信息共享和技術(shù)討論，不分技術(shù)水平的高低， 進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域不分早晚，現(xiàn)在就是最好的時(shí)代。

　　我上面列舉的這些趨勢(shì)是對(duì)2013年網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的一些推測(cè)，并不一定每個(gè)都能在今年得到很好的傳播和發(fā)展 ，讓自己不落后的 最好的辦法積極關(guān)注新趨勢(shì)，閱讀最 新的博客文章和教程，掌握的 Web 標(biāo)準(zhǔn)。 此外，如果您有任何意見(jiàn)或建議，歡迎留言和大家一起交流。