易讀性
一句話定義
排版的 macro 層——整段內容好不好讀，能否輕鬆掃視、區分標題與正文；屬於「版面層」的決策，建立在 易辨性 之上。
核心要點
八個工具維度
| # | 工具 | 核心 |
|---|---|---|
| 1 | 襯線 vs 無襯線 | 短訊 / App / 行動裝置 → 無襯線；長文 / 部落格 → 襯線；依使用情境決定，不是流行度 |
| 2 | 行高（Line Height） | 「字母大小 × 1.618 = 完美行高」（黃金比例起點，可手動微調） |
| 3 | 行寬（Line Length） | 「每行 50–75 個字符」；過寬視線難找下行、過窄頻繁換行打斷節奏 |
| 4 | 顏色 | 避免純黑（#000）/ 純灰（#CCC）；用主色調暗色版建立品牌獨特性 |
| 5 | 留白 | 「減少讓閱讀者一次看到這麼多數量的文字」；引導視線、創造節奏 |
| 6 | 層級（Hierarchy） | 用對比 / 字級 / 內外間距告訴讀者從哪開始、什麼重要 |
| 7 | 分隔器（Separators） | 一條線（最簡）/ 卡片式設計（分組不相關內容、利於拇指操作） |
| 8 | 重複與節奏 | 一致的字級 / 間距 / 顏色 / 內外距規則 → 視覺一致性 |
襯線選擇判斷表
「在 twitter 中沒有半個襯線字，但在 Medium 中有襯線字卻很合理」——同樣是介面，選擇標準完全不同。
| 情境 | 偏好 | 為何 |
|---|---|---|
| 操作介面 / 短文 / 列表 | 無襯線 | 螢幕渲染穩定、視覺乾淨 |
| 長文閱讀（>500 字） | 襯線 | 視線沿基線穿梭、降低長段落疲勞 |
| 標題（>20px） | 兩者皆可 | 標題求識別，襯線細節在大尺寸還可辨 |
| 數字 / 代碼 | 等寬無襯線 | 對齊與字符區分（0 vs O） |
層級的三個槓桿
不是「標題就用大字」這麼簡單——層級可以從三個維度切：
- 大小（Size）——字級階梯（1.125 / 1.25 / 1.333 / 1.5 / 1.618 等比）
- 對比（Contrast）——顏色深淺 / 字重輕重 / 與背景對比度
- 間距（Space）——上下 padding / margin、與相鄰元素的距離
→ 層級是「這三個槓桿的組合配置」，不是任一單獨工具
元命題
- 好排版「沒有感覺」——讀者完全不需要意識到排版的存在，內容就會自然流入
- 重複產生節奏——這是 UI 設計中最耗時但最關鍵的工序
- 留白不是浪費版面，而是讓內容可被消化的呼吸空間
UI 留白：macro / micro + margin / padding
2026-05-07-SocialMORE-UIUX設計入門-Part01 將留白放進 UI 設計入門：留白是設計裡各元素之間的空間，也是文字行距、字距與段落距離。它可分成：
- 宏觀留白（Macro White Space）：較大組件之間的空間，用來避免版面混亂、讓重要訊息被傳達。
- 微觀留白（Micro White Space）：圖標、文字、按鈕、段落等細小元素之間的空間，讓閱讀更舒適。
- Margin / Padding：margin 是邊框之外與外界元素的距離；padding 是邊框之內、內容與邊界之間的間隔。
這補強本頁既有的「留白」工具：留白不是剩下的空間，而是主動配置注意力與區塊關係的工具。
反模式（避坑）
- 行寬滿版（桌面網頁正文 1200px）→ 視線難找下一行
- 行高低於 1.4 倍字級的長正文 → 視覺壓迫感、閱讀疲勞
- 用顏色而非層級結構強調 → 讀者不知道從哪開始看
- 規則不一致（同一頁不同段落用不同間距系統）→ 視覺混亂
與其他概念的關係
- 與 易辨性：易辨性是 micro（字母層）/ 本頁是 macro（段落層）；同屬 排版 umbrella 下的兩條軸；易辨性是易讀性的前置條件
- 與 排版：本頁是 排版 的 sub-concept
- 與 履歷設計：履歷頁的「留白 / 對齊 / 段落 / 層次 / 配色」全在本頁的八工具範圍內——本頁是介面語境的系統化
- 與 UX文案：UX 文案決定內容、本頁決定內容怎麼被排出來——好文案配壞排版會被噪聲淹沒
- 與 顧客旅程地圖：旅程地圖找出使用者在哪些觸點閱讀內容，本頁決定那些觸點上的排版策略（不同情境用不同排版邏輯）
- 與 Core-Web-Vitals 的 CLS 對位：本頁第 8 工具「重複與節奏 + 視覺穩定」+ 排版 元命題「好排版『沒有感覺』」與 CLS（累計版面配置轉移）量化的是同一個體驗——位移就是「讓使用者感覺到」的反例。本頁是 UX 直覺指引、CLS 是 Google 把它量化進排名訊號的代理。
- 與 圖表設計：本頁的對比 / 留白 / 層級 = 圖表設計 三原則之 Approachable（易理解） 在圖表中的具體工具——軸標籤、結論句、留白、強調色都是把易讀性紀律應用到資料視覺化
- 與 無障礙設計：本頁備註的「WCAG 對比度標準、可調字級設計、screen reader 標題層級」未來方向已由 無障礙設計 接收為其核心軸；本頁聚焦排版直覺，無障礙設計頁聚焦多通道與包容性
相關來源
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — UI 留白、macro / micro white space、margin / padding 入門
- 2026-05-01-介面排版設計訣竅
- 2026-05-01-Welly-技術SEO9大項目 — Core Web Vitals CLS 與本頁「重複節奏 / 視覺穩定」對位
- 2026-05-02-蘋果與谷歌圖表設計大揭秘 — Apple WWDC 2022；本頁對比 / 強調 / 系統模式紀律在圖表場景的兌現（深淺模式適配 / 高對比度模式 / 字級可調）
備註
本頁的八工具偏「直覺指引」級，未深入：
- 資訊架構與排版的耦合：F-pattern / Z-pattern 掃視路徑、優先資訊定位、grid system
- 響應式排版：clamp() / fluid typography / breakpoint 處的字級切換
- 無障礙閱讀：WCAG 對比度標準、可調字級設計、screen reader 標題層級
- Design system 字級階梯：1.125 minor second / 1.25 major third / 1.333 perfect fourth / 1.5 perfect fifth / 1.618 golden 等比例選擇
上述都會在 排版 頁的「未來累積方向」追蹤；本頁累積到 3+ 來源後再分章節展開。