排版是信息架構的視覺化表達。微軟 Metro 設計語言源於瑞士平面設計原則（清晰、真實、美觀），啟示 Web 排版核心使命：在信息泛濫中，以簡潔秩序實現高效獲取。本文構建從概念、原則、類型到響應式適配的完整 Web 排版知識體系。

核心概念：有機排列，邏輯優先

排版非單純佈局，而是將有限視覺元素（文字、圖片、色塊、留白）有機組合，實現邏輯清晰、閱讀順暢、交互便捷。遵循 Rams 十大優秀設計原則（創新、實用、美感、簡單易懂…），以內容為核心，形式服務功能。

Web 排版的特殊挑戰

區別於平面媒體，Web 排版面臨四大變量：
1. 交互性：可操作、即時反饋、狀態變化，要求易用優於美觀。
2. 多媒介呈現：PC、手機、平板、TV 等多尺寸、色域差異。
3. 技術演進：HTML/CSS 升級帶來更豐富排版能力（Flex/Grid/變量字體）。
4. 多媒體融合：文字、圖片、視頻共存的信息密度管理。

不變的原則：平面構成八大法則 + 兩大 Web 強調

• 重複與交錯、節奏與韻律、對稱與均衡、對比與調和、比例與適度、變異與秩序、虛實與留白、變化與統一。
• 功能與形式統一： 深入理解業務與內容，形式精準承載主題思想。
• 兼容與響應： 跨平台、多尺寸、不同環境下的優雅降級與漸進增強。

六大排版類型實戰拆解

1. 文字排版： 字號/字重/行距/字間距構建信息層級，建立垂直韻律。
2. 色彩排版： 色相/明度/純度/面積/位置組織視覺權重與情感氛圍。
3. 圖片排版： 瀑布流、卡片式、全屏沉浸等模式適配不同內容類型。
4. 表單排版： 分組、對齊、即時驗證、鍵盤優化，讓輸入流暢愉悅。
5. 界面排版： 導航、工具欄、內容區、狀態欄的功能分區與操作習慣適配。
6. 導航/圖表排版： 數據歸類、視覺化編碼、層級穿透，讓複雜信息一目了然。

總結：排版是設計師的核心基本功

好的排版不僅美觀，更能有效組織信息、降低認知負荷、引導用戶行動。要求設計師深度理解內容本質，將內容視為設計元素，依原理有效排布。隨著技術賦能，排版邊界持續拓展，但「清晰、秩序、以人為本」的內核永不變。