9 個(gè)GIF動(dòng)畫闡述Web設(shè)計(jì)的25年歷史

Web設(shè)計(jì)25年的歷史，可以用以下9個(gè)GIF動(dòng)畫來總結(jié)。 

Froont，一家為web設(shè)計(jì)師制作工具的舊金山公司，用9個(gè)GIF格式動(dòng)畫來表現(xiàn)網(wǎng)頁設(shè)計(jì)在過去25年的發(fā)展歷程。如果你想知道為什么CSS這么重要，為什么Flash會(huì)逐漸淘汰，這些動(dòng)畫圖或許能讓你一窺究竟。 

網(wǎng)頁設(shè)計(jì)的單色時(shí)代，約1989年。想想Lynx和其他以Unix為基礎(chǔ)的web瀏覽器，這些瀏覽器只會(huì)通過網(wǎng)絡(luò)從這個(gè)終端到另一個(gè)終端一個(gè)字一個(gè)字地蹦出來。沒有圖形用戶界面，只有一串字母和一個(gè)閃爍的光標(biāo)。 

現(xiàn)代化的開始，約1995年。第一個(gè)瀏覽器，例如Mosaic，允許設(shè)計(jì)人員在網(wǎng)站上顯示圖片，但是唯一的方法是將這些網(wǎng)頁元素丟進(jìn)不雅的表格布局中。由于這真的很難精確定位，所以設(shè)計(jì)師得琢磨地非常清楚如何寫好表格嵌套表格再嵌套表格的代碼以便正確顯示內(nèi)容。 

幸運(yùn)的是，JavaScript出現(xiàn)了，為設(shè)計(jì)師提供了很大的便捷。Flash讓我們創(chuàng)建動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)更為簡便：例如，彈出窗口和在頁面上動(dòng)態(tài)修改內(nèi)容順序。但是相較于本地HTML，JavaScript速度很慢。 

盡管Flash也曾風(fēng)靡一時(shí)，但是現(xiàn)在幾乎已經(jīng)被HTML5干掉了，但是在1996年，它代表了網(wǎng)頁設(shè)計(jì)的一個(gè)新高度：能夠讓設(shè)計(jì)師按他們自己的 方式使得頁面生動(dòng)起來。這也是Froont飛出頁面和開場動(dòng)畫等的黃金時(shí)代。但是，F(xiàn)lash會(huì)占用計(jì)算機(jī)大量的處理資源，這也使得它成為一種特別不友好 的技術(shù)，尤其是對(duì)于移動(dòng)設(shè)備例如筆記本電腦和智能手機(jī)而言。 

CSS，首次發(fā)布于1998年，解決了很多早期的web設(shè)計(jì)問題。通過將網(wǎng)站美觀度從網(wǎng)頁內(nèi)容中剝離出來，設(shè)計(jì)師終于可以按照自己的想法制作或者為客戶定制網(wǎng)頁了。雖然最早的CSS版本不是非常靈活，但是現(xiàn)在的CSS已然成為了設(shè)計(jì)師需要掌握的最重要的網(wǎng)絡(luò)技術(shù)。 

2007年iPhone的問世給設(shè)計(jì)人員帶來了一個(gè)全新的難題：如何在智能手機(jī)這個(gè)更小的屏幕上設(shè)計(jì)網(wǎng)頁？一開始設(shè)計(jì)人員想到的是使用一種網(wǎng)格系統(tǒng)，這種網(wǎng)格系統(tǒng)可以根據(jù)設(shè)備屏幕的尺寸將網(wǎng)頁分割成若干列。 

2010年，對(duì)于如何在移動(dòng)設(shè)備顯示網(wǎng)頁的問題，Ethan Marcotte想到了另一種解決方案：響應(yīng)式設(shè)計(jì)。 

在響應(yīng)性設(shè)計(jì)之后，一種撇去華麗效果重視內(nèi)容的扁平化設(shè)計(jì)也出來了。這種設(shè)計(jì)簡化了視覺元素，通過突出漂亮的字體來創(chuàng)建web體驗(yàn)，而且顯示在任何設(shè)備上的效果都非常棒。 

至于未來會(huì)如何？Froont表示，更好的web設(shè)計(jì)還在研究開發(fā)中。以后，設(shè)計(jì)人員將不需要再擔(dān)心瀏覽器的兼容性問題，各種適用于任何設(shè)備的工具也都隨手可得。以后的技術(shù)將不會(huì)再成為設(shè)計(jì)的限制，設(shè)計(jì)師可以集中精力解決UI和UX問題，而不是把時(shí)間浪費(fèi)在排除故障上。

英文原文：The History Of Web Design Explained In 9 GIFs
翻譯作者：碼農(nóng)網(wǎng) – 小峰