「網格系統設立了約束與規範，讓設計師更專注於在框架以外的構思。」
但所約束的規範怎麼沒有一個答案？還很非常地複雜又多樣。
而且最重要的是…
首先呢
在前一篇 溫故知新 — 初探 Grid 網格 ，假設我們對網格、排版有了基本的暸解與認識但老實說還是一知半解，說真的還不曉得該如何下手。
而且 Josef Müller-Brockmann 在書本裡也沒有詳細的教學過程，看完後還是一頭霧水😕
這篇提供了自己探索 Grid 的設計流程，有點像是在每個實作步驟上紀錄一些重點摘要。經過了一段跌跌撞撞的陣痛期，追尋解答的過程中，自認沒有很完美，就在此拋磚引玉分享給大家。
一起進入 Grid 的世界吧 🚩
過程總覽
先有個簡單的認知，就是整個實驗的過程會是反反覆覆、來來回回的循（大）環（坑），在還沒踏進去以前，原以為要照一定的路走才是正確的。
※在沒有任何網格排版經驗的情況下，真心建議：
訂好首要目標「優先保留時間與力氣，重心放在思考與實驗上」。想好該怎麼達到所要的成果，當發現困在某個地方上太久，就能立即做修正與想解決辦法，免得筋疲力竭做不下去，有先訂定明確地目標滿重要的。
#1 準備好手中的材料
準備好要編排的內容（文本）、圖片，以及暸解你在設計什麼：
如前篇提到的：「設計師應該要大致了解目標受眾（Target Audience）將會如何看待（使用）這個設計專案。」，設計專案的定位、方向以及目標受眾，將會影響後續該使用哪些合適版面的決定。
這邊先模擬所要設計的專案為：「決定做（月刊，採用騎馬釘） A4 美國大峽谷主題旅遊雜誌，其中的跨頁篇幅」。
※注意：自訂的設計專案越擬真越好（模擬問題的發生），否則胡亂複製過來彼此間毫無關聯的文本、圖像等等，將會無法學習到解決能力與思考，畢竟在往後實戰上所發生的狀況會是百百種。而本篇文章將準備好主標題：「Introduction to The Grand Canyo National Park」、一份文本（含自行設定的頁碼、圖注、專欄類別）、數張符合文本方向的來自 Unsplash 圖片，來作為接下來實作的範例。
※題外話：剛好在 Spotify 聽到這首 Nicholas Gunn — Entering Twin Falls ， 是從小就很喜歡的音樂才會決定做這個主題，分享給各位可搭配圖文聆聽 🎶
#2 工具的選用
設計發想就從最基本的筆跟紙開始，有助於快速建立出版面架構的雛形。
當然也能先在電腦軟體上快速模擬，甚至列印不同版本，拿遠遠的進行視覺比對。
總言之，能建立出 Grid 格線並且能呈現各種形式給大眾，什麼樣的軟體、工具都可以的哦！選自己喜歡、合適的，不熟悉就去學如何操作，來達到想要的設計成果。
在這篇為何我會選擇使用 InDesign 呢？
最大原因有二：
(1) 專業的版面排版工具，調整網格、微調數值等，是款細膩的排版軟體。
(2) 想選擇 Baseline Grid 作為我主要的網格系統之一。（在 #5 與 #6 中會有詳細的說明）
本來想使用 Illustrator，結果發現裡頭沒有工具能夠標示出每一行的 Baseline，用手動去拖拉除了會有誤差外，而且毫無效率可言。如果有我不知道的套件能做得到的話，歡迎分享 🙌
#3 頁面大小
在自我練習中這裡簡單使用我們常見的 DIN format A4 紙張大小，或者任何想要展現在其他二維或三維的媒介上（像是不在 DIN 尺寸內的刊物、裝置螢幕、大型牆面、展覽設計等等）；在實務上，必須根據設計專案的各方需求、目的、經費成本而定。
#4 初步設計版面（Thumbnail）
在前篇提到：「先製作規模較小的草圖（而且要盡可能越準確越好）幫助設計師規劃版面是好的。」
「對於設計師來說，若把草圖繪製的越潦草，就越難設想出印刷品最終的效果；而相對著，草圖繪製的越精確，設計師就能從草圖中驗證自己的創意在版面中是否可行。」— Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p94.
而我便先試著畫出簡易鉛筆草圖，來快速應證想法。在跨頁中，審視材料的形狀、內文段落的多寡，像是三張圖片與兩張圖片的感受差異，哪一個是能比較接近大峽谷壯闊情境，是個從規劃裡從中取捨的過程。
接著使用 A4（210mm*297mm）大小的尺寸，等比縮小到 A8 （52mm*74mm），方便在手頭上的筆記本內畫出格子，來做更進一步精細的草擬，這樣的大小也不因筆太粗而失去太多細節。
最後手繪精細的樣板，說真的很耗費時間（但有做過，更能體會出上機後不一樣的感受，多了一份思考的空間），可能往後會精簡成先做簡易鉛筆稿，再來上機快速排列出各種樣板出來，認為除了較有效率外，到成果呈現上不會差太多。
#5 字體
※注意：字體學是門很深遠的學問，在這邊只會提到自己在實作網格排版時有用到的部分。前段一直提到 Baseline Baseline，到底是什麼呢？
可以仔細看上圖 Typography 的基礎組成，在倒數第二條線，從左方至右可以看出他是標示出字母的（Baseline）基本線。在第二張可以看到行距 （Leading）的計算是從上一行的基線到下一行文字的基線距離。
1. 行距 （Leading）
關於行距，所有字型的行高都是依循 1：1.2 比率。身為設計師的我們可能沒有意識到，在下圖中 illustrator 文字行距的預設都是如此。
至於行距間的拿捏，可依據版面大小、排版風格，透過長期經驗的累積，進行視覺上等比調整，選擇出在版面上最合適的。
至於比率的源由，就要從了解 Typography 文字結構開始，而自己是從工作坊學習 Foundational Hand 才有明確的理解。在這邊就不多做解釋了，對書寫歐文字體有興趣、想要更深地體驗，滿推薦參加 Joe Chang 的歐文字體設計工作坊哦！
2. 字體的選用
為了標題和文本選擇字體，設計師會思考如何使用易於閱讀的字體進行簡單、有效的版面設計，搭配的得宜會是個需要長期經驗的累積。但發現掃視千百種以上字體，就像得了選擇障礙癌一樣，提供一個簡單的方式：
以歐文而言，一個版面建議使用兩種不同字體：
像是 Serif Font 與 Sans Serif 或 搭配 Script 手寫字體等為限。當你在限制中漸漸摸熟了，就會有更多想發揮的空間。
而對於介面設計而言：
Web Design is 95% Typography–Oliver Reichenstein
接著在此文章中也建議最多選擇兩種字體，以保持界面設計的一致性。使內容易於可讀性（Readability）和易讀性（Legibility），這兩個是必須了解的主要原則。
可讀性：能簡單讀出字彙、語句、文章。
易讀性：在特定字體中，一個字母與另一個字母之間能否容易區分出來。(1) 展現標題 Display Headlines
- 在版面字體中是最大的。
- 需給它不少的空白空間，襯托出輪廓與劃分出獨立的空間。
(2) 標題與副標題 Headlines & Subheadlines
- 可將標題們設置成粗體或是斜體。
- 在版面字體中它是要排第二順位的大小。
在這裡，練習選用了襯線體 Sabon LT Pro Roman 字型 36pt，行距 43.2pt 。
(3) 內文 Copy or Body Copy
- 選擇了 Serif Font 襯線體，建議設置在最大 11pt 的話，最小約 8–9pt。
- 選擇了 Sans Serif 無襯線字體，建議設置最大在 10pt，最小則約 7–8pt。
襯線體因字母的細節較多，為了視覺上可讀與易讀性考量會設的比無襯線字體大一些。而這邊我選用了無襯線 Gill Sans Regular 字型 10pt，行距 12pt。
Helpful Resources
- 想參考更多排版設計，很推薦 Fonts In Use 網站，提供設計師們進行研究，類型的選擇與配對，能從中發掘使用字體的新方法。
- 最近發現的 Font combinations for web designers. 一個配對字體的網頁小工具，搜尋您要的字型後，會提供建議搭配的組合。
3. 延伸
在實作當作會遇到選了不同的字型，覺得奇怪明明選的字號大小一樣，為何不同字型間還是有差別。原因是其各個字母之間像是字懷（Counter Space）、外形（Exterior Shape）、字形空間（Glyph Space）、節奏間所產生的正負空間（Positive and Negative Space，也稱二維空間）不同，對於大小的感受上會出現差異。
前面的細節術語就不多談，對於正負空間可以簡單介紹一下：在一樣的圓點大小、方形範圍大小，在下圖中很明顯右邊的白點比左邊的感受上是偏大的。
舉個最近 Figma （一款線上界面設計工具）發布了最新的文章提到：
Four metal fonts with the same, 16pt font size. Notice some fonts take up more space than the others, and the baselines vary all over the place.
簡單提及十九世紀金屬活版印刷，並且特別提醒了某些字體佔用的空間比其他字體多，而且基線在各處會有所不同。
下圖中，明顯顯示出在一樣的字號下，四種字型呈現出各自不同之處。
忘了以前是在哪篇看到一篇 UI 文章說內文一定要設置在 10pt 才會閱讀舒適，對此是持反對的。不論在平面印刷、UI 介面上，並不全然內文得要統一限制在某字號大小就是好的，而是依照所選擇的字型而定。
在 A4 頁面上，以歐文文本而言，Josef Müller-Brockman 提供相關的經驗參考：「在一個版面中每行平均約 10 個單字左右，是比較容易閱讀的。當然只有在文本有一定的量與長度之下，這個經驗才會產生實際作用。」
Helpful Resources
- 更多關於 Positive and Negative Space，可參考 Dong Hyun Lee 的 Effective Use of Negative Space in Graphic Design 設計研究論文，畢業於美國羅徹斯特大學藝術、科學及工程學院，對於正負空間有著相當詳細的圖文案例分析。
- 暸解更多字體學的基礎：The CMG Team 的 OUR COMPLETE GUIDE TO TYPOGRAPHY BASICS 此文、Google 的 Understanding typography。
#6 網格
在前面暸解了字體學的基礎後，然而選擇使用 Baseline Grid 的好處在於：
行距（Leading ）是讓文字呼吸的空間。它能讓讀者的眼睛認為文字有方向，而不是一坨黑黑的東西，這就是 Typography 一直很要求的 Readability（可讀性） — “給設計初心者：字型基礎八篇” on justfont blog
直接使用 Baseline Grid 調整，亦即預先處理好每段行距的細節與整體的可讀性。
若想嘗試的話，強烈建議使用 indesign 工具，可以使每個文本區塊自動與 Baseline Grid 對齊，可以說目前相當好用；或者您有前端相關程式基礎，也能在 Html & CSS 進行行距上的調整配置。
在 溫故知新 — 初探 Grid 網格 文章，可以從中找到想練習的各種網格種類。另外，Josef Müller-Brockman 在書中提供了 8、20、32 格網格的範例：準備的文本，尤其圖片相當大量的話，建議使用 32 格 Grids 是非常合適的；而 8 格可以進一步劃分出 16 格，20 格則就有著 42 種排版可能性。
「設計師也需要具備一種良好的判斷力，並對圖文的結構和節奏保持一個良好的感覺。」
「使用了網格系統並不能保證就能達到最佳的效果，最終還是取決於設計師本身。」- Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p75.
Helpful Resources
- 關於在 indesign 使用 Baseline Grid，可參考 Dolale Huang 在 Facebook 的 INDESIGN上課了社團發表的「兩欄文字對齊的小工具」貼文
#7 版心與頁邊距
對於印刷上會受限於技術，如頁邊距不能設置的過窄，通常會裁切預留 5mm 出血的位置，裝訂則會預留 1~3mm（視各家印刷機器而定），防止裝訂裁切的誤差導致文本受影響；另一方面將版面配置得妥當，比例協調的頁邊距，能提升閱讀體驗。
幾個世紀以來，所有經典的排版作品都有者一個完美的頁邊距，它們的共通點是通過黃金分割或者是一些數學公式精確計算出來。
— Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p39.
這裡整理了幾個認為較好理解、好計算的頁邊距公式圖列：
（左1）為作者在第 41 頁提供的比列協調頁邊距，此版心的配置較適合文學類的書籍，並不適合廣告宣傳品。原因是頁邊距預留的距離對於成本來說太過奢侈。
（左2）在第 51 頁的經典版心，比例為 1:2。
（中）名為 Canon Ternario（Ternary Canon）的公式。
（右）基於 Golden Ratio 黃金比例公式，所分割出來的版心模樣。
Josef Müller-Brockman 非常強調版心內所劃分的（單、雙、多）欄位，是由字號的大小取決於欄的寬度。而我就從最簡單的開始：一個兩欄版心，兩欄的文字舒適度是覺得合適的，頁邊距都是 2:2 來做，讓切口跟訂口有同樣的距離。一開始不太想要太複雜，先照這個類型排看看，成果出來若不是那麼符合想要的方向，再從頭調整。
兩欄之間的間距（Gutter）自己簡單設定了 5mm、10mm、15mm，比較下10mm 視覺感受上是適中的。也可以創建幾個不同網格、欄位，看看它們在一起的距離，就會看得出一個間距是否太寬或者是太窄。
Helpful Resources
更多公式，可參考：
練習成果
後記
為何想要去做：
「溫故知新」—現代科技的潮流，都源自於經年累月的精髓，簡單來說傳統印刷與數位網頁之間皆是息息相關的。想追根究底地解開打結的小腦袋，不管做什麼事情願意從頭來過，先耐心的一步一步走過來，接著盡力做好有注意到的小細節，畢竟對於網格系統我是個一無所知的菜鳥。
正因為一無所知，才察覺到自己知識是匱乏的，因此試圖去做突破自我的事。接下來呢？
嘗試在各種媒介上做出不同主題，去反覆的訓練、不斷練習網格排版（像有很多網格、排版等系統原則都還沒完全去試過），未來會運用在網頁等多媒體平台上做更廣泛的應用，我想這過程中會學到書本上學不到的東西。
到時候就能寫篇文章分享給大家囉👍
參考資料
- Josef Müller-Brockmann. Grid Systems in Graphic Design. Niggli: 1996.
- Antonio Carusone & AisleOne. The Grid System–The ultimate resource in grid systems.
- Zac Fukuda. How to Draw Grid on A4. Jan 23, 2018.
- Andrew Maher. How you make a grid.
- Joe Chang. 歐文字體設計工作坊的講義. Eyeson Type.
Hi 非常謝謝你看完我的文章：喜歡的話，
別忘了按下 👏👏👏 拍手鼓勵鼓勵。有了無形地鼓勵，
將會成為驅動下篇文章的精神糧食哦！- 很歡迎 Follow Yakko Wu 接收最新文章
- 或者是 Follow Yakko Twitter（不時有遊戲、設計、創作、開發心得的分享）歡迎追隨、一起交流互動 ：）若有疑問的地方，
非常歡迎文章底下留言或來信 imyakkowu@gmail.com 一起討論～謝謝
希望大家能從網格排版中，找到屬於自己的風格哦 :)
