coastdigitalgroup/coastai-skills 雙面板分割畫面配置系統

分割畫面佈局系統

目的

分割畫面佈局系統提供一個標準化、可響應且無障礙的設計框架，用於建構雙面板網頁。分割畫面設計將視口劃分為兩個不同的水平或垂直區域——通常將視覺或媒體面板（品牌插圖、影片、互動產品畫布或客戶推薦）與互動或內容面板（身份驗證表單、入門引導步驟、價值主張敘述或功能配置器）配對。

設計有效的分割畫面介面需要平衡空間比例、確保兩個面板之間具有相等或經過深思熟慮的視覺層級、維護獨立面板滾動而不產生雙重捲軸錯誤、管理跨不對稱背景色彩主題的高對比過渡，並實作在 WCAG 2.1 AA 下能維護邏輯閱讀順序與焦點管理的響應式行動裝置堆疊。

使用案例

• 身份驗證與閘道介面（登入 / 註冊）： 將互動式登入或註冊表單放在一個面板，並在相鄰面板搭配高衝擊力的品牌藝術作品、客戶推薦或產品功能亮點。
• 產品登陸頁面英雄區： 在左側面板呈現高轉換率的標題敘述與主要 CTA，同時在右側面板展示互動式 3D 模型、應用程式 UI 預覽或影片示範。
• 入門引導與多步驟精靈流程： 將持續的步驟引導、進度指示器或預覽視覺化結合在一側，並在另一側放置活躍的表單輸入欄位。
• 比對與雙功能展示： 以獨立的視覺層級並排展示兩個對比產品、方案層級或「之前 vs. 之後」轉變。
• 活動與網路研討會註冊頁面： 將講者簡介與議程安排在固定註冊表單旁。

何時不使用

• 多重記錄應用程式儀表板： 對於需要連續清單導航以及活躍記錄工作區的生產力軟體（例如電子郵件收件匣、CRM 服務台），請使用 master-detail-layout-system。
• 複雜多欄應用程式佈局： 對於需要持久垂直側邊欄導航、頂部命令列和小工具網格的 SaaS 儀表板，請使用 dashboard-layout-system 或 sidebar-navigation-system。
• 高密度資料網格： 對於跨越多行多列的結構化表格資料，請使用 data-table-ui-system 或 responsive-grid-system。
• 單欄編輯文章： 對於旨在無阻礙垂直閱讀的長篇文字文件或部落格文章，請使用 article-layout-system 或 section-composition-system。

輸入

1. 分割比例與空間意圖： 偏好比例（50/50 平衡分割、60/40 英雄重點分割或 40/60 表單重點分割）。
2. 面板角色指派： 定義面板 A（視覺/媒體/品牌面板）和面板 B（互動/表單/內容面板）的目的。
3. 表面與主題配對代碼： 來自 accessible-color-system 和 dark-theme-design-system 的表面顏色和主題（例如，深色品牌藝術作品面板搭配淺色表單面板，或雙淺色表面）。
4. 媒體與內容密度資產： 要嵌入的視覺資產（圖片、SVG、影片畫布、產品模型）和表單/內容架構。

輸出

1. 雙面板畫布規格： 桌面分割比例的 CSS Grid 佈局定義、容器高度包含（100vh / 100%）以及平滑的面板邊界。
2. 媒體包含與背景對比規則： 圖片縮放（object-fit: cover）、背景漸層、視覺重量分佈和可讀性覆蓋層的 CSS 規則。
3. 響應式堆疊與行動裝置流程模型： 將水平並排面板轉換為垂直堆疊行，同時保留 DOM 閱讀順序和優先內容可見性的響應式中斷點規則。
4. 無障礙 ARIA 與鍵盤焦點藍圖： ARIA 地標區域定義（role="region" 或語意 <main> / <aside>）、標題層級規則以及 WCAG AA 焦點指示器管理。

---

工作流程

1. 建立視窗容器與面板幾何

建構外部分割畫面包裝器並設定佈局邊界，以避免不必要的瀏覽器捲軸：

