# 美术方向与动效规格（线框稿 · EVA 式克制线描 · 24fps）

> 生成时间：2026-09-10 · 配套：`docs/internal/DESIGN-OVERHAUL-PRE-RESEARCH.md`（排期与边界）
> 本文用途：把「线框稿 + 克制线描 + 动漫人物 + 24 帧动效」翻译成**可施工的规格**；其中 §5 是**可直接交给 Astra 的交付契约**。
> 待补输入：官方 DSH 网页的确切 URL/截图（你提供后并入 §1.1）。

---

## 1. 参考系（三层，已核实）

### 1.1 官方 DSH（代码级）
- 品牌元件：`@deepseek-ai/dsh-client-ui-primitives` 的 **`FishLogo`（鲸鱼标）** + **`BrandWordmark`（字标）**；官方品牌插件 `dsh-client-ui-brand-official` 只注册侧栏的 `sidebar.brand.mark` / `sidebar.brand.name` 两个插槽。
- 视觉底座：`dsh-client-ui-theme` 定义 **`--dsw-*` 令牌**（79 个公开语义别名，纯颜色层，亮/暗自动切换）。
- 结论：**官方语言 = 记号（鲸鱼）+ 克制排版 + 令牌化配色**——与"线框稿 + 克制色"的方向天然一致。

### 1.2 本项目首页现有令牌（可复用，别推翻）
`docs/landing/index.html` 的 `:root`：暖纸 `#F4F1EB` / 次纸 `#ECE8DF` / 墨 `#17171A` / 灰墨 `#5A5A60` / 浅墨 `#9B9BA0` / 实线 `#17171A` / 软线 `rgba(23,23,26,.16)` / **信号橙 `#E9470C`** / 橙墨 `#B23708`；`--max:1240px`、`--gutter:24px`；自述"现代主义·国际主义：纯色底+墨字、单一信号橙、12 列网格、1px 细线、无渐变无圆角"。

**关键判断：这套配色本身就是「线描 + 克制色」的现成实现。** 你新给的方向不需要推翻它，而是**从它长出来**——把水彩插画换成线稿插画，把动效从"渐显上浮"换成"24fps 线描绘制"。这是本次首页改造工作量可控的根本原因。

### 1.3 现有角色资产
- 定妆：`docs/banner.jpg`（1672×941）——**蓝发蓝眼的水彩/厚涂动漫少女**，深蓝底、金线星图、手中书本与记忆卡匣。
- 六幕宣传图：`docs/screenshots/promo/promo-1..6-*.png`（1280×720，共 3.11 MB）。
- 生图规范：`artifacts/logo/BANNER-SERIES-PROMPTS.md`（含"角色辨识内核：蓝发蓝眼的动漫少女"与逐幕 prompt）。

---

## 2. 风格定义：线框稿（Wireframe）× EVA 式克制线描

### 2.1 可执行色板（4 主色 + 3 灰阶）

| 角色 | 值 | 用途 | 占比 |
| --- | --- | --- | --- |
| 纸 | `#F4F1EB` | 底 | — |
| 墨 | `#17171A` | 结构线、正文 | 线为主 |
| 灰墨 / 浅墨 | `#5A5A60` / `#9B9BA0` | 标注、次级线、禁用态 | ~15% |
| **信号橙** | `#E9470C`（墨版 `#B23708`） | **唯一强调色**：焦点、当前态、关键数字 | **≤5%** |
| 警示黄 | `#E8C584`（仅警示条） | 限制/已知问题 | 极少量 |
| 蓝（仅角色） | 发丝 `#2B4A8B`→`#6E8FD8`、瞳孔 `#2B6FD8` | **只给角色**，不参与 UI | 极少量 |

**铁律**：任一屏内「信号橙」出现面积不超过 5%；蓝**只属于角色**，若 UI 里出现蓝，视觉上就会被读成"另一个角色"。

### 2.2 线宽层级（工程图语言）

| 层级 | 线宽 | 用在哪 |
| --- | --- | --- |
| 网格/标注线 | 0.75px（`stroke-width:.75`） | 坐标网格、尺寸线、引线 |
| 结构线 | 1px | 分区、卡片边、表头 |
| 轮廓线 | 1.5px | 角色外轮廓、图标主形 |
| 重点线 | 2.5px | 标题下划线、当前页签、CTA 边框 |

### 2.3 工程图元素（把"可审计/有证据链"的产品性格画出来）

- **尺寸标注**：`|←—— 128k ——→|` 形式的 token 配额标注；
- **剖面线**：45° 细排线（`repeating-linear-gradient`）用于"归档/压缩"这类被压缩过的区域；
- **编号圆点**：`①②③` 与模块编号（M1–M7 已有叙事基础）；
- **CAUTION 条**：黄底黑字的横条，用于"已知限制""默认关闭"；
- **图注**：等宽小字 `FIG.03 — 三层记忆的数据流`。

### 2.4 禁止项（与现有 landing 自述一致，写成硬约束）
渐变、投影、玻璃（`backdrop-filter`）、圆角卡片、装饰性光效、emoji 堆砌、"营销腔"形容词。

