現今報章雜誌、說明書、圖表、甚至是數位形態的網頁都是奠基在網格（Gird）上，但一般大眾對於網格可能有些陌生。
網格設計系統（又稱標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格）是一種理性的平面設計方法與風格。運用固定的網格為版面佈局，圖文便可有依據地分配在這些網格之上。
網格只供設計師在設計過程使用，最終大眾看見的書籍或網頁等不會呈現出這些參考用的格狀物。這種方法在二戰後大受歡迎，至今成為出版物設計的主流風格之一。
圖中白色的線條為網格，文字可依據這些網格整理出清楚整齊的版面
自然界的完美比例
從古人將文字刻於泥版的那一刻起，便開啟了人們在某種媒介上記錄以及整理資訊的需求。但過去的人們使用的不是網格，而是從大自然觀察分析出如黃金分割比（golden section）、費波那契數（Fibonacci number）等來進行佈局與構圖。
這些呈現於不少動植物外觀的完美比例，如同編寫於基因中的密碼，自然地讓人眼覺得和諧美觀，因此被許多古典繪畫與建築應用。
黃金分割比
中世紀手稿中的祕密比例：范・德・格拉伕原則
范・德・格拉伕原則（The Van De Graaf Canon）是一種至今仍被使用網格系統。
格拉伕發現中世紀的手稿和古書設計中，常運用 2:3 （≈0.667）的祕密比例將頁面進行劃分，數值接近黃金分割比（≈0.618）。因此他透過幾何學設計出能適用於各種紙張大小的網格劃分方法。
讓文字框剛好佔頁面 4/9 的量，同時具有紙張大小 1/9 和 2/9 的空白邊界（margin）——換句話說，內邊距是外邊距的二分之一，上邊距也是下邊距的二分之一，文字框也與紙張長寬比相同，因此整體在視覺上看起來相當和諧。
范・德・格拉伕設計出以對角線交會點延伸分割出邊界具有2:3:4:6比例的文字框
十三世紀的建築師維拉爾・歐內庫爾（Villard de honnecourt），更藉此再變化出 6×6、9×9、12×12 的網格架構，稱為維拉爾圖形（Villard’s Figure），同樣也維持 2:3的比例。
維拉爾圖形
德國現代主義設計大師奇肖爾德（Tschichold）將這個比例其發揚光大，記錄在其有名的著作《新字體排印》（Die neue Typographie）。該書建構一系列現代設計的規則，提倡非置中形式排版，並於歷史上首度清楚闡述如何運用不同的字號與字重來訊息。
《新字體排印》（Die neue Typographie）
應用方式
幸運的是，現今是使用電腦排印，可以快速在版面上分割出 6×6、9×9、12×12 的網格，不再需要用幾何學的概念來繪製（如下圖）。
這類古典的規劃原則厲害之處在於，能透過縮小文字框留出範圍給圖片，來變化出活潑的版面形式（下圖），同時又維持基礎和諧的比例。
以范・德・格拉伕原則規劃出多種版面。
我在進行封面設計時，仍時常使用范・德・格拉伕和維拉爾圖形的概念來規劃網格，作為版面規劃的基底。如下圖是我過去為大家出版社設計的《蔬食風味聖經》，就是使用12×12 的網格。
但若面對圖文資訊量大的內容時，這種網格規劃方式可能會不敷使用。因此在規劃時，可以同時考量資訊的複雜度，設定欄位，並保留欄間（Gutters）距離。
譬如，我會先抓距紙張邊界1–2公分的邊距，定義為內容放置區域，以免成書在切割紙邊時，內容被切割掉（下圖）。
距紙張邊界1–2公分的邊距。範例來源：behance／Chandesh Tk
再畫出 6×6、9×9或12×12的網格，並依頁面所需放置圖文層級與內容量，來考慮欄位數和欄間距離。最終網格設定成果如下圖，相對符合現代多層級資訊呈現的需求：
範例來源：behance／Chandesh Tk
需求改變
隨著不同時代的思想、科技、政治或商業的意識型態發展。設計的目的越來越多元。二十世紀下半，設計逐漸細分為各類專門學科 — — 藝術、建築、工業、平面、電視媒體、人機界面⋯⋯。
到了數位時代，版面更是可無限延伸並層層點擊擴展更多資訊。可直接使用用電腦測量繪製出網格的狀況下，人們已經越來越少使用黃金比例來構成版面。
現今資本主義成為主流的商業社會，為了觸發消費行為，設計學科也開始從人類行為如眼球運動以及心理學等進行研究。
人們對視覺熱點、留白與色彩的應用有更深一層的認識，有越來越多不同領域的理論能支持設計師產出「有效」的設計。
在累積數千年的歷史經驗後，人們也已可熟稔地閱讀大量的資訊，但無論如何變化，版面設計的本質不變，依然是處理一切資訊的基礎。
只是，設計師要處理的狀況變得更複雜、能使用的媒介更多，並從「傳達資訊」的核心，變成需包含吸引人們的「注意力」這項條件。
設計師在建構版面時，若對漫漫歷史長河累積出的構圖方式 — — 網格，有些認識，便能在更複雜的媒介中執行，創造充滿吸引力的設計，並兼顧版面用來傳達資訊的本質。
敘事方式與閱讀的節奏感
關於網格設定，還有許多不同的流派，但本質上都是處理一切繁雜資訊，為畫面建立和諧的秩序，同時協助設計師設計出更活潑的圖文版面。
建立網格基礎概念後，版面設計基礎系列下一篇，將介紹面對動輒上百頁的書籍，設計師如何編排出整齊易讀，但不淪為呆板的版面。
有興趣的朋友，歡迎按下追蹤，獲得第一手通知！
延伸閱讀
《版型研究室：學會平面設計中難懂的數學題＆美學邏輯，最基礎的版型理論》
作者： Gavin Ambrose, Paul Harris 出版社：原點
👉🏻點擊了解更多
Comments