coastdigitalgroup/coastai-skills

购物车UI系统

目的

购物车UI系统为直接面向消费者（DTC）和多渠道电商的购物车提供了一个可访问、高转化率的视觉和结构框架。作为从产品发现页面到结算完成之间的关键交易桥梁，购物车必须优雅地处理订单更新、促销提示、交叉销售以及实时配送进度指示。

系统化的设计方法解决了购物车中常见的摩擦点——例如更新商品时出现意外的布局偏移（CLS）、商品摘要难以辨认、移动端隐藏的交互控件、不可访问的数量选择器以及缺少清晰的结算心理路径。该系统确保了一致的样式、流畅的微交互、布局的健壮性以及对WCAG AA无障碍规则的严格遵守。

使用场景

• 电商与直接面向消费者（DTC）门户： 使用持久化迷你购物车和专用结算复核页面的高流量零售平台。
• B2B与批发目录订单： 具有表格列表、多SKU选择器和快速添加工具的大宗订购台。
• 服务与体验预订引擎： 组织多日票券、预约、租赁附加服务或活动通行证。
• 软件、SaaS与数字商品捆绑商： 在最终支付结算前聚合许可证、服务附加项和订阅层级。

何时不应使用

• 单件商品或一键结算： 对于直接跳转到结算页面的平台（例如PDP上的Apple Pay），请使用 checkout-flow-optimization 和 product-detail-layout-system。
• 主要产品浏览： 用于展示商品卡片或列表结果，请使用 card-ui-system 和 filter-and-sort-system。
• 并排产品对比： 要比较不同的方案或产品特性，请使用 comparison-matrix-system 或 pricing-table-ui-system。
• 大宗产品CSV订单： 对于高度专业化的表格管理录入面板，请使用 data-table-ui-system。

输入

1. 电商设计令牌： 全局字体比例、品牌调色板（主要CTA、警告红、成功绿）、流畅间距比例和表面阴影高度。
2. 产品SKU元数据： 图像宽高比规则、标题限制、变体字符串（例如“颜色：黑色 / 尺码：L”）、单价和促销/折扣状态。
3. 履约与逻辑配置： 免运费门槛、优惠券代码规则、运费估算和数量限制。
4. 交叉销售目录数据： 根据当前购物车商品映射的推荐，用于填充冲动购买模块。
5. 移动视口边界： 设备尺寸、触摸目标指南和环境安全区域约束。

输出

1. 滑动迷你购物车抽屉（滑出侧面板）： 用于快速购物车概览和移动优先快速结算路径的组件级网格蓝图。
2. 专用购物车页面（全页网格）： 用于深度复核的空间两列布局（主购物车列表 + 订单摘要侧边栏）。
3. 购物车商品行架构： 关于间距、布局、交互式数量控制和单行内删除元素的详细规格。
4. 免费配送与促销进度条： 显示实时反馈和动态消息阈值的空间布局。
5. 无障碍路由与屏幕阅读器规格： 关于焦点陷阱、键盘Tab顺序、可移动Tab索引、aria-live 声明和触摸目标规则的详细指南。

---

工作流程

1. 定义空间机制：迷你购物车抽屉 vs. 专用购物车页面

优化的设计必须根据屏幕尺寸和上下文支持两种高影响力的视觉格式：

• 迷你购物车抽屉（桌面端和移动端）： 从右边缘滑入，在桌面端覆盖屏幕右侧400px-460px，在移动端覆盖100%的屏幕。它浮动在主视口上方，背后是半透明背景（background: rgba(0,0,0,0.5)）。使用弹性布局将抽屉分为三个固定区域：
  • 头部（固定高度）： 购物车标题（带数量）、关闭按钮（✕）和免费配送进度追踪器。
  • 可滚动商品列表（弹性增长/自动滚动）： 已添加商品的列表（overflow-y: auto;）。
  • 底部（固定高度，停靠）： 小计、税费/配送通知、促销信息和突出的结算CTA按钮。
• 专用购物车页面（桌面端 >1024px）： 使用不对称的两列布局网格：
  • 左列（占据60–65%）： 包含购物车商品的清晰、左对齐的表格视图，包括批量删除操作和空状态。
  • 右列（占据35–40%）： 包含固定订单摘要卡片（position: sticky; top: var(--header-height);），内含小计计算、预估运费、优惠券代码输入、动态支付徽章以及主要结算按钮。