---

## 3. 角色规范（水彩 → 线稿）

- **辨识内核不可丢**：蓝发蓝眼。（沿用 `BANNER-SERIES-PROMPTS.md` 已确立的口径）
- **迁移要点**：①以轮廓线为主，蓝色只保留在**发丝高光与瞳孔**两处（着色面积 ≤ 角色面积 12%）；②服装从厚涂简化为 **3-4 组结构线**（衣领/袖口/裙摆/腰带）；③去掉水彩晕染与星光粒子，改用**工程图排线**做阴影；④手中的书本/记忆卡匣保留——它们是"记忆"的具象道具。
- **表情/姿态最小集**（每套都要出定妆）：①静立持书（Hero 基准）②呼吸（3 帧循环）③眨眼（3 帧）④侧目看屏幕 ⑤抬手点化（技能固化）⑥翻页（日志/检索）。
- **定妆图先出**：一张正面全身 + 一张 3/4 侧（线稿，透明底 PNG，2x）。**这是后续所有素材的基准**，也是 Astra 的输入。

---

## 4. 动效规范（24fps）

### 4.1 帧率与时序表

| 场景 | 时长 | 帧数（24fps） | 循环 | 优先级 |
| --- | --- | --- | --- | --- |
| Hero 线稿自绘（线条从 0 画出） | 1.5s | 36 | 一次性 | P0 |
| 角色呼吸 | 3s | 72 | 循环 | P0 |
| 角色眨眼 | 0.25s | 6 | 每 4-8s 随机触发 | P0 |
| 数据流动线（观察→检索→注入→证据） | 2s | 48 | 循环 | P1 |
| 章节转场（出现/擦除） | 0.6s | 14 | 一次性 | P1 |
| 六幕宣传图轮播 | 每幕 5s | — | 循环 | P2 |

### 4.2 技术形态与分工（关键：可拼装）

| 形态 | 谁做 | 优点 | 代价 |
| --- | --- | --- | --- |
| **SVG 路径自绘**（`stroke-dashoffset`） | **我** | 矢量无极缩放、体积小（KB 级）、可随主题变色、可无障碍降级 | 画不了手绘角色细节 |
| **PNG 序列帧**（24fps，透明底） | **Astra** | 手绘质感最好、逐帧可控 | 体积大（需严格预算）、要用 JS 播放器 |
| **WebM / MP4**（无音轨，循环点对齐） | Astra（或我压缩） | 体积/质量平衡好 | 兼容与自动播放需处理，不能透明（可用 chroma/遮罩近似） |
| **CSS `steps()` 逐帧** | 我 | 实现简单、无 JS | 只适合短循环 |

**推荐组合（分工清晰、可并行）**：角色表演 = **Astra 出 PNG 序列（透明底）**；线条/网格/数据流/版式动效 = **我出 SVG + CSS**；最后由我在 `index.html` 里合成并做性能与无障碍降级。

### 4.3 性能与无障碍预算（硬指标）

- 首屏动效总体积：**≤400 KB 原始 / ≤250 KB gzip**；移动端首屏只允许 **2 个动效同屏**。
- **LCP 不退化**：动效资源在 `load` 之后启动（`requestIdleCallback`），首帧静态图先行（`<img>` 占位，尺寸写死避免 CLS）。
- **`prefers-reduced-motion: reduce` 必须降级为静态首帧**（现有 landing 已有该分支，扩展即可）。
- 24fps 序列帧播放器：预解码前 N 帧后立即播放，其余流式解码；切到后台标签页暂停。

---

## 5. 交给 Astra 的交付契约（可直接转发）

**任务**：为 `dsh-auto-memory` 官网首页制作 **24fps 角色动画**（线框稿 + EVA 式克制线描风）。

**风格约束**
1. 线描为主，纸白底（`#F4F1EB`）+ 墨线（`#17171A`）；允许的彩色只有两处：发丝与瞳孔的蓝（`#2B4A8B`–`#6E8FD8` / `#2B6FD8`），以及**面积 ≤5%** 的信号橙（`#E9470C`）点缀。
2. 禁止：渐变、投影、玻璃质感、圆角卡片、水彩晕染、星光粒子。阴影用 45° 工程排线表达。
3. 角色辨识内核：**蓝发蓝眼的动漫少女**（参考 `docs/banner.jpg`），服装简化为 3-4 组结构线。

**交付物清单**
1. **定妆图 2 张**：正面全身 + 3/4 侧；线稿；透明底 PNG；2x（角色高 ≥1600px）。
2. **动画序列帧**（三段，各自独立目录）：
   - `hero/` Hero 线稿自绘：36 帧，一次性，末帧=完整静帧；
   - `idle/` 呼吸+眨眼：呼吸 72 帧循环（首尾帧必须一致）+ 眨眼 6 帧（独立段，随机触发）；
   - `gaze/` 侧目/抬手点化：可选，24-48 帧。
