網(wǎng)頁(yè)設(shè)計(jì)技術(shù)演進(jìn)歷史

世界第一個(gè)網(wǎng)站是由英國(guó)物理學(xué)家提姆(Tim Berners-Lee) 在歐洲粒子物理研究所(CERN) 時(shí)發(fā)明，當(dāng)初成立的目的，是為了讓世界各地的物理學(xué)家可以方便交換研究資料而開發(fā)，后來(lái)CERN 在1993 年4 月30 日決定以免授權(quán)費(fèi)的方式，將WWW (World Wide Web )和全世界同享。 27年前誕生的CERN的網(wǎng)頁(yè)只運(yùn)用了簡(jiǎn)單的URL、http和html組成，這樣的創(chuàng)舉改變了全世界的網(wǎng)路世界，也讓他在2002年入選BBC最偉大的100名英國(guó)人 。

在網(wǎng)際網(wǎng)路真正開始之時(shí)，黑色的介面僅能顯示單色的像素。當(dāng)時(shí)的網(wǎng)頁(yè)設(shè)計(jì)僅能使用字符和空格排列組合。雖然圖形化的界面早在80年代初就有了，但在此時(shí)普及率并不高。直到90年代，圖形化界面才真正進(jìn)入千家萬(wàn)戶。

1995 網(wǎng)頁(yè)的興起，Table 的使用
能夠顯示圖片的瀏覽器的誕生，是促使網(wǎng)頁(yè)設(shè)計(jì)這個(gè)行業(yè)誕生的重要先決條件。在當(dāng)時(shí)最接近于資訊結(jié)構(gòu)化的概念，是 HTML 中已有的元素：表格（Table）。所以，David Siegel 在他的網(wǎng)頁(yè)設(shè)計(jì)書《Creating Killer Sites》講述了他設(shè)計(jì)優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動(dòng)態(tài)的表格以巧妙的方式結(jié)合到一起。表格正確的用法應(yīng)該是在表現(xiàn)數(shù)據(jù)，但是在那個(gè)時(shí)代，這種方法大為流傳。

網(wǎng)頁(yè)設(shè)計(jì)所面臨的另外一個(gè)問(wèn)題，就是如何保持網(wǎng)頁(yè)脆弱的結(jié)構(gòu)。也正是因?yàn)檫@種需求，切片設(shè)計(jì)（Slicing Design）逐漸流行了起來(lái)。設(shè)計(jì)師創(chuàng)建出漂亮的網(wǎng)頁(yè)排版，開發(fā)者將整個(gè)設(shè)計(jì)稿切片，找出呈現(xiàn)設(shè)計(jì)的好方法。另一方面，表格也有好用的地方，比如垂直對(duì)齊，以像素為單位或者以百分比來(lái)控制對(duì)齊。在當(dāng)時(shí)，表格可是近乎柵格系統(tǒng)一般的靈活的設(shè)計(jì)神器，也正是因此，那個(gè)時(shí)代的開發(fā)者并不喜歡前端的代碼。

1995 JavaScript 打破局限

JavaScript 解決 HTML 一些局限。舉個(gè)例子，如果你想寫個(gè)彈出窗，或者想動(dòng)態(tài)修改某些對(duì)象的順序？ HTML不行，但是JS可以！當(dāng)時(shí)背景圖像、GIF 動(dòng)畫、閃爍文字字、計(jì)數(shù)器等工具迅速成為網(wǎng)頁(yè)的噱頭。不過(guò) JS 主要問(wèn)題在于，它處于整個(gè)網(wǎng)頁(yè)布局的頂層并且需要單獨(dú)加載。很多時(shí)候它僅僅被當(dāng)作一個(gè)簡(jiǎn)單的補(bǔ)丁，但如果使用得當(dāng)，JS可以非常強(qiáng)大。今天，同樣的功能如果CSS能實(shí)現(xiàn)，我們會(huì)盡量避免使用JS。不可否認(rèn)的是，JS 本身確實(shí)很強(qiáng)大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。

1996 Flash 自由的黃金年代

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

1998 CSS (Cascading Style Sheets)

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

2007 Grid Syste iPHONE 問(wèn)世
在手機(jī)上瀏覽網(wǎng)頁(yè)本就是一種全新的挑戰(zhàn)。設(shè)計(jì)師除了要為不同尺寸的螢?zāi)谎b置設(shè)計(jì)不同的排版布局，還面臨著內(nèi)容控制的問(wèn)題：小螢?zāi)簧险故镜膬?nèi)容要和桌面端一樣多，還是需要單獨(dú)抽離開來(lái)？桌面端網(wǎng)頁(yè)上的廣告要如何在手機(jī)上呈現(xiàn)？加載速度也是一個(gè)大問(wèn)題，行動(dòng)裝置的網(wǎng)絡(luò)加載速度不夠快，且桌面端網(wǎng)頁(yè)會(huì)消耗大量的流量。

