两套排版体系的单一事实源。改字号/间距前先改这里,再同步到 CSS;CSS 与本文不一致视为回归。
同一套 resume flow 不等于同一种信息密度。 招聘方读技术简历要的是证据密度,读视觉岗简历时版面本身就是作品 —— 拿技术族的留白门禁去卡设计师简历,会把「留白是设计语言」误判成「内容规划不足」。
因此简历模板按职业族分组,门禁阈值随族切换,真源在 templates/resume-families.json(src/types.ts 与 scripts/verify-resume.mjs 都从这里取值,改策略先改它):
| 族 | 首页骨架 | 密度策略 | 正文留白上限 | 末页留白上限 | strong 下限 | 姓名字号 | 头像区间 |
|---|---|---|---|---|---|---|---|
tech 技术 |
stacked |
高密度:单页信息量优先 | 15% | 25% | 6 | 35px | 80-100px |
growth 运营 / 增长 |
metrics-band |
中密度:指标先行 | 18% | 28% | 8 | 34px | 80-105px |
design 视觉 / UI |
sidebar |
低密度:留白即作品 | 34% | 45% | 3 | 36px | 95-150px |
族之间不同的是骨架,不只是配色。 首页 DOM 由 src/resume-flow.ts 按 layout 装配同一批组件:
| layout | 首页结构 | 正文页 |
|---|---|---|
stacked |
身份 → 联系方式 → 摘要 → 四列焦点卡 → 内容卡 | 单列全宽 |
metrics-band |
整宽 KPI 带(编号放大成 22px 指标数字) → 身份 → 联系方式 → 摘要 → 内容卡 | 单列全宽 |
sidebar |
左 64mm 窄栏(38mm 头像 / 姓名 / 纵向联系方式 / 纵向焦点列表)+ 右宽栏(摘要 → 内容卡) | 左侧 10mm 细线缩进呼应侧栏,不复制 64mm 缩进(那会丢掉半页版面,实测留白飙到 47%) |
装箱预算跟着骨架自动重算:量测文档用同一个 layout 渲染,data-measure="slot" 量到的就是该骨架下的真实可用高度,不需要为新布局手调任何数字。
低密度不是「少写内容」而是 CSS 层的必然结果:design 族去掉卡片边框与底色、放大行距与页边距,同样的 Markdown 每页装得下的卡片自然更少,装箱器会照实分页。
新增职业族的顺序固定为:先在 resume-families.json 定义阈值 → 写 print.css → 跑 verify:resume 确认新阈值合理 → 回写本文件的表格。不允许先写 CSS 再补规范。
| 维度 | 简历体系(resume-base) | 知识库体系(base) |
|---|---|---|
| 场景 | A4 打印 + 招聘方快速扫读 | 屏读长图 + 收藏转发 |
| 密度策略 | 按职业族切换:技术高 / 运营中 / 视觉低(见上表) | 低密度:阅读舒适度优先 |
| 正文 | 12px / 1.55 | 14px / 1.75 |
| 主标题 | 35px / 1.16(族内可变,见职业族表) | 封面 50px / 1.14 |
| 副标题 | 14px / 1.55 | 18px / 1.68 |
| 页边距 | 16 / 16 / 15 / 16 mm | 18 / 17 / 20 / 17 mm |
| 元素 | 字号 | 行高 | 字重 |
|---|---|---|---|
| 姓名 h1 | 35px(growth 34 / design 40) | 1.16 | 850(design 800) |
| 副标题 | 14px | 1.55 | 400 |
| 摘要正文 | 12px | 1.8 | 400 |
| 页面大标题 h2 | 24px | 1.25 | — |
| 卡片标题 h3 | 15px(infra 14px) | 1.35 | — |
| 卡片内小标题 | 12px | — | accent 色 |
| 正文/列表 | 12px | 1.55 | 400 |
| 联系方式徽章 | 11px | — | 680 |
| 页眉页脚 | 10px | 1.3 | — |
| 聚焦卡描述 | 9px | 1.45 | — |
| 座右铭 | 11.5px 斜体 | — | muted 色 |
| 表格 | 10px | — | — |
间距:卡片 padding 11×13px,卡片间 gap 7px,页底 padding 15mm(含 2mm 打印安全余量)。首屏模块节奏固定为
hero → 联系方式(上边框分隔,margin-top 4mm / padding-top 3.5mm)→ 摘要 5mm → 聚焦卡 5mm → 主项目 6mm,
这串数字是首页装箱预算的一部分,改动必须重跑 verify:resume 确认留白仍 ≤15%。
| 组件 | class | 结构约定 |
|---|---|---|
| 首屏身份区 | .resume-hero > .resume-identity |
默认单栏;提供 avatar 时挂 .resume-hero-with-portrait 切两栏 |
| 头像 | .resume-portrait > img |
26×26mm 圆形,1px faint 描边 + 5px accent 环,object-fit: cover |
| 联系方式徽章 | .resume-contact-row > span |
独立于 hero 的一行,上边框分隔,胶囊形 |
| 摘要 | .resume-summary |
左侧 4px accent 竖条 |
| 聚焦卡 | .resume-snapshot-grid > section |
固定 4 张,编号圆点 + 标题 + 摘要 |
| 内容卡 | .resume-section-card |
卡内 h3 为业务线名,.resume-section-body h3 为小节名 |
| 座右铭 | .resume-motto |
末页右下收尾 |
头像是可选组件:avatar 只写仓库内相对路径,构建时由 src/avatar.ts 内联成 data URI,
读不到或类型不支持就跳过并降级为单栏 hero,不让缺图卡住构建。
各模板只允许改色板、纸面质感和 hero 排布,不得改字阶、不得改 content flow 的页面角色:
| 模板 | 族 | 色调与纸面 | hero 版式 |
|---|---|---|---|
resume-payment-lead |
tech | 橄榄绿 / 陶土,暖纸 + 左侧色带 | 左身份 · 右圆形头像 |
resume-global-checkout |
tech | 驼棕 / 灰绿,方格纸 | 左圆形头像 · 右身份(镜像) |
resume-ai-platform |
tech | 青灰 / 沙色,斜切几何 + 深色顶边 | 深色 hero 条,左头像反白 · 右身份 |
resume-infra-builder |
tech | 石墨 / 麦色,竖网格 + 等宽字体 | 左身份 · 右方形圆角头像 |
resume-growth-ops |
growth | 砖橙 / 苔绿,暖纸 + 顶部色带 | 左身份 · 右圆形头像,聚焦卡改指标卡(编号放大成 22px 数字) |
resume-design-folio |
design | 珊瑚 / 石灰,素纸大页边 | 左大字身份 · 右 33mm 方形头像,卡片去框只留细线 |
- 分页由量测驱动,不是权重猜测:构建时先把全部章节卡片放进真实模板、在 794px 打印宽度下渲染一遍,量出每张卡片的实际像素高和每页真实可用预算(首页预算 = A4 − hero/摘要/聚焦卡/座右铭;正文页预算 = A4 − 页眉/页题/页脚),再贪心装箱。没有 maxGroupWeight 这类需要手调的魔法数字。
- 座右铭(frontmatter
motto)固定渲染在最后一页收尾,既是人格签名也是空间填充件。 - 装箱后每页的少量富余由装箱器计算并按上限(56px)摊进卡片间距(内联 row-gap 下发),呼吸感来自数字而非 CSS 布局赌运气。
- 留白与卡片空洞的上限按职业族取值(见文首职业族表):技术族 15%/25%、运营族 18%/28%、视觉族 34%/45%。超限意味着内容规划不足(补内容,而不是调参数),但视觉族的大留白是设计语言,不适用技术族阈值。
- 颜色与字体由校验门禁保障:字号对照字阶表逐项核验,关键文本 WCAG 对比度(正文 ≥4.5 / 辅助 ≥4.0 / 标题 ≥3.0),视觉重点必须存在(strong 高亮下限按族:技术 6 / 运营 8 / 视觉 3,聚焦卡固定 4 张)。
- 页高判定必须用 offsetHeight(含边框);clientHeight 会漏掉 border-top 类装饰导致假阴性。
- 必须在 print 媒体模拟下测量:screen 与 print 的字体度量有 1-2px 差异,卡在 297mm 临界线上就会多出空白尾页。
- PDF 页数以解析页树
/Type /Pages /Count为准,mdls有 Spotlight 缓存不可信。 - 页面高度上限 = 297mm;内容含边框超过即溢出到下一物理页。
以上全部由 scripts/verify-resume.mjs 自动校验,人工只做最终美感确认。