• 視窗高度包含： 對於全螢幕體驗（例如驗證頁面或登陸英雄區），將主容器設定為 display: grid; min-height: 100vh; width: 100%; overflow: hidden;。
• 桌面欄比例：
  • 50/50 平衡分割： grid-template-columns: 1fr 1fr;（適合等權重的價值主張或驗證頁面）。
  • 60/40 功能分割： grid-template-columns: 3fr 2fr;（為互動式產品預覽提供突出空間）。
  • 40/60 表單重點分割： grid-template-columns: 2fr 3fr;（優先處理多欄位表單填寫，同時保留品牌上下文）。
• 獨立面板包含： 確保各個面板優雅地處理溢出（overflow-y: auto; height: 100%;），以防止一個長面板拉伸整個視口或導致雙重捲軸。

2. 制定視覺與媒體面板（面板 A）

視覺面板建立即時的品牌參與度和情感共鳴：

• 背景分層與對比： 如果面板 A 使用深色品牌顏色或攝影，請確保內部排版符合 WCAG AA 對比度（≥4.5:1）。
• 媒體縮放與構圖： 將藝術作品或產品模型包裝在具有嚴格尺寸控制的容器元素中（width: 100%; height: 100%; object-fit: cover; 或 object-fit: contain;）。
• 裝飾性與資訊性視覺元素：
  • 如果圖像純粹是裝飾性的，請套用 alt="" 和 aria-hidden="true"。
  • 如果圖像包含文字或產品截圖，請提供描述性的 alt 文字或搭配的標題排版。

3. 制定互動與內容面板（面板 B）

互動面板驅動使用者動作（表單輸入、轉換點擊、閱讀）：

• 內容對齊與內邊距： 使用 display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem); 在面板 B 內垂直置中內容。
• 表單寬度鎖定： 將表單元素限制在可讀的 max-width 內（max-width: 440px; width: 100%;），使輸入欄位在超寬螢幕上不會拉伸得過於不適。
• 觸控目標與輸入層級： 使用 button-and-action-system 和 form-design-system 標準化主要按鈕、表單輸入和連結，並確保觸控視埠上的點擊目標至少為 44x44px。

4. 配置響應式行動裝置堆疊與優先順序流程

在行動裝置視埠（通常 < 768px 或 < 1024px）上，並排面板會變得擁擠且難以閱讀：

• 中斷點堆疊轉換： 將 grid-template-columns 切換為單欄佈局（grid-template-columns: 1fr; min-height: auto; overflow: visible;）。
• DOM 順序與視覺堆疊優先順序：
  • 驗證與表單頁面： 互動式表單（面板 B）是使用者的主要目標。將面板 B 放在 DOM 中的最前面，以便行動裝置使用者無需滾動超過冗長的市場行銷藝術作品即可立即看到輸入欄位。使用 CSS order 或自然的 DOM 放置。
  • 英雄與展示頁面： 將敘述性標題（面板 B）放在前面，然後是產品視覺（面板 A）。
• 媒體高度縮減： 在行動裝置堆疊檢視中，減少視覺面板的高度（max-height: 280px 或 aspect-ratio: 16/9），使其不會佔據整個行動裝置螢幕。

5. 實作鍵盤焦點與 ARIA 地標

• 語意結構與地標：
  • 將主要內容/表單面板包裝在 <main> 或 role="main" 中。
  • 將視覺/品牌展示面板包裝在 <aside aria-label="產品展示"> 或 <section aria-label="品牌亮點"> 中。
• 閱讀與焦點順序： 確保 DOM 的 Tab 順序從左到右（或在行動裝置上從上到下）自然流暢，與視覺佈局匹配，避免令人困惑的 tabindex 跳躍（tabindex="0" 或自然焦點）。
• 跨主題邊界的焦點環： 確保焦點環在深色視覺面板和淺色表單面板上均維持 3:1 的對比度（outline: 2px solid var(--focus-ring); outline-offset: 2px;）。

---

決策規則

佈局分割比例與使用案例對應

