共通設計理論教材 / Class LLL

密度、節奏與版面呼吸

放得下，等於容易找到嗎？

固定文字與字級，只改組內距、組間距和300／180容器，觀察換行、占高與查找任務。討論密度與節奏的代價，不把空白比例或「呼吸」當客觀品質分數。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 8 分鐘

開啟互動教材查看參考來源

閱讀目標

把密度描述連到明確內容和容器
固定字級比較換行與占高
以閱讀目的說明節奏取捨

適用條件與學習範圍

同一內容在窄版面變高時，應該先刪留白、縮小字，還是重新檢查資訊關係？

能分清組內與組間；不需先會響應式程式或軟體排版。

能描述固定內容換容器後的換行與空間變化，分開調兩種間距，依查找目的指出緊湊或寬鬆方案的取捨與反例。

不定義通用密度百分比、最佳行距或心理舒適度；不教完整長文、中文字禁則或響應式系統，也不把放得下當成可讀驗收。

原理與判斷

密度可以描述一段區域裡資訊排列的緊湊程度，但不同說法未必量同一件事。文字字數、文字盒占用和真正筆畫面積並不相等；本站不把它們混成一個空白百分比，也不替「呼吸感」算分。用同一行程卡看具體代價：較小間距可能讓更多資訊出現在觀察窗裡；較大間距可能強化某些段落分隔，也可能把說明推到需要捲動的位置。先說要找什麼，再描述哪個距離值得保留。

先固定內容，才比較容器

保持三站原文與字級，切300到180。這裡改的是容器寬度，並沒有把文字整體縮成六成。較窄時，集合說明會按目前瀏覽器的實際字體和換行排成更多行，文字盒可能變高。因此不要把「每組高度變了」全歸因於組間留白。先核對文字是否換行、字級是否一樣，再調間距。正面觀察窗提供真排樣與捲動；架上投影縮略的變形不是量測依據。

節奏來自反覆與差別

三組使用相同的組內距與組間距，形成重複安排；兩種距離不同，則能給讀者另一層分段提示。把兩者設成相等，再改其中一個，指出反覆的是什麼、差別又在哪裡。這裡的節奏指靜態位置的重複，不是播放速度或眼動軌跡。固定間距只是可管理的規則；碰到較長內容，仍要檢查語義與相鄰項目，而不是要求每組看起來一樣高。

緊湊與寬鬆都要說用途

固定窄180，只減組間，可把不同站點拉近；只減組內，則讓同站的標題和說明靠近。兩個修改可能有不同用途，不能把「更緊湊」當成單一操作。當間距增加到觀察窗放不下時，使用捲動繼續讀，不會刪掉最後一站。若產品目的需要一眼看到全部時間，就要比較可見範圍；若是查一站的集合處，清楚配對與完整文字可能更重要。這些是待驗的設計理由，不是保證的讀者效果。

品牌建議要留在它的條件

IBM的排版基礎、字級與格線文件把空間放在字體、行高、容器與媒介脈絡下討論。其Plex規格、95%調整或8px單位，不能直接當成Noto繁中版面的最佳值；本站保留Class LLL原字體。本例只調組間和組內，不調字距或每行leading。若要研究長文行距、中文標點或換行禁則，需沿對應教材另做控制比較。請把結論寫成「在180寬、找集合處的目的下，我保留……，仍須檢查……」，而不是「留白越多越高級」。

步驟與觀察

比較300與180
固定間距和字級切寬窄，指出哪些說明換行；記錄容器變化，不稱文字自動縮小。
只調一種緊湊程度
在窄180只減組內或組間，分別說明哪兩段文字靠近。回原值再比較另一種。
用捲動核對完整內容
調大間距後，在正面校樣繼續讀最後一站，確認沒有以裁切藏掉資訊。捲動可用觸控、鍵盤與瀏覽器原生控制。
換查找目的作反例
先比時間，再找東站集合處。說出原排列未能直接回答之處，補讀留白教材後返回保留窄版方案。

常見問題

換行變高卻說全是留白變多

先固定字級並核對容器寬度與文字行數，再分開調組內／組間，不把多種變化混談。

把觀察窗放不下當內容應該刪掉

此例保留完整原文並可捲動；真產品要依目的評估資訊優先序，不能默默裁掉最後一組。

用密度百分比取代可讀判斷

先說量的是字數、文字盒還是筆畫；本頁沒有計算心理密度或客觀呼吸分數。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：同一繁中短行程的組內／組間距、容器寬度與閱讀目的比較；跨工具的版面觀察。來源狀態：已重新開IBM三頁公開正文，讀S12的行距、Alignment、Comfortable reading、Line lengths within containers；S13的Adjusted scale及文字 scale字級／行高說明；2x 格點的Margins、Gutters、Base unit／Spatial relationships。均為IBM與Plex品牌實務，不當人類分組實驗、所有語系最佳間距或普遍8px規範。未引用未讀專著或把Plex公式／95%直接套Noto。QZ21的原典補核狀況沿其紀錄，此票不擴增全書已讀聲稱。示意限制：原創虛構北／南／東站三組時間與集合說明，文案、順序、字級不變；獨立改組內4–20px、組間8–48px、容器300／180 CSS px。原生HTML換行在正面觀察窗顯示，固定文字補讀；重用40件校樣架，滑座跟組內距同源。不是留白率或心理密度算法，未搬來源圖版。原生軟體實測：沒有Photoshop／Illustrator／Figma原生排版實測；本站正面是目前瀏覽器的CSS排樣，不冒稱三軟體相同換行或吸附。學習成效驗證：未做真人、眼動、查找速度、理解率或美感實驗；間距讀數與自行插旗不能證明讀者把哪些當成同組。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。