# DeepSeek 招聘页 · 谷歌设计优化方案

> 可读版：[DeepSeek招聘页-谷歌设计优化方案.html](./DeepSeek招聘页-谷歌设计优化方案.html)
>
> 审的是当前页 [DeepSeek招聘职位技能分析.html](./DeepSeek招聘职位技能分析.html)。立场：Google Web 质量线（Search / Careers / Material 3），品牌仍归 DeepSeek，不把页面做成 Google.com，也不继续穿 Claude Academy 的衣服。
>
> **落地（2026-09-08）：** P0–P2 已写进交互页（白底 / Roboto / Chip / 方向 Tab / 高亮可关 / 笔记短卡片）。下文仍是当时的诊断与方案原文。

**评级 C+（实施前）。** 任务骨架对，身份穿错、对比与触控不达标、关键词三套语法叠在原文上。

## 诊断

| 层面 | 现状 | 应改到 |
|---|---|---|
| 身份 | 奶油纸 + 衬线 + 陶土 | 白底、无衬线、一枚主色 |
| 画布 | 整页 `overflow: hidden` | 文档流；列表可单独滚 |
| 密度 | 仪表盘过密 → 散文过疏 | 8dp 网格上的可扫结构 |
| 强调 | 粗体 / 斜体 /【】同时开 | 默认干净；最多 6 Chip；高亮可关 |
| 色 | 分类靠色点 | 分类用文字；主色只服务 CTA |
| a11y | 行偏矮、select 筛选 | 48dp、Chip、焦点环、AA 对比 |

原则：用 Google 的系统（网格、字阶、对比、任务流），穿 DeepSeek 该穿的衣服（冷、净）。

## Token（P0）

- Surface `#FFFFFF` / variant `#F8F9FA`
- 字 `#202124` / 次级 `#5F6368`
- Primary `#1A73E8`，容器 `#E8F0FE`（若坚持 DeepSeek 黑白：按钮填 `#202124`，链接仍用蓝）
- 字体：Roboto + Noto Sans SC；职位名 Google Sans / Roboto Medium 22–28；禁止衬线
- 行高 48–56dp；圆角 8 / 按钮 24

## 四个面

1. **顶栏：** Tab 用底边指示。文案「职位 / 技能笔记」。投递是主按钮。
2. **列表：** 搜索 48 高常驻；分类横滑 Chip；每行标题 +「北京 · 实习/全职」；选中蓝 50。
3. **JD：** 技能上提最多 6 Chip；多方向改为一次看一个；「高亮技能」开关用蓝 50，不加【】。
4. **笔记页：** 4–5 条短卡片 + 前 8 技能条。热力图不要加回。点条回筛选保留。

## 关键词

默认原文干净。文化词（开源、长期主义）不标。需要扫技能时开 Toggle，不要伪元素括号。

## 分期

- **P0** 换身份：去奶油/衬线/陶土，解锁 overflow，行高 48。
- **P1** 扫读：Chip 筛选、技能上提、方向锚点、文案。
- **P2** 笔记短卡片 + WCAG + 字体子集。

P0 可只改 `assets/ds-talent.css`，不必动 JSON 结构。