2. 设计购物车商品行架构

购物车中的每一行都代表一个微型层次结构。使用CSS Flexbox或Grid在100%宽度的容器内标准化布局流程：

+-------------------------------------------------------------+
| [缩略图]  [商品标题]                          [删除 X]   |
| (64x64px)    尺码：M / 颜色：蓝色                            |
|                                                             |
|              [-] [ 1 ] [+]                     [价格]      |
|              (数量输入)                         $120.00      |
+-------------------------------------------------------------+

• 产品缩略图： 锚定在一个紧凑的固定宽高比容器中（64x64px 至 96x96px 最大），带有 border-radius: var(--radius-s) 和 object-fit: cover;。确保存在替代文本，但需具有描述性（例如 alt="海军蓝羊毛夹克"）。
• 元数据堆栈： 包含的标准垂直布局：
  • 标题：粗体、中性深色，链接到PDP。
  • 变体属性：柔和灰色，较小字体大小（例如 12px/0.75rem）。
  • 单价：如果单品则显示细微，但如果数量大于1则强调。
• 无障碍数量选择器： 确保按钮大于典型文本。将值输入框包裹在平面视觉边框内。
  • 减量按钮（-）、数量输入框（文本或数字）、增量按钮（+）。
  • 确保当数量为 1 时，减量按钮会转换为可见的垃圾桶删除图标，表明点击它将从购物车中移除该商品。
• 行内定价： 对齐到行的右下角。如果商品有折扣，将原始划掉的价格以浅灰色呈现在活动销售价格（以高对比度红色或品牌粗体渲染）旁边。
• 删除按钮： 放置在行的右上角。使用明确的 aria-label="从购物车中移除 [商品名称]" 以防止屏幕阅读器仅读出“按钮”或“X”。

3. 构建免费配送与促销进度引擎

通过给用户提供关于履约目标的即时反馈，鼓励更高的平均订单价值（AOV）：

• 视觉进度条： 使用水平容器（height: 8px），两端圆角，以浅灰色样式显示，当用户的小计接近目标时，使用明亮的强调色（例如绿色、蓝色）从左到右填充。
• 动态微拷贝： 在进度条上方或下方编写清晰、行动驱动的消息：
  • 低于阈值： “您距离免费配送还差 $15.00！[再逛逛]”
  • 超出阈值： “🎉 恭喜！ 您已解锁免费配送！”
• 布局位置： 将进度引擎放置在迷你购物车抽屉和主购物车页面的最顶部，使其在首屏始终可见。

4. 优化结算CTA和订单摘要底部

结算锚点是购物车体验的焦点。确保它看起来像一个稳固、值得信赖的区块：

• 计算列表： 使用带有明确点引导或对齐网格的键值列表布局，列出小计、已应用的折扣（绿色文字带促销代码徽章，例如 SUMMER20 [x]）、预估运费（或“结算时计算”）以及最终预估总计。
• 主要结算按钮： 高对比度、全宽（100%）、粗体排版。点击时必须显示清晰的加载指示器（例如将标签文字“安全结算”转换为旋转器），以防止双击。
• 受支持的支付徽章： 柔和的灰度或标准颜色的支付图标徽章（Visa、Mastercard、Amex、PayPal、Apple Pay、Klarna）直接放置在结算按钮下方，以建立信任。

5. 创建响应式流畅布局适配

购物车在移动端使用频繁。以极高精度设计断点：

• 迷你购物车移动端覆盖层： 在视口宽度 <768px 时，强制迷你购物车跨越 100vw。将关闭触发器明确放置在大的、易于点击的左上角或右上角目标中。
• 购物车页面商品行堆叠： 在移动视口上，水平行会折叠：
  • 产品缩略图和标题并排显示。
  • 数量选择器和价格折叠到标题下方，数量左对齐，价格在同一水平轴上右对齐。
• 固定移动端结算抽屉： 在移动端购物车页面上，实现一个固定的底部页脚，将小计和结算CTA按钮安全地锚定在浏览器UI元素上方，利用 padding-bottom: env(safe-area-inset-bottom);。

6. 建立键盘焦点路由和ARIA实时触发器

