您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 圖趣新聞 >> 站長(zhǎng)資訊 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)之旅:探索柵格系統(tǒng)的延續(xù)美學(xué)

網(wǎng)頁(yè)設(shè)計(jì)中柵格系統(tǒng)的誕生

1692年,新登基的法國(guó)國(guó)王路易十四感到法國(guó)的印刷水平強(qiáng)差人意,因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的,重視功能性的新字體。

委員會(huì)由數(shù)學(xué)家尼古拉斯加宗(Nicolas Jaugeon)擔(dān)任領(lǐng)導(dǎo),他們以羅馬體為基礎(chǔ),采用方格為設(shè)計(jì)依據(jù),每個(gè)字體方格分為64個(gè)基本方各單位,每個(gè)方各單位再分成36個(gè)小格,這樣,一個(gè)印刷版面就有2304個(gè)小格組成,在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀,版面的編排,試驗(yàn)傳達(dá)功能的效能,這是是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng),也是柵格系統(tǒng)最早的雛形。

960柵格化系統(tǒng)

960柵格化系統(tǒng)是由Nathan Smith創(chuàng)造的,具體來(lái)講,就是基于960像素寬度,通過(guò)劃分具有規(guī)律的分割,來(lái)提高網(wǎng)頁(yè)開(kāi)發(fā)效率。

960柵格化系統(tǒng)系統(tǒng)(或者說(shuō)適應(yīng)型css構(gòu)架)早期主要用來(lái)進(jìn)行快速原型制作,減少重復(fù)單調(diào)的工作,但是目前,它在網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)項(xiàng)目中開(kāi)始扮演非常重要的角色了。它將為你的設(shè)計(jì)提供一個(gè)堅(jiān)實(shí)的坐標(biāo)基礎(chǔ)。

最初有兩種變形:12柵格 和 16柵格。它們互補(bǔ)保證了系統(tǒng)的融通性。后來(lái)產(chǎn)生了更多的衍生。下圖展示了16柵格到3柵格的案例。BBC和yahoo的門(mén)戶網(wǎng)站就采用了柵格化體系,從而非常好的規(guī)范了網(wǎng)站的信息布局和疏密程度。

 

一些個(gè)人站點(diǎn)或者產(chǎn)品展示站點(diǎn)使用柵格化后更加大氣,視覺(jué)感受更加寬廣。下面是一些網(wǎng)站的例子: 

 

 

 

柵格系統(tǒng)指導(dǎo)頁(yè)面的布局和留白,而不影響站點(diǎn)的個(gè)性化需求??梢哉f(shuō)頁(yè)面布局就好比計(jì)劃,它能夠事先勾勒出網(wǎng)站的氣質(zhì)。針對(duì)網(wǎng)站內(nèi)容的容量選擇合理的柵格方式。這里不深入闡述如何使用柵格系統(tǒng)設(shè)計(jì)網(wǎng)站,如果需要可以另起一篇文章。

隨著大尺寸屏幕的出現(xiàn)和普及,很多網(wǎng)站開(kāi)始走寬屏路線,但是這并不影響柵格系統(tǒng)的存在,相反,柵格系統(tǒng)已經(jīng)成了多媒體信息排版的基礎(chǔ)。

免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/news/zczx898.html
圖趣網(wǎng)微信
圖趣網(wǎng)app
圖趣網(wǎng)app
建議反饋
×