第一個(gè)重大的改進(jìn)是柵格系統(tǒng)的出現(xiàn)。 960- Grid System 或 12- Grid System，12- Grid System 被設(shè)計(jì)師們廣泛的接納，甚至成為許多設(shè)計(jì)師最常用的設(shè)計(jì)工具。各種常見的設(shè)計(jì)元素諸如表格、導(dǎo)航、按鈕被標(biāo)準(zhǔn)化成為可復(fù)用的套件，構(gòu)成了視覺(jué)元素庫(kù)。其中最典型的代表就是 Bootstrap 和 Foundation，使得網(wǎng)站和APP之間的界限逐漸模糊。它們也不是沒(méi)有缺點(diǎn)，借助這些元素庫(kù)設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)往往大同小異，而且網(wǎng)頁(yè)設(shè)計(jì)師要想使用它們還得深入了解相關(guān)的代碼知識(shí)。

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

設(shè)計(jì)師 Ethan Marcotte 決定挑戰(zhàn)傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)，讓網(wǎng)頁(yè)在內(nèi)容不變的前提下，版面布局隨著顯示器的尺寸的變化而變化，將這種設(shè)計(jì)命名為 RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。設(shè)計(jì)師只需要 HTML 和 CSS 就可以實(shí)現(xiàn)這種功能。不過(guò)大家對(duì)于RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)依然有些許誤解。對(duì)于設(shè)計(jì)師而言，RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)意味著為設(shè)計(jì)許多不同的布局。對(duì)于用戶而言，RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就意味著這個(gè)網(wǎng)頁(yè)可以在手機(jī)上好瀏覽。對(duì)于開發(fā)者而言，RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)意味著如何控制好網(wǎng)站圖片在行動(dòng)端和桌面端，在不同情形和語(yǔ)義下，擁有良好的下載速度和呈現(xiàn)效果。簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能在任何情況下良好展現(xiàn)，且更利于搜尋引擎優(yōu)化。

2010 Flat Design 扁平化設(shè)計(jì)

以往設(shè)計(jì)會(huì)耗費(fèi)太多時(shí)間在繁雜的設(shè)計(jì)上，如不必要的陰影、紋理、裝飾等，現(xiàn)今開始拋棄復(fù)雜的光影效果。設(shè)計(jì)走向化繁為簡(jiǎn)，回歸到設(shè)計(jì)的根本，專注在內(nèi)容呈現(xiàn)。將復(fù)雜的效果淡化后，這些簡(jiǎn)化的視覺(jué)元素就是說(shuō)謂的「扁平化設(shè)計(jì)」。充滿光影特效的按鈕被扁平化的圖標(biāo)所替代，向量圖 SVG 和圖形字 Font icon 體開始被廣泛使用，簡(jiǎn)約的介面與流暢操作，給使用者更直覺(jué)的設(shè)計(jì)。

2014 網(wǎng)頁(yè)設(shè)計(jì)璀璨的未來(lái)

網(wǎng)頁(yè)設(shè)計(jì)演化至今，目的在于呈現(xiàn)直覺(jué)的內(nèi)容、快速的傳遞訊息。在許多設(shè)計(jì)平臺(tái)上，設(shè)計(jì)師只需要在螢?zāi)簧弦苿?dòng)不同的控件就可以生成整潔的代碼，且這些代碼非常靈活，可控度極高！開發(fā)者無(wú)需擔(dān)心瀏覽器兼容性，可以專注于更加實(shí)際的問(wèn)題！網(wǎng)頁(yè)設(shè)計(jì)的概念與技術(shù)不斷推陳出新。在 CSS 中新誕生的屬性，如 vh 和 vw（viewport height 與 width），就使得網(wǎng)頁(yè)元素的定位控制更加靈活自由，一次性解決了設(shè)計(jì)師糾結(jié)多年的頑疾。還有影片型網(wǎng)站、向量圖形 SVG 與 圖形字 Font icon...等技術(shù)使網(wǎng)站效能更加優(yōu)化。

網(wǎng)頁(yè)題目：網(wǎng)頁(yè)設(shè)計(jì)技術(shù)演進(jìn)歷史
分享路徑：http://www.bm7419.com/news/134911.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、Google、App開發(fā)、網(wǎng)站收錄、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)