網頁設計簡史看設計&代碼「隔膜」

本文來自網易雲社區

做者：馬寶

設計與代碼之間隔膜所在？既然你誠心誠意地問了，我就大發慈悲地告訴你。爲了防止地球被破壞，爲了維護世界的和平，爲了貫徹愛與真實的邪惡~，我是穿梭在前端與設計之間愛與美麗的落花生（化身），可愛又迷人的變態角色（二者之間的紐帶），白洞，白色的明天~~嗯， 彷佛很跑偏，客官莫急帶着回憶往下看神往而又心動到不行的GIF神圖 勾起了我多少的童年回憶。

許多網頁設計的問題並不止一種解決方案，可是不多有完美的方案能解決全部的瀏覽器兼容性問題。最令我納悶的是，爲何會有作設計和寫代碼的分工？隨着技術的發展，許多在過去難以解決的問題如今能夠輕鬆搞定，但爲何與此同時一些簡單的事情反而愈來愈難以實現？這些問題的答案並非簡單的是與否，對與錯，也許咱們須要從網頁設計的整個發展歷程來尋找答案，找到真正彌合設計與代碼之間隔膜的緣由所在。

原文.^1做者是網站Froont.com的聯合創始人Sandijs Ruluks。

1.網頁設計：黎明前的黑暗（1989）

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

諸多85後的同窗，比方說我，那個時候正在玩泥巴吧!對於網頁設計的暗黑時代，我惟一僅存的記憶應該是上學那會兒學過的QBASIC界面，

INPUT i
mabao=250*iPRINT mabao
END

2.史上第一個網頁被建立（1991）

蒂姆·伯納斯－李創建的第一個網站（也是世界上第一個網站）是http: //info. cern. ch/，它於1991年8月6日上網，它解釋了萬維網是什麼，如何使用網頁瀏覽器和如何創建一個網頁服務器等等。蒂姆·伯納斯－李後來在這個網站裏列舉了其它網站，所以它也是世界上第一個萬維網目錄。

3.表格（table）：網頁的興起（1992）

可以顯示圖片的瀏覽器的誕生，是促使網頁設計這個行業誕生的重要先決條件。實際上在當時，最接近於信息結構化的概念，是HTML中已有的元素：表格（Table）。因此，David Siegel 在他的網頁設計書《Creating Killer Sites》講述了他設計優秀網站的祕訣：在表格中嵌套表格，將靜態的表格和動態的表格以巧妙的方式結合到一塊兒。儘管表格自己是用來承載數據的，用來承載內容和圖片有點奇怪，可是在那個時代，這種方法依然顯得頗爲靠譜，而且大行其道。

網頁設計所面臨的另一個問題，就是如何保持網頁那脆弱的結構。也正是由於這種需求，切片設計（Slicing Design）逐漸流行了起來。設計師建立出漂亮的網頁佈局，隨後開發者將整個設計稿切片，找出呈現設計的最佳方法。另外一方面，表格還有一些炫酷的功能，好比垂直對齊，以像素爲單位或者以百分比來控制對齊。在那個時代，表格但是近乎柵格系統通常的靈活的設計神器，也正是所以，那個時代的開發者並不喜歡前端的代碼。（表格嵌套表格有多亂？）

之前作網站的作法，1. PS中的切片切一下，2. 導出web 所用格式，3. 選上全部切片「html＋圖片」刪除多餘的圖片，寫個title；一張靜態頁面HTML就完成了。（如今不少專題頁 快速的實現方法也是這樣的，你們都懂）

4.來自JavaScript的救援（1995）

JavaScript的出現補足了尚且原始的HTML。舉個例子，若是你想寫個彈出窗，或者想動態修改某些對象的順序？HTML不行，可是JS能夠！不過此時JS的主要問題在於，它處於整個網頁佈局的頂層而且須要單獨加載。不少時候它僅僅被懶惰的開發者用做一個簡單的補丁，但若是使用得當，JS能夠很是強大。今天，一樣的功能若是CSS能實現，咱們會盡可能避免使用JS。不能否認的是，JS自己確實很強大，前端經常使用的jQuery，後端的Node.js都是不可多得的好東西。

nej.netease.com 前端仔趕忙膜拜飛哥吧！ @caijf@corp.netease.com

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

做爲一門新技術，Flash爲網頁開發者/設計師帶來了史無前例的自由，它打破了以前網頁設計所固有的限制。藉助Flash，設計師能夠爲所欲爲地在網頁上展示任何形狀、佈局、動畫和交互，可使用任何喜歡的字體，他們藉助Flash熔於一體。全部的這一切最終會被打包成爲一個文件，而後被髮送到瀏覽器端顯示出來。這也就意味着，用戶只須要擁有最新的Flash插件和些許等待時間，就能夠享有一個魔術般的網頁。這是啓動頁面（splash pages）、介紹動畫以及各類交互特效的黃金時代。不幸的是，這種設計並不開放，也不利於搜索，還須要消耗計算機大量的運算能力。2007年，當蘋果發佈他們的第一臺iPhone的時候，就決定完全放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。

