編者按：互聯(lián)網(wǎng)的誕生本就是一個奇跡，作為其中最重要的載體之一，網(wǎng)頁就是這個大時代最重要的縮影，相關(guān)技術(shù)、設(shè)計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網(wǎng)頁設(shè)計發(fā)展史，我們可以看到技術(shù)、設(shè)計與思想的演進，看到無數(shù)有識之士改變世界的剪影。本文作者是網(wǎng)站Froont.com的聯(lián)合創(chuàng)始人Sandijs Ruluks。

當我發(fā)現(xiàn)設(shè)計網(wǎng)頁有多投機取巧的方法之時，就逐漸開始對手打網(wǎng)頁代碼失去興趣。的確，許多網(wǎng)頁設(shè)計的問題并不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什么會有做設(shè)計和寫代碼的分工？隨著技術(shù)的發(fā)展，許多在過去難以解決的問題現(xiàn)在可以輕松搞定，但為什么與此同時一些簡單的事情反而越來越難以實現(xiàn)？這些問題的答案并不是簡單的是與否，對與錯，也許我們需要從網(wǎng)頁設(shè)計的整個發(fā)展歷程來尋找答案，找到真正彌合設(shè)計與代碼之間隔膜的原因所在。

溫故歷史之前，不妨看看2014年最優(yōu)秀的網(wǎng)頁設(shè)計：《愛不釋手！2014年最佳的20個優(yōu)秀網(wǎng)頁設(shè)計》

網(wǎng)頁設(shè)計：黎明前的黑暗（1989）

在互聯(lián)網(wǎng)真正開始之時，黑色的顯示屏僅能顯示單色的像素。可以說，當互聯(lián)網(wǎng)天地初開之時，Web Design 僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進入千家萬戶，而那時候，才是屬于互聯(lián)網(wǎng)的狂野西部。

表格（table）：網(wǎng)頁的興起（1995）

能夠顯示圖片的瀏覽器的誕生，是促使網(wǎng)頁設(shè)計這個行業(yè)誕生的重要先決條件。實際上在當時，最接近于信息結(jié)構(gòu)化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的網(wǎng)頁設(shè)計書《Creating Killer Sites》講述了他設(shè)計優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動態(tài)的表格以巧妙的方式結(jié)合到一起。盡管表格本身是用來承載數(shù)據(jù)的，用來承載內(nèi)容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，并且大行其道。

網(wǎng)頁設(shè)計所面臨的另外一個問題，就是如何保持網(wǎng)頁那脆弱的結(jié)構(gòu)。也正是因為這種需求，切片設(shè)計（Slicing Design）逐漸流行了起來。設(shè)計師創(chuàng)建出漂亮的網(wǎng)頁布局，隨后開發(fā)者將整個設(shè)計稿切片，找出呈現(xiàn)設(shè)計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，表格可是近乎柵格系統(tǒng)一般的靈活的設(shè)計神器，也正是因此，那個時代的開發(fā)者并不喜歡前端的代碼。（表格嵌套表格有多亂？）

來自JavaScript的救援（1995）

JavaScript的出現(xiàn)補足了尚且原始的HTML。舉個例子，如果你想寫個彈出窗，或者想動態(tài)修改某些對象的順序？HTML不行，但是JS可以！不過此時JS的主要問題在于，它處于整個網(wǎng)頁布局的頂層并且需要單獨加載。很多時候它僅僅被懶惰的開發(fā)者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。今天，同樣的功能如果CSS能實現(xiàn)，我們會盡量避免使用JS。不可否認的是，JS本身確實很強大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。

Flash：自由的黃金時代（1996）

作為一門新技術(shù)，F(xiàn)lash為網(wǎng)頁開發(fā)者/設(shè)計師帶來了前所未有的自由，它打破了之前網(wǎng)頁設(shè)計所固有的限制。借助Flash，設(shè)計師可以隨心所欲地在網(wǎng)頁上展現(xiàn)任何形狀、布局、動畫和交互，可以使用任何喜歡的字體，他們借助Flash熔于一體。所有的這一切最終會被打包成為一個文件，然后被發(fā)送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術(shù)般的網(wǎng)頁。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設(shè)計并不開放，也不利于搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發(fā)布他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，F(xiàn)lash開始走下坡路——至少在網(wǎng)頁設(shè)計領(lǐng)域。

CSS的誕生 (1998)

差不多是在Flash崛起的同時，一種更好的網(wǎng)頁結(jié)構(gòu)化設(shè)計工具CSS誕生了。CSS的基本概念是將網(wǎng)頁內(nèi)容的樣式分離出來，所以網(wǎng)頁的外觀和格式等屬性將會在CSS中被定義，但內(nèi)容依然保留在HTML中。早期版本的CSS并沒有現(xiàn)在那么靈活，和許多新事物一樣，它最大的障礙在于許多瀏覽器還沒來得及接納這一新技術(shù)，對于開發(fā)者而言，這是一個頭疼的事情。需要明確說明的是，CSS并非全新的編程語言，它僅僅只是一種聲明性語言。那么網(wǎng)頁設(shè)計師需要學習編程嗎？可能需要。但是網(wǎng)頁設(shè)計師需要懂得CSS么？當然需要。

