# 育才抖音招生小程序 · 版面稿 00-设计说明（v1 · 2026-10-27）

> 交付方：视觉设计（花花）｜依据：`技术领域/育才抖音招生小程序-设计框架-v1-20261027.md` + 技术侧研究「六、合规红线」
> 产物目录：`/home/ubuntu/.hermes/shared-skills/company-knowledge/技术领域/育才招生小程序-版面稿/`
> 一句话：**家长端 8 页 + 招生办后台 5 屏，三档（375/390/430）实渲机检全过，红线词逐字 0 命中，能直接落码。**

---

## 一、交付清单（缺一件都算没交）

| 件 | 路径 | 说明 |
|:--|:--|:--|
| 看总图 | `索引.html` | 13 页 × 三档整页图一览，点标题可打开对应 HTML 稿 |
| 设计令牌 | `00-设计令牌.html` | 色板 + **对比度实算** + 字阶三档 + 间距/圆角/阴影 + 组件示例 + 37 枚图标 |
| 家长端 8 页 | `P1-首页.html` … `P8-我的报名记录.html` | 每页底部自带「状态示例 + 本页规格」注记区（同页实渲，非页面本体） |
| 招生办后台 5 屏 | `A1-线索池.html` … `A5-账号与提醒设置.html` | 手机网页形态（≤759 档表格转卡片流） |
| 截图 | `screenshots/{375,390,430}/` 整页 39 张 + `screenshots/首屏/{375,390,430}/` 39 张 | @2x，整页 = 元素实际高度 |
| 图标 | `icons/` | 37 枚 24×24 单色 SVG（stroke=currentColor，可改色可切图）+ `_sprite.svg` |
| 自检 | `自检报告.md` + `src/自检-raw.json`、`src/qa_pages.{md,json}`、`src/_measure.json` | 可复跑：`src/build.py` → `src/shoot.py` → `src/design_qa.py` → `src/check.py` → `src/build_docs.py` |
| 文案清单 | `文案清单.md` | **A 栏（学校必给，稿上全部占位）/ B 栏（我方拟稿，请老板纠错）** 两栏表，含 A 栏 27 项、B 栏 10 组 |


---

## 二、设计语言（观感我定，只写清怎么落）

- **品牌色**：学院藏蓝 `#123A6B`（页头/主视觉底/选中）＋ 朱砂红 `#B02E24`（**主操作只它一个**）＋ 金墨 `#6E560E`（荣誉、关键数字文字，只做小字与线）。其余全靠灰阶层次。**一屏只允许一处红、一处金。**
- **字族**：系统栈（MiSans / 阿里巴巴普惠体 / 思源黑体 / PingFang），零网络字体；数字统一 `tabular-nums`。
- **层次**：先用结构（字号四档 + 8pt 栅格）分层，颜色只点睛；卡片 = 1px 发丝描边 + 微投影，**禁发光**。
- **学校观感**：稳（藏蓝压住）＋ 有温度（朱砂红只给"报名"这一个动作）＋ 荣誉带一点金。不玩科技感渐变海报，家长看的是可信。

---

## 三、三档规格总表（**这是落码的唯一依据**）

实现方式：`src/app.css` 里全部是 CSS 变量 + 两个断点覆盖（`min-width:390px` / `min-width:430px`）。开发直接抄变量，别页面里写死 px。
**单位**：本表按 px 标注（基准 375）；小程序侧 rpx = px × 2；也可以用 px 不换算（推荐，字号不随屏宽缩放，只随系统字体档缩放）。

