2013-1-31 藍藍設計的小編
轉載藍藍設計( paul-jarrel.com )是一家專注而深入的設計機構 ,為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源: http://www.cnblogs.com/lhb25/archive/2013/02/01/web-design-trends-in-2013.html
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在過去的幾年里,我們看到建設網站的方式發生了巨大的變化。隨著瀏覽器對 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 標準。
此外,如果您有任何意見或建議,歡迎留言和大家一起交流。