儀表板佈局系統 是做什麼的？
目的
儀表板佈局系統提供一種系統化的設計方法，用於建構視口鎖定、多面板的網路介面（通常稱為應用程式外殼或工作區）。與標準的、基於文件的頁面不同——後者會在單一滾動容器中無限向下流動——儀表板外殼將主視口高度鎖定為確切的 100vh（或 100dvh），並將工作區劃分為不同的功能區域。
系統化的方法解決了常見的空間摩擦點——例如「滾動中滾動」鎖定、視口橡皮筋效應、面板折疊過渡期間的佈局偏移，以及重疊對話框的焦點陷阱。它在美學視覺設計與技術性 CSS 包含之間架起橋樑，最終形成一個內聚、功能強大且易於存取的工作區。
使用案例
- B2B SaaS 核心工作區： 需要同時顯示側邊欄、篩選器、列表控制項和內容詳細面板的網頁平台。
- 資料分析儀表板： 高密度、多面板網格，在統一的檢視中呈現即時資料、指標、圖表和控制側邊欄。
- 管理與營運面板： 需要固定操作標題和上下文詳細抽屜，與大型資料網格並存的繁重營運軟體。
- 豐富內容編輯介面： 佈局包含可折疊的格式化/屬性側抽屜，環繞在中央畫布或豐富文字工作區周圍（例如，CMS 編輯器、電子郵件建構器和設計畫布工具）。
何時不應使用
- 行銷與著陸頁面： 需要線性垂直滾動旅程以最佳化故事敘述和行動呼籲的頁面。請改用
hero-design-system和section-composition-system。 - 社論與部落格文章： 讀者期望標準的原生瀏覽器滾動與單一線性文字流的頁面。請改用
article-layout-system和table-of-contents-system。 - 電子商務產品列表頁面 (PLP)： 無限滾動或標準分頁佈局更適合持續產品掃描的頁面。
- 簡單的實用工具： 不需要多面板佈局外殼的單一輸入實用工具（例如，簡單的檔案轉換器或圖片調整器）。
輸入
- 工作區面板清單： 應用程式所需的空間區域列表（例如，側邊欄導覽、頂部欄工作區動作、中央內容工作區、右側屬性抽屜）。
- 互動控制佈局： 可折疊面板、可調整大小窗格和觸發區域的規格。
- 排版與間距令牌： 流體排版與相對間距系統（
fluid-spacing-system和fluid-typography-system），以建立清晰的對齊網格。 - 目標斷點： 來自
responsive-grid-system的裝置佈局定義，以決定面板折疊、導覽列收起和行動裝置抽屜轉換。
輸出
- 視口包含藍圖： HTML 和 CSS 網格/彈性盒子空間規格，將父元素尺寸鎖定為
100dvh，並將滾動隔離到特定子容器。 - 面板組合規格： 劃分導覽、實用標題和工作區的視覺定義、寬度限制和邊界線。
- 過渡與動畫模型： 硬體加速的 CSS 動畫指南（
transform、opacity），用於流暢、無偏移的可折疊面板過渡。 - 響應式摺疊規則： 詳細說明在桌面、平板和行動裝置視口範圍內佈局適應方式的規格。
- 無障礙地標圖： 定義的 ARIA 角色區域和鍵盤導航流程參數。
工作流程
1. 建立視口鎖定與滾動包含
鎖定主瀏覽器視口，以防止整個頁面滾動和橡皮筋效應。所有佈局元件都必須適合此剛性視口容器內，且滾動必須嚴格委派給隔離的內容窗格：
- 將父容器（例如，
.app-shell）設定為width: 100vw和height: 100dvh（動態視口高度）並設定overflow: hidden。 - 使用 2 層佈局網格分割
.app-shell：- 第 1 層（外部網格）： 將左側邊欄與右側內容工作區分開。
- 第 2 層（內部網格）： 將工作區頂部欄/標頭與可滾動的內容畫布分開。
- 對於可滾動窗格，請套用
overflow-y: auto和-webkit-overflow-scrolling: touch，以確保在行動版 Safari 上實現流暢的慣性滾動。
2. 定義面板視覺錨點與邊框
使用清晰的視覺邊界來組織高密度儀表板，同時不增加視覺雜訊：
- 邊框分隔： 避免在相鄰的持久面板之間使用沉重的陰影。相反地，使用清晰、低對比的 1px 邊框分隔線（例如，
1px solid var(--border-neutral-muted)）來劃分區域。 - 背景對比： 使用微妙的背景色調差異來區分導覽與活動內容。將導覽側邊欄設定為稍暗或稍亮的色調（例如，中性色調），而主要內容工作區則使用乾淨的畫布白色或深色表面。
- 滾動陰影： 對於可滾動的內容區域，在頂部和底部邊緣邊界處實作微妙的線性漸變覆蓋層，以在視覺上向使用者示意摺疊處之外還有更多內容。
3. 設計可折疊面板機制
可折疊面板（例如側邊欄或右手詳細資訊抽屜）必須在狀態變化時保持流暢，不會引入累積佈局位移 (CLS) 或視覺抖動：
- 避免寬度過渡： 對 CSS
width進行動畫處理會強制瀏覽器在每個影格重新計算所有子元素的佈局，導致畫面更新率降低。 - 偏好使用變形： 將側抽屜定位為絕對定位或超出畫布邊界，並使用 CSS
transform: translateX()結合硬體加速過渡來動畫化它們的可見性。 - 內容遮罩： 在包含包裝器區塊上使用
overflow: hidden，以便滑動面板整齊地剪切在相鄰檢視後面。
4. 撰寫並交接無障礙地標
儀表板佈局範本必須為螢幕閱讀器和鍵盤使用者提供結構化的語意地標層次結構：
- 地標指派： 確保每個面板都對應到適當的 HTML5 語意標籤：
- 全域導覽側邊欄：
<nav aria-label="Main Navigation"> - 工作區頂部欄/標頭：
<header> - 中央工作區：
<main> - 屬性/上下文抽屜：
<aside aria-label="Properties and Metadata">
- 全域導覽側邊欄：
- 焦點管理： 當可折疊面板關閉時，以程式方式將焦點移至關閉它的觸發按鈕。當行動裝置抽屜開啟時，將鍵盤 Tab 焦點限制在該面板內。
- Inert 屬性： 當模態面板或行動裝置側抽屜處於活動狀態時，切換中央主面板上的
inertHTML 屬性，以防止鍵盤使用者意外跳至可見螢幕覆蓋層之外。
5. 規劃響應式適應（摺疊規則）
在不同裝置上優雅地縮放儀表板工作區：
- 桌面範圍 (>1200px)： 多面板佈局完全展開。左側導覽側邊欄固定，工作區標頭固定，中央畫布自動滾動，右側屬性抽屜展開。
- 平板範圍 (768px-1200px)： 將左側導覽側邊欄折疊為緊湊的「導覽列」（僅顯示圖示）。將右側屬性抽屜從持久網格列轉換為透過操作按鈕觸發的覆蓋層工作表。
- 行動裝置範圍 (<768px)： 將側邊欄和屬性抽屜都隱藏在覆蓋層抽屜之後。主要佈局簡化為單欄檢視，由包含漢堡選單觸發按鈕、操作按鈕和獨立可滾動內容工作區的行動裝置頂部欄標頭組成。
決策規則
網格與彈性盒子在外殼結構中的選擇
| 面向 | 使用 CSS Grid | 使用 CSS Flexbox |
|---|---|---|
| 主軸 | 二維（行和列皆為動態/剛性）。 | 一維（線性行堆疊或列堆疊）。 |
| 佈局目的 | 外部框架結構化（側邊欄列 + 主要內容列）。 | 內部標頭內容對齊（標誌左側 + 操作右側）。 |
| 面板折疊 | 當側邊欄列動態折疊到確切的 0 寬度時。 | 當子元素應自然增長、收縮和換行時。 |
滾動管理：全域滾動 vs. 特定窗格滾動
- 全域頁面滾動（請勿在儀表板中使用）： 導致整個標頭、側邊欄和儀表板框架從螢幕上滾走，迫使使用者向上滾動才能存取導覽。
- 隔離窗格滾動（標準儀表板模式）： 使外部框架（標頭、導覽列、操作）完美錨定在螢幕邊緣，而只有資料表、圖表饋送或文件編輯器在其視口儲存格內獨立滾動。
限制條件
- 動態視口高度： 對於外部父容器，始終使用
dvh單位（100dvh）而不是vh（100vh）。在行動瀏覽器上，標準vh單位不考慮瀏覽器 chrome 的展開/收縮（位址列、導覽控制項），導致儀表板底部被裁剪而無法觸及。 - 焦點指示器： 確保互動式面板觸發器上的焦點環高度可見。它們必須符合 WCAG 2.2 對比度規則，且絕不能被
overflow: hidden容器邊緣裁剪。 - 無雙重捲軸： 確保容器邊距、內距和高度邊界精確計算（使用 CSS
calc()或 Flex/Grid 自動約束），使滾動窗格永遠不會觸發巢狀的雙重捲軸並排顯示。 - 觸控目標最小值： 可調整大小面板、側邊欄展開按鈕和頁籤切換的處理器必須提供至少 24x24px（WCAG 2.2 SC 2.5.8）的觸控目標，44x44px 更佳。
常見失敗模式
- 地址列裁剪（行動裝置）： 在行動裝置上使用
100vh，導致側邊欄底部的使用者個人資料頁尾或主要提交按鈕隱藏在行動瀏覽器操作欄之後。 - 佈局抖動： 對導覽選單的
width屬性進行動畫處理，導致主要工作區內的卡片、圖表和網格在折疊過渡期間快速跳動並重新渲染。 - 滾動陷阱 / 滾動洩漏： 未能將滾動事件隔離在開啟的覆蓋層窗格內，導致使用者在行動導覽抽屜上滑動時，主要背景內容在其下方滾動。
- 未標籤的滾動容器： 在沒有伴隨角色或鍵盤焦點路徑的情況下，為頁面容器新增
overflow: auto，這會阻止僅使用鍵盤的使用者滾動該容器內的資料。 - 雙重捲軸混亂： 創建沒有嚴格高度限制的巢狀包裝器，導致主瀏覽器視窗和內部容器都顯示雙重捲軸，混淆導覽。
驗證標準
- 外部佈局容器高度鎖定為
100dvh（或備用100vh），主文件overflow設定為hidden。 - 與滾動資料列表或工作區互動時，未出現雙重捲軸。
- 響應式狀態已在桌面、平板和行動裝置範圍內定義，並具有適當的抽屜和導覽列轉換。
- 滑動面板和側邊欄使用硬體加速的 CSS 屬性（
transform: translateX()）進行動畫處理。 - 工作區使用適當的語意 HTML5 地標（
<nav>、<header>、<main>、<aside>）。 - 當行動裝置上的覆蓋層抽屜或面板開啟時，背景元素設定為
inert或從鍵盤焦點流程中隱藏。 - 面板觸發器、切換開關和手柄上的觸控目標符合最小尺寸要求 24x24px（44px 較佳）。
- 在活動的上層覆蓋層工作表中滑動/滾動時，非活動的背景窗格元素不會滾動（滾動洩漏預防）。