藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源：http://www.shejidaren.com/1989-2014-web-design-history.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

估計(jì)很多做網(wǎng)頁的同學(xué)還不了解網(wǎng)頁的歷史，它是什么時(shí)候出現(xiàn)的？而那時(shí)的網(wǎng)頁又是怎樣子的呢？

如果想了解下網(wǎng)頁設(shè)計(jì)的簡(jiǎn)史，請(qǐng)往看吧，我建議每位網(wǎng)頁設(shè)計(jì)師都應(yīng)該看看哦！

1989年：黑暗時(shí)代的網(wǎng)頁設(shè)計(jì)

當(dāng)時(shí)的網(wǎng)頁設(shè)計(jì)讓你不“極簡(jiǎn)風(fēng)”也很難，屏幕背景是黑色的，沒有圖像，只有單色像素風(fēng)格的純文字，而那里的設(shè)計(jì)是通過符號(hào)+制表（Tab鍵）來制作。

1995年：開始表格式網(wǎng)頁設(shè)計(jì)

瀏覽器的出現(xiàn)使網(wǎng)頁設(shè)計(jì)邁向一大步，它可以讓網(wǎng)頁顯示圖像。當(dāng)構(gòu)建信息時(shí)，通過HTML表格來排版布局，盡管我們知道表格主要目的是構(gòu)建數(shù)字，但它仍然被流行使用了很長(zhǎng)一段時(shí)間。當(dāng)設(shè)計(jì)師制作花哨的布局時(shí)，為解決這問題，最佳方法就是切片 + 表格來完成。

當(dāng)時(shí)表格也有它的好處，比如垂直對(duì)齊、可設(shè)置像素單位及百分比的功能來制作網(wǎng)格布局。

1995年：JavaScript 擴(kuò)展表現(xiàn)范圍

JavaScript 可以解決HTML一些局限性，比如，需要一個(gè)彈提示，這時(shí)就需要JS來實(shí)現(xiàn)了。那時(shí)背景圖像、GIF動(dòng)畫、閃字、計(jì)數(shù)器等工具迅速成為網(wǎng)頁必須的噱頭。

1996年：自由的黃金時(shí)代 – Flash

FLASH，一個(gè)突破性的技術(shù)出現(xiàn)，打破現(xiàn)有網(wǎng)頁設(shè)計(jì)上的局限，設(shè)計(jì)師在設(shè)計(jì)形狀、布局、互動(dòng)以及一些很棒很弦的動(dòng)畫都可以在這一個(gè)工具上執(zhí)行，完成后只是一個(gè)單獨(dú)的文件輸出，并能顯示在瀏覽器中。用戶瀏覽它時(shí)需要安裝插件并等待FLASH加載完成后方可瀏覽。

FLASH的功能確實(shí)很棒，可惜，它對(duì)搜索引擎不太好了，并且消耗了大量的處理器功能。2007年蘋果在第一個(gè)iPhone時(shí)就決定放棄使用他們，而接著Flash開始沒落（至少在網(wǎng)頁設(shè)計(jì)方面）。

1998年：CSS 層疊樣式表

大約和Flash同一時(shí)間，一種更好的設(shè)計(jì)結(jié)構(gòu)技術(shù)誕生：  層疊樣式表 CSS (Cascading Style Sheets)。這里的基本概念是將網(wǎng)站內(nèi)容和表現(xiàn)分開，所以它的外表和格式都在CSS中定義。

CSS的第一個(gè)版本很不靈活，但最大的問題是瀏覽器的兼容性，不同瀏覽器對(duì)CSS的支持不一樣，這個(gè)花了好幾年的時(shí)候才得到改進(jìn)。需要明確的是CSS不是一個(gè)程序言語(coding language)，這相當(dāng)一個(gè)聲明性的語言。

2007年：混亂的移動(dòng) – 網(wǎng)格和框架

手機(jī)網(wǎng)頁本身就是一個(gè)挑戰(zhàn)，除了各種不同設(shè)備對(duì)應(yīng)不同尺寸的布局，它的內(nèi)容應(yīng)該和小屏幕上的相同或是單獨(dú)剝離出來？是否添加廣告到小屏幕上？訪問速度也是問題，因?yàn)閮?nèi)容太大，訪客瀏覽網(wǎng)頁慢、流量增加，從而成本也增加。

第一步改進(jìn)是使用柵格的概念，各種柵格系統(tǒng)的誕生，最終960柵格系統(tǒng)勝出，而這12列柵格被設(shè)計(jì)師經(jīng)常使用。

接下來步驟就是標(biāo)準(zhǔn)化形狀、導(dǎo)航、按鈕等常用元素，將其規(guī)范起來，以實(shí)現(xiàn)更簡(jiǎn)單且可重復(fù)使用。基本上，就是制作一個(gè)包含其代碼的視覺庫。在這里，Bootstrap 和 Foundation 勝出，它被用在許多網(wǎng)站和APP應(yīng)用上。缺點(diǎn)就是使用這個(gè)框架的外觀往往看起來像一樣的，而設(shè)計(jì)師不知道的代碼是如何工作的。

2010年：響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）

2010年 ETHAN MARCOTTE 提出響應(yīng)式網(wǎng)頁設(shè)計(jì)以實(shí)現(xiàn)不同的布局，這也是響應(yīng)式網(wǎng)頁設(shè)計(jì)的起源。技術(shù)上， 我們依然是用HTML和CSS來編寫。這意味著響應(yīng)式設(shè)計(jì)可以在大量的布局中使用，主要優(yōu)點(diǎn)就是相同的Web站點(diǎn)可以工作在桌面電腦、移動(dòng)手機(jī)端，而不需要再獨(dú)立一個(gè)手機(jī)端出來。

2010年：扁平化的時(shí)代

設(shè)計(jì)一些布局需要大量的時(shí)間，幸運(yùn)的是我們決定拋棄界面上那些花哨的裝飾元素（如3D、陰影效果、紋理材質(zhì)），并回歸到根的設(shè)計(jì)，優(yōu)先專注內(nèi)容。精美的攝影圖像、插圖、排版、易于使用的布局是我們現(xiàn)在應(yīng)該考慮的。簡(jiǎn)化可視元素僅僅是扁平化設(shè)計(jì)過程的一部分，重要的是該以內(nèi)容為中心。把光澤的按鈕換成圖標(biāo)，并使用SVG或圖標(biāo)字體。

2014年：網(wǎng)頁設(shè)計(jì)的未來是光明的

到現(xiàn)在為止，網(wǎng)頁設(shè)計(jì)的目的是呈現(xiàn)視覺信息，這是在瀏覽器中展示。設(shè)計(jì)師搬東西在屏幕上時(shí)，請(qǐng)?jiān)囍胂褚幌?，它能否用?jiǎn)約代碼編寫，我意思不是改變事物的秩序，但要有充分的靈活性和控制性！請(qǐng)盡量想象，這樣開發(fā)者不必?fù)?dān)心瀏覽器的兼容性，可以專注解決實(shí)際問題。

目前還有些新的技術(shù)，如CSS3出現(xiàn)新的VH, VW單位（視窗高度和寬度）可以更靈活的定位元素。它還解決了一直困擾許多設(shè)計(jì)師問題：為什么CSS垂直居中這么難。Flexbox是另一個(gè)新概念技術(shù)，也許未來你會(huì)使用它來布局頁面。

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）