# 《村口镇妖炮》UI 设计需求文档（Design Brief）

> **提交对象**：Claude 设计平台 `https://claude.ai/design/`
> **用途**：据本文档产出《村口镇妖炮》整套视觉资产——Logo、界面、割草战场、五维养成面板、神将立绘、妖怪图鉴、首充/礼包弹窗、赛季排位、买量素材。
> **版本**：v1 · 2026-07 · 对应 `youxi/paid/2`（v3 标准首款；策划报告 `index.html` / 可玩 Demo `demo.html`，已通过 22 项端到端验证）
> **玩法一句话**：单指按住拖动瞄准，村口灶王炮自动开火，山海经妖潮成片倒下（割草皮，10 秒上手）——长线追求是**镇妖力**：法器/符箓/神将/炮台/图鉴五条养成线都通向它，它决定打到第几关、排位第几名、离赛季独占皮肤还差多远。

---

## 0. 给设计平台的总说明（请先读）

1. 本文是**需求说明书（brief）**，不是成品规范。第 5、6、7 节列出的所有图形与动效都需要你（设计平台）产出。
2. **配色系统、字体、风格定案权全部交给你。** 本文只给**情绪基调、目标用户、功能与语义约束**（见第 2、3 节），**不指定任何具体色值**。请你在交付物中主动回填：完整色彩系统（含语义说明、亮暗双模式、WCAG AA）、字体与排版规范（**数字字体尤其重要**——镇妖力总值是全作视觉中枢）、风格定调（3.5 节三选一或融合）、设计令牌成套。
3. 现有 Demo 用 **emoji + 纯 CSS 占位**（妖怪 = 🔪🌂🏮🐒🌳💧🦊👹、神将 = 🧓🔥👁🎣、炮台 = 🔫/⚡+🧨、镇妖力胶囊 = 金框圆角条、灰剪影 = 亮度滤镜、排位榜 = 表格），本次设计目标是升级为**统一美术风格**的正式资产。**占位仅表示「这里需要一张什么图」。**
4. **平台统一层（边界）**：右上角 `💰💎⚡ + 🌟天赋` 是 SDK 统一 HUD（铜钱/仙玉/香火/符箓面板），**不在重绘范围**，所有屏幕为其预留右上 150×34px；三通道解锁弹窗同样只留位不重绘（见第 11 章）。
5. **唯一硬性约束**：手机**竖屏**（9:16）、**单指可玩**、面向**中国大陆年轻用户**、符合微信/抖音小游戏审美与合规。合规红线见第 10 章（**妖怪必须奇趣不恐怖、抽卡概率入口一级可达、限时稀缺真实执行——动笔前先读**）。

---

## 1. 项目概述

| 项 | 内容 |
|---|---|
| 游戏名 | **《村口镇妖炮》** |
| 一句话玩法 | 按住拖动瞄准、灶王炮自动开火的割草塔防（皮）× 五维镇妖力养成（骨）× 同段位赛季排位（压）。伤害吃镇妖力、妖潮强度吃关卡表——打不过就去变强，变强了回来碾压。 |
| 品类 | 竖屏 · 单指 · **塔防割草 + 养成**（对标《向僵尸开炮》付费结构 + 《无尽冬日》首充独占模型） |
| 平台 | 微信小游戏（IAP 主战场）/ 抖音小游戏（IAA 层 + 素材测试） |
| 核心情绪 | **弹幕清屏的割草爽** + **镇妖力上涨的变强瘾** + **「差一步就拿到」的渴望**（哪吒剪影/碎片进度/别人已有的皮肤） + **排位被超的紧迫** |
| 一句话调性 | 村口烟火气 × 山海经奇幻——不是阴森的斩妖除魔，是「全村老小站在灶王炮后面看你打年兽」的热闹守护感。 |
| 视觉双中枢 | ① **镇妖力总值胶囊**（常驻顶部，一切增量向它飘字汇聚）② **割草战场**（妖潮/弹幕/村门） |

