如何在排版編輯中建立網格系統？（具體軟體操作）

12-31

最近看了《平面設計中的網格系統》一書，沉浸於嚴謹的網格系統中。卻不知如何在具體軟體中如何建立網格，比如在Word、PS、AI、ID等軟體中的具體應用。

若只為單純在空白版面上創建一組視覺參考，方法很自由——任何能在軟體中形成視覺標記的幾何元素都可運用。比如參考線；比如創建一個非列印用的獨立圖層，在其中用圖形工具繪製線條或幾何圖形等。

《平面設計中的網格系統》所講述的「網格」，是一種能在批量化的內容編排中形成效率的設計輔助工具。在 DTP 中還原這種工具，重點是再現它的效率性。

在 DTP 中，這種網格不應只是單純的視覺參考，而應是面對大容量信息設計時，能構成一套自動或半自動的工作流程。比如從既有的工作中繼承網格系統的設定；比如快速地調用、替換幾種固定的網格預設；比如將大批量內容快速填入預期的網格位置中，甚至針對頁面尺寸規格的變化，有一定的自適應能力。

問題說明裡列舉的四個軟體中，可能只有 Adobe InDesign 能較好地組織上述的工作流程。具體軟體操作請參考 InDesign 幫助文檔（包括但不限於）：

網格
版面網格
設置網格格式
創建文本和文本框架
串接文本

謝邀。

這個答案是拋磚引玉。

我之前看完grid systems，就試著用它做了下自己簡歷，之後想寫一篇grid system應用小結了，但是覺得自己的的應用過程有點失敗，所以一直擱置著，剛好題主邀請了我回答，那我權且獻醜用自己的一個不太成功的過程來拋磚引玉吧。我相信知乎上肯定有設計師在設計工作中實際運用過grid system並且也成功了、有些設計師甚至用起來可能得心應手了。希望能看到這些設計師的回答。那麼開始——

grid systems這本書看完其實並不能理科實際的指導你做出一份基於grid system的設計。書裡面沒有任何手把手教你用網格系統設計出什麼的教程。這本書只有兩個大部分：1）什麼是網格系統 2）網格系統的應用舉例，從二維到三維都有。所以讀者看完這本書中之後，打算用網格系統搞設計的時候可能還是一頭霧水。

而作為新手，使用網格系統可能並沒有網格系統那本書呈現的結果那麼美好、簡單易懂、高效而富有邏輯。這個過程甚至有點像約會。在http://lynda.com關於grid的視頻里有一句話說的非常精闢。Finding the right grid for the content is like dating: you need look around, try a few out, let some go, and commit to one. （給自己設計的內容找到合適的網格系統就像約會，你需要到處看看，試試幾個，排除幾個，然後在一個上投入。）這甚至有點靠運氣了，當然也靠經驗積累起來產生的判斷力。

作為新手，我們也只能硬著頭皮上了。所以第一步，打開google，搜索grid systems。打開youtube，搜索grid system等等關鍵詞。獲取了一些有用的信息—— http://typophile.com/files/How%20you%20make%20a%20grid.pdf ，這是一位叫Andrew Maher小哥在看過grid systems寫的一份詳細如何使用網格的指南。詳細閱讀這份指南後，我心中只有一個大寫的贊字。這份指南基本上是按照書中內容提煉的一個可行的設計過程，當然具體可行到什麼程度，還取決於你的水平和你的設計內容。建議大家讀一下。

這是pdf里羅列的步驟。我的製作步驟沒有完全嚴格按照他說的來做。因為我也是第一次用網格系統，遇到了很多我沒有想過的情況。後面的暴走我也就控制不住了。

Define the format (size of the page)

Define the type area (where all the words are going to go)

Choose a font (stick to one) for everything and typefaces (a font is a family of typefaces. So Times
New Roman would be the font, Times New Roman
set at 24pt bold would be the typeface) for Display headings (they』re the really big headings)
Headings Captions (if you need them) Body Text

Test test test until you』re happy with how easy it is
to read (compare this off to magazines and books
you like or find have been typeset really nicely)

Redefine the type area (we』ll talk more about this soon)

Decide how many units you want your grid to be

(depends upon the application of your grid)

Create divisions

Apply Grid

以我做簡歷為例，接下來，是我自己的步驟（可以點開看大圖）

Step1：確定設計載體大小

在美國的簡歷用的是letter size（8.5*11inche），中國的用的是ISO 216標準紙張中的A4規格。那麼這份設計紙頭就將在A4規格的區域里進行設計。

打開InDesign（我使用的是Adobe CC InDesign 2015.4版本，因為是在美國subscribe的，所以只有英文版），創建新文件

我這裡使用的不是defalut（默認）設置，根據這次需要做的設計，更改成了以上設置。

列印用，色彩模式是CMYK，解析度是300。
尺寸為A4
margins（邊距）姑且設置成了5mm，這個沒太大關係，之後要更改的。

面對這個界面你可能也是腦中一片空白。抓住毛巾，不要慌。

Step2：確定版心

