分屏布局系统 是做什么的？
目的
分屏布局系统提供了一个标准化、响应式且无障碍的设计框架，用于构建双面板网页。分屏设计将视口划分为两个不同的水平或垂直区域——通常将视觉或媒体面板（品牌插图、视频、交互式产品画布或推荐语展示）与交互或内容面板（身份验证表单、引导步骤、价值主张叙述或功能配置器）配对。
设计有效的分屏界面需要平衡空间比例、确保两个面板之间具有相等或明确的视觉层次、管理独立面板滚动以避免双滚动条错误、管理跨不对称背景颜色主题的高对比度过渡，以及实现符合 WCAG 2.1 AA 标准的响应式移动端堆叠，以保持逻辑阅读顺序和焦点管理。
用例
- 身份验证与网关界面（登录/注册）： 将一个面板上的交互式登录或注册表单与相邻面板上的高印象品牌作品、客户推荐或产品功能亮点配对。
- 产品着陆页英雄区： 在左侧面板呈现高转化率的标题叙事和主 CTA，同时在右侧面板展示交互式 3D 模型、应用程序 UI 预览或视频演示。
- 引导与多步骤向导流程： 将持续的步骤指导、进度指示器或预览可视化与另一侧的活动表单输入字段结合起来。
- 对比与双功能展示： 并排展示两个对比产品、计划层级或"改造前后"效果，并具有独立的视觉层次。
- 活动与网络研讨会注册页面： 在设计固定注册表单的同时，结构化呈现演讲者简介和日程安排。
何时不使用
- 多记录应用仪表盘： 对于需要在活动记录工作区旁边进行连续列表导航的生产力软件（例如电子邮件收件箱、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。
输入
- 分屏比例与空间意图： 首选比例（50/50 平衡分屏、60/40 英雄聚焦分屏或 40/60 表单聚焦分屏）。
- 面板角色分配： 定义面板 A（视觉/媒体/品牌面板）和面板 B（交互/表单/内容面板）的用途。
- 表面与主题配对令牌： 来自
accessible-color-system和dark-theme-design-system的表面颜色和主题（例如，深色品牌艺术作品面板与浅色表单面板配对，或双浅色表面）。 - 媒体与内容密度资产： 需要嵌入的视觉资产（图像、SVG、视频画布、产品模型）和表单/内容模式。
输出
- 双面板画布规范： 桌面端分屏比例的 CSS Grid 布局定义、容器高度约束（
100vh/100%）以及平滑的面板边界。 - 媒体包含与背景对比规则： 图像缩放（
object-fit: cover）、背景渐变、视觉重量分布和可读性叠加的 CSS 规则。 - 响应式堆叠与移动端流模型： 将水平并排面板转换为垂直堆叠行的响应式断点规则，同时保持 DOM 阅读顺序和优先级内容的可见性。
- 无障碍 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;（优先考虑多字段表单完成，同时保留品牌上下文）。
- 50/50 平衡分屏：
- 独立面板包含： 确保单个面板优雅处理溢出（
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: 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）。
- 身份验证与表单页面： 交互式表单（面板 B）是主要的用户目标。将面板 B 放置在 DOM 中的首位，以便移动用户无需滚动浏览冗长的营销艺术作品即可立即看到输入字段。使用 CSS
- 媒体高度缩减： 在移动端堆叠视图中，减少视觉面板高度（
max-height: 280px或aspect-ratio: 16/9），使其不会占据整个移动屏幕。
5. 实现键盘焦点与 ARIA 地标
- 语义结构与地标：
- 将主要内容/表单面板包装在
<main>或role="main"中。 - 将视觉/品牌展示面板包装在
<aside aria-label="产品展示">或<section aria-label="品牌亮点">中。
- 将主要内容/表单面板包装在
- 阅读与焦点顺序： 确保 DOM 标签顺序自然地从左到右（或在移动端从上到下）流动，与视觉布局匹配，避免令人困惑的 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 有意义的顺序： 视觉标签顺序和屏幕阅读器阅读顺序必须与页面的逻辑优先级匹配（身份验证页面中交互式表单优先；英雄区中价值主张标题优先）。
- SC 2.4.7 焦点可见： 聚焦的输入字段和按钮必须具有未裁剪的焦点指示器，与面板表面颜色的对比度 ≥3:1。
- SC 2.5.8 目标大小： 所有交互式触发器必须满足最小点击目标（建议触控为 44x44px，最小为 24x24px）。
- 布局偏移与溢出预防： 全屏桌面端分屏布局必须在主包装器上使用
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"）正确区分两个面板。