版面配置
位置、間距和對齊在文字被閱讀之前就傳達了層級。此技能建立該結構並對其進行壓力測試：調整大小、翻譯、為從右至左 (RTL) 進行鏡像處理。
將所有修復寫入專案的樣式系統中。以下數字是為尚未建立密度系統的介面提供的起點；若專案已有密度系統，請照其書寫方式使用，而非使用看似熟悉的替代值。保留刻意設計的平台外觀、緊湊的專業工具以及專案 Token，只要它們仍能通過壓力測試。
點擊區域和焦點行為屬於 better-accessibility。圓角、陰影和動畫屬於 better-ui。行長度和文字間距屬於 better-typography。
使用空間而非線條進行分組
先使用空間分組，其次使用背景形狀，最後才使用分隔線，並且僅在空間無法獨自承載結構時才使用。組與組之間的間距必須至少是組內間距的 2 倍（組內 8px，組間 16px 以上），否則分組會讀起來像雜訊。對齊邊緣和重要性排序詳見 grouping-and-alignment.md。
保持控制項與內容有別
為每個可互動元素提供背景形狀、邊框或一致的放置區域。一個樣式像旁邊靜態文字的控制項，讀起來不像控制項。
對齊到共享邊緣
選擇對齊邊緣並堅持使用；每個偏離的邊緣都會被視為雜訊。每個從屬層級使用一個專案的間距級別，其中 16px 是實用的預設值。
對於依賴方向的佈局，使用邏輯屬性：padding-inline-start、margin-inline-end。僅在真正涉及物理幾何時保留物理的 left 和 right。
依重要性排序
最重要的內容位於靠近頂部和前緣的位置。閱讀順序從上到下，從前緣到尾緣。以前緣和尾緣思考，而非左和右。
提示隱藏的內容
漸進式揭露需要可見的提示。使用專案既定的線索，或讓下一個項目在滾動邊緣外露出 16–32px，或顯示一個揭露控制項。沒有任何線索就隱藏的內容，等同於不存在。
目標之間的呼吸空間
在沒有既定密度系統的情況下，從相鄰的含邊框或填充控制項之間 12px，以及無邊框純文字和純圖示控制項周圍 24px 開始。緊湊的佈局可以使用較小的間距，只要 better-accessibility 的點擊區域不重疊且控制項保持可區分即可。佈局邊距和斷點配方詳見 spacing-and-adaptivity.md。
按鈕從邊緣內縮
在內容佈局中，將全寬按鈕保持在佈局邊距內，並具有可見的圓角，在行動裝置上從接近 16px 的內聯方向開始。當邊到邊的操作遵循既定的平台外觀、考慮安全區域並保持與系統 UI 可區分時，才可使用此類操作。
內容出血，控制項浮動
背景和媒體延伸至視口邊緣。控制項和文字保持在佈局邊距和安全區域內（env(safe-area-inset-*)）。固定位置 (Sticky) 的 Chrome 元素浮動在內容層之上，而不是遮擋它。
在結構破壞前維持結構
斷點來自內容，而非裝置預設值。只要內容真正適合，就保持展開的佈局，並在必要時才收合。對於元件層級的適應，優先使用容器查詢 (Container Queries)，並先測試最小和最大尺寸。
為增長和截斷做準備
翻譯後的字串會增長，短字串增長的比例更大，因此一個單詞的按鈕標籤是螢幕上風險最高的元素。不要為文字容器設定固定的 width 或 height，並讓行可以換行。使用偽在地化 (Pseudo-localization) 和一個具代表性的地區設定進行測試，而不是預留一個百分比。
切勿將關鍵操作放在調整大小或滾動會將其截斷的位置。將其保留在正常流程中，或放在適合產品的穩定 Chrome 元素中。
完成前檢查
| 錯誤 | 修正 |
|---|---|
在可本地化的佈局中使用 margin-left / padding-right | 使用 margin-inline-start / padding-inline-end |
| 內容佈局按鈕觸碰到視口邊緣 | 內縮在專案邊距內；保留刻意的平台外觀 |
| 斷點設定在 768/1024 因為它們是預設值 | 在內容實際上無法容納的地方設定斷點 |
| 為一種語言設定的固定寬度文字容器 | 使用 max-width 和換行；測試偽在地化 |
| 主要操作位於易被截斷的面板底部 | 使用固定定位 (Sticky) 或穩定的 Chrome 元素，並加上安全區域內邊距 |
回報
嚴重性。 HIGH 會在支援的視口下遮擋內容或操作。MEDIUM 損害層級、閱讀順序或適應性。LOW 是孤立的對齊或間距調整。
驗證。 無瀏覽器時：檢查邏輯屬性是否取代了物理屬性、容器查詢和媒體查詢是否針對支援的視口列表、以及 DOM 順序是否符合預期的閱讀順序。有瀏覽器時：檢查每個支援的寬度、200% 縮放以及 RTL 鏡像。回報您無法執行的每項檢查為 Not verified。
格式。 將發現的問題按其違反的原則分組，按嚴重性排序，每個根本原因一行，列出其出現的每個位置：
| 嚴重性 | 位置 | 修改前 | 修改後 | 原因 |
|---|
位置 為 路徑/檔案:行號。原因 說明違反的原則和使用者影響。
當仍有任何 HIGH 存在時，結尾寫 Block，否則寫 Approved，將其餘問題留在表格中作為待辦事項。切勿對您未檢查的覆蓋範圍 Approved。若無任何可回報的發現，請說明「No actionable layout findings」並報告驗證結果。