設(shè)計師應(yīng)該知道網(wǎng)頁設(shè)計中的網(wǎng)格系統(tǒng)

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

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

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

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

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

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

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

科普一下960px網(wǎng)格系統(tǒng)（http://960.gs/） , 也稱 960柵格布局, 數(shù)年來作為網(wǎng)頁設(shè)計人員的最愛, 被用來搭建網(wǎng)站和設(shè)計網(wǎng)頁布局. 。該無疑是非常好的網(wǎng)格系統(tǒng), 因為相當(dāng)靈活. 它幫助網(wǎng)頁設(shè)計者快速地構(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è)計模板上使用。如新浪、網(wǎng)易、搜狐等。

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

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

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

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

PS中參考線

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

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

有好就有壞，我們來談?wù)勅秉c。

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

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

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

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

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

設(shè)置參考線：

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

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

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

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

注意空間問題.

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

結(jié)論

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

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

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

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

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