> **本作与系列前作的本质区别**（设计重心）：free 系是单局玩法游戏，视觉围着「一局」转；本作是**数值成长游戏**，视觉必须围着「变强」转——镇妖力数字的质感、每次 +X 飘字的仪式感、五维面板的成长可视化、商品详情页的增量标注，这些「数值的脸面」与战场同等重要。

---

## 2. 目标用户（设计须贴合）

- **地区：中国大陆。** 题材符号全部本土化：村口老槐树、灶王炮、门神、香火、山海经妖怪（饕餮/山魈/狐妖/应龙）、神将（哪吒/二郎神/姜子牙）。
- **主力人群：18–35 岁**，男性略多（数值成长向），下沉与一二线通吃；《向僵尸开炮》类玩家迁移盘 + 国潮题材增量盘。
- **审美与共鸣点**：
  - **国潮不是水墨清冷，是庙会热闹**：高饱和的朱砂红/鎏金/青金，年画质感、门神构图、灯笼与鞭炮元素——「守村」的集体烟火气。
  - **数值的爽要看得见**：+3000 镇妖力的飘字要有分量（字号/描边/金光），战力墙「需 ≥2560」的红字要有压迫，碾压通关时的伤害数字瀑布要过瘾。
  - **可截图传播**：满屏弹幕清妖潮、镇妖力从 4 位数跳 5 位数、排位第 1 的金身炮台，都是天然素材。
- **情绪诉求**：变强、割草解压、收集（图鉴/神将）、攀比（排位）。

---

## 3. 设计基调与情绪（配色方案请你提出）

### 3.1 情绪关键词
`庙会式的热闹守护` · `弹幕清屏的爽` · `镇妖力上涨的变强瘾` · `差一步可得的渴望` · `战力墙前的憋屈与翻盘` · `排位攀比的好胜`

### 3.2 最关键的视觉命题：「数值的仪式感」
- **镇妖力胶囊**：全作视觉中枢——金属鎏金质感、数字滚动动画、增量飘字向它汇聚；任何界面都能看到它或它的余光。
- **增量标注体系**：商品/升级按钮上的「+X 镇妖力」是统一的视觉组件（金色小字+⚔ 图标），从法器面板到首充弹窗全局一致。
- **欲望物的三种「可见」**：灰剪影（哪吒——可点预览，带「❓可预览」角标呼吸光）/ 进度条（轰天雷碎片 12/20）/ 别人已有（排位榜上的金身炮台 ✨）——三种预告组件成套设计。
- **战力墙的压迫与翻盘**：关卡入口「需 ≥2560」红字 + 出战前战力对比条；碾压通关时妖潮成片蒸发的爽感演出。

### 3.3 语义配色需求（务必色盲友好）
| 语义 | 用途 | 现占位 | 约束 |
|---|---|---|---|
| **镇妖力金** | 总值胶囊、增量飘字、+X 标注 | 金字金框 | 全作最高贵度，鎏金质感非土豪金 |
| **战力墙红** | 「需 ≥X」、差值提示、排位下降 | 红字 | 压迫但引导（配「去变强」按钮），不绝望 |
| **独占紫金** | 首充哪吒、赛季独占皮肤、SSR | 金边+limitTag 红标 | 「渠道唯一」的稀缺贵气 |
| **限时倒计时红** | 首充 72h、赛季剩余、限购标 | 红字 | 真实紧迫（合规：过期真下架） |
| **五维各色** | 法器/符箓/神将/炮台/图鉴分区 | — | 五维图标语义分色，面板可辨 |
| **妖潮阶级** | 小妖/精英/妖王 | 体型区分 | 血条+描边双编码，色盲可辨 |
| **村门告急** | 村门血条低于 30% | 红渐变 | 心跳感，触发复活弹窗前奏 |
| **获胜庆典** | 通关、首通、保底出金 | — | 鞭炮红金爆彩 |

### 3.4 请你回填的色彩说明清单
主/辅/强调色及语义、中性色阶、亮暗双模式（养成面板/商店/排位需两套；战场随章节换色）、WCAG AA、数字字体（等宽变体优先，滚动动画友好）。

