2015 年網頁設計的流行趨勢是什麼？

12-16

快到年底了，馬上就2015了，2015網頁設計有哪些流行趨勢啊？？

分享一個：用視頻做產品介紹首頁。
看到越來越多網站在首頁介紹一個產品特性的時候，採用全屏、拍攝製作的視頻。

例如：
Father.IO - The First Person Shooter in Real Life
http://www.wink.li/
https://ocho.co/#/

很多產品如果不用視頻拍攝去介紹的話，很難把這個產品講清楚，更難提現感染力。
國外類似的產品介紹首頁還有很多，但國內好像還沒有看到過，成本很高也是因素之一。

Medium上瘋轉的好文：在建築史中看網頁設計趨勢

這篇文章是我最近在Medium上看到的一篇接近2000轉發量的文章。這個轉發量在Medium完全可以進入年度Top 10。以下是全文內容翻譯：

西方建築史可以教會我們許多關於網頁設計風格的演化過程。二者（建築和網頁設計）都屬於藝術，也都被以下的因素所定義：

a. 它們都是人們訪問的地點。

b. 它們都被設計建造來實現這個實際用途（被人們訪問）。

c. 科技的發展程度限制著它們的設計建造。

d. 但不管怎麼樣，它們都屬於藝術。

在這些限制內，二者都在沿著相似的道路迂迴向前發展。如果你想了解網頁設計的大趨勢，你只需要探尋建築學前進的歷史道路。

1. 新石器時期（簡單，有限的結構）

二者共性：人們除了在大小和位置上對其小修小改外，基本目的都只是將其建造出來。

2. 古典時期（整齊的柱型和比例，同時略帶裝飾）

二者共性：這個時期的建築在比例和層次上得到改良，內部不同空間 (sections) 用途明確的建築不斷湧現。二者的建材（石頭和像素）都在風格上效仿之前的建材：石制三槽板陶立克柱塊 (triglyphs) 代表著木樑，就好像有3D質感的按鈕象徵著生活中的實物按鈕。

3. 羅馬式時期（形式更具厚度，邊緣更加圓潤）

二者共性：羅馬式時期的建築和網頁在圓潤其邊緣的同時，前者加厚了其牆體和分隔物 (divider) ---後者加厚了菜單和按鈕--- 來製造出更加體積龐大，更重，更便於點擊的（特指網頁）形式。

4. 哥特時期（華麗又迷人）

二者共性：哥特時期的網頁設計中的CSS和Flash就是哥特建築中彩色玻璃。在基本條件就位後，我們開始挖掘建材的最大潛力。在哥特時期，建築家們將石材打造成重力違抗式的 (gravity-defying) 建築奇觀，令人窒息。（而在網頁設計方面）雖然我們現在很難回憶起當年的情景，但哥特時期那些應用了Flash和CSS的網頁，一樣用它們的像素武器讓我們震驚。

5. 文藝復興時期（整潔，合理，精準）

二者共性：這便是我們這個時代的風格。當下流行的扁平式設計風潮，與文藝復興時期的建築風格十分相似。這種相似性既奇妙又難以解釋。文藝復興時期的建築風格，呼喚一種向古典時期建築邏輯的回歸。簡單的幾何形式代替了華麗複雜的結構。設計風格越來越整潔。人們用新的規則開始撰寫設計哲學，一切都更歸元 (meta) 。

6. 巴洛克時期（重塑一切設計規則）

二者共性：合理和精準的設計風格難以持續太久。我們終將開始打破陳規。在建築世界中，這意味著打碎古典時期的設計元素，並將它們重塑為複雜的形式。與文藝復興時期的理智主義相比，巴洛克式設計彰顯情緒性與戲劇性。

這種設計風格上的改變將如何在網頁設計中體現出來呢？不好說。但等著瞧，這種改變在數年內就將到來。

7. 新古典時期（閃回昔日）

二者共性：一切又回到原點。當我們實現了足夠大的進步，我們就開始美化我們的（古典風格）原點，開始追尋復古的風格。但這種回歸需要一些時間，也還離我們很遠。那種老式雅虎網站在現在的我們看來，依舊很遜，根本不神聖。但六七年後呢？這種風格將重回潮流前沿。

8. 再之後呢？我們無從得知。

