從1990年代初由基本文本編輯的網(wǎng)頁開始，到1990年代中期的在線網(wǎng)頁建設(shè)，從上世紀(jì)90年代末崛起的flash，到CSS和Javasvript的崛起，再到web 2.0鼎盛時期，以及慢慢到來的web 3.0時代，網(wǎng)頁設(shè)計三十年，經(jīng)歷了多次變革。這樣一段跨度不長的簡史，融合著技術(shù)、設(shè)計與思想的演進，勾畫出改變世界的剪影。

1989年網(wǎng)頁設(shè)計前夜

在互聯(lián)網(wǎng)真正興起之前，黑色的顯示屏僅能顯示單色的像素，因此當(dāng)時的網(wǎng)頁設(shè)計是真正意義上的“極簡風(fēng)”。沒有圖像，只有單色像素風(fēng)格的純文字，Web Design的概念僅僅意味著符號與制表（Tab鍵）的排列組合。盡管早在80年代就已經(jīng)有了圖形化界面，但普及率一如那個年代電視機進入尋常百姓家的機會，低得可憐。

1995年表格在網(wǎng)頁的興起

瀏覽器的出現(xiàn)使網(wǎng)頁設(shè)計向前邁進一大步。當(dāng)時接近于信息結(jié)構(gòu)化的概念，是HTML中已有的元素——table（表格），而在那個時代，表格算得上是近乎柵格系統(tǒng)般靈活的設(shè)計神器。網(wǎng)頁設(shè)計師David Siegel在他的著作《Creating Killer Sites》里面講述了設(shè)計優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動態(tài)的表格巧妙結(jié)合。

同時，為了應(yīng)對網(wǎng)頁脆弱的結(jié)構(gòu)，切片設(shè)計（Slicing Design）也流行了起來。設(shè)計師在創(chuàng)建布局時，常用的方法就是切片+表格。他們設(shè)計出漂亮的網(wǎng)頁布局，隨后開發(fā)者將整個設(shè)計稿切片，找出呈現(xiàn)設(shè)計的佳方法。

1995年JavaScript助陣

JavaScript的出現(xiàn)彌補了尚且原始的HTML的不足，它可以解決HTML一些局限性，比如，需要一個彈提示，這時就需要JS來實現(xiàn)了。不過由于它處于整個網(wǎng)頁布局的層并且需要單獨加載，很多時候它僅僅被某些開發(fā)者用作一個簡單的補丁，但如果使用得當(dāng)，JS可以非常強大，由它實現(xiàn)的背景圖像、GIF動畫、閃字、計數(shù)器等工具迅速成為網(wǎng)頁中必須的噱頭。

1996年Flash的黃金時代

作為一門新技術(shù)，F(xiàn)lash打破了之前網(wǎng)頁設(shè)計所固有的限制，為網(wǎng)頁開發(fā)者/設(shè)計師提供了前所未有的創(chuàng)作空間。Flash具有極其靈活的呈現(xiàn)形式，設(shè)計師設(shè)計形狀、布局、互動以及一些酷炫的動畫，在這一個工具上執(zhí)行完成后，以一個單獨的文件形式輸出，并顯示在瀏覽器中，用戶只需安裝插件并等待FLASH加載完成即可瀏覽。

可惜的是，這種設(shè)計不利于網(wǎng)站搜索，并且還需要消耗計算機大量的運算能力。2007年，蘋果公司發(fā)布他們的第一臺iPhone時，就決定徹底放棄Flash。自此，至少在網(wǎng)頁設(shè)計領(lǐng)域，F(xiàn)lash開始走下坡路。

1998年CSS的誕生

差不多是在Flash崛起的同時，一種更好的網(wǎng)頁結(jié)構(gòu)化設(shè)計工具CSS誕生了。CSS，層疊樣式表（Cascading Style Sheets），它的基本概念是將網(wǎng)頁內(nèi)容的樣式分離出來，網(wǎng)頁的外觀和格式等屬性將會在CSS中被定義，但內(nèi)容依然保留在HTML中。

但由于瀏覽器的兼容性問題，CSS的第一個版本很不靈活，而這個問題也是在它誕生好幾年之后猜得到改進。

2007年柵格和框架

智能手機慢慢普及之后，設(shè)計師也不得不開始考慮移動端網(wǎng)頁的設(shè)計——這本身就是一個挑戰(zhàn)。除了考慮各種不同設(shè)備對應(yīng)不同尺寸的布局，訪問速度也是問題。因為內(nèi)容量太大，訪客瀏覽網(wǎng)頁速度變慢，流量增加導(dǎo)致成本增加。

