admin
d9445b5888
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
55 lines
4.4 KiB
Markdown
55 lines
4.4 KiB
Markdown
# 卡片
|
||
|
||
目录 `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. **借鉴结构，换成真实内容**：
|
||
- 可以直接复用代码结构，也可以根据当前页面的网格自由调整；
|
||
- 把文案、标签、代码和数值换成当前产品的真实内容；
|
||
- 不要退回只有两行字的空白方框；配色和质感跟当前方向走，不照搬原型的。
|