設(shè)計師版式寶典！從零開始教你掌握網(wǎng)格系統(tǒng)

編者按：有很多剛?cè)腴T的設(shè)計師并不了解網(wǎng)格系統(tǒng)，也不會利用網(wǎng)格系統(tǒng)來讓畫面更加有條理，更可以讓內(nèi)容更易讀，實際上它是超級實用的工具，今天分享一篇基礎(chǔ)教程，手把手帶你入網(wǎng)格系統(tǒng)的大門！

學(xué)會和理解如何排版是成為一個設(shè)計大師中超級重要的一部分，有很多剛?cè)腴T的設(shè)計師并不了解網(wǎng)格系統(tǒng)，也不會利用網(wǎng)格系統(tǒng)來校準(zhǔn)元素在畫面內(nèi)的位置，讓畫面更加平衡。網(wǎng)格系統(tǒng)為什么這么好用呢？因為它可以制造層次感，模塊化地管理元素。而且，合理地利用網(wǎng)格系統(tǒng)，并不會讓畫面千篇一律，還會讓畫面更加有條理，更可以讓內(nèi)容更易讀，有更好的體驗。我們快來看一看如何實現(xiàn)這些事兒吧！

網(wǎng)格的類型

許多設(shè)計師都會在網(wǎng)格系統(tǒng)上開始一個新的設(shè)計。不同的人有不同的習(xí)慣，有人喜歡12列的網(wǎng)格，有人則喜歡16列網(wǎng)格，還有人喜歡24列的網(wǎng)格等等等等。重點不在于網(wǎng)格一共有多少種類型，而在于你實際應(yīng)用的那一個！在網(wǎng)頁設(shè)計中，網(wǎng)格系統(tǒng)是十分常見的，響應(yīng)式網(wǎng)頁設(shè)計的推廣，網(wǎng)格的地位又得到了提升呢！

我個人更喜歡12列的網(wǎng)格。每一列的寬度取決于最終輸出的稿件應(yīng)用在哪，比如打印或網(wǎng)頁，還有就是參考整體的寬度來進(jìn)行分割。如果我設(shè)計的東西有許多許多小元素，我會切換到24列網(wǎng)格。區(qū)塊之間的間隔根據(jù)內(nèi)容進(jìn)行相應(yīng)的調(diào)整。如果我創(chuàng)建一個瀑布流的布局，我可能只會給間隔留1-2px。這個真的要隨機(jī)應(yīng)變。

我喜歡12或24列的網(wǎng)格是因為我可以在這個基礎(chǔ)上衍生出很多不同的排版方案。你可以在24列中的一列里寬度上排列內(nèi)容，也可以是12列中的2列，還可以用8列分欄中的3列來擺放一個元素，甚至還可以是6列分欄中的4列等等，完全看你個人的喜好。你看，雖然網(wǎng)格系統(tǒng)是一個限定，但是應(yīng)用起來也是超級靈活的，這使得你的設(shè)計可以有很高的延展性，通過匹配不同的組合，就可以做出完全不同的排版來。是時候拋棄對稱布局了，感受一下下面的案例，你可以利用同一個網(wǎng)格系統(tǒng)創(chuàng)造出各式各樣的排版。

從上面的例子中我們可以看出，我們有著無窮盡的選擇來創(chuàng)造不同的排版。有些設(shè)計師害怕使用網(wǎng)格，他們覺得網(wǎng)格系統(tǒng)會局限住將他們的思維和畫面的結(jié)構(gòu)。但是事實上呢，網(wǎng)格結(jié)構(gòu)的選擇和組合幾乎可以說是無止盡的！那么多種組合，等你用完那天再來說局限住你的思維了吧！而且網(wǎng)格系統(tǒng)的應(yīng)用真的是超級廣泛！下面是一個網(wǎng)格系統(tǒng)的實例，導(dǎo)航橫跨了整個寬度，主要內(nèi)容大概占用了60%的寬度，側(cè)邊欄占用了剩下的40%；在下面一個版塊中，左邊60%的寬度被三等分。可以看出內(nèi)容和內(nèi)容之間留足了空間，閱讀起來很舒服。

這里強(qiáng)烈推薦一款Grid外掛教程：《PS 參考線插件GuideGuide下載及使用說明》，誰用誰知道！

下面這個網(wǎng)站則是簡單的三欄布局，這給了圖片足夠的空間，并且把大段的文字打散成一個一個小板塊。這樣的布局也十分適合貼廣告。