頁面類型	桌面分割比例	行動裝置堆疊順序	建議面板角色
登入 / 註冊驗證	50 / 50 分割	表單在上，媒體在下	面板 A：品牌藝術 / 推薦；面板 B：登入表單（<main>）
產品英雄區段	60 / 40 分割	文案在上，媒體在下	面板 A：文案與 CTA（<main>）；面板 B：互動式應用程式畫布
入門引導精靈	40 / 60 分割	步驟在上，輸入在下	面板 A：步驟核取清單 / 預覽；面板 B：活躍表單欄位
雙重比對	50 / 50 分割	選項 A 在上，選項 B 在下	面板 A：方案 A / 之前；面板 B：方案 B / 之後

不對稱背景對比指南

• 深色視覺面板 + 淺色表單面板： 為每個面板設定獨立的 CSS 自訂屬性（--pane-bg、--pane-text、--pane-border）。切勿跨分割邊界繼承文字顏色。
• 分割分隔線： 在雙淺色或雙深色分割中，插入一條細微的 1px 邊框（border-right: 1px solid var(--border-subtle)）以在面板之間建立視覺分離。

---

限制條件

• 無障礙性（WCAG 2.1 AA）：
  • SC 1.4.3 對比度（最低）： 兩個面板上的文字相對於其各自的背景必須至少達到 4.5:1 的對比度。
  • SC 1.3.2 有意義的順序： 視覺 Tab 順序和螢幕閱讀器的閱讀順序必須與頁面的邏輯優先級匹配（驗證頁面先互動表單；英雄頁面先價值主張標題）。
  • SC 2.4.7 焦點可見： 獲得焦點的輸入欄位和按鈕必須具有未裁剪的焦點指示器，且與面板表面顏色的對比度 ≥3:1。
  • SC 2.5.8 目標尺寸： 所有互動觸發器必須滿足最小的點擊目標（24x24px 最小值，建議 44x44px 用於觸控）。
• 佈局位移與溢出預防： 全螢幕桌面分割佈局必須在主包裝器上使用 overflow: hidden，並在各個可滾動面板內部使用 overflow-y: auto，以消除視窗層級的佈局抖動和雙重捲軸。
• 排版行長度： 兩個面板中的文字行長度必須保持在每行 45 到 75 個字元（ch 單位）之間，以保持舒適的可讀性。

---

常見失敗模式

• 雙重捲軸陷阱： 在子元素上保留 height: 100vh 但未鎖定容器溢出，導致瀏覽器視窗和子面板各自顯示獨立的垂直捲軸。
• 行動裝置主要內容遮擋： 在行動裝置 DOM 順序中將巨大的視覺藝術面板放在登入表單之前，強迫行動裝置使用者滾動 600px 的行銷圖像才能到達使用者名稱欄位。
• 未經檢查的文字覆蓋在藝術作品上： 在詳細的背景照片上直接呈現文字，而沒有使用深色漸層覆蓋層（rgba(0,0,0,0.6)），導致文字無法閱讀且不符合 WCAG AA 對比度。
• 未綁定的表單輸入拉伸： 允許 50/50 分割桌面檢視上的表單欄位拉伸至 800px 寬度，造成尷尬的觸控目標和視覺扭曲。
• 不對等的視覺重量： 使一個面板極度深色和飽和，而相鄰面板是帶有小文字的純白色，導致視覺不平衡和高度眼睛疲勞。

---

驗證標準

• 視窗包含管理桌面分割比例（50/50 或 60/40），無視窗雙重捲軸。
• 響應式行動裝置中斷點（<768px）將面板堆疊成單一欄，並對媒體元素施加適當的高度限制。
• DOM 閱讀順序優先處理主要任務（例如，行動裝置登入畫面上先顯示驗證表單）。
• 深色和淺色分割面板上的文字對比度滿足 WCAG AA（≥4.5:1 比例）。
• 互動式輸入和按鈕具有有界寬度（max-width: 440px）和 ≥44x44px 的觸控目標。
• 語意式 ARIA 地標（<main>、<aside>、role="region"）正確區分兩個面板。