Web Design Trend 2011-2014
Download as pptx, pdf1 like358 views
该文档回顾了2011-2014年间的网页设计趋势，强调了移动端适配、响应式设计和扁平化设计的重要性。设计师逐渐采用贬罢惭尝5和颁厂厂3替代贵濒补蝉丑，运用信息图和大幅照片提升视觉吸引力。同时，社交媒体集成、固定导航、视频内容的使用等也成为设计的热门趋势。
Web Design Trend 2011-2014
- 1. Web Design Trend 2011-2014 報告人：古佳禾 2014/07/31
- 2. 2011 Mobile Ready全球手機市場發展以智慧型手機成長 最為快速，這意味著你的設計需要考 慮更多的設備。 Designing for Touch Screens, Not Mice觸屏技術應用越來越廣泛，觸屏設備隨處可見。這意味著，你的導航設計不再只是鼠標導航，你 必須要要考慮你的設計適合觸屏設備。 當鼠標hover的時候鏈接會變得高亮，然而觸屏沒有所謂的hover。你將會在設計中如何向觸屏設 備訪客展示鏈接？ There’s no hovering in touchscreen
- 3. 2011 More HTML5 & CSS3 在過去的幾年設計師已經開始關注和使用CSS3+HTML5， 但在2011年CSS3+HTML5將會得到更廣泛的應用。 設計師會在一些可用的地方使用HTML5替代Flash，使網站變得簡單運 行更快速。 然而，目前HTML5還不能夠取代Flash，Flash的某些效果HTML5暫時 還不能夠實現。 you will slowly step away from Flash and embrace HTML5 CSS3的應用越來越廣，在某些地方甚至超越PhotoShop， 因為利用CSS3來實現文字陰影、圖片圓角和圖片透明。
- 7. 2011 Parallax Scrolling 視差滾動是使用圖層概念來呈現一個3維 空間的技巧，在設計上可以通過一些簡單的CSS技巧 或jQuery插件來實現。運用於網頁設計的次要元素 中可以起到很好的效果：如header、footer或者背景。 不過最好不要運用於網站導航，這樣可能會讓使用 者感到不知所措。 案例：Putzengel http://www.putzengel.at/ 它是電腦圖學中一種特別的滑動特效技巧，首 次出現於1982年一款叫Moon Patrol的遊戲， 主要是用來摸擬3D效果。滾動視差的原理是 把背景圖片的移動速度放慢，讓前景圖片移動 較快，因而在2D畫面上產生多層次的佈景深 度。 Depth Perception in Web Design
- 8. 2011 Circles 過去設計圓形的網頁元件需要使用到PS等 工具，但隨著CSS3的技術成熟，製作出圓 形視覺效果變得更加容易，可以快速的建 立出圓形的元素於網頁中，這樣的便利性 就推廣開來了。
- 10. 2011 Circles 過去設計圓形的網頁元件需要使用到PS等 工具，但隨著CSS3的技術成熟，製作出圓 形視覺效果變得更加容易，可以快速的建 立出圓形的元素於網頁中，這樣的便利性 就推廣開來了。 圓形的設計可以用於：導航連結、footer 等重要的區塊等都十分的受到歡迎。最重 要的是在視覺上，圓形可以吸引注意，並 且帶給人們愉快的感覺。 encourage eye contact from your visitors hold a delightful effect
- 11. 2012 Responsive Web Desig 有84%的智慧型手機使用 者使用他們的行動裝置瀏 覽網頁 2010年Ethan Marcotte 在 A List Apart 的文章中 提出了Responsive Web Design (RWD)這個概念。讓網頁可以隨著螢幕環 境的變化去適應及調節出最佳的呈現畫面。
- 16. 2012 Typography & Custom Font Face 未來「有個性的字體」將成為網頁設計的趨勢，所謂 有個性的字體是獨樹一格，可以自成一個宇宙。不是 電腦中已有的標準化字體。設計師正開始找尋能夠為 設計增添一些個性和獨特性的字體。
- 17. 2013 Skeuomorphism will show its a 依據過去的線索來為新技術服務並沒法太大地改進我們的思維方式。比如，我 們不需要一個可視化的書架才知道那裡有電子書要讀，看電子書的封面我們就 知道那是什麼了。 Metro UI 是微軟基於設計語言設計的一種 介面風格，此設計已被用於行動 作 業 系 統 Windows Phone 、 Windows 8、Xbox 360等多款微 軟產品。
- 19. Don’t Forget Less is More
- 22. 2014 扁平的設計是在2014年出現的最大的趨勢之一， 蘋果漸漸拋棄擬真化設計，轉向扁平化美學， iOS7 即為最佳代表。 Flat Design 扁平化設計正是通過放棄任何附加效果的方式，創建了 一個「零」3D 屬性的設計方案。在這裡，沒 有陰影效果、斜角、浮雕、漸變等其他方法來幫助元素 產生相對於螢幕的凹凸效果。不帶有羽化邊緣以及陰影 效果的圖標和UI元素也都是看起來非常鮮明。
- 23. 2014 Videos in place of tex 2014 年在網站上會開始看到網站上都內 嵌影片，特別是在前述所說的大面積 圖像區塊，網站也可採用影片放在 它的官網首頁。 撇除需要下載更多的數據的缺點外，影 片比文字還能更有效地說明資訊含 量較高、較複雜的新科技產品，其製 作和傳遞分享越來越方便，因此，以影 片取代長篇大論的文字介紹不失為一個 很實用的點子。 如果影片會自動解說資訊，為什麼要費神閱讀？
- 24. 2014 Simple color schemes 簡單的意思是指整個網站 只使用一兩種顏色，在設 計與藝術領域中，黑與白 被視作無色。 這樣簡單的 配 色 似 乎 有 些 許 受 到 受 扁平化設計的影響。
- 25. Summary
- 26. 2014 2012 2011 結 構 外 觀 動 作 Responsive Web Design 2013 2014 2011 Flat Design Infographic-like Videos in place of text Simple color schemes Fixed-Position Navigatio Infinite Scrolling Typography Custom Font Faces
- 27. King content still keep its crown.
Editor's Notes
- #4: 它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務（plug-in-based rich internet application，RIA)，並且提供更多能有效增強網路應用的標準集。 2011年兩者會各自保持屬於自己的位置。不過2010年以前網頁設計師濫用Flash的現象會慢慢減少。現在很少設計師會整個網站都是用Flash設計，
- #5: 數據視覺化 圖像資訊
- #6: 当然背景图的色彩、内容等都十分讲究，任何情况下都不要破坏用户的体验，不然再漂亮的照片也是枉然。图片类型趋向於一些比较柔和、略带透明的一类，不要影响到网站文字的阅读，讲究协调，易於阅读。
- #7: 费兹定律
- #8: 搁别蹿：丑迟迟辫://飞飞飞.尘谤尘耻.肠辞尘.迟飞/2011/10/19/辫补谤补濒濒补虫-蝉肠谤辞濒濒颈苍驳/
- #9: 但是在颁厂厂的加持之下，现在设计师可以用语法简单的控制圆角与阴影
- #11: 但是在颁厂厂的加持之下，现在设计师可以用语法简单的控制圆角与阴影
- #17: Web設計人員和開發者都很注意一個網站的圖片和Javascript，這個趨勢會驅動字體在網頁設計中的地位越來越重要，從@font-face到服務器默認serve font（字體），這些字體往常的受重視度經常比圖片和腳本輕。但2012就不會了。而且字體和排版是基於內容天生的，會比在圖片和腳本方面下功夫更易獲得回應。 網頁設計公司 Stuff and Nonsense 的新網v站設計是很好的例子。儘管可以使用標準襯線字體（serif）或無襯線字體（sans serif）如?Helvetica，取而代之的是，他們選擇了獨特的襯線字體，來保持專業性但又帶點個性。未來，將拋棄簡單與氾濫使用的字體，在網頁設計中更多地運用有個性的字體。
- #18: 在蘋果向其他公司展示它們“擬真化”的設計美學時，我們已經看到了新希望，比如微軟的Metro， 所以2013的設計趨勢是更多的公司將更注重跟隨自己的設計靈感，而不是尾隨“擬真化”設計。
- #19: 在國畫中，有一句描述謀篇佈局的話比較經典，叫做“計白當黑”，所謂“疏可走馬，密不透風”，就是說空著的地方和著了墨的地方一樣，都是整體的組成部分。這是書家畫手所孜孜追求的。可見“留白”是非常重要的。有些畫，儘管畫得不錯，但看起來就是不舒服，原因就是沒有重視“留白”。 其實在排版佈局中，我們經常在不知不覺地利用著留白。試想如果頁面上充滿了圖片和文字，一點空隙都不留，那就根本談不上韻律。
- #21: 在國畫中，有一句描述謀篇佈局的話比較經典，叫做“計白當黑”，所謂“疏可走馬，密不透風”，就是說空著的地方和著了墨的地方一樣，都是整體的組成部分。這是書家畫手所孜孜追求的。可見“留白”是非常重要的。有些畫，儘管畫得不錯，但看起來就是不舒服，原因就是沒有重視“留白”。 其實在排版佈局中，我們經常在不知不覺地利用著留白。試想如果頁面上充滿了圖片和文字，一點空隙都不留，那就根本談不上韻律。
- #24: 以影片取代文字的基本精神是： 如果影片會自動解說資訊，為什麼要費神閱讀？
- #25: 一些时下上线的网站使用很少的色彩，甚至放弃所有的顏色，只用白、黑，两者之间的顏色都相当流行，再加入一点点的顏色作為小小的点缀，例如加入红色来吸引目光。所有的顏色使用都必须非常小心，使用正确才能增加影响力和张力。
- #28: 以内容為导向