探索柵格化與網(wǎng)站布局設(shè)計

柵格系統(tǒng)應(yīng)用于設(shè)計領(lǐng)域已經(jīng)至少50年了。柵格化讓眼睛瀏覽信息更加愉悅。從報紙、雜志，到手機界面，柵格系統(tǒng)全面滲透到各種信息傳達的界面當中。我們從一個故事開始柵格系統(tǒng)探索之旅吧!

柵格系統(tǒng)的誕生

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

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

960柵格化系統(tǒng)

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

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

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

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

隨著大尺寸屏幕的出現(xiàn)和普及，很多網(wǎng)站開始走寬屏路線，但是這并不影響柵格系統(tǒng)的存在，相反，柵格系統(tǒng)已經(jīng)成了多媒體信息排版的基礎(chǔ)。而在移動端，隨著flipbord應(yīng)用程序的出現(xiàn)，借鑒雜志排版效果的信息呈現(xiàn)方式逐漸成為PAD上內(nèi)容應(yīng)用的主流形式。其中3×4網(wǎng)格的應(yīng)用最為廣泛。

3×4網(wǎng)格的變化

早在1300多年前，Bill Drenttel 和 Jessica Helfand就將這種分割布局關(guān)系用在日本建筑領(lǐng)域的榻榻米中。(榻榻米，舊稱“疊席”，源于古代中國，是房間里供人坐或臥的一種家俱。傳至日本后演變成為其傳統(tǒng)房間“和室”內(nèi)鋪設(shè)地板的材料，成為日本家庭用于睡覺的地方，即日本人的床。http://baike.baidu.com/view/286931.htm)

3×4格形成的矩形，可以劃分出892中不同的單元形式。多年來，設(shè)計人員使用網(wǎng)格，使得內(nèi)容的呈現(xiàn)方式不重樣——書籍，雜志，屏幕以及其它很多領(lǐng)域都是這樣的，同時變化多樣的布局也非常美觀。 3×4格是一種常見的例子。然而，即使在這個簡單的例子，也生成令人難以想象的多種形式。Patch Kessler用算法生成了下面的大圖表，不僅為3×4網(wǎng)格，而且對任何n×m的網(wǎng)格。

在2006年Drenttel和Helfand獲得美國專利7124360——計算機屏幕布局系統(tǒng)模塊化的一種方法。榻榻米系統(tǒng)針對矩形矩形，通過3×4的柵格(1×1, 1×2, 1×3, 1×4; 2×2, 2×3, 2×4;3×3, 3×4))，可以得到3164種分割方式。

3×4柵格在PAD上的內(nèi)容應(yīng)用排版中被廣泛應(yīng)用，這種劃分不多不少，更加符合視覺留白和視覺空隙的舒適。

在分欄的規(guī)律上：縱向和橫向分割都有兩分欄、三分欄和四分欄。圖片或者標題可以跨欄呈現(xiàn)。這讓標題與內(nèi)容的視覺層次關(guān)系更加豐富。

在組合方式上：不僅有常規(guī)的分割，同時還有上下兩層組合的可能。比如下圖右下角的界面，上下兩層分別三分欄和兩分欄

閱讀這樣的應(yīng)用程序，你會感覺跟閱讀報紙一樣，同時你也會發(fā)現(xiàn)，比閱讀報紙更加輕松，每一頁的排版幾乎不重樣，翻閱這樣的雜志探索感更加強烈。

界面布局的新生力量

大家都知道m(xù)etro UI了，在windows phone 7的主屏，應(yīng)用程序的入口組成了兩列色塊。這種信息分割的方式與榻榻米原理基本一致。這使得扁平化的信息界面有了一種自由、個性化的組合方式。 iida INFOBAR A01手機界面設(shè)計也延續(xù)這種設(shè)計思想。在手機的演示視頻中，深度定制的Android手機將首頁變成了應(yīng)用模塊的拼圖。

有些應(yīng)用區(qū)域帶有實時信息，但你并不會覺得界面雜亂。

在圖片瀏覽環(huán)節(jié)，這種分隔創(chuàng)造了更加自然有層次的展現(xiàn)方式。視頻查看http://v.youku.com/v_show/id_XMjY3ODgyMjEy.html

后記：

對于一個UI界面來說，布局是設(shè)計的第一步，決定了設(shè)計方案的氣質(zhì)等等。而柵格系統(tǒng)經(jīng)過五十多年的發(fā)展已經(jīng)深入在UI設(shè)計領(lǐng)域的方方面面，并被證明擁有最合理的布局原理。希望這篇文章能夠給你一個簡單的啟示

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

當前標題：探索柵格化與網(wǎng)站布局設(shè)計
標題網(wǎng)址：http://muchs.cn/news40/309940.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、自適應(yīng)網(wǎng)站、建站公司、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站設(shè)計

廣告

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