卡片 UI 系统 是做什么的？
目的
卡片 UI 系统提供了一种用于设计和结构化卡片的方法论——卡片是用于分组相关信息和操作的模块化构建块。卡片是重度发现式界面的基本构建块，允许用户在统一的网格或列表中扫描和比较多个不同的条目（产品、文章、个人资料）。系统化的卡片方法确保内容可扫描、视觉一致，并在不同布局上下文（网格、轮播、堆叠）中优雅适应，同时保持可访问性和清晰意图。
用例
- 为电子商务列表页（PLP）设计产品网格。
- 为内容中心创建文章或博客预览。
- 在落地页上创建“特性”或“服务”部分。
- 组织仪表板小部件、功能亮点或数据摘要。
- 在页面底部实现“相关内容”部分。
- 为搜索或筛选视图定义“结果”组件。
何时不使用
- 密集数据表格： 当用户需要同时比较多行粒度数据的特定属性时；请改用
responsive-data-tables（但卡片可作为响应式回退方案）。 - 单一叙事内容 / 简单文本流： 当内容遵循严格的线性故事或标准段落时，卡片容器会增加不必要的视觉噪音或干扰阅读节奏。
- 极简纯操作界面： 例如单字段搜索栏或简单登录表单，卡片容器会增加不必要的视觉噪音。
输入
- 内容解剖： 必需元素列表（例如，图片、标题、类别、价格、描述、行动号召按钮）。
- 交互意图： 整个卡片可点击，还是只有特定操作目标？
- 父级上下文： 卡片将位于何处？（例如，三列网格、侧边栏、水平滚动区域？）
- 内容差异： 标题和描述的预期最小和最大文本量是多少？
- 现有系统： 来自父级设计系统的流体间距、排版比例和配色方案。
输出
- 卡片解剖结构规范： 已定义的区域（头部、媒体、主体、底部）及其内部间距。
- 卡片蓝图： 卡片内部布局和层次的结构化定义。
- 响应式变体： 卡片如何适应的规则（例如，在移动设备上从垂直布局切换为水平布局）。
- 交互规范： 定义的状态（悬停、聚焦、激活）和可点击区域定义。
- 可访问性映射： 标题层次和键盘交互模式的指导。
工作流程
1. 应用“三点规则”并定义解剖结构
每张卡片应有三个清晰的层级点以确保可扫描性：
- 锚点（视觉）： 提供即时识别的高质量图片或图标。定义图片的宽高比（例如，16:9、1:1）。
- 上下文（内容）： 标题和核心元数据（例如，价格、日期、类别）。
- 目标（操作）： 清晰的主要操作（例如，“加入购物车”、“阅读更多”）。
绘制完整的内部层次结构：头部（元信息，如标签/日期）、媒体区域、内容/主体（标题 + 描述）以及底部/操作（行动号召按钮、价格、社交证明）。
2. 建立内部间距和内部网格
将 fluid-spacing-system 应用于卡片内部：
- 内边距（Padding）： 卡片边缘与其内容之间的空间（通常为
--space-m）。 - 堆叠间距（Stacking Gaps）： 内部元素之间的垂直空间（通常为
--space-xs或--space-s）。
确定内容在卡片内的分布方式：
- 从上到下（标准）： 图片在顶部，内容居中，操作在底部。
- 并排（水平）： 图片在左侧，内容和操作在右侧（适合移动列表或侧边栏）。
- 叠加： 内容位于图片之上（需要高对比度处理以确保可读性）。
3. 设计视觉层次并处理内容差异
应用 visual-hierarchy-system 杠杆来区分内容：
- 权重： 使标题加粗并比描述更大。
- 对比度： 对元文本使用柔和的颜色（例如，“发布于 10 月 24 日”）。
- 层次感： 使用边框或微妙的盒阴影将卡片与背景分开。
针对“最坏情况”的内容场景进行设计：
- 截断 vs. 换行： 决定长标题是使用省略号截断还是换行到多行。
- 对齐： 在操作容器上使用 Flexbox
margin-top: auto，以确保在不同高度的网格中按钮完美对齐。
4. 建立交互模式
选择适合的交互功能模式：
- 大盒子： 整个卡片是一个链接（需要为屏幕阅读器仔细处理可访问性）。
- 嵌套操作： 只有特定按钮或标题可点击。
- 混合模式： 卡片表面有悬停效果，但特定操作执行不同任务（例如，“加入购物车” vs. “查看详情”）。
在悬停时使用微妙的变换（例如，轻微抬起、边框颜色变化）以指示可交互性。
5. 定义响应式适配并验证可访问性
规划卡片在不同视口中的表现：
- 垂直变水平： 对于移动设备，卡片可能从图片在上方的布局切换为图片在左侧的布局，以节省垂直空间。
在签署前验证可访问性：
- 标题级别： 确保卡片标题使用适当的标题级别（通常为 H3 或 H4），以维护页面的文档结构。
- 触摸目标： 卡片内的任何交互式元素必须满足 WCAG 2.2 SC 2.5.8（最小 24x24px，如果无法避免更小的目标，需有足够间距）；在空间允许时优先使用 44x44px。
- 替代文本： 每张锚点图片必须有描述性替代文本或标记为装饰性。
- 键盘导航： 卡片内的每个交互式元素必须可通过
Tab键访问，并且焦点指示器不能被同级卡片或粘性页眉裁剪或隐藏（WCAG 2.2 SC 2.4.11，焦点不被遮挡）。
决策规则
- “三点”规则： 一张卡片应很少包含超过 3 个不同的优先级（例如，1. 图片，2. 标题，3. 价格）。太多细节会使其成为“迷你页面”，而不是卡片。
- 宽高比规则： 对图片使用一致的宽高比（例如，4:3、16:9 或 1:1），以防止网格中布局“跳跃”。
- 接近度评分： 标题和描述之间的间距应小于描述与行动号召按钮之间的间距。
- “无遗留”规则： 如果卡片属于网格一部分，则网格必须优雅地处理剩余空间（例如，
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))）。 - 等高： 在网格中，同一行的卡片高度应尽可能相同（使用 Flexbox
align-items: stretch）。 - 主要 vs. 次要操作： 只有一个操作应在视觉上占主导地位（主要行动号召按钮）。其他操作（例如，“保存到心愿单”）应为图标或低对比度链接。
- 交互性提示： 如果卡片可点击，则必须有可见的悬停状态。
约束条件
- 响应性： 卡片绝不能超过视口宽度或具有固定宽度；它们应跨
responsive-grid-system的列，并在小屏幕上垂直堆叠或切换为水平布局。 - 可访问性： 必须支持键盘导航（通过 Tab 键遍历交互元素）并保持文本对比度至少 4.5:1。如果整个卡片可点击，请使用“拉伸链接”模式以避免屏幕阅读器出现冗余链接。
- 性能： 避免使用过大的图片；使用
srcset提供适合卡片容器尺寸的资源。 - 布局： 优先使用带有
auto-fill/auto-fit和基于clamp()的间距的 CSS Grid，而不是固定断点，以便卡片自然重新排列；当卡片内部布局必须根据自身宽度而非视口适应时（例如，同一卡片在全宽网格和窄侧边栏中），使用容器查询（@container）。
常见失败模式
- “阶梯状 / 错位按钮”效应： 由于标题长度不同，按钮位于不同高度，导致网格看起来凌乱。
- 过度装饰： 使用过多边框、阴影和渐变，使内容难以阅读。
- 低信息密度： 卡片过大而内容过少，导致不必要的滚动。
- 信息过载： 试图在单张卡片中容纳过多细节，打破三点规则，使用户困惑。
- 不可访问 / 不可见的点击目标： 在移动设备上难以点击的小按钮或链接，或者让卡片看起来可点击但实际触发点只有一个微小图标。
- 缺乏内边距： 文本紧贴卡片边缘或图片。
验证标准
- “三点规则”清晰可见（锚点、上下文、目标）。
- 内部间距（内边距/间距）使用来自流体间距系统的令牌。
- 排版遵循站点建立的规模和层次。
- 主要操作（按钮）在网格行底部对齐。
- 所有卡片系统中的图片宽高比保持一致。
- 交互状态（悬停/聚焦）已定义且可访问。
- 网格中的卡片正确对齐，并优雅处理不同内容长度。
- 标题级别在页面内遵循逻辑层次。
- 触摸目标满足 WCAG 2.2 SC 2.5.8（最小 24x24px）。
- 焦点指示器永远不会被重叠的卡片、图片或粘性元素遮挡（WCAG 2.2 SC 2.4.11）。