網(wǎng)格確保了設(shè)計(jì)結(jié)構(gòu)的組織分明、結(jié)構(gòu)明晰。我們可以通過(guò)網(wǎng)格系統(tǒng)更好的打造設(shè)計(jì)的信息層級(jí)，讓設(shè)計(jì)閱讀起來(lái)更具有韻律感。就跟編碼一樣，編碼需要有機(jī)的組織結(jié)構(gòu)，而網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)格系統(tǒng)也是同樣的作用。

The Grid System 設(shè)計(jì)師用起來(lái)舒服，開(kāi)發(fā)者用起來(lái)順手，當(dāng)然，網(wǎng)格系統(tǒng)對(duì)于用戶也是大有裨益的。我一直在強(qiáng)調(diào)設(shè)計(jì)要注重用戶體驗(yàn)——畢竟，客戶為你的內(nèi)容消費(fèi)，因此你要向他們提供有價(jià)值的體驗(yàn)。使用堅(jiān)固的網(wǎng)格系統(tǒng)會(huì)對(duì)你大有幫助，不但能保持設(shè)計(jì)的一致性，還能更好的引導(dǎo)用戶。

如果你的網(wǎng)站設(shè)計(jì)的已經(jīng)很不錯(cuò)，那么可以通過(guò)網(wǎng)格來(lái)讓你的網(wǎng)站更進(jìn)一步，讓用戶瀏覽起來(lái)更愉悅。但有一點(diǎn)需要注意，網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來(lái)進(jìn)行布局。就拿響應(yīng)式設(shè)計(jì)來(lái)說(shuō)，靈活性是其大的特點(diǎn)——網(wǎng)格系統(tǒng)也應(yīng)如此，網(wǎng)格系統(tǒng)的意義在于更靈活的幫助你有序布局，而不是限制你的設(shè)計(jì)。

什么是網(wǎng)格系統(tǒng)？

包含了水平和垂直方向的參考線，用來(lái)合理排列內(nèi)容。

最基本的網(wǎng)格系統(tǒng)由一系列水平和垂直的、彼此交叉參考線構(gòu)成，這些格線讓內(nèi)容布局變得簡(jiǎn)單起來(lái)，讓內(nèi)容更具可讀性。 網(wǎng)格系統(tǒng)在紙媒中廣泛應(yīng)用，有著悠長(zhǎng)的歷史，引入到網(wǎng)頁(yè)設(shè)計(jì)后，出現(xiàn)了很多CSS網(wǎng)格框架，幾乎成了網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)。

利用網(wǎng)格系統(tǒng)可以更好的駕馭內(nèi)容，保持一致性。均勻化的布局，一致性自然就有了，這樣導(dǎo)航功能就能更易于使用，好的用戶體驗(yàn)也有了?！?dāng)然你也可以打破網(wǎng)格系統(tǒng)，用更好的布局取而代之，也可從網(wǎng)格系統(tǒng)中衍生出自己的布局方式。

科普一下960px網(wǎng)格系統(tǒng)（http://960.gs/） , 也稱 960柵格布局, 數(shù)年來(lái)作為網(wǎng)頁(yè)設(shè)計(jì)人員的最愛(ài), 被用來(lái)搭建網(wǎng)站和設(shè)計(jì)網(wǎng)頁(yè)布局. 。該無(wú)疑是非常好的網(wǎng)格系統(tǒng), 因?yàn)橄喈?dāng)靈活. 它幫助網(wǎng)頁(yè)設(shè)計(jì)者快速地構(gòu)造以下欄柵數(shù)目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 網(wǎng)格系統(tǒng)可能是現(xiàn)在最受歡迎的網(wǎng)格系統(tǒng), 并已經(jīng)在很多網(wǎng)站和設(shè)計(jì)模板上使用。如新浪、網(wǎng)易、搜狐等。

范例, the Gerstner, 收錄于 Gridset App 用戶看不到網(wǎng)格系統(tǒng)，他們也很少有人能夠了解網(wǎng)格系統(tǒng)的重要性。有句老話說(shuō)的好，規(guī)矩就是用來(lái)被打破的。無(wú)需拘泥于網(wǎng)格系統(tǒng)的形式，我們使用網(wǎng)格系統(tǒng)只是為了理解布局的理念和手法，之后，我們便可以進(jìn)行”革命”、創(chuàng)新。

網(wǎng)上可以找到很多合適的網(wǎng)格框架，當(dāng)然，我們也可以自己創(chuàng)造。而且值得一提的是，設(shè)計(jì)網(wǎng)格框架是極佳的思維訓(xùn)練，能讓我們更深層次的理解布局，更好的進(jìn)行思維訓(xùn)練，想的也會(huì)更遠(yuǎn)。