http://www.thefwa.com 曾經最喜好的FLASH 全站收集沒有之一，如今也改爲HTML，裏面還有少許的全flash 站點，minisite

6.CSS的誕生 (1998)

差很少是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生了。CSS的基本概念是將網頁內容的樣式分離出來，因此網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。早期版本的CSS並無如今那麼靈活，和許多新事物同樣，它最大的障礙在於許多瀏覽器還沒來得及接納這一新技術，對於開發者而言，這是一個頭疼的事情。須要明確說明的是，CSS並不是全新的編程語言，它僅僅只是一種聲明性語言。那麼網頁設計師須要學習編程嗎？可能須要。可是網頁設計師須要懂得CSS麼？固然須要。

網頁設計師須要懂得CSS麼？固然須要。

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

此刻，在手機上瀏覽網頁本就是一種全新的挑戰。設計師除了要爲不一樣設備設計不一樣的佈局，還面臨着內容控制的問題：小屏幕上展現的內容要和桌面端同樣多，仍是須要剝離開來？桌面端網頁上閃亮精緻的小廣告要如何在手機上呈現？加載速度也是一個大問題，移動端設備的網絡加載速度不夠快，並且桌面端網頁會消耗大量的流量。網頁設計亟待改進。

第一個重大的改進是柵格系統的出現。通過摸索，960柵格系統最終勝出，經典的12欄柵格被設計師們普遍的接納，甚至成爲許多設計師最經常使用的設計工具。接下來，各類常見的設計元素諸如表格、導航、按鈕被標準化，打包成爲可複用的套件，這基本上就構成了視覺元素庫，其中還歸入了常見的代碼。其中最典型的表明就是Bootstrap和Foundation，它們也使得網站和APP之間的界限逐漸模糊。固然，它們也不是沒有缺點，藉助這些庫設計出來的網頁每每大同小異，並且網頁設計師要想使用它們還得深刻了解相關的代碼知識。

8.響應式網頁設計（2010）

驚才絕豔的設計師Ethan Marcotte決定挑戰傳統的網頁設計，它讓網頁在內容不變的前提下，佈局隨着窗口和屏幕的變化而變化，而且將這種設計命名爲響應式網頁設計。網頁設計師依然只須要HTML和CSS就能夠實現這種功能，不得不認可這種設計理念很是超前。不過你們對於響應式設計依然有些許誤解。對於設計師而言，響應式設計意味着爲設計許多不一樣的佈局。對於用戶而言，響應式設計就意味着這個網頁能夠在手機上完美瀏覽。對於開發者而言，響應式設計意味着如何控制好網站圖片應付移動端和桌面端，在不一樣情形和語義下，擁有良好的下載速度和呈現效果，等等。簡而言之，就是一個網站能在任何狀況下良好展示。至少在這一點上，全部人能達成共識。

9.扁平化的時代（2010）

設計網頁佈局總會花費大量的時間，好在這個時候咱們開始拋棄複雜的光影效果，從新專一於根本的內容呈現。在此以前，網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的佈局設計，而簡化這些視覺元素以後，就是咱們說所的「扁平化設計」。將複雜的效果淡化以後，視覺的扁平化，也促使內容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大範圍使用，網頁字體和版式設計的結合令網頁視覺更加漂亮。有趣的是，這時候的網頁設計開始有返璞歸真的感受。

10.光明的將來（2014）

技術的革新已經開始將網頁設計推進到一個全新的境界。在許多設計平臺上，設計師只須要在屏幕上移動不一樣的控件就能夠生成整潔可用的代碼出來，而且這些代碼很是靈活，可控度極高！試想一下，開發者無需擔憂瀏覽器兼容性，能夠專一於更加實際的問題！

新誕生的概念正在推進網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。做爲CSS一部分的Flexbox則是另外一個新事物，它能夠快速建立佈局，輕鬆修改屬性而無需編寫過多代碼。

網頁設計正在飛速發展，將來還會有愈來愈多的創新，就讓咱們拭目以待吧！

原文地址：
link Froont 優設網譯者：@陳子木 http://www.uisdc.com/brief-history-of-web-design

擴展閱讀： link 一像素的恩怨情仇！程序猿與設計獅之間的那些事兒

本文來自網易雲社區，經做者馬寶受權發佈 

相關文章：
【推薦】 【你離硅谷只差一步】網易中國創業家大賽項目火熱徵集中