Class LLL / 設計星團教材目錄編輯與來源

共通設計理論 教材 / Class LLL

編排：中文、圖文與版面重排

一份活動資訊，換寬度後重新交代閱讀次序

用同一原創虛構活動，分開比較容器、雙欄／隨容器重排、長標題、日期寫法與圖說。全文以真正Noto／Manrope及HTML排樣，逐項觀察斷行與圖文責任，再沿網格、中文混排和圖像教材補讀。

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

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

閱讀目標

適用條件與學習範圍

同一份繁中活動資訊到了窄版，哪些內容先被讀到、哪些關係要重排，才能保留找主題、日期與入口的任務？

能在同一活動做一次只改容器的比較，換長標題／日期／圖說作反例，指出實際排樣與必要資訊的取捨，沿三份唯一理論補讀並返回保留方案。

活動、場館及圖形均原創虛構；不是報名服務、Figma容器教程、完整中文出版／印刷引擎或閱讀成效實驗。640／320及240px最小欄是本例設定，不是通用最佳斷點。

原理與判斷

這次的讀者任務是找出活動主題、何時集合、從哪個入口進入。圖像可以提供摺頁的觀察線索，卻不能替文字編出集合事實。先把必要答案放在原生內容流裡，再比較寬窄版的安排，能讓版面修改有明確責任。 教具使用同一份虛構活動「摺頁之間」，正文18px，中文Noto、英數Manrope沿品牌字體；上方校樣架只作概覽，下方完整HTML可以選取與捲動。每輪只換一個條件，先記實際斷行與欄位，再提出修改理由；行數或欄數不直接等於比較好讀。

先定任務，保留完整答案

主題、時間、入口與參與條件放在圖文區之前，兩種版面都保留相同DOM順序。這是為本活動設定的資訊優先次序，不是所有活動頁永遠先圖或先字的公式。點查看參與提醒會展開本頁真說明，不會送出資料或開啟假報名。 原創摺頁圖只有三片矩形、兩條摺線、圓點與短線，沒有寫活動日期或入口。若任務換成認識摺頁形狀，可以調整圖說；若是找集合資訊，這些答案仍由明確文字提供。

只改容器，看真重排

重設後先保持題名、日期、圖說及字級，容器上限640改320px。隨容器重排使用瀏覽器原生CSS 格點：可用寬度足夠時圖文分欄，變窄時依原順序上下排列。讀數取實際容器與欄寬，手機可用空間小於設定上限時不假報640或320。 再只切保留雙欄。兩欄會持續分配窄空間，文字可能變成更多短行；本例不以刪內容、縮成小圖或固定高度遮字來解決。240px欄條件與20px間隔只是本站比較設計，不借IBM品牌網格宣稱普遍最佳值。

參照邊界不等於自動排版

顯示欄位邊界只替當前圖文區畫出實際盒子的虛線參照，不改欄數、順序與寬度。相對地，排樣按鈕會實際改變格點欄配置。先把這兩種操作分清，才能說自己改的是觀察參照，還是內容安排。 IBM 2x 格點是品牌實務，將欄、邊距、間隔及基準單位組織成系統；Getty形式分析則提供關係與強調等觀察語彙。它們都不能替本頁自動決定資訊任務。更細的欄、模組與基線責任沿唯一教材，不在案例重寫工具的吸附或容器選單。

長標題與日期，是內容反例

在寬度與排樣不變時切長標題，題名增加但主題仍相同，全文不截斷。再還原後只換日期寫法：斜線數字與年月日均表示2026-11-21、14:00–16:00、UTC+8，語義time的起始時間不變；原生換行則可能不同。 日期寫法是本例編輯選擇。clreq固定2026-10-07草案的§5.7仍TBD，不能拿待補章節支撐某種日期必然正確。換長字串後要回到實際字體、字級、容器及斷點，不用手動空格把原文偷偷改成另一份內容。

圖說提供什麼，缺圖說又少了什麼

