排版層級設計
掌握字級、字重、間距與視覺層級設計
認識排版層級
什麼是排版層級？
排版層級是透過字級、字重、顏色、間距等視覺手法，將內容依重要性組織，幫助讀者有邏輯地瀏覽資訊。
- 建立內容重點與閱讀流程
- 提升可讀性與理解度
- 創造視覺平衡與美感
- 引導用戶注意力與導航
字級層級
字級比例原則
建立一致且和諧的字級比例系統。
- 可用數學比例（1.25、1.5、2）
- 保持明顯的字級差異
- 每個字級都要易讀
- 跨裝置測試
常見字級比例
設計系統常用的字級比例。
- 完全四度：1.333 比例
- 完全五度：1.5 比例
- 黃金比例：1.618 比例
- 模組化比例：自訂比例
字重層級
字重選擇策略
選擇能清楚區分層級且易讀的字重。
主要字重
- 細體（300）：輕度強調
- 一般（400）：內文
- 中黑（500）：中度強調
- 粗體（700）：強烈強調
使用建議
- 每種字體建議2-3種字重
- 用字重做層級，不做裝飾
- 確保對比明顯
- 多螢幕測試
字重層級範例
常見層級模式：
- 標題：粗體（700）
- 副標：中黑（500）
- 內文：一般（400）
- 說明：細體（300）
間距與版面
行高（leading）
適當的行高提升可讀性與層級感。
- 標題：1.1-1.3 行高
- 內文：1.4-1.6 行高
- 長文：1.6-1.8 行高
- 依字體特性調整
字距（tracking）
根據字級與用途調整字距。
- 標題：較緊密
- 內文：正常
- 小字：較寬鬆
- 全大寫：增加字距
視覺層級技巧
顏色與對比
利用顏色與對比增強排版層級。
顏色層級
- 主文字：高對比
- 次文字：中對比
- 輔助文字：低對比
- 重點色：策略性使用
對比建議
- 內文最少4.5:1對比
- 大字3:1對比
- 色盲測試
- 考慮背景變化
版面與定位
利用版面技巧強化排版層級。
- 留白分隔區塊
- 對齊建立視覺秩序
- 縮排表現從屬
- 網格系統保持一致
響應式排版
行動優先層級
•
簡化層級
小螢幕減少層級數
•
觸控友善字級
確保文字易讀且可點擊
•
漸進增強
螢幕變大時逐步增加層級
打造有效的排版層級
精通排版層級設計，讓內容清晰、易讀且具吸引力，有效引導用戶。