許多初級設計師忽視網格系統，導致畫面雜亂無序、信息層級模糊。實則網格是構建視覺秩序、提升閱讀效率、實現模組化管理的核心工具。本教程手把手教你在 InDesign、Illustrator、網頁設計中建立並靈活運用網格系統。

一、網格類型與選型邏輯

常見欄數：12 欄、16 欄、24 欄。關鍵不在欄數多寡，而在於你實際應用的那一套。 我偏好 12/24 欄系統，因其高度可組合：

• 24 欄基礎上：1 欄、2 欄（12 欄制）、3 欄（8 欄制）、4 欄（6 欄制）任意切換
• 間距視內容調整：瀑布流 1-2px，長文閱讀留白更大
• 響應式設計中，網格地位更關鍵，斷點對應欄數重組

二、同一網格無限排版組合

網格非限制，而是組合遊戲場。同一 24 欄網格可衍生：

• 導航全幅、主內容 60% + 側邊欄 40%
• 下方區塊主內容 60% 三等分
• 三欄等寬圖文混排
• 非對稱動態佈局

三、InDesign 建立印刷網格實操

1. 新建文檔 → 修改關鍵設置：
    • 單位：按習慣改英寸/厘米/像素
    • 欄數：直接決定網格結構（如 5 欄）
    • Gutter（欄間距）：盡量留大，按內容微調
    • 頁邊距：預留足夠出血與安全區，防文字被裁切
2. 「版面 → 邊距和欄」可隨時調整
3. 基線網格：編輯 → 首選項 → 格 設置基線間距，對齊跨欄文本基線

四、Illustrator 建立網格實操

1. 新建文檔 → 選擇文字工具拉出文本框（先定頁邊距）
2. 頂部選單 「文字 → 區域類型選項」
3. 對話框與 InDesign 高度相似，可建立垂直/水平/混合網格
4. 關鍵：開啟預覽 實時檢查網格效果
5. 「選項」中決定文本框內文字水平/垂直排列

五、實戰案例：5 欄網格靈活應用

主內容佔 3 欄，副內容 2 欄。亮點：副標題僅佔主內容 2 欄寬度，未強制填滿 3 欄，視覺更舒適。頁碼 23 同樣未填滿欄寬，而是借網格找舒服位置。網格是參考而非牢籠，適時打破才能製造視覺驚喜點。

六、總結：網格思維三層境界

1. 依規矩：嚴格對齊網格，建立秩序感、專業度
2. 玩組合：利用欄數組合靈活變化佈局，應對複雜信息層級
3. 懂打破：關鍵元素故意越界、重疊、旋轉，製造視覺張力與閱讀節奏

設計師的本質是「用最有創意的方式傳遞信息」。網格系統讓信息更有條理，打破網格讓設計更有張力。掌握這雙刃劍，版式設計從「湊版面」進化為「設計系統」。