### 3.5 风格候选（三选一或融合，说明理由）
1. **年画庙会风**（推荐骨架）：门神构图、朱砂红鎏金、粗描边 Q 版，妖怪奇趣像年画里的小鬼——热闹、本土、买量辨识度最高。
2. **国潮插画风**：更精致的山海经图鉴质感，收集页面向可加分。
3. **像素妖怪风**：低成本备选，弹幕表现好但付费界面贵度不足。
> 推荐：**1 为骨架 + 2 做图鉴/神将立绘的精致层**。

---

## 4. Logo 设计需求
- **中文主标题**：「村口镇妖炮」（五字；「炮」字可做炮口喷火/镇字压妖的动势）。
- **气质**：庙会热闹 + 一门威风的老炮 + 探头的萌系妖怪——守护感非杀气。
- 交付形态：方形小游戏图标（灶王炮+妖潮 C 位，微信 144/抖音 288）、横版字标、单色反白、买量角标版。

---

## 5. 界面 / 页面清单（逐屏设计，竖屏 9:16）

> 屏 A–F 结构已在 demo.html 验证，请做视觉升级；屏 G–L 为正式版扩展出概念稿。

### 屏 A · 主界面（最重要——「变强的家」）
1. **镇妖力胶囊**（顶部 C 位，SDK HUD 右上留位）；
2. **神将双位**：已上阵神将立绘牌 + **哪吒灰剪影位**（❓可预览角标，P14 组件）；
3. **出战区**：当前关卡 + 「推荐镇妖力 X（当前 Y ✓/✗）」对比行 + 出战大按钮 + 扫荡/排位双按钮；
4. **五维导航**：法器/符箓/炮台/图鉴/商店（商店带礼包红点）；
5. 法器面板（升级按钮 = 价格 + **+X 镇妖力**双行）与轰天雷碎片进度条。

### 屏 B · 割草战场
妖潮从上压向村门（下）；炮台+瞄准扇形指示；弹幕与命中数字；妖怪血条；村门血条（顶部通栏）；波次/击杀/铜钱计数。**要点**：清屏爽感的粒子预算给足；妖王出场有压迫演出；伤害数字分级（普通/暴击/割草连杀）。

### 屏 C · 战力墙 & 失败结算
入口红字「需 ≥2560」；失败页「还差 1,240 镇妖力」大字 + 「去变强」主按钮（引导五维）+ 直接再战次按钮——**憋屈要转化为升级动机而非挫败**。

### 屏 D · 首充弹窗（D6 转化关键屏，单独精做）
哪吒立绘 C 位 + 「终身限购 1 次」标 + 72h 倒计时 + 价值清单（划线 ¥69 → ¥6，11.5 倍角标）+ 「+3000 镇妖力」增量大字 + 支付按钮。**要点**：贵而可信，划线价有依据感；倒计时真实（过期态也要设计：已下架灰卡）。

### 屏 E · 商店（月卡/礼包带/抽卡入口）
月卡卡片（每日仙玉+无限快速扫荡+免广告，「卖变强速度」的文案位）；¥18/30/68 礼包带（每张标 +X 镇妖力 + 每周限购标）；神将祈愿入口（保底进度条常驻）。

### 屏 F · 守村排位（P15）
段位徽章（青铜村/白银村…）+ 赛季倒计时 + 50 人榜（我行高亮、前 10 金身皮肤 ✨ 已装备可见）+ 名次奖励表（前 10 独占/11–40 仙玉/末 10 降段）+ 段位继承说明。

### 屏 G · 神将祈愿（抽卡演出）
金光预兆分级（普通/紫光/金光）、保底计数「再抽 X 次必出」进度条、概率公示一级入口、SSR 出货全屏演出。

### 屏 H · 妖怪图鉴
4 页 ×8 妖：已收录彩卡 / 未收录剪影格；每页集齐 +5% 全局镇妖力的进度奖励条；应龙终极格的特殊质感。

