排版

Properties2
tags狀態/草稿, 領域/ux, 領域/視覺設計
aliasesTypography, UI 排版, 介面排版, 字體排印

閱讀時間約 11 分鐘

排版

一句話定義

介面中文字的選擇、組合與佈局；由「易辨性（micro：字母能否被分辨）」與「易讀性（macro：整段內容好不好讀）」兩條軸構成，好排版「沒有感覺」——壞排版才會被注意到。

核心要點

兩條軸（先 micro 後 macro）

順序不可逆——字母本身分不出來時，整段排版再用力都救不回來。

軸處理對象sub-工具
易辨性（Legibility）單字母可不可分辨X 高度 / 字腔 / 字重 / 寬比例 / 字距
易讀性（Readability）整段內容好不好讀襯線選擇 / 行高 / 行寬 / 顏色 / 留白 / 層級 / 分隔器 / 重複節奏

心態：使用者導向（不是美學導向）

  • 設計目標不是「漂亮」而是讓字在各種解析度、裝置、環境下渲染良好
  • 字體必須靈活：字重範圍、寬度範圍、特殊符號支援、螢幕渲染品質
  • 「好的排版對觀看者來說是『沒有感覺』的」——這是排版的最終驗收標準

兩個常用經驗法則

  1. 筆劃粗細：「最佳文字筆劃粗細約為 x-height 的 18%」（易辨性 內字重判斷依據）
  2. 行高：「字母大小 × 黃金比例 1.618 = 完美行高」（易讀性 內行高設定起點）
  3. 行寬：「每行 50–75 個字符」（易讀性 內文字區塊寬度建議）

應用判斷：襯線還是無襯線

「在 twitter 中沒有半個襯線字，但在 Medium 中有襯線字卻很合理」——選擇標準是使用情境與內容類型，不是字體流行度。

情境偏好原因
短訊 / 列表 / 操作介面（Twitter / 多數 App）無襯線螢幕渲染穩定、視覺乾淨、短文無需穿梭引導
長文閱讀（Medium / 部落格）襯線視線沿基線穿梭，長段落降低疲勞
標題層 vs 正文層兩者可混用標題求識別、正文求閱讀

資訊設計中的文字兩軸

2026-05-07-即學即用的圖像資訊表達課 C4 把文字處理拆成：

  • 感受性：標題可以承擔較強風格，內文與次標題則應保持穩定，避免字體過多。
  • 易讀性：字級、字重與行距決定資訊是否能被順利吸收；1.5 倍行高可作為初始測試點。

→ 這與本頁既有 micro / macro 分工相容：標題字體負責情緒與識別，正文排版負責長時間閱讀。

簡報投影場景：先讓字被看見

2026-05-09-60分鐘打造質感簡報-關鍵第一步 把排版兩軸落到投影片場景：

  • 字級大小先於美感：投影簡報不是手機 / 電腦近距離閱讀；觀眾看不到文字時，排版與配色都失去意義。
  • 文字量要配合媒介：台上簡報是「看 + 聽」雙通道，投影片應保留關鍵重點；書面簡報沒有講者口頭補充，才需要承載更多文字。
  • 行距 1.2–1.5 可作起點：兩行以上文字若黏成一塊，觀眾需要額外花力氣分辨行與行。
  • 字距是可讀性槓桿：粗體字、筆劃粗的字體或大標題容易互相擠壓，可略放寬字距；為了塞進模板而把字距壓緊，是把版面整齊換成閱讀壓力。
  • 清楚字體優先：內文優先無襯線與穩定字重；過度花俏字體、標楷體與新細明體在簡報中容易增加辨識成本。微軟正黑體這類常見黑體可作為安全起點。

這讓「好排版沒有感覺」多一個簡報版本：好簡報排版應讓觀眾把注意力花在講者與內容，而不是花在辨認字。

