高手之路！網頁設計師應該知道的網格系統

今天我們來聊聊網頁設計中的網格系統。

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

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

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

什么是網格系統？

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

最基本的網格系統由一系列水平和垂直的、彼此交叉參考線構成，這些格線讓內容布局變得簡單起來，讓內容更具可讀性。
網格系統在紙媒中廣泛應用，有著悠長的歷史，引入到網頁設計后，出現了很多CSS網格框架，幾乎成了網頁設計的標準。

利用網格系統可以更好的駕馭內容，保持一致性。均勻化的布局，一致性自然就有了，這樣導航功能就能更易于使用，好的用戶體驗也有了?！斎荒阋部梢源蚱凭W格系統，用更好的布局取而代之，也可從網格系統中衍生出自己的布局方式。

科普一下960px網格系統（http://960.gs/） , 也稱 960柵格布局, 數年來作為網頁設計人員的最愛, 被用來搭建網站和設計網頁布局. 。該無疑是非常好的網格系統, 因為相當靈活. 它幫助網頁設計者快速地構造以下欄柵數目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 網格系統可能是現在最受歡迎的網格系統, 并已經在很多網站和設計模板上使用。如新浪、網易、搜狐等。

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

網上可以找到很多合適的網格框架，當然，我們也可以自己創造。而且值得一提的是，設計網格框架是極佳的思維訓練，能讓我們更深層次的理解布局，更好的進行思維訓練，想的也會更遠。

使用網格系統的好處

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

PS中參考線

使用網格系統，讓你的設計具有正式感和規范感，還具有一種結構分明的設計感。這讓你設計起來更輕松，對于開發者來說，同樣如此。

網格系統的缺點

有好就有壞，我們來談談缺點。

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

其次，網格系統用起來比較困難，有一定的學習成本，需要有一定的數學基礎，你得懂比例，會計算。對于那些數學不好的人來說，網格系統真的是太復雜了。但是我認為，剛開始雖然比較難以上手，但是習慣之后，你會得心應手，設計也將會更加出彩。

在設計中應用網格系統：

幾條小建議：
在設計中使用重疊網格(網格線要可見）：

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

設置參考線：

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

嘗試一下有限制的設計

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

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

注意空間問題.

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

結論

現在你對網格系統已經了解了大概。
可以嘗試一下在設計前多做規劃，這樣網格系統用起來更得心應手，布局更流暢，多想想結構，多想想怎樣分欄的布局方式來規劃內容。

網格系統是一種好的習慣，也是一種格式化的設計工具。有了它，你能更專注于內容呈遞，更專注于強調重點。
 
原文地址：webdesign
優設網翻譯：@MartinRGB

轉摘請注明優設網譯文出處，謝謝各位小編。
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：