InDesign中的網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)起源于傳統(tǒng)的印刷設(shè)計，在印刷介質(zhì)中，網(wǎng)格系統(tǒng)的輔助作用很強(qiáng)，為印刷而做的網(wǎng)格系統(tǒng)也十分簡單。通常在InDesign中就可以完成。不過也可以在AI中建立網(wǎng)格開始設(shè)計。在InDesign中新建文檔的時候會跳出一個對話框，對話框里有十分豐富的選項喲。

像往常一樣新建一個ID文件，但是要改變其中幾個關(guān)鍵的設(shè)置，就可以建立一個多列的網(wǎng)格。默認(rèn)的單位是像素，也可以改成英寸、厘米或者其他會讓你感覺更舒服的單位，你可以根據(jù)你的喜好改變InDesign的度量單位。在初始的設(shè)置菜單中，改變列數(shù)就會讓網(wǎng)格系統(tǒng)的布局發(fā)生改變。有些設(shè)計師很喜歡5列網(wǎng)格，有些設(shè)計師則有不同的看法。“Gutter”即每列之間的留白空間，應(yīng)該盡可能地多留，但是也不能留太多，根據(jù)內(nèi)容來調(diào)節(jié)。頁邊距是內(nèi)容周圍的留白空間，我想大家都不希望印刷出來的成品文字都被裁掉吧？所以記得留出足夠的頁邊距。

Illustrator中的網(wǎng)格系統(tǒng)

在Illustrator中，創(chuàng)建網(wǎng)格的過程有一點小小的不同。不是在創(chuàng)建文件的時候來創(chuàng)建網(wǎng)格，而是在創(chuàng)建新的文件之后，選擇文字工具，然后創(chuàng)建一個文本框，這種方法獨特的地方在于你要先確定頁邊距，然后再把文本框放進(jìn)精心設(shè)置的網(wǎng)格系統(tǒng)中。

然后在頂部的菜單中找到“類型”，然后選擇“區(qū)域類型選項”。這里將會出現(xiàn)一個對話框，這個對話框和之前在InDesign中看到的十分類似，只有幾個不同之處，比如可以沿著分欄新建一行之類的功能。所以，你可以用這個工具做垂直、水平或是混合在一起的網(wǎng)格系統(tǒng)。在這里一樣要對于“Gutter”設(shè)置保持高度關(guān)注。在AI中，你可以通過預(yù)覽來檢查剛剛創(chuàng)建的網(wǎng)格，這個功能真是超級有用呢！在“選項”菜單中，你可以決定文本框里的文字是水平的還是垂直的，由此產(chǎn)生的設(shè)置如下圖所示，大家可以感受一下。

下面是一個InDesign網(wǎng)格的案例。利用5列分欄布局，我們用其中三列來顯示主內(nèi)容，其他兩欄作為副內(nèi)容，還要注意一下文章的標(biāo)題。這里的副標(biāo)題有點意思，主內(nèi)容雖然是占據(jù)了3列分欄，但是副標(biāo)題只占據(jù)了其中2列分欄，但是這樣看起來也很舒服。網(wǎng)格系統(tǒng)是作為一個參考，我們在實際案例中并不一定非得完全絲毫不差地去強(qiáng)行匹配，就像下圖中的頁碼23，也沒有完全填充某一個分欄，只是利用分欄給自己找了個舒服的位置而已！

總結(jié)

在你的設(shè)計中使用網(wǎng)格可以讓你更有邏輯地進(jìn)行你的設(shè)計工作，并且網(wǎng)格系統(tǒng)可以更好地組織畫面中的信息，讓重要的元素更加鮮明，讓設(shè)計稿有更好的結(jié)構(gòu)，帶來更好的體驗。設(shè)計師的工作說白了是盡可能更有創(chuàng)意地傳遞信息，網(wǎng)格系統(tǒng)是讓信息更具條理的方式之一，但我們不一定非得100%完全遵循網(wǎng)格的分欄進(jìn)行設(shè)計，我們也要適時打破網(wǎng)格系統(tǒng)，這也是創(chuàng)建視覺興趣點的好方法！

想成為排版高手？來這些好文取經(jīng)！

漲姿勢！認(rèn)識新名詞圖版率！
《網(wǎng)頁設(shè)計的關(guān)鍵！版式設(shè)計之圖版率》

版式設(shè)計最全面的文章，全程高能干貨！
《點線面的運用！設(shè)計的骨骼（一）》
《點線面的運用！設(shè)計的骨骼（二）》

原文地址：sitepoint
優(yōu)設(shè)網(wǎng)翻譯：@木草彌生
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量78萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：