商品详情布局系统 是做什么的？
目的
商品详情布局系统为构建电商商品详情页（PDP）提供了一个标准化、高性能的可视化和空间框架。商品详情页是任何电商或直销网站最关键的转化引擎。它需要在统一、易扫描且完全无障碍的界面中，平衡富媒体、多属性配置器、动态定价模型、信任信号和主要行动号召（CTA）。
系统化的方法可以解决常见的设计摩擦点，例如未对齐的购买网格（“购买框”）、令人困惑的媒体滑块、属性切换时的布局偏移（CLS）、隐藏的移动端购买按钮以及自定义选择器上的无障碍阻碍。该系统弥合了营销展示与技术实现之间的差距，确保页面稳定加载，推动最大转化，同时严格遵守 WCAG AA 标准。
使用场景
- B2C 与直销 (DTC) 电商： 为实体商品、服装、化妆品或电子产品设计高度精美的商品页面。
- 数字产品与订阅销售： 在软件、会员或服务落地页上组织功能亮点、套餐选择器和支付结账流程。
- 工业与 B2B 目录页面： 构建包含下载式原理图和报价生成器的复杂、规格繁多的硬件零件页面。
- 市场详情视图： 为多样化的多供应商列表（房地产、旅行预订、点对点销售）标准化布局网格。
何时不使用
- SaaS 套餐对比落地页： 如需并排比较不同的订阅套餐，请使用
pricing-table-ui-system或comparison-matrix-system。 - 主要商品发现 (PLP)： 如需浏览目录或搜索结果列表，请使用
card-ui-system和filter-and-sort-system。 - 简单的线索收集或表单： 对于基本联系表单、新闻通讯或单步注册，请使用
form-design-system。 - 编辑与博客内容： 对于叙事性故事、新闻通讯和纯文本列，请使用
article-layout-system。
输入
- 内容与资产清单： 高清商品图片/视频（宽高比、缩放要求）、规格、评价、价格结构和信任保证。
- 属性矩阵复杂度： 选项数量（例如颜色、尺寸、材质）以及依赖关系的存在（例如“L 码仅黑色可选”）。
- 排版与间距比例： 相对大小比例和流式间距令牌（来自
fluid-typography-system和fluid-spacing-system）。 - 层级与颜色令牌： 品牌强调色、状态色（促销、警告、缺货）、表面层级以及活动/聚焦/悬停状态（来自
accessible-color-system和elevation-and-depth-system）。 - 移动端视口约束： 视口边界和设备凹口（特别是 iOS 主屏幕指示器和浏览器菜单栏）。
输出
- 双窗格空间蓝图： 结构性网格，将屏幕划分为左方高冲击力媒体窗格和右方易扫描的购买配置器窗格（购买框）。
- 响应式堆叠与流动规则： 说明布局如何折叠成移动端最佳垂直堆叠的转场规范。
- 移动端粘性购买抽屉： 一种视口固定购买栏的规范，在移动视口上，当主要 CTA 折叠后仍持续显示。
- 交互式色板与选择器结构： 针对尺寸按钮、颜色色板和数量计数器的组件级设计。
- ARIA 实况与键盘规范： 清晰的键盘 Tab 路线、轮换 Tabindex、焦点保留以及面向屏幕阅读器的状态通知触发器。
工作流
1. 建立双窗格空间布局 (桌面 >1024px)
使用 2 列 CSS Grid 或 Flexbox 布局按比例划分结构桌面视图：
- 左列：媒体窗格（占据 50–55%）： 显示高保真视觉商品资产。为防止用户在长滚动时丢失购买上下文，请将父列设置为
align-items: start;，并使媒体容器粘性定位：position: sticky; top: calc(var(--global-header-height) + var(--space-m));。 - 右列：购买配置器 / 购买框（占据 45–50%）： 容纳所有元数据和交易控件。保持为单一垂直列，具有自上而下的清晰层次结构。
- 网格间距： 保持宽敞的视觉间距（例如
gap: clamp(24px, 4vw, 48px)），使媒体和控件既区分明显又保持统一。
2. 设计购买配置器（购买框）的视觉层次
沿购买框列应用“F 型”阅读流。按逻辑顺序排列元素：
- 面包屑与类别指示器： 顶部使用小号、柔和的文字（例如“店铺 > 户外 > 夹克”），提供上下文。
- 商品标题： 使用
h1作为主标题，样式为font-size: clamp(1.75rem, 3.5vw, 2.5rem)，并加粗。 - 社交证明摘要： 星级评分块，显示平均评分和可滚动的文字链接，直接跳转到评价区（例如“★ ★ ★ ★ ☆ (128 条评价)”）。
- 定价引擎块： 非常显眼的定价。粗体显示活动价格，旁边用较小字体显示带删除线的原价（如促销中），并带有清晰的彩色促销徽章（例如“节省 $20”）。分期付款信息（例如“或使用 Klarna 分 4 期付款，每期 $25”）立即放在下方。
- 属性配置器： 尺寸、颜色色板或材质。使用一致的标签标题和间距（例如
margin-bottom: var(--space-m)）。 - 库存与配送保证： 在属性附近显示微妙的实时库存提醒（例如“● 仅剩 3 件库存 - 明天发货”）。
- 主要购买 CTA： 突出、高对比度的“加入购物车”或“立即购买”按钮，跨越购买框的整个宽度。
- 信任徽章与退货政策： 高度可见的图标/文字组合（例如“✓ 免费配送”、“✓ 30 天退货”），直接放置在主 CTA 下方，以最大程度减少购买摩擦。
3. 构建左侧媒体画廊
组织图片以确保导航快速、轻量且保持布局稳定：
- 主显示容器： 将活动图片固定在一个具有固定宽高比的容器中（通常为
1:1正方形或3:4纵向），使用aspect-ratio: 1 / 1; object-fit: cover;。这可以防止加载大小略有不同的图片时发生累积布局偏移（CLS）。 - 缩略图导航： 在主图下方横向堆叠支持性缩略图（或左侧纵向堆叠）。确保活动缩略图具有高对比度边框和
aria-current="true"。 - 放大/缩放触发器： 在活动图片的右下角包含一个细微的缩放图标。触发它可打开一个全屏、可滑动的模态灯箱（
image-gallery-and-lightbox-system）。
4. 创建移动端堆叠与移动端粘性购买抽屉 (<768px)
在移动端屏幕上，标准的多列布局会失效。应用这些适配规则：
- 线性垂直流： 将页面折叠成单列堆叠。将媒体画廊放在最顶部（全宽或略微内缩），紧接着是商品标题、价格、属性配置器、CTA，然后是详细规格。
- 移动端粘性购买抽屉： 由于主要 CTA 在移动端会很快滚动出屏幕，请实现一个粘性底部结账抽屉：
- 当页面内的 CTA 在屏幕上可见时，隐藏抽屉。
- 一旦用户将页面内 CTA 滚动出视图（滚动阈值 > 600px），滑出一个紧凑的粘性底部栏，包含：[商品缩略图 + 标题]（在小视口上可选/折叠）、[价格] 和 [主要加入购物车 CTA]，占据栏的右半部分。
- 使用
padding-bottom: env(safe-area-inset-bottom);来尊重移动设备的安全区域，防止与系统控件重叠。
5. 标准化自定义色板与属性选择器交互
自定义选择器（如颜色圆圈或按钮矩阵）必须看起来精美且交互清晰：
- 视觉色板： 颜色圆圈在桌面上必须至少为
32x32px，在移动端为40x40px。活动色板通过一个外部同心边框环指示（在颜色圆圈和边框之间留出 2px 的白色间隙）。 - 尺寸按钮： 对尺寸（例如“S”、“M”、“L”）使用圆角药丸轮廓。划掉并调暗不可用的尺寸（例如透明度
0.4并带有对角线斜线），但保持可聚焦，以便屏幕阅读器可以播报“尺寸 S - 缺货”。 - 动态反馈： 切换色板必须立即更新可见价格、库存通知和主图库，而无需刷新整个页面。
6. 为键盘导航和屏幕阅读器无障碍而设计
自定义配置器是常见的无障碍失败点。应用以下严格指南：
- 语义化色板选择： 使用标准
<input type="radio">包裹在<label>标签中实现色板，样式上隐藏原生输入，同时保持其完全可访问。这保证了原生方向键导航、自动单选分组和键盘焦点状态。 - ARIA 实况通知： 当用户选择色板或属性时，使用不可见的
aria-live="polite"div 向屏幕阅读器播报更新（例如“已选择颜色：深红色。价格已更新为九十九美元。有货。”）。 - 跳过链接与上下文锚点： 确保“评级星标评价链接”具有可见的焦点环，并使用
tabindex="-1"将键盘焦点平滑滚动到评价区（#reviews）。
决策规则
色板样式选择
| 选项数量 | 推荐 UI 选择器模式 | 设计原理 |
|---|---|---|
| 2 - 5 个选项（例如红、蓝、绿） | 视觉药丸按钮或色板 | 即时可见性，低认知负荷，易于单次点击目标。 |
| 6 - 15 个选项（例如 10 种鞋码） | 自适应 Flex 网格矩阵 | 紧凑分组，整齐地适配在购买框列中，无需长滚动。 |
| 16+ 个选项（例如 50 种设备型号） | 带搜索的自定义选择菜单 | 防止视觉混乱和压倒性的“选择瘫痪”布局块。 |
布局拆分（桌面与平板视口）
- 桌面 (>1024px)： 2 列网格（左侧粘性媒体，右侧可滚动配置器）。
- 平板 (768px - 1023px)： 重新评估列宽。如果属性配置器包含密集的矩阵输入，则切换为 50/50 拆分 或提前折叠为 单列堆叠，并搭配简化的左对齐容器。
- 移动端 (<768px)： 严格的 1 列堆叠。滚动时触发的活动移动端粘性购买抽屉。
价格呈现策略
- 促销呈现： 以高对比度红色或品牌粗体显示活动促销价（最小 24px/
1.5rem）。在旁边以柔和的灰色显示带删除线的原价（MSRP），并包含一个紧凑的实心填充药丸徽章，标明节省金额（例如“节省 $30”或“-25%”），以最大化感知价值。 - 标准呈现： 以粗体中性深色/中性浅色（与主要标题颜色匹配）显示活动价格。
约束条件
- 无障碍 (WCAG AA 最低要求)：
- SC 2.4.11 焦点不被遮挡： 确保可聚焦的属性药丸或数量按钮永远不会被粘性页眉或移动端底部购买抽屉遮挡。适当使用全局的
scroll-margin-top和scroll-margin-bottom。 - SC 2.5.8 目标尺寸： 每个属性选择器、色板气泡和数量增减触发器（
+/-）必须提供至少 24x24px 的点击目标，并带有清晰间隔，在触摸屏上应为 44x44px。 - 对比度 AA： 主要文字、价格和选中边框状态必须保持至少 4.5:1 的对比度。颜色色板圆圈必须附带文字标签（作为相邻标签或可访问的 tooltip/屏幕阅读器文字），以防止仅依赖颜色（SC 1.4.1 颜色的使用）。
- SC 2.4.11 焦点不被遮挡： 确保可聚焦的属性药丸或数量按钮永远不会被粘性页眉或移动端底部购买抽屉遮挡。适当使用全局的
- 累积布局偏移 (CLS) 保持：
- 始终为商品标题、图片容器和动态通知框预留空间。骨架状态（
skeleton-state-system）或显式尺寸必须防止在加载动态评价或库存计数器时内容发生跳动。
- 始终为商品标题、图片容器和动态通知框预留空间。骨架状态（
- 动态视口高度： 移动端粘性购买抽屉必须尊重环境安全区域（
env(safe-area-inset-bottom)），以确保物理主屏幕滑动按钮不会与主要结账 CTA 冲突。
常见失败模式
- “错位购买框”偏移： 尺寸或颜色属性按钮根据不同商品产生不同的换行，导致主要“加入购物车”CTA 动态上下跳动。
- 纯色盲点： 使用无标签的彩色圆圈作为色板。色盲用户无法区分绿色和棕色色板，屏幕阅读器也只会播报“颜色按钮”，除非关联了明确的标签文字。
- 移动端虚拟键盘阻挡： 在移动屏幕上定位粘性底部栏时，以某种方式阻挡或重叠了移动端虚拟键盘展开时的表单字段，从而困住用户。
- 图片宽高比跳动： 未在主画廊展示中声明明确的宽高比，导致用户在横向和纵向商品图片之间切换时，整个布局列发生折叠和扩展。
- 双滚动条锁定： 将左侧粘性列设置得过高或让其溢出，导致左列在一个微小窗口内独立滚动，并在彼此相邻处产生双滚动条。
验证标准
- 双窗格设置： 桌面布局具有左侧粘性媒体列和右侧可滚动购买框列，带有清晰的 1px 边框或明确的空白区分。
- 线性移动端级联： 移动端视口将网格折叠为单列堆叠。
- 粘性购买抽屉： 在移动端上，当主 CTA 滚动出视图时，一个紧凑的粘性底部结账栏会出现。
- 色板可访问： 色板作为
<input type="radio">实现，带有可见标签和aria-live状态通知。 - 无 CLS： 图片容器和动态区块具有显式尺寸；属性切换或数据加载时无布局跳动。
- 安全区域： 粘性元素使用
env(safe-area-inset-bottom)，不与系统 UI 控件重叠。