使用網(wǎng)格系統(tǒng)的好處

好處很多——設(shè)計(jì)、開(kāi)發(fā)、管理網(wǎng)站都用得到。 網(wǎng)格系統(tǒng)的好處之一是，允許按比例設(shè)計(jì)，可以組織不同元素之間的平衡感。網(wǎng)格系統(tǒng)一般都很靈活，這樣就可以在需要時(shí)自由調(diào)整。

PS中參考線

使用網(wǎng)格系統(tǒng)，讓你的設(shè)計(jì)具有正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的設(shè)計(jì)感。這讓你設(shè)計(jì)起來(lái)更輕松，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，同樣如此。

網(wǎng)格系統(tǒng)的缺點(diǎn)

有好就有壞，我們來(lái)談?wù)勅秉c(diǎn)。

首先，很多人，尤其是對(duì)于新手來(lái)說(shuō)——網(wǎng)格系統(tǒng)會(huì)阻礙他們的發(fā)揮創(chuàng)造。你會(huì)感覺(jué)你的靈感被束縛在這些條條框框里面了。如果出現(xiàn)這種狀況，我建議你從網(wǎng)格系統(tǒng)中跳出來(lái)，用自己的創(chuàng)意去設(shè)計(jì)，按照自己的經(jīng)驗(yàn)來(lái)排布元素，然后再切出網(wǎng)格系統(tǒng)，想出一個(gè)二者結(jié)合的兩全其美的辦法，稍做調(diào)整，如果網(wǎng)格系統(tǒng)和你的原創(chuàng)設(shè)計(jì)出入過(guò)大，不能有效協(xié)調(diào)，那么建議換一個(gè)網(wǎng)格系統(tǒng)，或者自己設(shè)計(jì)一個(gè)。

其次，網(wǎng)格系統(tǒng)用起來(lái)比較困難，有一定的學(xué)習(xí)成本，需要有一定的數(shù)學(xué)基礎(chǔ)，你得懂比例，會(huì)計(jì)算。對(duì)于那些數(shù)學(xué)不好的人來(lái)說(shuō)，網(wǎng)格系統(tǒng)真的是太復(fù)雜了。但是我認(rèn)為，剛開(kāi)始雖然比較難以上手，但是習(xí)慣之后，你會(huì)得心應(yīng)手，設(shè)計(jì)也將會(huì)更加出彩。

在設(shè)計(jì)中應(yīng)用網(wǎng)格系統(tǒng)：

幾條小建議： 在設(shè)計(jì)中使用重疊網(wǎng)格(網(wǎng)格線要可見(jiàn)）：

如果你能喜歡使用CSS網(wǎng)格框架，那就再好不過(guò)了，無(wú)論是PS還是其他什么程序，將網(wǎng)格設(shè)置為疊加，然后鎖定。這樣設(shè)計(jì)的時(shí)候心中就有數(shù)了。

設(shè)置參考線：

有了重疊網(wǎng)格之后，設(shè)置分欄參考線。這樣就能夠更清楚的劃分邊界。

嘗試一下有限制的設(shè)計(jì)

最多16欄，6欄布局最明智。

運(yùn)動(dòng)員練習(xí)時(shí)都綁著沙袋還記得嗎，有限制的練習(xí)，之后再脫去舒服，跑的更快。 因此，可以試著自我約束一下，練習(xí)在限制的條件下進(jìn)行布局，這樣你就能更專注于重點(diǎn)，進(jìn)步更大。

注意空間問(wèn)題.

每一欄之間的寬度越大，留給元素的空間越富裕。然而不要忘記垂直方向上的空間布局。是緊密還是充滿留白？這需要按情況而定。

結(jié)論

現(xiàn)在你對(duì)網(wǎng)格系統(tǒng)已經(jīng)了解了大概。 可以嘗試一下在設(shè)計(jì)前多做規(guī)劃，這樣網(wǎng)格系統(tǒng)用起來(lái)更得心應(yīng)手，布局更流暢，多想想結(jié)構(gòu)，多想想怎樣分欄的布局方式來(lái)規(guī)劃內(nèi)容。

網(wǎng)格系統(tǒng)是一種好的習(xí)慣，也是一種格式化的設(shè)計(jì)工具。有了它，你能更專注于內(nèi)容呈遞，更專注于強(qiáng)調(diào)重點(diǎn)。

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

名稱欄目：設(shè)計(jì)師應(yīng)該知道網(wǎng)頁(yè)設(shè)計(jì)中的網(wǎng)格系統(tǒng)
標(biāo)題路徑：http://aaarwkj.com/news35/317785.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制網(wǎng)站、搜索引擎優(yōu)化、軟件開(kāi)發(fā)、定制開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

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