所謂的版心（type area)，就是設計區域中，設計內容呆的地方。版心和設計區域的距離就叫做邊距（margin，在書籍設計中，版心相對於紙張四個方向的邊距，上面的叫天頭，下面的叫地腳，書脊那邊的叫訂口，翻頁的那邊叫切口）。確定版心也是你設計中遇到的第一個攔路虎。

翻看網格設計那本書，相信你已經讀過關於版心的各種說法了，包括書中後半部分提及的許多案例。如果你再打開《西文排版》或者《超越平凡的平面設計：版式設計原理與應用》這些書，你會發現版心的確定方法有非常多種，這確實有點像約會。男人有很多種，選哪個？

既然要設計簡歷，那就不存在書脊彎曲帶來的閱讀不便問題，可以選擇左右對稱的邊距。一般來說，天頭會比地腳稍微短一點，好讓內容看起來不那麼下墜。接下來，面臨了一個問題：每個邊的邊距到底是多少。這個問題的解決我不是一蹴而就的。在整體排版完成後，我還大改動了幾次。

step3：確定字體

字體相關的書籍有很多可以參考。中文的相關字體可以參考有哪些值得推薦的中文字體？ - 吳義清的回答，也可以看看《字型散步》這本書。我選擇了漢儀旗黑這款字體。字重豐富，字體本身的素質也不錯，個人使用授權也很便宜。要是擔心版權等等問題，還可以考慮google和adobe合作的noto系，這些都是不錯的黑體字。關鍵是不要使用太多不同的字體。這樣不會造成不必要的混亂。

step4：把內容丟進InDesign, 確定網格。

這裡我沒有直接開始試網格。單純的，我不知道我的內容會佔據多少版面，所以這裡我直接把內容都丟進InDesign。試著做了一下粗排版，給自己大致一個印象。

接下來我就遇到了各種細碎的問題。

1）如果你仔細看《網格系統》就會發現，書中的排版其實是要求網格與字行對應的。一個網格中頂上對的是一行字的升部線，而底下對齊的是一行字的降部線。（見下圖）

但是中文並沒有升部線和降部線。中文是方塊字。怎麼辦？

2）InDesign里字體的大小是按照point的計算的，《網格系統》這書里是先弄清楚內容有多少行，再據此來建立可行的網格系統（p59），之後給的8、16、32分格都是基於pt和cic單位的，AM的指南里卻是用px作為單位，當然國人最熟悉的是mm。那麼用哪個單位？

3）如果按照行數來確定內容的話，每一欄之間的欄距（gutter），又應該是多少？

總之問題多多。AM的指南和《網格系統》一書都期望設計者在確定網格之後，畫幾張thumbnail來做草稿，排除一些不可行的網格排版，來篩選出可行的網格方案來。但是你實際去做，就會發現thumbnail很難畫，也很要耐心。

到這裡我有點放棄了。

後面看了http://lynda.com 關於在ID里建立grid system的基礎指南視頻https://www.youtube.com/watch?v=jWH6HDaMkMM 稍微有了一點頭緒。ID是可以很便利的建立網格的。首先是分欄。layout-margins and columns，打開之後可以設置邊距和分欄。

打開之後是這樣↑。可以輸入自己喜歡的數值。看看效果。

比如分3個豎欄，欄距為24pt。

接下來。是要分多少橫欄的問題。這個我糾結了很久，最終也沒解決。不過還是要介紹個非常厲害的工具，叫baseline grid。所謂的baseline也就是西文字體里的基線。mac用戶請打開ID的preference，可以快捷方式cmd+k。win用戶也請打開對應窗口。在grids這裡，可以看到有兩個grids，baseline grid與document grid。前者就是用每行字母的baseline作為分割線來畫網格，後者則是用cmd+"召喚出來覆蓋作業與非作業區域的無差別灰色網格了。baseline grid有個比較2的地方，在 view threshold為75%的情況下，你只有把你的設計視圖放到75%以上才能看到它的存在。所以這個可以調整下。比如改成50%之類的，按照自己的需求來。另外的幾個參數。relative to就是你要這個baseline grid從哪裡開始，可以選擇從頁面頂端或者是版心頂端。start那個是指從頁面或者版心頂端的多少距離開始，increment every 就是你的baseline之間的距離。更加直觀的說法是行距（leading）。

之所以要介紹這個工具，是因為這個工具可以便利的讓版面上所有內容都貼合這個grid。只要你在頂頭的面板上，

選擇這個，

就可以了。

這樣，就不用擔心不同字型大小之間行距比例的問題了。

基於這兩個工具，以及《網格系統》書中的原理解說。我決定把網格分割基於pt這個單位來進行，方便計算。於是換算好A4紙的長寬是多少pt，根據選擇的字體pt數來決定行距，根據行距來決定你可以在一張紙里鋪滿多少baseline。再根據你獲得的baseline行數來做橫欄的分格。這樣，就獲取了橫欄與豎欄的分格數。

之後的修改過程還包含了列印出實體觀看效果，字型大小和baseline我都進行過調整。過程其實有反覆，並非一蹴而就。