不可访问的购物车会阻止屏幕阅读器和仅使用键盘的用户完成购买。

• 迷你购物车焦点陷阱： 当迷你购物车抽屉打开时：
  1. 立即将焦点触发到第一个交互元素（通常是关闭按钮或顶部商品标题）。
  2. 实现焦点陷阱，防止用户Tab键切换到背景后面隐藏的元素。
  3. 捕获退出键（Esc）以关闭抽屉。将焦点干净地返回到最初打开购物车的触发按钮（例如头部购物车图标）。
• 动态声明（aria-live）： 切换数量、删除商品或应用优惠券必须通过一个不可见的 aria-live="polite" 元素即时传达更新。屏幕阅读器应宣布：“黑色夹克数量更新为二。小计更新为两百四十美元。”
• 焦点环： 避免标准的浏览器轮廓；在购物车中的所有交互控件周围实现一个自定义的、高对比度的、未被裁剪的焦点指示环。

---

决策规则

专用购物车页面 vs. 迷你购物车抽屉触发器

触发事件	最优用户体验响应模式	设计理由
用户从PDP添加商品	滑开迷你购物车抽屉	确认成功添加到购物车，立即更新小计，提供即时反馈，但让用户停留在PDP上继续购物。
用户点击全局购物车头部图标	切换迷你购物车抽屉（如果商品数量 > 0）/ 导航到购物车页面（可选）	无需加载新页面即可快速访问编辑商品列表。如果目录非常复杂（例如数百个B2B零件），则直接导航到专用购物车页面。
购物车为空（0件商品）	显示内联空状态及CTA	而不是显示空白页面或关闭抽屉，呈现清晰的消息（例如“您的购物车目前是空的”），并附上3–4个有针对性的、基于类别的购物链接。

数量输入样式选择

界面样式	使用场景应用	设计理由
按钮步进器 [-] [ 1 ] [+]	DTC、零售、服装、标准电商	移动端最简单的单次点击交互，防止输入错误，简单的增量操作。
原生文本输入字段	大量B2B目录订单表、批发数量	允许用户直接键入任意大数字（例如 150），而不必点击150次。
标准选择下拉框 (数量：1) v	高价商品、电子产品、单一数量限制的订阅	将购买限制在预设的数量范围内（例如最多10件），并防止未处理的大量库存请求。

---

约束条件

• 无障碍性（WCAG AA最低要求）：
  • SC 2.4.7 焦点可见： 购物车抽屉必须在关闭按钮、标题链接、步进器和输入框上保持高度可见的焦点轮廓。
  • SC 2.5.8 目标尺寸： 数量增量（+）和减量（-）按钮、删除垃圾桶和促销移除链接的点击目标尺寸至少为桌面端 24x24px 和移动端 44x44px。
  • SC 1.1.1 非文本内容： 每个图像都必须有清晰的替代文本。空状态中的装饰性背景必须被忽略（role="presentation" 或 alt=""）。
• 累积布局偏移（CLS）预防：
  • 标准化商品行高度，或在加载状态期间保留最小骨架屏状态高度。
  • 动态促销计算不得将结算CTA按钮突然推离屏幕或折叠。
• 动态覆盖层滚动锁定：
  • 打开迷你购物车抽屉覆盖层必须锁定主 body 元素上的背景滚动（将 overflow: hidden; 应用于 <body>）。这可以防止双重滚动和跳动导航伪影。

---

常见失败模式

• 幽灵购物车关闭： 关闭抽屉或点击其外部会完全重置焦点索引，将仅使用键盘的用户丢弃到底层页面的最顶部，迫使他们重新Tab键浏览所有内容。
• 神秘的删除目标： 将垃圾桶图标或“X”删除触发器设计为未标记的文本符号，导致屏幕阅读器输出“按钮”或“未标记的按钮”，使用户无法清理购物车。
• 滞后的更新漂移： 在点击 + 和更新价格之间允许延迟，而不显示加载旋转器。如果用户快速点击 + 三次，价格会滞后于操作并导致总计不准确。
• 被阻挡的移动端键盘： 将优惠券输入框放置在专用购物车页面的布局堆栈中心，当移动设备键盘弹出时，该输入框可能被完全阻挡或推出可见屏幕之外。