| 项 | 375 | 390 | 430 | CSS 变量 / 写法 |
|:--|:--:|:--:|:--:|:--|
| 页边距 | 16px | 18px | 20px | `--sp` |
| 区块上下留白 | 18px | 18px | 18px | `.sec` padding-top |
| 卡内边距 | 12–14px | 12–14px | 12–14px | `.card.pad` / `.course` |
| 元素间隔（8pt 栅格） | 4 / 8 / 12 / 16 / 24 / 32 | 同 | 同 | — |
| H1 页头/首屏主标题 | 24px | 26px | 28px | `.hero h1` |
| H2 区块标题 | 17px | 17px | 17px | `.sec-h h2` |
| 正文（主文案） | 15px | 15px | 15.5px | `body` |
| 正文次 / 辅助 | 13.5 / 13px | 同 | 同 | `.course .meta` / `.hint` |
| 注释（**下限**） | 12px | 12px | 12px | `--ink-4` 文本 |
| 关键数字（看板） | 21px | 22–23px | 24px | `.kpi b` |
| 主按钮高 / 字号 | 50 / 17px | 50 / 17px | 50 / 17px | `.btn-lg` |
| 次按钮高 | 44px | 44px | 44px | `.btn` / `.btn-sm` |
| 点击区下限 | 44×44 | 44×44 | 44×44 | 所有可点元素 |
| 筛选项（chips）高 | 44px | 44px | 44px | `.chip` |
| 卡片缩略图 | 88×88 | 96×96 | 104×104 | `.course .thumb` |
| 学段入口图标底块 | 40×40 | 40×40 | 44×44 | `.entry .ei` |
| 学段入口列数 | 4 列 gap 8 | 4 列 gap 8 | 4 列 gap 10 | `.grid4` |
| 页眉/胶囊安全区 | 0–91px，内容右边界 ≤ 375−116 | ≤ 390−116 | ≤ 430−116 | `.hero-top` max-width / `.navbar` padding-right 104px |
| 列表页列数 | 单列卡片流 | 同 | 同 | ≤759 档表格一律转卡片流 |
| 粘底条 | 高 50 + 8 上下 padding | 同 | 同 | `position:sticky;bottom:0`，**必须是文档流末尾元素** |

**三档自检口径（已全过）**：每档实渲量「横向溢出 / 文字裁切 / 热区 <44 / 字号 <12px / 图标失引 / 胶囊禁区冲突」，六项全 0 才算过（见 `自检报告.md`）。

---

## 四、每页功能元素对照表（框架 v1 要求 → 稿上位置）

**家长端 8 页**

| # | 页 | 要求保留的功能元素 | 稿上位置 |
|:--|:--|:--|:--|
| P1 | 首页 | 学校名 / 招生季主视觉 / 立即报名主按钮 / 学段入口（幼小初高） | hero 顶部校名行 → 主视觉图位（750×560@2x）→ hero 内通栏「立即报名」＋粘底同款 → 「学部与课程」4 格入口（幼儿园/小学部/初中部/高中部） |
| P2 | 学部·课程列表 | 学段筛选 / 课程卡片（名称·学制·班型·收费区间） | 顶部 chips 筛选（含已选条件回显 + 清空）→ 按学段分组的课程卡：名称 / 学制 / 班型 / 收费区间行 |
| P3 | 课程详情 | 培养方向 / 师资 / 班型 / 收费区间 + 底部固定报名 | 四个区块顺序固定（培养方向→师资→班型与安排→收费区间）+ 报名须知；底部固定条：电话咨询 + 立即报名 |
| P4 | 报名表单 | 姓名 / 手机（抖音带出）/ 学段 / 意向学部 / 区县 / 留言 / 隐私同意 | 单列分组表单；手机号显示打码 + 「抖音授权已带出」标 + 可修改；隐私勾选 22px（热区 44）+ 说明按钮 |
| P5 | 到校路线 | 地图 / 地址 / 到校说明 | 地图组件位（375×280）→ 地址卡（复制/一键导航）→ 自驾·公交·高铁三段说明 → 招生办电话 |
| P6 | 校园环境与荣誉 | 图文 + 视频位 | 分段（环境/学习空间/荣誉墙）+ 16:9 视频位 + 2×2 方图 + 荣誉墙（授牌单位与年份待核定） |
| P7 | 常见问题 | 折叠列表 | 搜索 + 分类 chips + 手风琴（单开）+ 底部「还有问题」两个出口 |
| P8 | 我的报名记录 | 凭手机号查进度（新线索/已联系/已约到校/已考试/已录取） | 手机号 + 短信验证码 → 5 段步骤条（当前"已约到校"）+ 报名信息 + 跟进时间线 + 换号查询 |

**招生办后台 5 屏**

