網頁排版的資訊層級：留白、對齊與閱讀順序

二手書交換活動頁同時放了大海報、主辦單位介紹、參加規則和登記按鈕，每個區塊都有醒目底色。讀者看完卻不知道自己能帶哪些書、何時到場，以及是否需要先登記。畫面有很多重點，反而讓真正的重點消失。

資訊層級是透過位置、大小、對比與分組，讓內容的重要性容易被理解。以下活動頁、排版數值及驗收方法均為原創練習，依 2026 年 9 月 14 日查閱的 NN/g、W3C 與 MDN 一手資料整理，不是實際活動的測試結果，也不把某種版面說成保證提高轉換率。

先決定讀者要帶走的資訊

動手改字體前，先把頁面內容排出優先順序。原創活動頁的主要任務是讓讀者判斷能否參加，因此活動用途、時間地點、可交換書籍與登記方式應比裝飾性口號更容易找到。主辦團隊故事仍有價值，但可以放在完成主要判斷後可繼續閱讀的位置。

為每個區塊寫一句功能說明：這段幫助讀者決定什麼，或完成哪一步。若兩個區塊都只重複宣傳活動很棒，可以合併；如果取消方式、攜帶限制或無障礙交通資訊缺少，就先補內容。資訊層級無法替不存在的答案創造意義。

再選一個主要行動，例如登記參加，以及較次要的查看交換規則。視覺上可以讓主要按鈕更突出，但不能把必要條件縮到難以閱讀，也不應讓讀者在不了解內容時誤以為點擊只是查看介紹。按鈕名稱應如實說明接下來會做什麼。

用標題、字級與字重建立可辨識的層次

先分清頁面標題、段落標題、正文與輔助說明，再為各角色設計一致的樣式。標題可以較大或較粗，但不是每句重要文字都要升級成標題。若一整段都加粗，讀者仍不知道哪句是摘要、哪句是限制，應回到內容結構重新整理。

原創練習可從正文 18 像素、段落標題 24 像素、頁面標題 36 像素開始比較，再依字型、容器和裝置調整。這些是設計起點，不是 WCAG 的指定字級，也不是所有繁體中文網站的標準。較長標題還要測試換行後是否遮住內容或使版面失衡。

W3C 的標題指引把標題層級視為內容組織方式。網頁中的標題元素應反映段落關係，而非只用來取得較大的字；同樣地，把一段普通文字設成粗體，也不會自動成為可供輔助科技理解的標題。視覺樣式與內容語意要一起交代。

用對齊和網格讓相關內容容易掃讀

網格可以先理解成隱形的參考線：頁面左右邊界、欄位寬度、圖片與文字的起點。活動頁若日期、地點及攜帶物品都從相近的邊線開始，讀者比較容易逐項核對；每張卡片任意偏移，則會增加尋找資訊的負擔。

一般繁體中文橫排長文可先用穩定的起始邊線安排，置中則保留給較短標題或特定視覺區塊。不要為了讓左右邊緣完全齊平而手動插入大量空白，因為不同裝置與字型可能把間距打散。需要表格關係的資料，就用合適的表格或有明確標籤的結構。

網格也不是要求每頁都使用相同欄數。交換規則適合連續閱讀，活動照片可用卡片，而登記表需要清楚的輸入順序。先決定各區塊如何服務內容，再建立共用的邊界和間距，避免把所有內容硬塞進同一種方框。

留白表達分組，對比表達相對重要性

留白不是剩下的空間，而是讓讀者看出哪些內容屬於一組。日期標籤應靠近自己的日期，不要離下一組地點更近。原創練習可用組內 12 像素、組間 32 像素觀察關係，再依實際內容調整；重點在相對差異，不在背下數字。

邊框與底色可以協助分區，但每一段都加外框，反而讓頁面變得更吵。先嘗試用空間、對齊與標題建立關係，只有需要額外區分時再增加容器。NN/g 的視覺層級研究方法也指出，群組、比例與對比共同影響注意力，沒有單一顏色能保證永遠最醒目。

檢查海報或照片是否搶走原本主要行動的注意力；如果縮小看時只剩一大片彩色裝飾，應重新安排比例。但模糊或縮小預覽只能初步觀察視覺重心，不能證明文字易讀。重要狀態也要有文字或形狀等輔助線索，不能只靠顏色區分。

保留有意義的閱讀順序與可調整空間

看起來在左上角的區塊，在程式碼中不一定排第一。MDN 提醒，CSS Grid 的視覺重排不會自動改變螢幕閱讀器或預設鍵盤巡覽順序。若登記步驟原本有先後，單靠 CSS 把位置調漂亮，可能讓鍵盤焦點突然從頁尾跳回上方。

先讓文件本身的順序合理，再安排桌面和手機版面。W3C 的 Meaningful Sequence 針對順序會影響意思的內容，要求程式可以判定正確閱讀順序；並非所有獨立區塊都只有唯一排序。活動介紹與主辦資訊可能有不同合理順序，填表步驟或一段話則不能被任意拆散。

排版也要承受讀者增加文字間距。W3C Text Spacing 要求在適用的文字樣式調整後，不失去內容或功能；列出的行距、段距、字距與詞距是測試條件，並非要求作者預設套用全部數值。不要以固定高度把超出的字切掉，語言不使用的樣式屬性則依準則例外判讀。

用閱讀與操作題驗收，而不只問好不好看

完成一版後，請目標讀者找出可帶的書籍、到場位置及登記入口，觀察他從哪裡開始看、哪裡停住及是否理解條件。不要先告訴他答案位置，再把完成操作當作版面成功。把看不懂的標題、漏看的提醒及混淆的按鈕記錄下來，分別修內容或呈現。

用真實長文字、缺少圖片、錯誤訊息及較窄畫面檢查同一套規則。再以鍵盤巡覽，確認順序有意義、焦點看得到；調整縮放與文字間距後，檢查內容是否重疊、被裁掉或失去操作入口。視覺整齊和可操作是兩種結果，兩者都需要確認。

交付時記下文字角色、間距用途、對齊規則與主要行動樣式。下一次新增活動時，編輯者就知道哪些內容用標題、哪些是提醒，以及圖片該占多少空間。若新版內容讓原有層級失效，應更新規則，不要只靠越來越多的特例勉強塞進去。

1. 列出讀者任務和資訊優先順序，確認主要行動及必要條件。
2. 設定文字角色、對齊邊界與群組間距，先用真實內容排版。
3. 檢查圖片及色彩重心，核對視覺與程式閱讀順序。
4. 以找資料、鍵盤、縮放及文字間距情境驗收，記錄並修正問題。

安排不同寬度的頁面版型

先決定網站內容與分類

把頁面成果放進專案驗收

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端