如何在介面中設計排版：實用訣竅和技巧
後設資料
- URL：見 frontmatter
- 原作者：Wojciech-Zielinski（波蘭 UI/UX 設計師，曾任職 inFullMobile）
- 譯者：Lin Simon
- 發行：AAPD-As-A-Product-Designer（Medium publication）
- 發表日：2017-01-14（原文發表時點；本來源 ingest 日為 2026-05-01）
- 語言：中文（繁中譯本，原文英文）
- 格式：Medium 中等長度文章 + 字體 / 排版示意圖（圖片未下載）
- 適用對象：UI / 視覺設計入門至中階；偏「實作技巧」而非理論
一句話濃縮
介面排版可由「易辨性 (Legibility)」與「易讀性 (Readability)」兩條軸切：易辨性處理單字母可被分辨（X 高度 / 字腔 / 字重 / 寬比例 / 字距），易讀性處理整體閱讀體驗（襯線選擇 / 黃金比例行高 / 50–75 字符行寬 / 顏色 / 留白 / 層級 / 分隔器 / 重複節奏）；好排版「沒有感覺」、壞排版才會被注意到。
提取要點
兩條主軸：Legibility vs Readability
| 軸 | 中譯 | 處理對象 | 尺度 |
|---|---|---|---|
| Legibility | 易辨性 | 單字母能不能被分辨（micro typography） | 字體層 |
| Readability | 易讀性 | 整段內容好不好讀（macro typography） | 版面層 |
兩者必須先決定字體本身可分辨，才談整段排版好讀——順序不可逆。
核心心態：使用者導向
- 設計目標不是「美學上漂亮」，而是字體要靈活、能在各種解析度與裝置渲染良好
- 引用核心命題：「好的排版對觀看者來說是『沒有感覺』的」——壞排版才是被注意到的那種
- 字體選擇要看：字重範圍、寬度範圍、特殊符號支援、螢幕渲染品質
Legibility（易辨性）五個檢核點
- X 高度（X-height）——大小寫字母比例越大，可讀性越高（小寫佔閱讀內容 95%，是真正的主角）
- 字腔（Counters）——字母內部空白（o / u / d 等的內空間）越大越容易被分辨
- 字重（Weight）——較輕字體通常比重字體更易辨；不能因為加粗就破壞字形
- 筆劃粗細經驗法則：「最佳文字筆劃粗細約為 x-height 的 18%」
- 寬比例（Wide Proportion）——寬字母比壓縮字母可讀性高
- 字距（Letter Spacing）——「越大的文字大小需要越小的字距」；UI 上主要對標題手調
→ 反例警示：大寫 I 與小寫 l 在某些字體中分不出來，小型顯示器情境下必須避開這類字體
Readability（易讀性）八個工具
- 襯線 vs 非襯線（Serif / Sans Serif）——歷史上襯線易讀（讓視線沿基線穿梭），但手機與網頁傾向無襯線；長文章（如 Medium）才回到襯線。判斷依專案內容與使用者使用情境——Twitter 全無襯線 vs Medium 有襯線都是合理的不同選擇。
- 行高（Line Height）——使用黃金比例 1.618：「字母大小 × 1.618 = 完美行高」（有經驗時可手動微調）
- 文字區塊寬度（Line Length）——「每行 50–75 個字符」：太寬視線難找下一行；太窄頻繁換行打斷節奏
- 顏色——避免純黑（#000）或純灰（#CCC）；用主色調的暗色版可建立獨特性
- 留白（White Space）——「留白的基本作用是減少讓閱讀者一次看到這麼多數量的文字」；引導視線、創造優雅感
- 層級（Hierarchy）——用對比度 / 字級 / 內外間距區分標題、副標、正文，告訴讀者從哪開始、什麼重要
- 分隔器（Separators）——一條線是最簡形式；卡片式設計適合分組「不相關內容」，且利於拇指操作
- 重複與節奏（Repetition & Rhythm）——重複位置、字級、顏色、間距等規則 → 一致性 → 節奏；撰文者個人規則：「內外距以 5 為單位」
元命題
- 「最終是動手做、不是讀文章」——「這個技能不是從閱讀 Medium 文章就能取得，而是需要學習和許多的動手練習」（原作者語）
- 引言：「藝術的偉大不是常見的，而是獨一無二的。」— Isaac Bashevis Singer（諾貝爾文學獎，1904–1991）
vault 對位
- 與 履歷設計 對位：履歷設計頁早已點到「留白讓資訊有呼吸感 / 對齊降低凌亂感 / 字型選擇先考慮可讀性與字級而非特殊感」——本來源以 UI 介面語境把這些直覺工具系統化為 Legibility / Readability 兩條軸。履歷頁的「層次」對應本來源的「層級（Hierarchy）」；履歷頁的「字型保守可靠」對應本來源「使用者導向心態 + Legibility 五檢核」。
- 與 UX文案 / 語氣與聲調 對位：UX 文案管「寫什麼字」，本來源的排版管「字怎麼擺」——同一個字串，文案決定意思、排版決定能不能被看到。兩者在介面交付物中緊鄰（PRD 字串表是文案的交付形式 / 排版規範通常在 Design Guideline）。
- 與 使用者研究 / Empathize 對位：使用者導向心態「字體必須靈活、不要讓使用者因設計師無知受苦」是 Empathize 階段在介面層的具體展現——同理使用者「在不同設備、不同環境下閱讀」這個事實。
提取概念
連結到此來源衍生 / 更新的 wiki 頁：
- 排版 — 介面排版主合成頁（新建，本來源主軸）
- 易辨性 — Legibility，字母能否被分辨（新建）
- 易讀性 — Readability，整段閱讀體驗（新建）
- Wojciech-Zielinski — 原作者實體（新建）
- AAPD-As-A-Product-Designer — Medium publication（更新：補入第二篇來源 + 第二位作者軸）
- MOC-UX — 補入「工具層（介面表現）」段，把排版納入 UX 工具堆疊
- 履歷設計 — 補入排版兩軸對位（履歷頁的層次 / 字型 / 留白可被本來源系統化）
- UX文案 — 補入「字怎麼寫 vs 字怎麼擺」對位
原文（待使用者貼入）
Medium 文章圖片為 CDN 連結，未下載；如需長期保存原文，請使用者直接貼入此處（保留行內連結與圖示意說明）。本頁的「提取要點」已涵蓋方法論骨架，原文留作未來語境補強用。