| # | 屏 | 要求 | 稿上位置 |
|:--|:--|:--|:--|
| A1 | 线索池列表 | 筛选 + 状态标签 | 数字条（今日新增/待跟进/已约到校 + 口径）→ 学段 chips → 已选条件回显 → 线索卡（状态标签五态 + 24h 超时标）→ 批量条（选中浮出，吸底） |
| A2 | 线索详情 | 跟进记录 + 状态推进按钮 | 报名信息（只读）→ 推进状态（主按钮「标记为已联系」+ 三个次按钮 + 「标记已放弃」需填原因）→ 跟进记录（时间线 + 新增加 + 快捷短语 + 设提醒）→ 分配 |
| A3 | 漏斗看板 | 浏览→报名→到校→录取 | 4 个关键数字（2×2，仅"到校"用金）→ 转化漏斗（含转化率与口径）→ 近 7 天 → 按学段 → 导出入口 |
| A4 | 导出弹窗 | 范围/字段/格式/留痕 | 底部抽屉：范围（当前筛选/全部—主任专属）→ 字段四组 → 格式 xlsx/csv → 水印与留痕提示 → 取消/确认 |
| A5 | 账号与提醒设置 | 账号/提醒/权限 | 我的账号（只读）→ 老师账号（启用/停用不删号）→ 线索提醒（站内+短信兜底、24h 升级）→ 数据与隐私（隐私版本/保留期/导出留痕）→ 粘底保存 |

---

## 五、图片与视频规格（切图直接照这张表）

| 位置 | 用途 | 宽高比 | 逻辑尺寸 | @2x 实际像素 | 格式 | 单张上限 |
|:--|:--|:--:|:--|:--|:--|:--|
| P1 首页主视觉 | 招生季主视觉 | 750:560（≈4:3 略宽） | 375×280 | **750×560** | JPG（照片）/ PNG（含字） | ≤180KB |
| P2/P1 课程缩略 | 课程卡左图 | 1:1 | 88×88（430 档 104） | **176×176**（430 档 208×208） | JPG/PNG | ≤60KB |
| P3 课程主图 | 详情页头图 | 16:9 | 375×211 | **750×422** | JPG | ≤150KB |
| P6 校园方图 ×4 | 环境/学习空间 | 1:1 | 167×167 | **340×340** | JPG | ≤120KB/张 |
| P6 校园视频 | 视频位 | 16:9 | 343×193 | **686×386**（封面同尺寸） | mp4（H.264）+ 封面 JPG | mp4 ≤8MB，≤60s；封面 ≤120KB |
| P3 教师头像 | 师资 | 1:1 圆形 | 48×48 | **96×96** | PNG 透明底 | ≤20KB |
| P6 荣誉授牌（可选） | 荣誉墙点开看 | 4:3 | 343×257 | **686×514** | JPG | ≤150KB |
| 学校 logo | 首页左上 36×36 底块 | 1:1 | 36×36 | **72×72**（另需矢量） | SVG / AI / PNG 透明底 ≥1000px | 矢量优先 |
| P5 地图 | 到校路线 | 4:3 | 375×280 | 地图组件，不切图 | 腾讯地图组件 | — |

**统一要求**：① 一律 `object-fit:cover`，不拉伸；② 加载失败有灰块 + 相机图标占位，不许留白槽；③ 图片懒加载，首屏 1 张主视觉可预加载；④ 不用外链图床，全部本地静态资源。

---

## 六、图标规格

- **尺寸与线**：24×24 viewBox，stroke 1.75，圆头圆角，`stroke="currentColor"`（跟着文字色走，不改色）。
- **交付形态**：`icons/i-*.svg` 37 枚独立文件（可直接切图/改色/内联）+ `icons/_sprite.svg`（内联 `<use href="#i-xxx">`）。要 PNG 就 @2x 导出 **48×48**（脚本 `src/export_icons.py` 可复跑）。
- **落位尺寸**：导航/按钮 20px；卡片内 18px；空态 26px；入口底块内 22px；大按钮内 18px。入口图标底块 40×40（430 档 44×44），圆角 11px，底色 `--brand-soft`。
- **禁止**：emoji 当图标、多色插画图标、合成图（含文字的截图当图标）。

---

## 七、状态矩阵（每页都给了可落码的样张，不是只有正常态）