這裡如果有演示過程會比較直觀。但是為做這個東西有段時間了，當時的草稿紙沒有保存。也沒有做截圖。只能這樣大白話說說，如果有人有什麼想交流的，請在評論里說明。我最後改的版本並沒有嚴格按照網格來做。只是分了豎欄，貼合了baseline grid。這裡還涉及到內容與形式相妥協的問題。也許是我沒有做出足夠大膽的探索和嘗試，也許這個內容只能這樣設計。總之最終效果並沒有嚴格貼合網格。

嘗試grid system的過程中一定會遇到形式與內容妥協的糾結過程。幾乎無可避免，我猜測。

Paul Rand
「When you say
design, everybody has their own definition that doesn』t
correspond to yours. There are many good definitions,
one is the synthesis of Form and Content. In other
words without content there』s no form, and without
form there』s no content. A work of art is realised when
form and content are indistinguishable. When form
predominates, meaning is blunted, but when content
predominates interest lags.」

另外，關於grid system也有人有這樣的說法。

因為網格系統這類現代設計的觀念，其最重要的意義並不在於它可以衍生出無與倫比，無從複製的作品，相反，其優越性反而在於可以用於大規模的仿製。
source：他語作結。（Grid Systems in Graphic Design）書評

也許，grid system確實可以方便大規模的仿製。但是這種仿製於設計而言，到底是不是真的好運作，不知道。

另外youtube上海看過另外一個grid的視頻。那個視頻並不是講grid system，嚴格來說，更像是給海報之類的圖文設計提供思路，引用的是繪畫中的構圖網格。經典的九宮格。這個也是在設計中可以運用的。

除了在平面設計中的運用之外，網頁設計也大量的試用grid。這個是另外一個話題了。

---總結一下---

1.確定設計內容（圖片多少、文字多少、結構如何），設計媒介（印刷？web？手機？紙張大小？）

2.選擇字體，以正文字型大小為基本，設定行距，設定各層級文字字重、字型大小。

3.可以根據行距來進行網格分割。也可以根據圖片文字組合具體需要進行網格分割。

4.網格分好之後，可以列印出縮小版，進行thumbnail sketch，也可以直接在ID里搗騰

5.在網格中安置內容，看看實現效果，不斷調整到自己想要的結果。

--以上---

寫到這裡了。參考價值有限，我這次用grid system做的挺糾結的。希望有其他人提供更好的案例或者方法。獻醜了。謝謝閱讀這麼長的答案。

神筆豪邀請你回答此問題

用參考線。這是 InDesign 的做法：InDesign里版式的網格怎麼畫出來的？ - Linkzero Tsang 的回答

在 AI、PS 里，也是用這樣的做法。只是，基線網格、分欄，也得自己拉參考線，而不能像 ID 那樣，直接用程序內建的功能。

* * * * * *

至於 Word，雖然沒有參考線，但姑且有個網格功能，按著網格系統的尺度來打文本框，應該也能做出你想要的效果來。但是，用 Word 來做頁面布局實在是件吃力不討好的事情，甚至還不如 PowerPoint 方便。

有條件，還是用 InDesign 吧。

1、InDesign 如何建立網格系統，需要設置邊距+創建參考線+設置基線網格+設置段落樣式+對齊基線網格，很專業但是也很繁瑣，請參考二樓 BoE-301 的回答，很詳細了。只補充一下關於 pt 和 mm 的換算教程，Mastering grids in InDesign CC | Creative Bloq http://t.cn/R6XxaJ9 你可以看到老外對於基準網格的製作和計算有多麼嚴謹，需要用計算器精確到小數點後3位。

2、PS 和 Ai，最簡單的辦法還是插件，GuideGuide 同時支持 PS 和 Ai，使用也很方便。

只補充一點： Ai 其實隱藏了一個超級好用的網格功能。

按版心繪製矩形，使用菜單命令，對象 / 路徑 /分割為網格，然後在彈出的對話框裡面設置如下：

不過添加參考線功能好像無效。分割完之後可以選擇全部網格，右鍵/建立參考線就好了，其實也只是多了一步。

致謝：

Similar plugin to GuideGuide for illustrator - Graphic Design Stack Exchange http://t.cn/R6XJyu4

謝邀。

這篇答案主要針對軟體操作方面，介紹兩個提高網格建立效率的小技巧。手動拉輔助線的方法就不贅述了，如果沒有輔助線功能，也可以手動畫矩形或直線做為參照。

1、利用插件:

PS和AI下有一些插件可以自動生成網格例如Assistor PS （官網witstudio），GuideGuide （收費，官網GuideGuide）。界面和操作方法大同小異，填好數據後點創建就可以。

下面是一個實際操作的例子，如果是跟我一樣算術不好的小朋友，可能需要多試幾次，哈哈哈。至於多大合適，只能說，看眼緣！

這個方法也是我常用的，非常便捷。2、利用現成的解決方案

如果想規劃用於網頁設計的網格，那麼恭喜你，前輩們已經提供了很多現成的解決方案了。這些解決方案往往詳細規定了畫布及網格的大小（當然，也可以改），有的提供帶網格的PSD源文件下載，例如1200px Grid System，有的提供生成網格的PS動作，例如960 Grid System，有的還可以在線生成自定義網格的CSS文件。

PSD文件打開是這樣的：