3. **格式**：PNG-24 + alpha，sRGB，**不烘焙背景**；命名 `hero_0000.png … hero_0035.png`（4 位补零，从 0000 起）。
4. **分层**：角色层与道具层（书/卡匣）分开导出，便于我做视差与合成。
5. **可选**：整段 WebM（VP9，无音轨，`yuv420p`），循环段首尾帧对齐。

**验收清单**
- [ ] 循环段首尾帧**逐像素一致**（无跳帧感）
- [ ] 透明边缘无白边/灰边（导出前做 1px 收缩）
- [ ] 锚点固定：角色脚底中线在每帧同一像素坐标（我会给画布与锚点坐标）
- [ ] 单帧 ≤150 KB（2x、透明）；单段总 ≤8 MB
- [ ] 线条粗细与 §2.2 的线宽层级一致（轮廓 1.5px / 结构 1px @1x）
- [ ] 无渐变、无投影、无玻璃（对照 §5 风格约束逐条）
- [ ] 提供一张"动效节拍表"：每段的关键帧号与其含义（便于我对齐 SVG 图层）

**画布与锚点（我这边定的）**
- 画布：`1200×1200` @1x（导出 2x = 2400×2400），透明底；
- 角色锚点：脚底中线位于 `(600, 1080)` @1x；角色高约 900px；
- 头顶安全区：上留 120px（给标注线与编号圆点）。

**我这边的集成点**
- 挂载位：`docs/landing/index.html` 的 `<section id="hero">` → `<div data-dam-anim="hero">`（占位与回退首帧 `<img>` 已预留）；
- 播放策略：IntersectionObserver 进入视口才启动；`prefers-reduced-motion` 直接显示静态首帧；
- 体积超预算时我会先做 WebP/AVIF 转码或降帧（24→12fps）处理，并同步告知。

---

## 6. 分工与我的能力边界（诚实评估）

| 工作 | 谁 | 说明 |
| --- | --- | --- |
| 版式、网格、线稿风格的系统化（SVG/CSS） | **我** | 这是我的强项：矢量线条、自绘动画、响应式与双语、性能预算 |
| 数据流/标注/网格/转场等**非角色**动效 | **我** | SVG `stroke-dashoffset` + CSS `steps()`，体积 KB 级 |
| 角色**手绘逐帧表演**（呼吸/眨眼/发丝/翻页） | **Astra** | 逐帧手绘的质感与"高级感"目前更靠得住；我给规格、给画布、给锚点、负责合成 |
| 角色**线稿化再设计**（水彩→线稿） | Astra（或你指定的画师/模型） | 若你另有角色设定图，以你的为准 |
| 页面工程、集成、性能与无障碍降级 | **我** | 与 §4.3 预算绑定 |

一句话：**"24 帧动效"里，线条与版式部分我现在就能做；角色的逐帧表演交给 Astra 更稳——我把交接契约写好了，两边可以并行。**

---

## 7. 时间线重估（AI 协作节奏）

| 阶段 | 内容 | AI 协作下的现实耗时 | 卡点 |
| --- | --- | --- | --- |
| D0 | 设计令牌冻结（色板/线宽/间距/字号）+ 定妆图线稿化 | 0.5 天 | 需要你 1 次评审 |
| D1-D2 | 界面一期：令牌落地 + 7 个组件原语 + 设置台分组 + 幽灵键/焦点态修复 | **2 天**（可发版） | 我能连续产出；你目视签收 |
| D3 | 面板 IA 重排（插槽 spike → 侧栏面板/右侧文档页/对话内状态条） | 1 天 | spike 结果未知（有回退） |
| D4 | 首页线稿版**静态稿**（版式 + 线稿插画位 + 工程图元素） | 1 天 | 需要角色线稿就位（可先用占位） |
| D5 | 动效叠加：SVG 自绘 + 数据流 + 转场（我做） ⊕ Astra 序列帧（到货即插） | 1 天 + 等 Astra | **美术排期是外部依赖** |
| D6 | 22 张界面图重拍 + 六幕宣传图更新 | 0.5 天 | 需 UI 冻结 + 重启 dsh web（你操作） |
| D7 | 文档终校（此刻才对功能说明逐条核对）+ 发版 | 1 天 | 你说的"最后再核对功能说明"就在这一步 |

**结论**：**「两三天」对界面一期（D1-D3）成立**；整套（含首页美术、动效、重拍、文档终校）串行约 **7 天**，其中真正的外部依赖是 **Astra 的动画排期** 与 **你的评审轮次**，不是我写代码的速度。

---

## 8. 现在需要你给的 3 件东西

1. **官方 DSH 网页的确切 URL 或截图**（我全网搜到的都是第三方介绍文，没有官方落地页；拿到后我把它的版式/色彩并入 §1）。
2. **角色基准**：用 `docs/banner.jpg` 这张水彩版去线稿化，还是你另有角色设定图/三视图？（有的话给我文件路径）
3. **是否现在就出风格探针**：我可以立刻生成 2-3 张探针图（线稿 + EVA 色板 + 工程图元素，含"角色站在线框稿舞台上"的 Hero 构图），先定调再进入 D1——需要你在「Ark9 生图」面板点一次批准。