Skip to content

Latest commit

 

History

History
106 lines (80 loc) · 7.76 KB

File metadata and controls

106 lines (80 loc) · 7.76 KB

设计核心规范(Design Spec)

两套排版体系的单一事实源。改字号/间距前先改这里,再同步到 CSS;CSS 与本文不一致视为回归。

职业族与密度策略

同一套 resume flow 不等于同一种信息密度。 招聘方读技术简历要的是证据密度,读视觉岗简历时版面本身就是作品 —— 拿技术族的留白门禁去卡设计师简历,会把「留白是设计语言」误判成「内容规划不足」。

因此简历模板按职业族分组,门禁阈值随族切换,真源在 templates/resume-families.jsonsrc/types.tsscripts/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

简历体系字阶(resume-base/common.css)

元素 字号 行高 字重
姓名 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%。

简历体系组件(resume-base/common.css)

组件 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,不让缺图卡住构建。

模板变体职责(resume-*/print.css)

各模板只允许改色板、纸面质感和 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 张)。

打印约束(血泪教训)

  1. 页高判定必须用 offsetHeight(含边框);clientHeight 会漏掉 border-top 类装饰导致假阴性。
  2. 必须在 print 媒体模拟下测量:screen 与 print 的字体度量有 1-2px 差异,卡在 297mm 临界线上就会多出空白尾页。
  3. PDF 页数以解析页树 /Type /Pages /Count 为准,mdls 有 Spotlight 缓存不可信。
  4. 页面高度上限 = 297mm;内容含边框超过即溢出到下一物理页。

以上全部由 scripts/verify-resume.mjs 自动校验,人工只做最终美感确认。