文章佈局系統
目的
文章佈局系統提供了一套設計「閱讀體驗」的方法論，也就是針對長篇內容（如部落格、文件、白皮書與案例研究）的文字與輔助媒體進行特定排列。雖然 section-composition-system 處理的是頁面層級的流程，但這個系統專注於可讀性、行長度 (measure)、垂直韻律以及文字與編輯元素（圖片、引文、程式碼區塊）之間的空間關係。它確保使用者能夠在沒有視覺疲勞的情況下消化大量資訊。
使用案例
- 設計部落格文章範本與文章頁面。
- 建構技術文件與知識庫。
- 建立長篇編輯內容或數位雜誌。
- 開發「閱讀模式」或專注於無障礙的文字檢視。
- 組織教育內容，以資訊保留為目標。
何時不該使用
- 高衝擊登陸頁： 當目標是掃描利益與快速CTA時；應使用
section-composition-system。 - 儀表板： 當資料密度與比較優先於線性閱讀時；應使用
data-table-ui-system。 - 表單與輸入密集型檢視： 應使用
form-design-system。 - 單一視口「應用程式」檢視： 當內容次於功能工具時。
輸入
- 內容原型： 這是技術教學（程式碼多）、敘事故事（圖片多）還是正式白皮書？
- 排版系統： 在
fluid-typography-system中定義的基本字型大小與比例。 - 閱讀環境： 這份內容主要是在手機（無干擾）還是桌面（多欄上下文）上閱讀？
- 層級圖： 內容的邏輯結構（H1、H2、H3、內文、標題）。
輸出
- 「黃金容器」規格： 為文字定義最大寬度，以確保最佳行長度。
- 垂直韻律圖： 一套邊距與內距系統，在段落與標題之間建立可預測的間距。
- 編輯元件藍圖： 關於下拉引用、側欄、媒體區塊與目錄的視覺規則。
- 響應式閱讀地圖： 字型大小與行高如何在不同螢幕寬度下調整以維持可讀性。
工作流程
1. 定義「黃金容器」（行長度）
可讀性最關鍵的因素是每行的字元數：
- 最佳範圍： 45 至 75 個字元（包含空格）。
- 桌面實作： 通常轉換為介於
600px與800px之間的max-width，或者直接使用max-width: 75ch—ch單位會追蹤字型的實際字元寬度，因此在字型變更時仍能保持正確。 - 流體尺寸： 對標題與內文使用
clamp()（例如font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)），使字型隨視口縮放，而非在斷點處跳躍。 - 置中： 將容器置中以減少因頭部大幅移動而產生的眼部疲勞。
2. 建立行高與垂直韻律
行高（leading）與區塊之間的間距能創造「呼吸空間」：
- 基本行高： 目標為內文的 1.5 至 1.6。對於較小或較複雜的字型，應增加行高。
- 「間距比例」： 使用一致的間距系統（例如基本邊距的 2 倍或 3 倍）作為標題前的間距，並使用較小的間距（例如 1 倍）作為標題後的間距。
- 段落間距： 在網頁佈局中，使用下邊距 (
margin-bottom) 而非縮排來分隔段落。
3. 設計編輯「間隔」
透過引入視覺變化來防止「文字牆」疲勞：
- 下拉引用： 較大、經過樣式化的文字，重點強調關鍵見解。
- 側欄/區塊： 具有明顯樣式的框（通常帶淺色背景或邊框），用於次要資訊。
- 圖片/媒體： 定義「內嵌」(Contained)（行內）與「寬版」(Wide)（突破容器寬度）以及「滿版」(Full-Bleed) 媒體的規則。
- 標題換行： 對標題與下拉引用套用
text-wrap: balance（並為不支援的瀏覽器提供備援方案），以避免最後一行出現孤立的單字。
4. 建立導航與路徑指引
幫助使用者管理長篇內容：
- 目錄 (ToC)： 對於超過 1,000 個字的文章，在桌面上提供固定的目錄，或在手機上提供可折疊的目錄。
- 進度指示器： 一個微妙的進度條或百分比指示器，顯示剩餘內容。
- 閱讀時間： 在頂部提供「X 分鐘閱讀」的估計時間，以設定使用者期望。
5. 規劃響應式排版轉換
隨著螢幕縮小維持可讀性：
- 手機舒適度： 在小螢幕上，減少水平內距，但保持舒適的行長度。
- 對比檢查： 確保背景色的區塊或深色模式切換符合 WCAG AA 對比度。
決策規則
- 字元規則： 如果一行文字超過 80 個字元，就太寬；如果少於 40 個字元，就太窄。調整容器。
- 標題鄰近規則： 標題應始終比其前面的內容更接近其介紹的內容（鄰近原則）。
- 媒體寬度邏輯： 對於技術細節使用「內嵌」圖片，對於氣氛或敘事轉換使用「寬版」或「滿版」圖片。
- 韻律「瞇眼測試」： 瞇眼看頁面；你應該看到由清晰、一致的空白分隔的明顯「區塊」。
限制
- 無障礙： 文字必須符合 WCAG AA（4.5:1）對比度。內文的字型大小不應小於 16px（1rem）。
- 響應式： 容器必須是流體的（使用
max-width而非固定的width）。對於文章內部需要根據自身容器而非視口調整的元件（例如區塊、嵌入媒體），應使用容器查詢 (@container)。 - 層級： H1 必須最醒目，但內文必須最易於閱讀。
常見失敗模式
- 「桌面海洋」： 文字橫跨 24 吋顯示器的全寬，使眼睛無法找到下一行。
- 窒息文字： 行高過於緊湊（例如 1.1 或 1.2），導致上下突出部分相互碰撞。
- 漂浮標題： 標題上下間距相等，使得所屬區段不明確。
- 不一致的媒體： 混合使用置中、左對齊與寬版圖片，但沒有清晰的邏輯系統。
- 「無盡滾動」： 在 5,000 字的文章中沒有路徑指引或進度指示器，導致使用者放棄。
驗證標準
- 行長度（measure）在桌面上介於 45 至 75 個字元之間。
- 行高（leading）至少為內文的 1.5。
- 垂直韻律能清晰地區分標題與其後的內容。
- 編輯元素（引文、區塊）與內文在視覺上有所區別。
- 對於長篇內容，目錄或路徑指引已存在。
- 閱讀體驗已在手機視口上進行測試與優化。
- 所有文字的對比度均符合 WCAG AA 標準。