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來實現文字陰影、圖片圓角和圖片透明。

4. 2011
QR: Quick Response
這個方形的條形碼被稱為QR，使用你的手機拍攝
一張唯一的條形碼的照片，手機上讀取QR的APP就
會打開條形碼相關的網站。以及你可以將QR應用
到很多地方。應用QR到你的網站，目的是讓瀏覽
者擁有一個你的移動網頁的快捷方式。
Infographic-like
這是一個曾經被用於教育目的，之後反而
取得了多年來的普及有很大的趨勢。信息
圖表的視覺興趣添加到您的網站的內容，
使得原本枯燥乏味的統計數據看起來原始
和創造性。

5. 2011
Large Photographic Backgroun
這些背景圖像一般是高分辨率，覆蓋這個網站。高清照片是
一個迅速抓住你的讀者的好方式，可以產生極具衝擊力的視
覺效果-遊客的視線會不自覺地落在寬大的背景上。

6. 這已不是像素可以描繪的距離 無限寬敞的延伸了我們的想像

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的技術成熟，製作出圓
形視覺效果變得更加容易，可以快速的建
立出圓形的元素於網頁中，這樣的便利性
就推廣開來了。

9. 案例： http://dotmick.com/

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)這個概念。讓網頁可以隨著螢幕環
境的變化去適應及調節出最佳的呈現畫面。

12. 2012
Social Media Features
隨著社群網站的成長，分享訊息的按鈕變成是網站的必
需品，且需要確保分享按鈕是讓使用者方便使用的。
為你的網站集成更多的社交媒體網站，甚至是一些新網
站，在文章的最後放置分享按鈕，預計將會是一個趨勢。
當然也不要限制止有Facebook和Twitter，可以多放4~5
個常用的社群分享按鈕。

13. 2012
Fixed-Position Navigation
這可以大幅提升網站的性能甚至更易於融入整個頁面佈局。這種設計鎖定導航和鏈
結/logo在固定的位置，即使用戶固定頁面也能快速通過導航訪問其他頁面。
Time is Money

14. 2012
Big Footer
Oversized Logos/Headers
頁腳中的作用將更加突
出，，這將是超大更有創
意（圖形，醒目的設計，
增加內容），並包含更多
的個人信息。
這將有助於讓網站更加難忘和令人印象深刻的。一個Oversized
Header將很容易執行在首頁上的功能。

15. 2012
Big Vector Art
在網站使用超大的吉祥物打造你的品牌。幾年前你很難在網
路品牌中找到使用大量向量圖的案例，不過在近年的發展下，
越來越多的人喜歡用向量的插圖代表自己網頁的風格，甚至
能為品牌帶來明顯的識別!

16. 2012
Typography & Custom Font Face
未來「有個性的字體」將成為網頁設計的趨勢，所謂
有個性的字體是獨樹一格，可以自成一個宇宙。不是
電腦中已有的標準化字體。設計師正開始找尋能夠為
設計增添一些個性和獨特性的字體。

17. 2013
Skeuomorphism will show its a
依據過去的線索來為新技術服務並沒法太大地改進我們的思維方式。比如，我
們不需要一個可視化的書架才知道那裡有電子書要讀，看電子書的封面我們就
知道那是什麼了。
Metro UI
是微軟基於設計語言設計的一種
介面風格，此設計已被用於行動
作 業 系 統 Windows Phone 、
Windows 8、Xbox 360等多款微
軟產品。

18. 2013
White space
網頁上的留白部分，同其它頁面內容如文本、圖片、動畫一樣，都是設計者在製
作網頁時要全面審慎的！
在國畫中，有一句描述謀篇佈局
的話比較經典，叫做“計白
當黑”，所謂“疏可走馬，
密不透風”，就是說空著的
地方和著了墨的地方一樣，都是
整體的組成部分。這是書家畫手
所孜孜追求的。可見“留白”是非
常重要的。有些畫，儘管畫得不
錯，但看起來就是不舒服，原因
就是沒有重視“留白”。

19. Don’t Forget Less is More

20. 2013
White space
網頁上的留白部分，同其它頁面內容如文本、圖片、動畫一樣，都是設計者在製
作網頁時要全面審慎的！
提升到藝術的高度來看待“留白”，
留白既可以給人帶來心理上的放鬆，也
可以給人帶來緊張與節奏。通過這種手
段可以向瀏覽者傳達出設計者的訴求。
利用留白的體量感來使頁面佈局平
衡，在一種不平衡中營造平衡，這
樣就會使頁面生動起來。我們
應該在網頁中通過留白的作用，使
整個內容排布得鬆緊有度，給人以
跌宕起伏之感。

21. 2013
Infinite Scrolling
人們習慣「滾動」來閱讀、搜尋資訊，現在網站使用更多的設計
技巧、例如畫面更多的留白、回應式網頁設計（responsive design），使
得過去被詬病的長滾動頁面重新流行起來，長滾動頁面設計有助於人們的
資訊吸收。令人耳目一新的網頁排版讓這種設計不顯無聊，使用者不會意
識到實際滾動的距離有多少。
Ex.

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.