| 页 | 加载态 | 空态 | 错误/权限 | 其他 |
|:--|:--|:--|:--|:--|
| P1 首页 | 首屏骨架（占位与真实行高一致） | 课程整理中 + 打电话出口 | 加载失败 + 重试 | — |
| P2 列表 | 3 张卡骨架 | 该学段暂未招生 / 筛选无结果（两句分开） | — | 超长课程名 1 行省略；空值 `-` |
| P3 详情 | 图 + 标题 + 区块骨架 | 本期停招 + 看其他班型 | 加载失败 + 重试 | — |
| P4 表单 | 提交中（按钮 loading + 禁用） | （表单本体即初始态） | 边填边校验（手机号/区县） | 组件降级手填 + 提交成功结果页 |
| P5 路线 | 地图骨架 | 校方未填说明 + 打电话 | 地图失败 → 文字地址 + 复制 + 重试 | — |
| P6 环境 | 图位骨架（尺寸同真图） | 栏目整理中 + 换栏目 | — | 点图看大图，Esc/点背景关 |
| P7 FAQ | 5 条折叠骨架 | 搜不到 + 清空搜索 | — | 单开模式；合规表态句锁死 |
| P8 我的报名 | 验证后拉取骨架 | 该号无记录 + 去报名 | 验证码错误/过期（倒计时禁用） | 已放弃灰态 + 原因 + 重新报名 |
| A1 线索池 | KPI + 卡片骨架 | 从未有数据 / 筛选无结果 | 无权限（非本学段，说明原因） | 批量条选中浮出；手机号打码 |
| A2 线索详情 | 保存中 | — | 保存失败（原因码 + 重试 + 不清空）/ 只读（已放弃） | 留痕逐条显示 |
| A3 漏斗 | 图表骨架 | 本周期无数据 + 换周期 | 接口失败（说明用缓存 + 重试） | 口径三句写在图上 |
| A4 导出 | 导出中 | — | 失败（原因码 + 减小范围/重试）/ 无权限（灰项 + 原因） | 成功 toast + 留痕提示 |
| A5 设置 | 保存中 | — | 保存失败（错误码 + 回滚说明）/ 无权限（老师视角只读） | 成功 toast 3 秒 |

---

## 八、落码硬约束（技总 6 条逐条对应）

1. **三档不挤不截**：见第三节 + `自检报告.md`；每档间距/字号已给到值与变量名。
2. **主按钮位置与文案**：家长端＝hero 内通栏 + 粘底条（「立即报名」/「提交报名」/「约到校时间」）；后台＝卡片内「跟进」、详情「标记为已联系」、弹窗「确认导出 N 条」、设置粘底「保存设置」。**每屏只一处红**。
3. **图片**：宽高比 + @2x 像素 + 体积上限见第五节，切图按 @2x 出。
4. **图标**：SVG 可导出（`icons/`），要位图给 @2x 48×48。
5. **不做视频背景、不做复杂动效**：稿内动效只有四处——骨架 shimmer（1.4s 循环）、按钮按压（`hover-class`，100ms）、手风琴展开（`max-height` 220ms）、toast 淡入（260ms），全部纯 CSS，且都带 `prefers-reduced-motion` 降级。无 JS 动画、无视差、无视频背景、无 `backdrop-filter` 模糊。
6. **表单控件用系统原生**：稿上的输入框只是静态预览载体；落码直接用原生 `<input>` / `<picker>` / `<radio>` / `<checkbox>`，只改圆角 10px 与描边色 `#DDE3EC`（错误态 `--danger`），**不自绘光标、placeholder 与选择器**；高度取原生默认（≈44–48px），不硬锁死。

**另加四条落码提醒**：① 粘底条必须放文档流末尾（`position:sticky;bottom:0`），否则长截图与真机都错位；② 顶部 0–91px 是胶囊禁区，内容右边界按第三节；③ 后台不提供「删除线索」入口（只有主任可置无效），导出走后端二次鉴权；④ 报名表单不做注册/登录，隐私同意时间与版本随线索入库。

---

## 九、红线自检（逐字扫描，0 命中）

