中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

寫(xiě)給網(wǎng)頁(yè)設(shè)計(jì)師的網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)史

2022-11-12    分類: 網(wǎng)站建設(shè)

編者按:互聯(lián)網(wǎng)的誕生本就是一個(gè)奇跡,作為其中最重要的載體之一,網(wǎng)頁(yè)就是這個(gè)大時(shí)代最重要的縮影,相關(guān)技術(shù)、設(shè)計(jì)伴隨著信息共享催動(dòng)著整個(gè)時(shí)代滾滾向前。這是一段簡(jiǎn)短的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史,我們可以看到技術(shù)、設(shè)計(jì)與思想的演進(jìn),看到無(wú)數(shù)有識(shí)之士改變世界的剪影。

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

網(wǎng)頁(yè)設(shè)計(jì):黎明前的黑暗(1989)

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

表格(table):網(wǎng)頁(yè)的興起(1995)

能夠顯示圖片的瀏覽器的誕生,是促使網(wǎng)頁(yè)設(shè)計(jì)這個(gè)行業(yè)誕生的重要先決條件。實(shí)際上在當(dāng)時(shí),最接近于信息結(jié)構(gòu)化的概念,是HTML中已有的元素:表格(Table)。所以,David Siegel 在他的網(wǎng)頁(yè)設(shè)計(jì)書(shū)《Creating Killer Sites》講述了他設(shè)計(jì)優(yōu)秀網(wǎng)站的秘訣:在表格中嵌套表格,將靜態(tài)的表格和動(dòng)態(tài)的表格以巧妙的方式結(jié)合到一起。盡管表格本身是用來(lái)承載數(shù)據(jù)的,用來(lái)承載內(nèi)容和圖片有點(diǎn)奇怪,但是在那個(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è)布局,隨后開(kāi)發(fā)者將整個(gè)設(shè)計(jì)稿切片,找出呈現(xiàn)設(shè)計(jì)的好方法。另一方面,表格還有一些炫酷的功能,比如垂直對(duì)齊,以像素為單位或者以百分比來(lái)控制對(duì)齊。在那個(gè)時(shí)代,表格可是近乎柵格系統(tǒng)一般的靈活的設(shè)計(jì)神器,也正是因此,那個(gè)時(shí)代的開(kāi)發(fā)者并不喜歡前端的代碼。(表格嵌套表格有多亂?)

來(lái)自JavaScript的救援(1995)

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

Flash:自由的黃金時(shí)代(1996)

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

CSS的誕生 (1998)

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

柵格與框架:移動(dòng)端的崛起(2007)

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

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

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

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

扁平化的時(shí)代(2010)

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

光明的未來(lái)(2014)

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

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

網(wǎng)頁(yè)設(shè)計(jì)正在飛速發(fā)展,未來(lái)還會(huì)有越來(lái)越多的創(chuàng)新,就讓我們拭目以待吧!

分享名稱:寫(xiě)給網(wǎng)頁(yè)設(shè)計(jì)師的網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)史
文章源于:http://www.rwnh.cn/news/212780.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、云服務(wù)器靜態(tài)網(wǎng)站、外貿(mào)建站商城網(wǎng)站、自適應(yīng)網(wǎng)站

廣告

聲明:本網(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)

網(wǎng)站優(yōu)化排名
鹤岗市| 五大连池市| 开阳县| 龙口市| 浦北县| 景德镇市| 志丹县| 九寨沟县| 密山市| 兰考县| 白水县| 开平市| 缙云县| 常德市| 武安市| 通许县| 阿图什市| 开平市| 东辽县| 阳高县| 邛崃市| 佛教| 富蕴县| 界首市| 石嘴山市| 准格尔旗| 雷州市| 松溪县| 琼海市| 营山县| 二手房| 蒙山县| 信宜市| 建平县| 灌南县| 株洲市| 济宁市| 固阳县| 新昌县| 太仓市| 长泰县|