Layout 層工具（屬於 易讀性）

  • 層級（Hierarchy）——用對比 / 字級 / 內外間距告訴讀者從哪開始、什麼重要
  • 分隔器（Separators）——一條線（最簡）/ 卡片式設計（分組不相關內容、利於拇指操作）
  • 留白——「讓閱讀者一次看到的內容量被減少」；引導視線、創造節奏
  • 重複與節奏——一致的字級 / 間距 / 顏色 / 內外距規則 → 視覺一致性
    • 一個常見的個人規則：內外距以 5 / 8 / 4 等單位數字為基數

反模式（避坑）

  • 大寫 I 與小寫 l 分不出來的字體 → 小型顯示器會出問題
  • 純黑（#000）或純灰（#CCC）做主文字色 → 用主色調暗色版替代以建立品牌獨特性
  • 為了強調而硬加字重 → 重量過大會破壞字形
  • 行寬無限延伸（例如桌面網頁滿版正文）→ 視線難找下一行，閱讀斷裂

與其他概念的關係

  • 包含 易辨性 / 易讀性 兩個 sub-concept；本頁是 umbrella 索引型
  • 與 履歷設計：履歷設計的「留白 / 對齊 / 層次 / 配色 / 字型」直覺工具，在介面語境被本頁系統化為 Legibility / Readability 兩軸
  • 與 UX文案：UX 文案管「字怎麼寫」，排版管「字怎麼擺」——同一字串文案決定意思、排版決定能否被看到
  • 與 語氣與聲調：排版的字體選擇承載品牌 voice 的視覺面（嚴肅 vs 親切 / 傳統 vs 現代）
  • 與 使用者研究 / Empathize：「字體必須靈活，不要讓使用者因設計師無知受苦」是同理使用者跨設備閱讀情境的具體實踐
  • 與 PRD：排版規則通常以 Design Guideline / UED 元件庫 形式存在；規模小可放在 PRD 章節中、規模大獨立成元件庫（Tom-Liou 觀點）
  • 與 程式碼風格指南：兩者共享「沒有感覺 / 像一個人做的」終極驗收元命題——好排版讀者無感、好風格指南讀起來像一個人寫的；領域不同（視覺 vs 程式碼）但驗收哲學同源
  • 與 簡報設計：簡報是排版兩軸的具體應用場景——但增加「口頭講解輔助」的雙通道要求（聽 + 看）；簡報設計 集散頁聚集了 資訊層級 / 格式塔原則 / 字型搭配 / 中文字體類型 等本頁子工具
  • 與 資訊層級：本頁的兩軸（micro 易辨性 + macro 易讀性）+ 資訊層級（版面元素優先序）構成視覺設計三層檢核——字體 micro / 段落 macro / 版面 priority
  • 與 格式塔原則：本頁的「重複節奏」「對齊」對應 格式塔原則 的方框 / 填色 / 對齊三方程式；本頁是排版工具集 / 格式塔原則 是其底層認知基礎

相關來源

備註

本頁聚焦介面（UI / Web / Mobile）排版，不涵蓋傳統印刷排版的所有議題（如孤行、寡婦行、版心比例、活字 / 鉛字物理選擇等）。如未來 ingest 印刷排版專題來源，可分裂出 [[印刷排版]] 或在本頁開「印刷 vs 螢幕差異」段。

未來累積方向：

  • (a) 中英混排與 CJK 字體選擇（中文字型授權、字重支援、簡繁差異）
  • (b) 響應式排版（rem / clamp / fluid typography / 流式行高）
  • (c) 無障礙設計（WCAG 對比度、可調字級、screen reader 友好）— 已 2026-05-02 落地為 無障礙設計 獨立頁
  • (d) Design system 中的字級階梯（type scale，1.125 / 1.25 / 1.333 / 1.5 / golden 等比）
  • (e) Variable fonts（可變字體）與 OpenType features
  • (f) 排版與資訊架構的關係（資訊密度 / 掃視路徑 / Z-pattern / F-pattern）

反向連結