從1990年代初的基本文本編輯的網(wǎng)頁(yè)開(kāi)始，1990年代中期的在線(xiàn)網(wǎng)頁(yè)建設(shè)，到上世紀(jì)90年代末崛起的flash，再到后來(lái)的CSS和Javasvript的崛起，直到現(xiàn)在web 2.0時(shí)代鼎盛時(shí)期，網(wǎng)頁(yè)設(shè)計(jì)經(jīng)歷了多次變革。
這是一段簡(jiǎn)短的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史，我們可以看到技術(shù)、設(shè)計(jì)與思想的演進(jìn)，看到無(wú)數(shù)有識(shí)之士改變世界的剪影。
1989：網(wǎng)頁(yè)設(shè)計(jì)——黎明前的黑暗
在互聯(lián)網(wǎng)真正開(kāi)始之前，黑色的顯示屏僅能顯示單色的像素。因此當(dāng)時(shí)的網(wǎng)頁(yè)設(shè)計(jì)是“極簡(jiǎn)風(fēng)”，沒(méi)有圖像，只有單色像素風(fēng)格的純文字，Web Design僅僅意味著符號(hào)+制表（Tab鍵）的排列組合。盡管早在80年代就已經(jīng)有了圖形化界面，但普及率就像80年代中國(guó)的電視機(jī)，低得可憐。
1995：表格——網(wǎng)頁(yè)的興起
瀏覽器的出現(xiàn)使網(wǎng)頁(yè)設(shè)計(jì)向前邁進(jìn)一大步。當(dāng)時(shí)最接近于信息結(jié)構(gòu)化的概念，是HTML中已有的元素：table（表格），當(dāng)設(shè)計(jì)師制作花哨的布局時(shí)，最佳方法就是切片+表格。David Siegel在他的網(wǎng)頁(yè)設(shè)計(jì)書(shū)《Creating Killer Sites》里面講述了他設(shè)計(jì)優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動(dòng)態(tài)的表格以巧妙的方式結(jié)合到一起。
為了應(yīng)對(duì)網(wǎng)頁(yè)脆弱的結(jié)構(gòu)，切片設(shè)計(jì)（Slicing Design）也流行了起來(lái)。設(shè)計(jì)師設(shè)計(jì)出漂亮的網(wǎng)頁(yè)布局，隨后開(kāi)發(fā)者將整個(gè)設(shè)計(jì)稿切片，找出呈現(xiàn)設(shè)計(jì)的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對(duì)齊，以像素為單位或者以百分比來(lái)控制對(duì)齊。在那個(gè)時(shí)代，表格算得上是近乎柵格系統(tǒng)般靈活的設(shè)計(jì)神器。
1995：來(lái)自JavaScript的救援
JavaScript 的出現(xiàn)補(bǔ)足了尚且原始的HTML。不過(guò)它處于整個(gè)網(wǎng)頁(yè)布局的頂層并且需要單獨(dú)加載。很多時(shí)候它僅僅被懶惰的開(kāi)發(fā)者用作一個(gè)簡(jiǎn)單的補(bǔ)丁，但如果使用得當(dāng)，JS可以非常強(qiáng)大。JavaScript 可以解決HTML一些局限性，比如，需要一個(gè)彈提示，這時(shí)就需要JS來(lái)實(shí)現(xiàn)了。那時(shí)背景圖像、GIF動(dòng)畫(huà)、閃字、計(jì)數(shù)器等工具迅速成為網(wǎng)頁(yè)必須的噱頭。
1996：Flash——自由的黃金時(shí)代
作為一門(mén)新技術(shù)，F(xiàn)lash為網(wǎng)頁(yè)開(kāi)發(fā)者/設(shè)計(jì)師帶來(lái)了前所未有的自由，它打破了之前網(wǎng)頁(yè)設(shè)計(jì)所固有的限制。設(shè)計(jì)師在設(shè)計(jì)形狀、布局、互動(dòng)以及一些很棒很弦的動(dòng)畫(huà)都可以在這一個(gè)工具上執(zhí)行，完成后只是一個(gè)單獨(dú)的文件輸出，并能顯示在瀏覽器中。用戶(hù)瀏覽它時(shí)需要安裝插件并等待FLASH加載完成后方可瀏覽。
不幸的是，這種設(shè)計(jì)并不開(kāi)放，也不利于搜索，還需要消耗計(jì)算機(jī)大量的運(yùn)算能力。2007年，當(dāng)蘋(píng)果發(fā)布他們的第一臺(tái)iPhone的時(shí)候，就決定徹底放棄Flash，也正是在這個(gè)時(shí)候，F(xiàn)lash開(kāi)始走下坡路——至少在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。
1998：CSS的誕生
CSS稱(chēng)為 層疊樣式表（Cascading Style Sheets）。差不多是在Flash崛起的同時(shí)，一種更好的網(wǎng)頁(yè)結(jié)構(gòu)化設(shè)計(jì)工具CSS誕生了。CSS的基本概念是將網(wǎng)頁(yè)內(nèi)容的樣式分離出來(lái)，所以網(wǎng)頁(yè)的外觀和格式等屬性將會(huì)在CSS中被定義，但內(nèi)容依然保留在HTML中。
CSS的第一個(gè)版本很不靈活，但最大的問(wèn)題是瀏覽器的兼容性，不同瀏覽器對(duì)CSS的支持不一樣，這個(gè)花了好幾年的時(shí)候才得到改進(jìn)。需要明確的是CSS不是一個(gè)程序言語(yǔ)(coding language)，這相當(dāng)一個(gè)聲明性的語(yǔ)言。
2007：MOBILE——柵格和框架
移動(dòng)端網(wǎng)頁(yè)本身就是一個(gè)挑戰(zhàn)，除了各種不同設(shè)備對(duì)應(yīng)不同尺寸的布局，它的內(nèi)容應(yīng)該和小屏幕上的相同或是單獨(dú)剝離出來(lái)？是否添加廣告到小屏幕上？訪問(wèn)速度也是問(wèn)題，因?yàn)閮?nèi)容太大，訪客瀏覽網(wǎng)頁(yè)慢、流量增加，從而成本也增加。
第一個(gè)重大的改進(jìn)是柵格系統(tǒng)的出現(xiàn)。經(jīng)過(guò)摸索，960柵格系統(tǒng)最終勝出，經(jīng)典的12欄柵格被設(shè)計(jì)師們廣泛的接納，甚至成為許多設(shè)計(jì)師最常用的設(shè)計(jì)工具。接下來(lái)，各種常見(jiàn)的設(shè)計(jì)元素諸如表格、導(dǎo)航、按鈕被標(biāo)準(zhǔn)化，打包成為可復(fù)用的套件，這基本上就構(gòu)成了視覺(jué)元素庫(kù)，其中還納入了常見(jiàn)的代碼。其中最典型的代表就是 Bootstrap 和 Foundation ，它們也使得網(wǎng)站和APP之間的界限逐漸模糊。
2010：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
驚才絕艷的設(shè)計(jì)師Ethan Marcotte決定挑戰(zhàn)傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)，它讓網(wǎng)頁(yè)在內(nèi)容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設(shè)計(jì)命名為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）。網(wǎng)頁(yè)設(shè)計(jì)師依然只需要HTML和CSS就可以實(shí)現(xiàn)這種功能，不得不承認(rèn)這種設(shè)計(jì)理念非常超前。不過(guò)大家對(duì)于響應(yīng)式設(shè)計(jì)依然有些許誤解。對(duì)于設(shè)計(jì)師而言，響應(yīng)式設(shè)計(jì)意味著為設(shè)計(jì)許多不同的布局。對(duì)于用戶(hù)而言，響應(yīng)式設(shè)計(jì)就意味著這個(gè)網(wǎng)頁(yè)可以在手機(jī)上完美瀏覽。對(duì)于開(kāi)發(fā)者而言，響應(yīng)式設(shè)計(jì)意味著如何控制好網(wǎng)站圖片應(yīng)付移動(dòng)端和桌面端，在不同情形和語(yǔ)義下，擁有良好的下載速度和呈現(xiàn)效果，等等。簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能在任何情況下良好展現(xiàn)。至少在這一點(diǎn)上，所有人能達(dá)成共識(shí)。
2010：Hello FLAT
設(shè)計(jì)一些布局需要大量的時(shí)間，幸運(yùn)的是我們決定拋棄界面上那些花哨的裝飾元素（如3D、陰影效果、紋理材質(zhì)），重新專(zhuān)注于根本的內(nèi)容呈現(xiàn)。在此之前，網(wǎng)頁(yè)設(shè)計(jì)講求精美的圖片和排版效果，漂亮的插畫(huà)與周到的布局設(shè)計(jì)，而簡(jiǎn)化這些視覺(jué)元素之后，就是我們說(shuō)所的“扁平化設(shè)計(jì)”。將復(fù)雜的效果淡化之后，視覺(jué)的扁平化，也促使內(nèi)容和信息層級(jí)的扁平化。充滿(mǎn)光影特效的按鈕被扁平化的圖標(biāo)所替代，矢量圖形和圖標(biāo)字體也開(kāi)始被大范圍使用，網(wǎng)頁(yè)字體和版式設(shè)計(jì)的結(jié)合令網(wǎng)頁(yè)視覺(jué)更加漂亮。有趣的是，這時(shí)候的網(wǎng)頁(yè)設(shè)計(jì)開(kāi)始有返璞歸真的感覺(jué)。
2014：光明的未來(lái)
技術(shù)的革新已經(jīng)開(kāi)始將網(wǎng)頁(yè)設(shè)計(jì)推動(dòng)到一個(gè)全新的境界。在許多設(shè)計(jì)平臺(tái)上，設(shè)計(jì)師只需要在屏幕上移動(dòng)不同的控件就可以生成整潔可用的代碼出來(lái)，并且這些代碼非常靈活，可控度極高！試想一下，開(kāi)發(fā)者無(wú)需擔(dān)心瀏覽器兼容性，可以專(zhuān)注于更加實(shí)際的問(wèn)題！
新誕生的概念正在推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width），就使得網(wǎng)頁(yè)元素的位置控制更加靈活自由，一次性解決了設(shè)計(jì)師糾結(jié)多年的頑疾。作為CSS一部分的Flexbox則是另一個(gè)新事物，它可以快速創(chuàng)建布局，輕松修改屬性而無(wú)需編寫(xiě)過(guò)多代碼。
2015：前端框架之路
2015將是前端框架相互借鑒相互融合的一年，隨著webcomponent的落地，大家都在向標(biāo)準(zhǔn)靠近。實(shí)際上所謂的MVVM框架的關(guān)鍵技術(shù)就一個(gè)：數(shù)據(jù)與視圖的綁定。在Angular/polymer/knockout/vue/avalon 中，這項(xiàng)技術(shù)的實(shí)現(xiàn)又可以拆分成兩個(gè)關(guān)鍵點(diǎn)：模板分析和數(shù)據(jù)監(jiān)測(cè)。而 React 本質(zhì)上只是View（視圖層），它是Facebook所開(kāi)發(fā)的JavaScript框架，它的唯一目標(biāo)就是構(gòu)建高性能的用戶(hù)接口。開(kāi)發(fā)React就是為了解決其他JavaScript框架都未能解決的一個(gè)問(wèn)題-高效地渲染大型數(shù)據(jù)集。它采用了虛擬文檔對(duì)象模型(DOM)和拼接機(jī)制，這樣，每一次對(duì)網(wǎng)頁(yè)做了更改后，React就只更新與更改相關(guān)的部分，而不需要重新對(duì)整個(gè)站點(diǎn)進(jìn)行渲染。
我們看到在"渲染機(jī)制"、"數(shù)據(jù)綁定"、"組件化"、"模塊化"這些關(guān)鍵技術(shù)點(diǎn)中各個(gè)框架中都有非常精彩的實(shí)現(xiàn)，值得深入學(xué)習(xí)。
網(wǎng)頁(yè)設(shè)計(jì)正在飛速發(fā)展，未來(lái)還會(huì)有越來(lái)越多的創(chuàng)新，就讓我們拭目以待吧！