### 屏 I · 符箓树（SDK 天赋面板皮肤化）
SDK 统一弹窗结构不改，提供符箓卷轴风图标与描边皮肤。

### 屏 J · 妖王协力 / 百鬼夜行（正式版）
同组伤害榜 + 全服进度条 + 限时角标。

### 屏 K · 三通道弹窗（SDK 统一组件 · 只留位）
复活（🚪村门要破了）/ 香火 / 翻倍共用；本作提供顶部情绪插画位（妖潮压门特写）建议。

### 屏 L · 分享卡双模板
求助（「村门要破了！来帮我顶一波」）/ 挑衅（「本周守村第 7，你村第几？」+ 镇妖力大字）。

---

## 6. 图形资产清单（全量，交付按此核对）

- **镇妖力组件套**：总值胶囊（常态/滚动/暴涨三态）、+X 飘字（三档字号）、增量标注小组件、战力对比条。
- **炮台**：基础 🔫 → 轰天雷 ⚡（紫品）→ 阶跃三形态（青铜/玄铁/鎏金）→ **金身灶王皮肤**（赛季独占，金光待机）。
- **神将 4 位**：土地公/哪吒/二郎神/姜子牙——立绘 + 头像牌 + **灰剪影态**（P14）+ 上阵光环特效；哪吒需「首充独占」金边规格。
- **妖怪 32 只（4 页 ×8）**：demo 第一页 8 只（刀妖/伞妖/灯笼鬼/山魈/树精/水鬼/狐妖/饕餮）先行——小妖/精英/妖王三体型；图鉴彩卡 + 剪影态；奇趣不恐怖。
- **战场**：村门（完好/受损/告急三态）、章节背景（村口/乱葬岗/黑风林/妖市…6 章换色）、弹幕与命中粒子、妖王出场演出。
- **商业化组件**：首充弹窗全套、月卡卡片、礼包带卡片（+X 增量标注）、保底进度条、概率公示页、限购/倒计时/已下架标签组、划线价排版规范。
- **排位组件**：段位徽章 5 档、榜单行（我/普通/前 10 带皮肤展示）、奖励表、降段警示。
- **货币**：铜钱/仙玉/香火（与 SDK HUD 语义对齐，可题材化为铜板/玉牌/香炉）。
- **UI 通用**：按钮/卡片/页签/红点/toast；数字字体规范。

---

## 7. 动效需求（关键 9 条）

| # | 动效 | 要点 |
|---|---|---|
| 1 | **镇妖力增量飘字→胶囊汇聚** | 全作核心反馈：金字上飘 + 胶囊数字滚动 + 微震，三档强度（+35 / +1200 / +3000） |
| 2 | **割草清屏** | 弹幕连杀的妖怪成片蒸发 + 铜钱迸溅；妖王血条破碎 |
| 3 | **战力墙对比** | 出战前「当前 vs 需求」进度条填充；不足时红脉冲 |
| 4 | **首充弹窗入场** | 哪吒立绘登场 + 划线价划除动画 + 倒计时翻牌 |
| 5 | **抽卡演出** | 金光预兆三级 + 保底进度条推进 + SSR 全屏出货 |
| 6 | **村门告急** | 血条红闪 + 门体裂纹递进 + 复活弹窗前奏定格 |
| 7 | **排位变动** | 「↑3」名次上移动画；被超越推送样式 |
| 8 | **图鉴入册** | 首杀妖怪飞入图鉴格 + 「+40 镇妖力」联动飘字 |
| 9 | **首通庆典** | 鞭炮红金爆彩 + 新系统解锁卷轴展开 |

---

## 8. 买量素材需求（实机可复现红线）

- 15 秒切片脚本 ×3：
  1. **割草爽感流**：满屏妖潮 → 弹幕清屏 → 妖王倒地（「一根手指守住全村」）；
  2. **战力碾压对比流**（数值品类王牌素材）：同一关，镇妖力 250 被平推 → 升到 5850 回来无伤碾压（「打不过？回来变强」）；
  3. **图鉴收集流**：山海经妖怪逐格点亮 → 应龙剪影（「集齐 32 只上古凶兽」）。
