# 卡片

目录 `assets/cards/` 里有 19 套现成的卡片原型，可以在浏览器里看 [画廊与可运行参考](../assets/cards/gallery.html)，每个原型的自包含代码在 `assets/cards/<name>/`（包含 `card.html`、`card.css`，带动画的还有 `card.js`；公共基础样式在 `assets/cards/shared/shell.css`）。

卡片用来承载产品特性、运行证据或具体的凭证；需要时借鉴这些原型的结构，或直接复用代码。

## 先看要不要用卡片

适合用卡片的地方：
- 并列展示 2–4 项核心产品能力，每一项都需要具体的画面切片才能说清楚；
- 摆出产品运行的真实证据（例如命令终端、构建流水线、任务审批单）；
- 把抽象的凭证或身份做成看得见摸得着的物件（例如访问通行证、API 规格卡、会员卡）；
- 对比或透视多份内容（例如版本对比、多来源检索）。

不适合用卡片的地方：
- 首屏主视觉（Hero）。首屏主角直接放产品本身的大界面或核心叙事，不要在首屏放几个碎卡片，见 [设计方向](design-direction.md)；
- 连续阅读的长文、纯操作表单或密集数据表格，见 [交互与状态](interaction-and-state.md)。不要把能顺畅读下来的内容硬切成几张小卡片；
- 靠大图和连续排版建立气氛的页面。卡片的边界会把气氛切碎；
- 4–7 个核心对象、案例或方案要排成横向的画廊，或者在一个画面里展开和收起。这时要的是空间容器，不是平铺卡片，读 [空间容器](staging-containers.md)。

## 卡片清单

| 原型 | 适合放什么 | 包含的结构 |
| --- | --- | --- |
| `beam-graph` | 工作流拓扑、数据流向、生态连接 | 点阵底纹、发光连线、中心枢纽、微胶囊节点 |
| `terminal` | 命令行执行、构建日志、实时事件 | 窗口顶栏、语法高亮、状态指示灯、闪烁光标 |
| `flow-object` | 身份凭证、API 规格、硬件规格、会员卡 | 深色质感卡片、卡号、状态圆点、发光边框 |
| `ui-slice` | 任务审批、流程进度、多看板切片 | 前后双层景深、看板底板、悬浮审批卡、进度条 |
| `answer-lens` | 知识库检索、模型对比、多来源溯源 | 三张微倾斜卡片堆叠（-10° / 0° / 10°）、数据图表、来源标签 |
| `dot-globe` | 全球节点、分布式算力、跨区域网络 | 3D 点阵地球或星图网格（`mode: 'mesh'`） |
| `deploy-preview` | 版本发布、分支预览、CI/CD 状态 | 分支名、提交哈希、构建进度条、预览链接 |
| `metric` | 实时吞吐量、关键指标、大盘数字 | 动态数字滚轮、趋势微图表、浮动百分比 |
| `keycaps` | 快捷键说明、输入指令 | 键盘按键外观、立体投影 |
| `capture-notes` | 语音记录、会议纪要、速记清单 | 音频波形跳动、多色分类标签、待办勾选框 |
| `line-ribbons` | 流动线条、背景氛围、数据流向 | 彩色波浪飘带、平滑渐变 |
| `particle-ring` | 中心焦点、加载反馈 | 向内聚拢的粒子光环 |
| `vector-space` | 知识关联、聚类图谱 | 带连线的散点图、分组标签 |
| `file-mosaic` | 格式解析、多类型文档资产 | 多格式文件卡片交错重叠 |
| `stream-window` | 实时数据流、事件监控 | 逐行加载的数据列表 |
| `responsive-preview` | 多端适配、设计系统展示 | 桌面、平板、手机三层画中画边框 |
| `portrait-story` | 客户故事、创始人特写、金句引用 | 黑白人物大特写、大留白排版 |
| `promo-band` | 版本更新通栏横幅 | 斜切通栏横幅、醒目标签 |
| `showcase` | 旗舰功能大界面特写 | 界面截断出血大图 |

## 怎么使用这些卡片

卡片库是设计参考与现成代码库，不是强制约束。按以下方式使用：

1. **先挑合适的原型**：根据产品性质选 2–4 款能说清特性的原型；不适合放卡片的产品按自身骨架排版，不强行拼凑。
2. **看现成代码取细节**：看 `assets/cards/shared/shell.css` 获取基础样式，再看选定卡片目录下的 `card.html`、`card.css`（有 Canvas 动画的看 `card.js`）。
3. **借鉴结构，换成真实内容**：
   - 可以直接复用代码结构，也可以根据当前页面的网格自由调整；
   - 把文案、标签、代码和数值换成当前产品的真实内容；
   - 不要退回只有两行字的空白方框；配色和质感跟当前方向走，不照搬原型的。