- **硬禁词**：第一、唯一、保过、包过、包录取、保录取、保证升学、保证录取、升学率、录取率、名额有限、状元、全国领先、独家、顶级、首选、100%、零风险、无条件录取 → **0**
- **软性词**：最、承诺、保证、包（"包含/打包"等正常词已白名单）→ **0**
- **扫描范围**：13 页页面文案 + 整页 textContent（含折叠未展开的答案、含设计注记）→ 页面 0 / 整页 0
- **另外三条设计期就规避**：不做线上支付入口（稿上明写「不提供线上支付」）；不做卖课/学位券；家长端不做注册（抖音授权即手机号）。
- **说明**：上一版注记里"不展示升学率"这类合规表态句本身含禁词，已改写为"不做升学数据与成绩比较展示"，保证逐字干净（改写记录在 `自检报告.md` 第四节）。

---

## 十、文案口径：A 栏学校必给 / B 栏我方拟稿（老板 10-27 22:19 定）

**规则**：业务事实类（学校才能给的）我方**一律不自拟**，稿上用灰底虚线框 `【待校方确认】` 占位，一个数字都不留；按钮文案、页面标题、提示语、空态与错误文案、字段说明、隐私勾选句属我方拟稿，正常书写供老板纠错。
**完整清单**：`文案清单.md`（A 栏 27 项逐条列"出现页 / 要学校给的字段 / 稿上现在的写法"；B 栏 10 组拟稿）。

A 栏占位覆盖：学校全称/简称/口号/简介/性质、招生季年份、学部与学段正式名称及年龄年级区间、课程名、学制、班额、寄宿走读、招生状态、收费表述、培养方向、师资、作息、报名材料、校址、交通说明、招生办电话与时间、荣誉名称与授牌单位年份、校园图片视频、FAQ 答案、隐私说明正文、区县列表、logo 源文件。

> 两处**未**改成占位并说明理由：① 「幼儿园/小学部/初中部/高中部」四个字样是任务书要求的"学段入口"结构位，不是学校专有事实，校方有正式叫法一句话替换；② 「义务教育阶段不组织任何形式的选拔性考试」是合规表态句（不是学校事实），已在稿上标"我方拟定，待校方确认"。

**8 条业务事实**（已 22:20 企微发老板，回一次我原地替换）：学校全称与简称口号 / logo 与实拍素材 / VI 主色禁忌色 / 招生学段与重点 / 报名按钮文案 / 收费是否上图（建议只放区间）/ 是否露电话微信 / 首屏卖点顺序。

## 十一、怎么复跑（换任何一处都不用手改 39 张图）

```bash
cd 育才招生小程序-版面稿
python3 src/build.py        # 重建 13 页 + 令牌页
python3 src/export_icons.py # 导出 37 枚图标 SVG
python3 src/shoot.py        # 三档实渲 + 元素级实量 → screenshots/
python3 src/design_qa.py P1-首页.html … --widths 375,390,430 --out src/qa_pages
python3 src/check.py        # 红线词 + 功能元素 + 机检汇总（全 0 才 exit 0）
python3 src/build_docs.py   # 重生成 索引.html + 自检报告.md
```

## 十二、版本记录

- **v1.1 · 2026-10-27 22:25（老板令改）**：文案两栏化——A 栏（学校必给）在 13 页上全部改为灰底虚线占位，删除所有自拟的学校事实（校名全称/学校性质/招生季年份/年龄年级/学制/班额/寄宿/收费数字/荣誉称号年份/师资教龄/地址电话/FAQ 答案）；新增 `文案清单.md`。机检复跑：design_qa 0 问题、红线词 0 命中、六项实量全 0。
- **v1 · 2026-10-27**：首版交付。家长端 8 页 + 后台 5 屏 + 令牌页 + 图标 37 枚 + 三档截图 78 张；design_qa 0 问题、红线 0 命中、六项机检全 0。
  修订痕迹：字号下限统一 12px（原 11.5/10.5 已升）；注释色压深至 `#626E80`（原 `#7A8598` 对比度 3.44 不达标）；金墨压深至 `#6E560E`（原 `#8A6F12` 在浅金底 4.42 差一点）；禁用态改「深字浅底」不用灰字降透明度；加载态保留文字 + 左侧转圈（不用透明字）；状态栏图标改纯 SVG（原电池伪元素横向溢出 3px）；弹窗关闭按钮去掉负 margin（横向溢出 12px）。