二者共性：好吧，我們還是略知一二的。再之後的風格大概會是某種形式的新羅馬時期風格，或新哥特時期風格。反正會是某種風格的2.0版。藝術不斷地在復興中重複之前的風格。但最終呢？一種新的科技和新的世界觀將會到來。這些是今天的我們根本無法想像的。

然後，一切變得有點奇怪。

譯者註：由於本人不是建築學專業，因此有些建築學辭彙的翻譯難免不夠準確。針對不完全確定的詞語，我都已給出英文原詞，懇請大家協助潤色。

另外，感謝大家對本答案的支持。這些天又收到許多私信，我回復了其中的99%。感謝大家的信任。繼續努力與知乎的朋友共同進步。

源地址：The Future of Web Design is Hidden in the History of Architecture
原作者：Mike Sall (https://medium.com/@sall)
翻譯：米洛 (http://www.zhihu.com/people/miro02138)

圖片版權：Stonehenge by jborsboom; The Parthenon by AJ Alfieri-Crispin; Maria Laach Abbey by Berthold Werner; Reims Cathedral by Archigeek; Amazing animated Maroon 5 GIF by Nick; Villa La Rotonda by Timothy Brown; San Carlo alle Quattro Fontane by wsifrancis; Panthéon by Marko Kudjerski; Guggenheim Museum Bilbao by Wojtek Gurak

2015年已經過去快一半，現在再來看這個問題挺有意思的。首先，流行不是創新出各種新的設計，而是大浪淘沙，好的設計傳播開來。

其次，設計也是要適應內容的，寬泛的說什麼是好設計其實並不合適。

就目前網站內容流行的趨勢來看，新興網站大多是以產品為中心，或者是想做成UGC的社區。所以展現形式比較好的響應式網頁和扁平化設計，都在今年比較受歡迎。

而且隨著CSS動畫、水平滾動頁面、視頻化背景、單頁web設計、3D CSS等技術驅動，網站設計的原則又在不斷創新，只是不知道，到2016年，真正好的，能留下來，傳播開的設計又是什麼。

只就2015年目前的趨勢來看，這篇文章總結的不錯，又挑選了一些放上來。一分鐘了解2015網頁設計新趨勢
1.少即是多

隨著網頁易用性的地位開始逐漸超越華而不實的網頁元素，簡潔成為了設計的主導方向。以用戶為中心的理念開始流行，一切設計（無論是顏色強調還是動畫元素）都不是無目的的。文字內容越少越好，直達要點避免連篇累牘。

2.視差滾動

視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。隨著人們越來越廣泛地使用移動設備，視差滾動效果將會持續流行，這樣一來用戶就不需要多重點擊，避免因為無謂的頁面載入而浪費時間。

3.鮮亮的顏色

使用對比強烈、誇張大膽的顏色設計會使網站顯得非常有個性，設計師不妨嘗試一下出其不意的顏色組合！重點色要突出特點，主色調起到總體視覺感受的平衡作用，明暗主題互搭效果良好。

4.動畫效果

所有的動畫都要為主題服務：容易理解、目標明確、能夠引導用戶行為。動畫效果要盡量做得自然，這樣一來，與手機客戶端的觸控式用戶界面相配合才不會顯得突兀和多餘。

5.手機化菜單設計

已經有一批設計師開始在電腦網頁上模仿手機菜單的設計了。很明顯在未來的趨勢下，網頁會越來越簡化，在設計中採用手機菜單的樣式也不足為奇。用簡單地圖標呈現菜單不僅節約了空間，也使得頁面布局發生了變化，至於用戶會不會接受這樣的設計，我們拭目以待……

6.手繪矢量插畫

矢量插圖也在經歷一場蛻變，它們開始「為自己說話」了！相比於以往描繪物體為主的形式，現代插畫更看重去講一個故事。簡而言之，要有內涵。
7.創意小圖標

創意小圖標用非常輕巧的方式傳達了一些重要信息。扁平化的圖標設計逐漸取代留著笨重陰影的舊一代圖標，流行圖標開始打破圖標框的束縛變得更加自由、簡潔和大方！

可以看看：聊聊2015年流行的網頁設計趨勢

提要：2014年快結束了。接近年底各種忙，忙裡偷閒也別忘記自我充電。來看看明年2015年的網頁設計趨勢吧。沒準能找到不少靈感呢。

1. 響應式在繼續

OK，也許你不打算打道回府。也許你有一個很好的理由不用響應式網頁設計？在過去的幾年裡，響應設計快速鞏固了自己作為網頁設計的新標準。當然，也有爭論，但是沒人說，「讓我們擺脫響應式設計吧」。實際上，越來越多的網站選擇響應式的方向。2014年確實如此，2015年也還會繼續。這已經不是種趨勢，而是常態了。

2. 幽靈按鈕

幽靈按鈕憑藉簡潔時髦，及微妙的動畫招人喜歡。2015年幽靈按鈕將繼續，特別是用在大背景和背景視頻上更適用。

3. 更強調字體

傳統的一些Web字體價格昂貴，意味著網站排版需要更多的預算。如今，這種情況在改變，設計師只要更少的預算甚至免費（如Google Fonts）的字體集就能在網頁上自由設計。

4. 比大比更大的圖片，視頻背景

一個讓網站脫穎而出的簡單方式是突出關鍵的內容，這種趨勢需要以美妙的方式來完成，強調設計哲學，優雅有力量，而非只是噱頭。

5 . 滾動主導點擊

得益於移動互聯網的發展，網頁設計更偏向移動化，因此會帶來更有效和愉悅的移動體驗，如滾動主導點擊。這種方式更直觀，易於實現，減少載入時間，允許網站與用戶之間更多的交互。

6. 卡片式設計繼續

卡片式設計，不算新穎，卻是響應式網頁設計的最佳實踐。卡片式設計很好的一個方式是模塊化，重新編排欄目也不會草率或紊亂，在瀏覽器中能瀏覽大量數據，但是要提示用戶深入了解。總之，卡片設計乾淨簡單，具備多功能性。正是網路的需求，2014和2015年你將能看到更多卡片式風格設計。

7. 扁平化繼續（或者Material Design設計語言崛起）

扁平化設計在過去兩年里勢頭迅猛，2015年在持續。然後，對於扁平化而言或許只是個概念，也許是Material Design （材料設計），那麼什麼是Material Design呢？

Material Design是 Google今年新推出的移動設計方向，「Material（材料）」是種隱喻：空間的合理化及系統動效的統一。Material源自現實的感知，靈感來自紙張和油墨，尚未開啟的想像力和神奇。

很多設計師說，材料設計語言在扁平化上作了微妙的漸變，層次感和動畫保留了意義上的有形世界（物理空間和物體），同時實現了扁平化的所有優點。有些人可能不同意，但我個人覺得，這就是扁平化設計的整體領導，我們期待看到更多的企業和個人在2014年及以後採取該策略。

8. 微交互

談論完材料設計，微交互也是個很好的勢頭。它們通常用在產品的體驗和瞬間，網站簡單的用戶任務處理也會用到。一個簡單的例子是註冊的時候彈出框效果。微交互促進了用戶的參與，這種趨勢在未來幾年將進一步滲透到網頁設計中。

9. 互動式故事

你想把所有的內容聚在一起嗎？當然，不是每個頁面都適合講一個仙女的故事的。如果你的品牌由一系列概念或價值（優雅、創造力，簡約等），從頁面布局到字體選擇，你都能通過頁面元素和交互性故事來闡述品牌和理念。如特斯拉的官網：Tesla Motors給蘋果中國的公開信！一個設計師對蘋果官網的微吐槽

10. 個性化用戶體驗

使用cookies技術向用戶展示相關內容不是什麼新鮮事。然後，某些垃圾做法（如彈出選擇），現在有了更好的設計和最佳實踐，使用cookies 顯示特定的內容給用戶比垃圾郵件和無恥的銷售有效的多。Netflix 會記住你最近看的，YouTube也如此。難道這些傳統的大網站只會使用側邊欄小工具，以便你快速訪問你喜歡的內容或評論的文章？或者突出查看過的內容或高亮帖子？我不這麼認為，未來更會出現更優雅的技術。

極好的例子Apple

你不必是個蘋果迷才能欣賞這麼好的網頁設計。蘋果總是設法讓它們的商標保持簡單，繼續設法擠出顯著數量的當前和未來的設計趨勢。如果你想學習但不想模仿它，不是你必須創建一個站點酷似他們，而是複製其顯著的微妙之處，避免故意使用趨勢的噱頭。

Tesla

Go Electric page 這個頁面使用了大圖片，長滾動和嵌入式信息圖和互動式故事解釋了他們產品的常見5大問題，這是個相當聰明的設計，相比傳統枯燥無味的網站，這是個令人驚嘆的展示。

1. 響應式設計

不同設備，不同操作系統，不同解析度。都是同一個視覺中心，這就是響應式設計，包括彈性網格和布局、圖片、CSS media query的使用等。特別是HTML5標準已經定稿，PC端和移動網站更加統一。無論用戶正在使用筆記本還是手機、平板，我們的頁面都有能力去自動響應用戶的設備環境，讓一個站點同時兼容多個終端。藝橙堅信越來越多的網站將會採用響應式設計。

2. 扁平化設計依舊

自Win8的設計開始以來，扁平化被逐漸接受，特別是今年下半年在iOS 8和Andorid L中，扁平化的趨勢也更加的明顯了。那麼網頁設計也是如此，我們可以看到蘋果官網也調整為扁平設計。包括越來越多幽靈按鈕，配合大背景更加適用，同時，實用、樸素和簡單的網頁設計也將會越來越重要。

3. 字體更加重要

回歸內容本質，網站最重要的就是提供用戶所需要的信息，那麼用戶將會更加註重閱讀，以及內容帶來的體驗。在網站的排版和頁面布局上簡單實用會讓設計師更加得心應手。國外甚至可以使用Google Fonts，讓設計師更加自由。

4. 大圖片背景甚至是大視頻背景

全國網路近年高速發展，大多數用戶的網路體驗已經足以支撐大圖片或者打視頻背景的站點。一切將會變得更加有趣和震撼。新媒體的崛起讓複雜的內容更加簡單高效的展示，如此美妙而讓人眼前一亮。直觀讓用戶與網站直接產生更多的交互。

5. 更加註重交互設計

優秀的站點總是能吸引用戶的參與，網站的體驗已經滲透到站點的各各細節。良好的動畫效果，用戶的交互回饋，讓用戶體驗變得更加有趣。你可以跟用戶講故事，也可以跟用戶引導交互。品牌的一系列理念可以展示的一覽無遺。優雅、創造力，簡約等，你都能通過頁面元素和交互來闡述。

來自：藝橙UEDONE：2015年網頁設計新趨勢（www.uedone.com/view/361.html）

抱歉我有點任性，太懶配不出圖，就寫點關鍵點吧。
個人想法說說來著：
-----------------------------------------------------------------------------

接觸網頁也有5個年頭了，彎路走了不少，有付出必有回報，有得到必有所失，放眼世界，網頁設計其實很美妙，它帶著一個夢想。

近一年基本沒做過國內的網站，基本都是國外網站，自己對某些趨勢的把握還是有一定的想法的，雖然不能算是很厲害很完善，到時候會補充完善趨勢分析咯，先把以前歸納的簡潔版的文字放出來：）

因為有些東西真的不知道怎麼去配圖，更好的就用文字來描述，有點小懶，呵呵，有機會的時候會補充。這裡我就專門精簡的概括就好了，點明重點即可！

接觸網頁設計也有5個年頭了，我也只是剛出頭的菜鳥，我很努力，我愛走彎路，我不在乎圈子是個什麼，跟著自己的夢想走。

接觸過遊戲網頁，酷炫動感的，FLASH的，HTML5的，SVG的，扁平化的，WIN8風格的，擬物場景的，oh,no，不是單純接觸，應該是這些類型都做過，作品雜七雜八，但是也一路跟著自己的夢想走來，多的不說啦，正題開始：

網上很多各種雜七雜八的趨勢分析過的我就不列出來了，都是重複的沒啥意思，感覺2016年、未來2年內有這些趨勢存在，希望對設計師們有一定的研究方向！

1.感測器訪問賦予頁面對用戶環境的感知能力

很多年以來，web 頁面掌握的用戶情況十分有限，通常只有用戶的屏幕尺寸以及瀏覽器類型等。但現在各種 W3C 標準把環境光、麥克風、攝像頭等各種感測器數據都提供出來了。這使得網站可以跳出頁面之外掌握更為豐富的信息。

2.信息推送

讓網站可以保持與用戶的連接—哪怕用戶關閉了網站的瀏覽器標籤頁，使用一些新的w3c新標準技術。比如可以使用websocket，還有其它標準技術實現信息推送的體驗。

3.SVG圖形和動畫

以優越的處理性能和動畫性能，載入速度，不言而喻它比png,jpg,gif效率質量都高太多。

我自己主要使用SVGDeveloper這款工具結合jquery做動畫，因為用的是mac系統，這款工具要使用虛擬機parallels desktop來配合mac系統運行

4.超快用戶體驗

「離線優先」，HTML5應用類緩存

網頁的瀏覽速度和等待時間就不用多說了，非常重要。

5.智能響應

根據用戶點擊等等而響應內容，而不是僅僅根據設備解析度響應，所以這裡說的智能響應並不僅僅指響應式布局Responsive Layout.

比如：當你是新用戶開始瀏覽文章時，會有在線FAQ的表單來響應你的操作，反之，在你登陸後閱讀一篇文章的時候，會有標註功能讓你更好的對文章進行整理方便下次閱讀。

比如Medium和The Next Web在閱讀體驗上做得就非常棒。

6.ServiceWorkers

可讓網站安裝 JavaScript 文件，讓web原生應用化，離線推送，這就類似一個基於WEB的半原生，甚至就是原生APP的實現。

7.360全景+視頻交互

使用HTML5技術生動的360全景展示，視頻內置於其中，形成完美的場景交互，讓網站完全趨向真實場景。

這種體驗將攝影，技術，表現力，特效，音效等方面結合起來，在FWA上看到過幾個網站

8.基於HTML5的交互

比如碎片、離子、NDA、電影特效等運用到全屏輪播，tab切換，登陸註冊彈窗等模塊中。

9.PJAX的普及

最早應該是體驗在behance和pinterest這兩個網站上，然後慢慢流行到了國內，比如花瓣，接著是前不久dribbble的瀑布流和查看作品的改版體驗，利用HTML5的特性結合完全/局部刷新實現改變網址無刷新載入，同時滿足SEO的需求。

10.CSS3動畫將更加廣泛

現在做國外的設計基本不用考慮IE9以下了，也就是說基本不用考慮IE，所以很好的運用CSS3動畫能大大提高網站的視覺舒適程度，特別是細節動畫，小小的細節動畫可能會是點睛之筆哦。

是不是看了這些感覺怎麼都是PC端的趨勢？NO,NO，其實移動端也同時存在這些趨勢，移動不僅僅使用APP這個詞去衡量的，現在APP的技術門檻越來越低，滿大街都是，和賣白菜一樣，參差不齊，基於移動端的體驗趨勢，也是非常重要的。

移動端的一些常見趨勢就不說了，谷歌百度一大堆，再增加一點：

11.web移動端的PC效果移植

我們在PC網站上很常見視差，滾輪偵聽，滑出等交互效果，使用HTML5的一些新特性，使用國外開源的移動框架，可以將PC上酷炫的效果同樣移植到移動端上，體驗會大不一樣。

------------------------------------------------------------------------------------

寫過的博文地址：2015-2016網頁設計趨勢分析 Web Design of Trends

【2015年網頁設計四大趨勢扁平化/HTLM5席捲而過！】

網頁設計趨勢變化的是如此之快，以至於我們甚至還沒來得及全部體會，有的便已過時。所以，預測某個設計趨勢會流行多久壓根就是個偽命題。在21世紀初的時候，Flash曾被視為最熱門的網頁設計工具；而在幾年前，富有光澤的按鈕也是網頁上必不可少的組件，可是現在，他們都已經被扁平化設計和HTLM5所席捲而過。

不要被炫酷時尚光鮮亮麗的時尚風格洗腦，許多剛剛出現或者才開始的流行的設計風尚都會是曇花一現。那些能對設計文化產生持續影響的設計趨勢之所以存在，是因為它們在根本上有助於用戶體驗，或者服務於某些功能或者技術。但是今天這篇文字不是要做這些事情。今天所說的四個設計趨勢是經過仔細推敲的，它們應該會在接下來的2015年里繼續流行，甚至會強勢地在2016年里繼續做一個堅挺時尚的設計趨勢。看下去，你會明白，它們不是在炫技或者耍猴，它們的確正在重新定義網頁設計。

1、更少的頁面

是否有人曾戳著你的屏幕說「少即是多？」越來越多的網站開始精簡網站上頁面的數量，使用單頁設計的網站已經不在少數，即是相對傳統的網站也過度到了簡化後的多頁式頁面架構。促成這一趨勢的原因來自兩個方面：第一，用戶喜歡簡單，越簡單用戶越容易找到它們想要的內容，這自然也對網站越好；第二，據統計，移動端的流量佔據了網站流量來源的4成，對於移動端越友好，自然也越有利於網站和網站的業務。如果你能在餐廳的移動端網頁上訂餐，何必費勁巴拉地找電腦來下單呢？成交額難道不會妥妥地上升么？下面這個高大上的單頁網站屬於倫敦的Jacks Bar，這是一家酒吧餐廳二合一的餐飲機構，在移動端瀏覽成為用戶首選的今天，滾動比點擊更加有用。

而這家名為三重櫻咖啡的站點則是另一個實例，典型的單頁設計，沒有雜亂的信息，它只有兩個導航鏈接，並且兩者都在頁面的相同區域。

2、無外乎是響應式設計

響應式網頁自然可以適配各種各樣的設備的屏幕，但是它們同時也是相對比較「龐大」網站，載入速度不會快到哪裡去。在過去，許多品牌會為用戶單獨設計桌面端頁面和移動端的頁面，但是隨著市面上設備的屏幕尺寸膨脹分裂，響應式網站設計就成了一個更為有效也高效的解決方案了。在搜索引擎抓取數據的時候，單個URL會更容易受到它們的青睞。從這個角度上來看，設計師有必要考慮一下手頭項目是否做到了響應式設計。

Skinny Ties 就是一個響應靈敏的響應式網頁，在任何屏幕上都能良好地顯示，從圖片到內容，這個網站都經得起最挑剔的客戶的考驗。

3、個性化的用戶體驗

網頁Cookie並不是啥新鮮的東西，它們已經為網頁和用戶服役多年。現在，設計師們開是藉助它們讓網頁的彈出窗口呈現出更加精準的內容了：更加個性化的廣告，更加符合用戶習慣的用戶體驗設計。做電商的朋友可能會非常需要這樣的設計。

舉個例子，假設你擁有一個銷售促銷禮品的電商網站，你的某個用戶是一家公司的經理，或者是一個小企業主，它正在為自己的客戶和員工尋找類似的商品。這並不是他第一次訪問你的網站了，那麼你可以藉助個性化的體驗設計，為他推薦它可能需要的商品，讓他成為回頭客。

在歐美市場，你恐怕找不到比亞馬遜更好的例子，當然，生活在大陸的我們，可能已經被無所不能的淘寶的推薦系統所折服。

4、高清大圖

講故事其實也是設計的基本功。使用可靠的內容和漂亮的圖片將用戶從A點引導到B點，已經被證明有利於網站的轉化率。使用大幅圖片和富有質感的文字能夠賦予整個頁面以生命力，讓它更加有趣，令用戶願意與之進行互動。隨著高解析度設備的普及，這些擁有高清大圖的網頁會輕鬆討好用戶的雙眼。

溫馨/動人/真實的故事配合著高清大圖元素，用戶會買賬。不論圖片是用作背景還是配圖，整個頁面的基調都會因此而改變。就是這樣的一個案例。

作品展示網站這樣做其實很不錯，電商和零售類的網站則需要斟酌一下如何展示才不會太過突兀。使用大圖的訣竅在於圖片的選擇，抓人眼球的視角和富有質感的細節會讓人駐足。配合著有趣的故事，用戶就會留下。

更多好文章：

貼米洛啟發，也貼一篇文：
作者：Sandijs Ruluks

譯者：陳朝（量子熊貓）

文章選自：Responsive web design made open

因為是gif圖，所以圖片的動態效果看不了，見諒。

正文如下：
離線時間 · 031 | 寫給設計師的網頁設計簡史

要把網頁設計稿用代碼實現出來，需要一大堆取巧的辦法，我意識到這件事時，曾對網頁設計感到膩味。看起來，每個簡單的網頁問題都有太多辦法解決，每個辦法卻總可能在某些瀏覽器里不能正常工作。有件事總讓我困惑，為什麼還要把工作劃分為做設計和寫代碼？為什麼現在困難的事情變得簡單了，但是簡單的事情卻有了更多難點？所以，與其爭論設計師是否該學編程或者開發者是不是要會設計，先讓我們達成一點共識：互聯網是如何演化的，以及我們該如何彌合代碼與設計的分裂。

互聯網設計之前的黑暗時代（1989）

互聯網設計的開端可是相當黑暗，屏幕確實就是黑漆漆的一團，只有幾個單色像素閃爍其間。能用作設計的只有字元和製表符（tab鍵）。所以，讓我們快進到圖形化用戶界面成為互聯網主流的時代吧，那是用表格（table）編寫網頁的拓荒時代。

表格——開端（1995）

我們了解的網頁設計發端於能顯示圖片的瀏覽器誕生。HTML語言中已經存在的表格（table）概念是最接近於結構化信息的解決辦法。那時的網頁設計就是表格套著表格，用聰明的辦法套上一堆靜態單元格和動態單元格，這種方法起源於David
Siegel的書《製作殺手級網站》（Creating Killer Web
Sites）。表格本來是結構化數字用的，用它來處理布局感覺不大對頭，不過這還是那會兒設計網頁的常見辦法。隨之而來的問題是，維護這些脆弱的結構特別困難。也是這個時代，術語「切圖」大行其道。設計師能設計酷炫的布局，但是對於開發人員，還是需要把它想辦法切成小塊兒，讓設計能夠實現。同時，表格也有一些很棒的特性，比如能夠根據像素或者百分比垂直對齊元素。這麼做的好處是，這是我們當時最接近網格設計的辦法。也是那會兒很多開發者決定，覺累不愛前端開發。

JavaScript援兵降臨（1995）

javaScript是對HTML種種局限的解答。比如，來一個彈窗，動態調整一些東西的順序？那就用JavaScript吧。然而，JavaScript的主要問題是，它是在整個網頁結構上頭又加了一層，只能單獨的載入。懶惰的開發者常常用它打個簡單的補丁了事，但是如果使用得當，它又異常強大。如今我們如果能用CSS實現一個功能，就會避免用上JavaScript，但是這種語言地位依然穩健，不管對於前端（例如使用JQuery）還是後端（Node.js）。

自由開發的黃金時代——Flash（1996）

一種新技術誕生了，應許了前所未見的自由，打破了過去網頁設計的局限。設計師可以任意使用各種形狀、布局、動畫、交互，使用各種字體，全都靠一個工具，這個工具就是flash。工作完成時就打包一個文件，丟給瀏覽器讓它顯示出來。如果用戶安裝了最新版的flash插件，也有耐心等它載入出來，flash就能像變戲法一樣工作。這是啟動頁面、開場動畫、各種交互效果的黃金時代。不幸的是，flash不夠開放、不利於搜索引擎抓取，而且特別吃處理器。Apple在2007年決定在第一代iPhone上禁用flash，這時至少在網頁設計領域，這種技術開始衰落了。

CSS（1998）

與flash同時，從技術角度出發，解決設計結構化的辦法誕生了：連級樣式表CSS（Cascading
Style Sheets
）。它的基本理念是把內容和展現分離開來。因此，視覺和格式用CSS來定義，內容則用HTML定義。第一版的CSS遠談不上靈活，但更大的問題是有多少瀏覽器支持它。過了好多年，瀏覽器才開始全面支持CSS，而且還總是bug連連。這個時代，往往一個瀏覽器支持了最新的特性，另一個又不支持，這對於開發者來說簡直就是噩夢。說白了，與其說CSS是一種編程語言，不如說它是一種聲明語言。網頁設計師應該學會編程么？也許吧。那麼他們應該理解CSS如何工作么？當然啦！

移動互聯網崛起——網格與框架（2007）

在手機上瀏覽網頁本身就是個挑戰。除了各個設備不同的布局，還有內容一致性的新困難：在小屏幕上是保持一致的設計，還是需要簡化？如何把那些閃來閃去的小廣告顯示在那麼小的屏幕上？載入速度也是個問題，而且載入一大堆內容會很快燒掉你不少流量費用。改進的第一步是一欄一欄的網格。多次迭代後，960網格系統勝出，十二欄劃分的網格變成了設計師的日常。下一步，是將表單、導航和按鈕等常用元素標準化，變得可以復用。簡單來說，就是製作一個視覺元素的庫，需要的代碼已經包含其中。Bootstrap和Fountation這樣的前端開發框架是其中的贏家，伴隨而來的是網頁與應用之間界限逐步模糊。代價則是設計變得雷同，而設計師如果不理解代碼如何工作，就很難掌握這些技術。

響應式網頁設計（2010）

一個叫Ethan
Marcotte的聰明人決定用現成的內容，不同的布局，挑戰一下現有的辦法，他的辦法被稱為響應式設計。技術上，我們還是使用HTML和CSS，所以這種設計是一種概念上的演進，儘管對此還是有很多誤解。對於設計師來說，響應式意味著仿造出多重的布局；對於需求方，則是：「這玩意兒在手機上能用」；對於開發者，這意味著圖片如何訪問、下載速度、頁面語義元素、移動端還是桌面端優先等等問題。最主要的優點還是內容一致性，也就是一個網站在各個設備上都能工作。希望我們都能同意最後一點，至少啦。

平面之年（2010）

設計多種布局要花更多時間。還好我們決定簡化過程，去掉酷炫的陰影效果，重視內容的優先順序，回到設計的本源去。精美的照片、字體、犀利的矢量插圖和深思熟慮的布局，我們現在就是這麼做設計的。簡化視覺元素，做所謂「扁平設計」也是這個過程的一部分。這種設計的優點在於我們可以更好的思考文案、思考信息和內容的層級。那些帶高光的按鈕被圖標取代，也讓我們能利用矢量圖片和圖標；同時，網上字體也提供了精美的排版。有趣的是，網頁設計又一次接近於當年它誕生時的樣子。不過當然啦，青春歲月從來不曾虛度。

光明的未來（2014）

網頁設計的聖杯曾幾何時只是想辦法精確的讓東西在瀏覽器里顯示出來。想像一下未來，如果設計師能直接把元素往屏幕里一放，清晰的代碼就自己寫好！我不是說未來就是顛覆現有秩序，而是說如果設計師能夠得到足夠的靈活性與控制能力。想像一下工程師能夠不去過問瀏覽器兼容性，而是著手解決實際的問題！
有很多技術的新概念正在朝著這個方向演進。CSS中的新單元（new
units）如vh、hw（視域的高和寬）讓人能非常靈活的控制元素位置，也能解決困擾許多設計師的問題：為什麼讓一個元素垂直居中在CSS中這麼難搞。Flexbox是另一個CSS中的超酷概念，它允許我們輕鬆設置一個布局的屬性，而不需敲上一堆代碼。最後還有「網頁零件」（web
components），算是更大的努力。它由一組元素打包在一起，例如圖片集、註冊表單等。它提供了更簡單的工作流程，幫助我們把頁面元素變成搭建網頁的零件，可以輕鬆復用、獨立修改。
對於互聯網的未來，你怎麼想呢？

跟米洛的答案配合閱讀體驗更佳：）

我是 @Kirio,不打擾關注者時間線，匿名啦~

國外很多總結，略舉幾例
Elegant Themes Blog
Web Design Trends To Look Out For In 2015
99designs
The big web design trends for 2015
TNW
10 Web Design Trends You Can Expect to See in 2015
WDL
http://webdesignledger.com/trends-2/web-design-trends

1. 響應式在繼續　
2. 幽靈按鈕
3. 更強調字體　
4. 比大比更大的圖片，視頻背景
5 . 滾動主導點擊　
6. 卡片式設計繼續
7. 扁平化繼續(或者Material Design設計語言崛起)　

你感受一下？
Apple - Mac Pro
Apple - iPhone 6
再感受一下？
小米Note －小米手機官網
紅米手機2 －小米手機官網
魅藍 | 功能
MX4 Pro | 功能特色
MX4 | 功能
QQ瀏覽器8官方網站

好吧，發個鏈接自己看2015年最值得關注的網頁設計趨勢預測