柵格與框架：移動端的崛起（2007）

此刻，在手機上瀏覽網(wǎng)頁本就是一種全新的挑戰(zhàn)。設(shè)計師除了要為不同設(shè)備設(shè)計不同的布局，還面臨著內(nèi)容控制的問題：小屏幕上展示的內(nèi)容要和桌面端一樣多，還是需要剝離開來？桌面端網(wǎng)頁上閃亮精致的小廣告要如何在手機上呈現(xiàn)？加載速度也是一個大問題，移動端設(shè)備的網(wǎng)絡(luò)加載速度不夠快，而且桌面端網(wǎng)頁會消耗大量的流量。網(wǎng)頁設(shè)計亟待改進。

第一個重大的改進是柵格系統(tǒng)的出現(xiàn)。經(jīng)過摸索，960柵格系統(tǒng)最終勝出，經(jīng)典的12欄柵格被設(shè)計師們廣泛的接納，甚至成為許多設(shè)計師最常用的設(shè)計工具。接下來，各種常見的設(shè)計元素諸如表格、導航、按鈕被標準化，打包成為可復用的套件，這基本上就構(gòu)成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是Bootstrap和Foundation，它們也使得網(wǎng)站和APP之間的界限逐漸模糊。當然，它們也不是沒有缺點，借助這些庫設(shè)計出來的網(wǎng)頁往往大同小異，而且網(wǎng)頁設(shè)計師要想使用它們還得深入了解相關(guān)的代碼知識。

響應式網(wǎng)頁設(shè)計（2010）

驚才絕艷的設(shè)計師Ethan Marcotte決定挑戰(zhàn)傳統(tǒng)的網(wǎng)頁設(shè)計，它讓網(wǎng)頁在內(nèi)容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設(shè)計命名為響應式網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計師依然只需要HTML和CSS就可以實現(xiàn)這種功能，不得不承認這種設(shè)計理念非常超前。不過大家對于響應式設(shè)計依然有些許誤解。對于設(shè)計師而言，響應式設(shè)計意味著為設(shè)計許多不同的布局。對于用戶而言，響應式設(shè)計就意味著這個網(wǎng)頁可以在手機上完美瀏覽。對于開發(fā)者而言，響應式設(shè)計意味著如何控制好網(wǎng)站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現(xiàn)效果，等等。簡而言之，就是一個網(wǎng)站能在任何情況下良好展現(xiàn)。至少在這一點上，所有人能達成共識。

扁平化的時代（2010）

設(shè)計網(wǎng)頁布局總會花費大量的時間，好在這個時候我們開始拋棄復雜的光影效果，重新專注于根本的內(nèi)容呈現(xiàn)。在此之前，網(wǎng)頁設(shè)計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設(shè)計，而簡化這些視覺元素之后，就是我們說所的“扁平化設(shè)計”。將復雜的效果淡化之后，視覺的扁平化，也促使內(nèi)容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大范圍使用，網(wǎng)頁字體和版式設(shè)計的結(jié)合令網(wǎng)頁視覺更加漂亮。有趣的是，這時候的網(wǎng)頁設(shè)計開始有返璞歸真的感覺。

光明的未來（2014）

技術(shù)的革新已經(jīng)開始將網(wǎng)頁設(shè)計推動到一個全新的境界。在許多設(shè)計平臺上，設(shè)計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，并且這些代碼非常靈活，可控度極高！試想一下，開發(fā)者無需擔心瀏覽器兼容性，可以專注于更加實際的問題！

新誕生的概念正在推動網(wǎng)頁設(shè)計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width），就使得網(wǎng)頁元素的位置控制更加靈活自由，一次性解決了設(shè)計師糾結(jié)多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創(chuàng)建布局，輕松修改屬性而無需編寫過多代碼。

網(wǎng)頁設(shè)計正在飛速發(fā)展，未來還會有越來越多的創(chuàng)新，就讓我們拭目以待吧！

【最值得了解的網(wǎng)頁設(shè)計趨勢】

學習一下這枚帶你走向未來的按鈕：
《知根知底的趨勢！2014年最值得掌握的趨勢”幽靈按鈕”》

掌控視差可以讓你的網(wǎng)站走向靈動：
《最新的別放過！30個盡顯創(chuàng)意的視差滾動網(wǎng)站設(shè)計》

讓動效的替代網(wǎng)頁中干澀的語言吧：
《設(shè)計師的必備技能！你需要學會設(shè)計有意義的動效》

原文地址：Froont
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：