排版設計系統

一句話定義

將文字與圖片的空間組織方式抽象為 8 種視覺組織系統——很多人只認識網格系統，但每種系統都有其應用情境與層次感、對比、視覺平衡、閱讀順序的處理方式。

核心要點

8 大系統（socialMORE 整理）

#	系統	英文	視覺特徵	典型應用
1	軸線式	Axial	圍繞一條中軸線，元素分佈左右兩邊	雜誌跨頁 / 產品說明書
2	雙邊對稱式	Bilateral	所有元素置中於中軸線	婚禮邀請函 / 高端品牌海報
3	模組式	Modular	元素為獨立模組，組合成整個構圖	卡片式介面 / Bento grid
4	行進式	Transitional	元素隨意移動、不對齊但保持視覺平衡	雜誌專題 / 動感海報（最難掌握）
5	隨機式	Random	沒有明確目標，可裁剪 / 重疊；易辨性消失反而更好	藝術海報 / 實驗性設計
6	放射式	Radial	從一個中心點向外延伸	太陽光圖 / 中心 logo 周邊資訊
7	漣漪式	Dilatational	從圓心擴散多個圓形（似放射式）	動感構圖 / 音樂主題
8	網格式	Grid	垂直水平分配排列	出版品 / 網頁設計 / 介面

排版需考慮的 4 因素

1. 層次感——讀者知道從哪開始看
2. 對比——重要 vs 次要可被一眼分辨
3. 視覺平衡——畫面不偏不倒（即便是不對稱式系統也要有視覺平衡）
4. 閱讀順序——視線路徑被引導

→ 每個系統都是這 4 因素的不同解法配方

三個元命題

1. 網格不是唯一答案——大部分人預設用 Grid 是因為安全，但 8 種系統各有適用情境；選錯系統 ≠ 排版差，是「沒在用最適合的工具」
2. 越自由的系統越難掌握——隨機式 / 行進式看似最自由，其實最考設計師對視覺平衡的直覺
3. 可混搭——一張海報的主視覺用放射式 + 文字區用網格式是常見組合

應用判斷

內容性質	偏好系統
大量資訊 / 需快速掃讀	網格式 / 模組式
強調儀式感 / 正式	雙邊對稱式
動感 / 情緒	放射式 / 漣漪式 / 行進式
藝術表達 / 不求易讀	隨機式
雜誌 / 內文	軸線式 / 網格式

與其他概念的關係

• 與 排版：本頁是 排版 的結構層——排版 講字體選擇與 micro/macro 兩軸，本頁講整體空間組織；兩者並列構成完整排版工具集
• 與 易讀性：本頁的「層次感 / 視覺平衡」就是 易讀性 八工具中「層級 / 重複與節奏」的空間化呈現
• 與 包裝設計 / 履歷設計：兩者都會在 8 系統中選一種作為主框架——履歷常用網格 / 軸線；包裝可能用模組（多面展開）/ 放射（中心 logo）
• 與 Logo設計原則：Logo 內部結構也常套用排版系統（雙邊對稱 / 放射式最常見）
• 與 概念簡報：簡報每張投影片就是一個排版系統的應用；混用會讓觀眾失去視覺節奏

相關來源

• 2026-05-01-SM-設計入門總整合 — Ch.03 #99 排版設計系統頁，8 系統定義 + 視覺示意

備註

• 本頁是 8 大系統的入門速查；每個系統都可獨立深入（例如網格系統有「列數 / 邊距 / 內距 / baseline grid / 模組化比例」等多層細節）
• 未來累積方向：(1) 各系統的歷史脈絡（如雙邊對稱式源於文藝復興印刷術 / 網格系統源於瑞士國際主義）；(2) 數位介面常見的混合系統（網格 + 模組）；(3) 響應式設計中系統如何隨螢幕寬度切換
• 達 2+ 來源後可拆出 網格系統 等子概念