共通設計理論教材 / Class LLL

欄格、模組與基線

三種參照，各自負責什麼？

以同一圖文校樣分開切換欄、水平模組及基線；再獨立移動圖像和文字，解釋共同參照與資訊關係。參照不會替你決定閱讀順序，換標題或尺度後仍要重查。

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

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

閱讀目標

區分水平與垂直方向的參照
把圖像上緣與文字基線分開記錄
依內容和目的修正共同參照

適用條件與學習範圍

一條欄線、一排模組與一條文字基線，真的在對齊同一種東西嗎？

能指出圖像邊緣和文字位置；可先讀構成、比例與空間組織。

能分別說明欄、模組、基線的用途，完成一組只換參照的比較，再調整圖文位置並說明為何共用或偏離參照。

不提供通用最佳欄數、行距、8px規則或自動排版算法；不把幾何一致當成可讀性或學習效果。

原理與判斷

網格可把反覆出現的位置變成共同約定，讓同類資訊在不同區塊仍能互相比對。欄主要切分水平方向，水平模組再提供上下安排的參照；文字基線則指向字落腳的位置，並非字框上緣或可見筆畫的邊緣。這些參照回答「以哪裡為準」，不會自動回答「什麼重要」。一張所有元素都貼格的海報，仍可能讓時間、地點和主題難以分辨。先說資訊關係，再選要共同使用的參照。

先分清三種參照

正面校樣有24單位外側留空、252單位內部寬度，欄間隔12。切2欄或3欄，只會換欄線，圖文完全不動；這刻意把「換參照」和「移內容」拆開。不是模擬軟體開啟格線後就自動重排。開水平模組，新增每48單位的橫向區分。模組交點可供圖片、標題和說明選擇共同區域；不是要求每件物品填滿一格，也不保證格數越多越好。

文字基線不是圖片頂端

首行TYPE初始基線104，後兩行各往下24。圖像上緣初始32，它們是不同量；首行基線與文字實際可見上緣也不同。淺橫線從32開始依所選12或16間距排列，深橫線標示首行實際基線。只切16單位基線，文字不動。104位在96與112之間；按文字下移8可讓首行基線到112，但後兩行仍按24前進，並不會因此每行都落在16的格上。請直接核對圖，而不是把一次吸附稱整段都已對齊。

內容需要時才共享位置

先只按圖像下移8：上緣由32到40，文字基線仍104。再重設，只改文字共同原點偏移，三行一起水平移動。指出哪種關係改了、哪種沒改，並說明是要讓圖片與文字同列，還是把說明留作獨立區塊。欄數、模組尺寸與基線單位都是本校樣的編輯選擇。IBM的2x 格點提供一套品牌實務；它以文字leading或其分數建立基線單位的做法值得比較，但其8px單位不構成所有媒介的必須條件。

換條件再檢查

用正面縮半，或把TYPE換成HHHH。網格數字可以完全相同，標題的可見邊緣與辨識條件卻改變。若你覺得數學齊邊仍不自然，接著讀視覺校正；不要讓網格替眼睛投票。 Vignelli的原著把欄與水平模組作為組織版面的設計方法，是其設計觀而非普遍實證。本站不搬用書中圖版，也不把此例的欄寬或模組當成原著規定值。

步驟與觀察

只換欄參照
在2欄與3欄間切換，確認圖文不動。指出哪個邊緣開始共用參照，解釋其資訊意義。
加入水平模組
開關水平模組，保持其他設定。描述上下分區能幫你比較什麼，而不是評誰更美。
分開移圖與文字
只移圖像8，還原後只移文字8。分開記圖像上緣與首行基線，再比較16單位參照。
換尺度與標題
縮半或換HHHH，保留欄數。說出幾何相同仍無法保證的事，補讀視覺校正後返回檢查原方案。

常見問題

打開格線卻以為內容已重新排版

本例欄線是參照，圖文位置由其他控制改；到實際軟體時另核吸附與自動排版。

把字框上緣叫基線

看深橫線與字落腳處；圖像上緣和字形筆畫邊緣另記，不混成一個座標。

每個距離都套8px

那是特定設計系統的選擇。先說媒介、內容、文字leading與任務，再定自己需要的單位。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：欄、水平模組、文字基線參照與拉丁顯示標題的手動對齊比較；跨工具的觀察方法。來源狀態：Vignelli的網格方法沿本專案已核RIT典藏原著印刷頁40–41的補核紀錄；本票重取PDF逾時／EOF，搜尋索引可見原段但不當成全文重讀，未擴增原著主張。IBM官方頁已讀Constructing the 2x 格點及Base unit／Baseline unit，是品牌設計系統方案，非通用科學法則。Strizver署名全文已讀垂直／水平 alignment及限制，主要談拉丁顯示字；沒有取得Lupton或Müller-Brockmann專著全文，不冒稱已讀。沒有引用讀者實驗、必然優勢或最佳校正量。示意限制：原創虛構TYPE／HALL 02活動校樣，重用既有40件直立檢視架幾何，改裝正面300×240校樣。欄、模組、基線、圖像上緣、文字原點與校正讀數同一狀態；-3為任選試樣，不是從字體或人眼計算。沒有重製來源圖版、字體輪廓或館藏作品。原生軟體實測：未實測Photoshop／Illustrator／Figma；不模擬其吸附、字框或自動排版。網站實際瀏覽器排樣不等於原生軟體結果。學習成效驗證：未做真人、眼動、閱讀速度或學習成效試驗；不預測誰會覺得齊，不設客觀美感分數。

參考來源

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