寫給設(shè)計師的網(wǎng)頁設(shè)計簡史(網(wǎng)頁設(shè)計培訓(xùn))

/PAGE2寫給設(shè)計師的網(wǎng)頁設(shè)計簡史互聯(lián)網(wǎng)的誕生本就是一個奇跡，作為其中最重要的載體之一，網(wǎng)頁就是這個大時代最重要的縮影，相關(guān)技術(shù)、設(shè)計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網(wǎng)頁設(shè)計發(fā)展史，我們可以看到技術(shù)、設(shè)計與思想的演進(jìn)，看到無數(shù)有識之士改變世界的剪影。當(dāng)我發(fā)現(xiàn)設(shè)計網(wǎng)頁有多投機(jī)取巧的方法之時，就逐漸開始對手打網(wǎng)頁代碼失去興趣。的確，許多網(wǎng)頁設(shè)計的問題并不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什么會有做設(shè)計和寫代碼的分工？隨著技術(shù)的發(fā)展，許多在過去難以解決的問題現(xiàn)在可以輕松搞定，但為什么與此同時一些簡單的事情反而越來越難以實現(xiàn)？這些問題的答案并不是簡單的是與否，對與錯，也許我們需要從網(wǎng)頁設(shè)計的整個發(fā)展歷程來尋找答案，找到真正彌合設(shè)計與代碼之間隔膜的原因所在。網(wǎng)頁設(shè)計：黎明前的黑暗（1989）在互聯(lián)網(wǎng)真正開始之時，黑色的顯示屏僅能顯示單色的像素?？梢哉f，當(dāng)互聯(lián)網(wǎng)天地初開之時，WebDesign僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進(jìn)入千家萬戶，而那時候，才是屬于互聯(lián)網(wǎng)的狂野西部。表格（table）：網(wǎng)頁的興起（1995）能夠顯示圖片的瀏覽器的誕生，是促使網(wǎng)頁設(shè)計這個行業(yè)誕生的重要先決條件。實際上在當(dāng)時，最接近于信息結(jié)構(gòu)化的概念，是HTML中已有的元素：表格（Table）。所以，DavidSiegel在他的網(wǎng)頁設(shè)計書《CreatingKillerSites》講述了他設(shè)計優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動態(tài)的表格以巧妙的方式結(jié)合到一起。盡管表格本身是用來承載數(shù)據(jù)的，用來承載內(nèi)容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，并且大行其道。網(wǎng)頁設(shè)計所面臨的另外一個問題，就是如何保持網(wǎng)頁那脆弱的結(jié)構(gòu)。也正是因為這種需求，切片設(shè)計（SlicingDesign）逐漸流行了起來。設(shè)計師創(chuàng)建出漂亮的網(wǎng)頁布局，隨后開發(fā)者將整個設(shè)計稿切片，找出呈現(xiàn)設(shè)計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，驚才絕艷的設(shè)計師EthanMarcotte決定挑戰(zhàn)傳統(tǒng)的網(wǎng)頁設(shè)計，它讓網(wǎng)頁在內(nèi)容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設(shè)計命名為響應(yīng)式網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計師依然只需要HTML和CSS就可以實現(xiàn)這種功能，不得不承認(rèn)這種設(shè)計理念非常超前。不過大家對于響應(yīng)式設(shè)計依然有些許誤解。對于設(shè)計師而言，響應(yīng)式設(shè)計意味著為設(shè)計許多不同的布局。對于用戶而言，響應(yīng)式設(shè)計就意味著這個網(wǎng)頁可以在手機(jī)上完美瀏覽。對于開發(fā)者而言，響應(yīng)式設(shè)計意味著如何控制好網(wǎng)站圖片應(yīng)付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現(xiàn)效果，等等。簡而言之，就是一個網(wǎng)站能在任何情況下良好展現(xiàn)。至少在這一點上，所有人能達(dá)成共識。扁平化的時代（2010）設(shè)計網(wǎng)頁布局總會花費大量的時間，好在這個時候我們開始拋棄復(fù)雜的光影效果，重新專注于根本的內(nèi)容呈現(xiàn)。在此之前，網(wǎng)頁設(shè)計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設(shè)計，而簡化這些視覺元素之后，就是我們說所的“扁平化設(shè)計”。將復(fù)雜的效果淡化之后，視覺的扁平化，也促使內(nèi)容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標(biāo)所替代，矢量圖形和圖標(biāo)字體也開始被大范圍使用，網(wǎng)頁字體和版式設(shè)計的結(jié)合令網(wǎng)頁視覺更加漂亮。有趣的是，這時候的網(wǎng)頁設(shè)計開始有返璞歸真的感覺。光明的未來（2014）技術(shù)的革新已經(jīng)開始將網(wǎng)頁設(shè)計推動到一個全新的境界。在許多設(shè)計平臺上，設(shè)計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，并且這些代碼非常靈活，可控度極高！試想一下，開發(fā)者無需擔(dān)心瀏覽器兼容性，可以專注于更加實際的問題！新誕生的概念正在推動網(wǎng)頁設(shè)計。CSS中新誕生的屬性，諸如vh和vw（viewportheight與width），就使得網(wǎng)頁元素的位置控制更加靈活自由，一次性解決了設(shè)計師糾結(jié)