一個關(guān)鍵轉(zhuǎn)機是柵格系統(tǒng)的出現(xiàn)。經(jīng)過摸索，960柵格系統(tǒng)終勝出，經(jīng)典的12欄柵格被設(shè)計師們廣泛的接納，并成為許多設(shè)計師常用的設(shè)計工具。接下來，各種常見的設(shè)計元素諸如表格、導(dǎo)航、按鈕被標(biāo)準(zhǔn)化，打包成為可復(fù)用的套件，這基本上就構(gòu)成了視覺元素庫，并納入了常見的代碼。其中典型的代表就是Bootstrap和Foundation，它們也使得網(wǎng)站和APP之間的界限逐漸模糊。

2010年響應(yīng)式網(wǎng)頁設(shè)計

驚才絕艷的設(shè)計師Ethan Marcotte在2010年5月提出一個了不起的構(gòu)想：用一個網(wǎng)站兼容多個終端。在網(wǎng)頁內(nèi)容不變的前提下，布局隨著窗口和屏幕的變化而變化，他將這種設(shè)計命名為響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）。對于設(shè)計師而言，響應(yīng)式設(shè)計意味著為設(shè)計許多不同的布局。對于用戶而言，響應(yīng)式設(shè)計就意味著這個網(wǎng)頁可以在手機上好瀏覽。對于開發(fā)者而言，響應(yīng)式設(shè)計意味著如何控制好網(wǎng)站圖片應(yīng)付移動端和PC端，在不同情形和語義下，擁有良好的下載速度和呈現(xiàn)效果。簡而言之，就是一個網(wǎng)站能在任何情況下良好展現(xiàn)。

2010年扁平化設(shè)計

設(shè)計師決定拋棄界面上那些花哨的裝飾元素（如3D、陰影效果、紋理材質(zhì)），重新專注于重要內(nèi)容呈現(xiàn)。在此之前，網(wǎng)頁設(shè)計講究精美的圖片和排版效果、漂亮的插畫與周到的布局設(shè)計，而簡化這些視覺元素之后，就構(gòu)成了我們說所的“扁平化設(shè)計”。充滿光影特效的按鈕被扁平化的圖標(biāo)所替代，矢量圖形和圖標(biāo)字體也開始被大范圍使用，網(wǎng)頁字體和版式設(shè)計的結(jié)合令網(wǎng)頁視覺更加漂亮。將復(fù)雜的效果淡化之后，不僅視覺扁平化，也促使內(nèi)容和信息層級的扁平化，網(wǎng)頁設(shè)計開始轉(zhuǎn)向返璞歸真。

2019年微交互設(shè)計

微交互存在的目的，是以吸引人的方式來給予用戶以反饋、驚喜。這是一種非常有效的引導(dǎo)方式，它是有信息進來的時候的通知彈出框，是刷新頁面完成時的提醒，是點擊之后的加載小動效。微交互設(shè)計從2018開始，在2019年明顯的增長，更加多樣的微交互開始出現(xiàn)在網(wǎng)頁設(shè)計作品當(dāng)中，吸引著用戶的注意力，提供有效的信息反饋，提供引導(dǎo)。技術(shù)革新與人們的審美變化，不斷將網(wǎng)頁設(shè)計推動到一個全新的境界。

成都網(wǎng)站建設(shè)公司了解網(wǎng)頁設(shè)計變遷史，洞察其未來流行趨勢。以豐富的行業(yè)經(jīng)驗、深刻的市場感知和先進的創(chuàng)意理念，設(shè)計貼近時代審美、符合行業(yè)氣質(zhì)、凸顯企業(yè)特點的網(wǎng)站布局及風(fēng)格，通過強大的技術(shù)執(zhí)行，大程度滿足用戶個性化網(wǎng)站需求。根據(jù)企業(yè)的文化、理念、產(chǎn)品、服務(wù)特點，對目標(biāo)用戶精準(zhǔn)定位，以用戶為中心，把每一個體驗點合理布局到整個網(wǎng)站，讓用戶在每個細節(jié)中都能得到優(yōu)質(zhì)體驗，以體驗式引領(lǐng)幫助用戶了解企業(yè)產(chǎn)品和服務(wù)，知曉品牌價值，并在瀏覽中快速產(chǎn)生購買或深入了解的欲望，從而轉(zhuǎn)化為實際用戶或者有忠誠度的潛在用戶，讓網(wǎng)站與企業(yè)相互成就，樹立企業(yè)在同行業(yè)的絕對優(yōu)勢。

本文題目：淺談網(wǎng)頁設(shè)計的三十年發(fā)展簡史
網(wǎng)頁鏈接：http://www.rwnh.cn/news/222555.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、標(biāo)簽優(yōu)化、用戶體驗

廣告

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