圖與活動的分工說明指出：圖示範摺頁，時間入口看上方。完整形狀說明則逐項描述圖的可見內容，服務另一種觀察任務。切無圖說，必要集合資訊仍在，但可見的圖文關係解釋少了一層；不能因為還有圖片就推定讀者知道其用途。 依WAI圖像教學，圖像的替代內容要看用途與鄰近文字。完整形狀說明已提供同一內容時，本例img空alt避免重複；其他情況保留形狀描述。這是實際HTML語義，沒有聲稱已在NVDA／VoiceOver或所有輔助科技試用。

標點與混排回到實際各行

切strict與anywhere只改原文的斷點政策，字元仍相同。範圍按實際位置列標題及標點探針各行；觀察開閉引號、冒號、逗號是否留在合適的語句脈絡，也看英數詞如何換行，不預先畫一組假斷行。 clreq是需求草案，列不同出版情境與禁則選擇；CSS Text3的strict由瀏覽器依語言實作，不能等同完整clreq擠壓／推出流程。anywhere允許很寬的斷點，與overflow-wrap:anywhere不是同一設定。此處只觀察本次Chromium，更多標點、字距及單位規則沿唯一QZ25。最後說明哪一項修改幫助目前任務、代價是什麼，並保留仍需真成品確認的條件。

步驟與觀察

  1. 寫下活動的必要答案

    重設，先在完整原文找主題、日期與北側入口，確認圖片沒有提供這些事實。查看參與提醒只展開本頁虛構練習說明。

  2. 單獨比較窄寬與排樣

    640上限改320，其他條件不動；記實際欄寬。再只切保留雙欄作反例，切欄位邊界則確認參照本身沒有移動內容。

  3. 分輪換長題、日期、圖說和斷點

    每輪重設或保留清楚基準，只改一項；長題讀完不省略，兩日期同一時間，圖說按用途分工。看真實各行，不把草案或小樣當出版引擎。

  4. 沿三份理論補讀並提出理由

    補網格、中文標點及圖像分工後返回，保留原方案與展開提醒；重載接續。寫出一個服務任務的修改及代價，單頁重設不清除其他教材方案。

常見問題

切參照網格就以為內容已重排

比較實際欄寬與位置；本例虛線只顯盒子，排樣按鈕才更改欄配置。

窄版直接縮小整張活動圖

保留正常可選取HTML與必要文字，重查標題／日期／圖說，而非用縮圖代替閱讀。

日期寫法換了，就假稱符合clreq日期規則

本例是同一時間的兩種編輯表示；固定草案§5.7仍待補，不能據此推導規則。

圖說或alt其中有字，就假定所有人都得到同一資訊

依任務查可見文字與實際語義；圖說描述形狀不等於集合資訊，也不代表已讀屏實測。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：原創虛構繁中活動頁的圖文、日期、長題及容器比較；跨工具案例，非Figma容器操作。 來源狀態：補核clreq固定2026-10-07 群組 Note Draft §6.1.1與§5.7仍TBD；CSS Text3固定2026-08-14 CRD §5.2；IBM 2x 格點的Constructing段；WAI Informative Images及alt決策樹；Getty形式分析作觀察語彙。逐頁理論仍沿QZ21／25／28唯一來源，未擴增Vignelli PDF或歷史流派主張；S07／S08只作原規劃背景，不冒稱重讀館藏／引用圖版。 示意限制：重用QZ23雙座架、QZ25有限範圍逐字觀察方法；完整正常HTML，Noto／Manrope，本例原創SVG與活動全文。容器、原生格點、參照、題名、同一時間兩種日期寫法、圖說與斷點共用本ID狀態。斷行與欄寬取DOM，不畫假排樣。 原生軟體實測：僅網站Chromium／本地字型與公開操作；無Ps／Ai／Figma、印刷、完整CJK引擎或所有瀏覽器一致性驗收。 學習成效驗證：無讀屏軟體、眼動、真人文化解讀／可用性、閱讀速度或學習成效。欄數、比率、行數與本機標記不當品質或學會分數。

參考來源

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

相關知識