- 通用：竖版封面 ×3、信息流方图 ×2、CTA 卡（「村口那门炮，等你来点」）。

---

## 9. 交付规格

| 项 | 规格 |
|---|---|
| 屏幕设计稿 | 1179×2556 基准，安全区标注；主界面/首充/排位出亮暗两版 |
| 图标 | 微信 144×144 / 抖音 288×288，8% 出血 |
| 神将/妖怪 | 矢量或 2048px 立绘 + 头像切片 + 剪影态 |
| 组件 | 镇妖力组件套/商业化组件出规范页（间距/字号/状态） |
| 命名 | `zy_[类别]_[名称]_[状态]@2x.png`（如 `zy_hero_nezha_silhouette@2x.png`） |
| 格式 | PNG-24 + 源文件；动效 Lottie 或逐帧 + 时长/缓动标注 |

---

## 10. 合规与内容红线（动笔前必读）

1. **妖怪形象**：山海经妖怪 Q 版奇趣化，**无恐怖/血腥/惊悚跳脸**；「斩妖」= 烟花式消散 + 收进图鉴（收服感非杀戮感）。
2. **抽卡合规**：概率公示入口一级可达且视觉不可弱化；保底计数常驻；**未成年人默认关闭抽卡与礼包消费**（设计未成年态：入口置灰+说明）。
3. **限时稀缺真实**：首充 72h 过期即下架（需设计「已下架」态）；「最后 X 小时」不得循环复现；划线价需有单卖价依据（价值清单逐项标价）。
4. **神像题材分寸**：哪吒/二郎神等按民俗神话趣味化演绎，避免宗教场所/仪轨的写实呈现。
5. **广告/分享**：插屏仅自然断点；分享可选不强制。
6. **文案基调**：热闹守护向（「全村都指着你了」），不焦虑施压；失败文案自嘲（「不怪你，怪妖多」）。

---

## 11. 平台统一层衔接（SDK 组件边界）

1. **经济 HUD**：右上 `💰铜钱 💎仙玉 ⚡香火 + 🌟符箓`，预留 150×34px；镇妖力胶囊与其错位排布（胶囊居中）。
2. **三通道解锁弹窗**：结构与按钮顺序不可改（▶广告/🙋分享/💎付费/免费出口）；仅提案顶部情绪插画与压暗处理。
3. **符箓面板**：SDK 统一列表弹窗，提供 4 枚符箓图标即可。
4. demo 的模拟支付/模拟广告为开发占位，正式版走平台支付（服务端验单）与真实广告，无需设计。

---

## 12. 交付验收核对单（给设计平台的自检）

- [ ] 色彩系统（语义表/亮暗/AA）+ 数字字体规范回填
- [ ] 风格定调三选一已说明理由
- [ ] Logo 四形态，小尺寸校验通过
- [ ] 屏 A–L 12 屏齐全（A–F 为 demo 已验证结构的升级）
- [ ] **镇妖力组件套**（胶囊三态/飘字三档/增量标注/对比条）有规范页
- [ ] **欲望物预告三组件**（灰剪影+预览角标 / 碎片进度条 / 「别人已有」展示）成套
- [ ] 首充弹窗全套（含过期已下架态）+ 划线价排版规范
- [ ] 神将 4 立绘（哪吒独占金边+剪影态）+ 妖怪第一页 8 只三体型
- [ ] 排位组件（段位徽章/榜单行/奖励表/降段警示）
- [ ] 9 条动效标注；「镇妖力飘字汇聚」有专项说明
- [ ] 买量素材 3 脚本分镜（实机可复现）
- [ ] 第 10 章红线逐条自检（妖怪不恐怖/抽卡合规/限时真实/未成年态）
- [ ] SDK 统一层留位在所有屏落实

---

*本 brief 与 `index.html`（策划报告：D1–D7 需求侧七件套、四张必交表、P1–P16 矩阵）、`demo.html`（交互结构依据，22 项 E2E 通过）配套使用；三者冲突时以策划报告为准。*