鹰眼探秘 (EagleEye) · 设计系统Legacy format
WeChat 小游戏 · 文字侦探推理 · Canvas 纯代码渲染 · 六线程三十案
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
WeChat 小游戏 · 文字侦探推理 · Canvas 纯代码渲染 · 六线程三十案
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
一、品牌
| 属性 | 值 |
|------|-----|
| 产品名 | 鹰眼探秘 |
| 副标题 | 迷案揭晓 |
| 类型 | 文字侦探推理 · 互动问答 |
| 平台 | 微信小游戏 (WeChat Mini Game) |
| 渲染 | Canvas 2D · 零图片UI素材 |
| 色调 | 根据六线程动态切换（共6套配色方案） |
---
二、六线程配色体系 (THREADS)
### T1 · 暗潮 — 海洋·异域·蓝绿
| 令牌 | 色值 | 用途 |
|------|------|------|
| --bg | #121622 | 全屏底色 |
| --surface | #1a1f26 | 卡片/面板 |
| --card | #22273A | 卡片填充 |
| --text | #e4e1d8 | 主文字 |
| --muted | #8A877F | 辅助文字 |
| --accent | #C9A84C | 强调色/按钮/选中 |
| --accent-hover | #dbb850 | 悬停/发光 |
| --border | #3a3d4a | 边框 |
| --success | #3d8b5c | 推理正确 |
| --error | #c44b4b | 推理错误 |
| --stamp | #a8321d | 印章/标记 |
| --gold | #c9a84c | 金色装饰 |
| --btn-text | #1b1917 | 按钮文字 |
### T2 · 夜行列车 — 金属·蒸汽·暖铜
| 令牌 | 色值 |
|------|------|
| --bg | #1a1512 |
| --surface | #24201a |
| --card | #2a241c |
| --text | #e6dcc8 |
| --muted | #a09682 |
| --accent | #c99a3e |
| --accent-hover | #ddb050 |
| --border | #363023 |
| --success | #6b8f5c |
| --error | #a8321d |
| --stamp | #8a2a18 |
| --gold | #c99a3e |
| --btn-text | #1a1512 |
### T3 · 青天鉴 — 木头·墨迹·竹黄
| 令牌 | 色值 |
|------|------|
| --bg | #1e1a12 |
| --surface | #2a241a |
| --card | #2e281e |
| --text | #e8ddc8 |
| --muted | #9a9078 |
| --accent | #b8956a |
| --accent-hover | #d4b896 |
| --border | #3d3428 |
| --success | #6b8f5c |
| --error | #a8321d |
| --stamp | #c44536 |
| --gold | #b8956a |
| --btn-text | #1e1a12 |
### T4 · 紫宸录 — 织金·朱砂·紫金（规划中）
| 令牌 | 色值 |
|------|------|
| --bg | #1a1218 |
| --surface | #261e22 |
| --card | #2c2228 |
| --text | #ede0cc |
| --muted | #a09080 |
| --accent | #c4946a |
| --accent-hover | #e4b894 |
| --border | #3a2e32 |
| --success | #5a9a6c |
| --error | #b84030 |
| --stamp | #b84030 |
| --gold | #c4946a |
| --btn-text | #1a1218 |
### T5 · 异闻录 — 星空·神纹·星蓝（规划中）
| 令牌 | 色值 |
|------|------|
| --bg | #101828 |
| --surface | #1a2440 |
| --card | #1e2a48 |
| --text | #e0dcc8 |
| --muted | #8090a8 |
| --accent | #c4a060 |
| --accent-hover | #e4c880 |
| --border | #2a3450 |
| --success | #50b8a0 |
| --error | #c04040 |
| --stamp | #c04040 |
| --gold | #c4a060 |
| --btn-text | #101828 |
---
三、全局品牌色（首页标题·所有线程统一）
| 令牌 | 色值 | 用途 |
|------|------|------|
| --brand-title | #c42020 | "鹰眼探秘"主标题 |
| --brand-subtitle | #b83030 | "迷案揭晓"副标题 |
| --brand-blood | #8b1515 | 血滴装饰 |
| --brand-shadow | #6b1010 | 标题阴影 |
---
四、字体层级
| 层级 | 字体栈 | 字号 | 字重 | 用途 |
|------|--------|------|------|------|
| 主标题 | serif (STKaiti/KaiTi) | 42-52px | 900 | 首页"鹰眼探秘" |
| 副标题 | serif (STKaiti/KaiTi) | 18px | 700 | "迷案揭晓" |
| 案件名 | sans-serif | 22-34px | 700-900 | 案件标题 |
| 正文 | sans-serif | 14-15px | 400 | 简报/回答 |
| 辅助 | sans-serif | 11-12px | 400 | 编号/提示 |
| 按钮 | sans-serif | 18-20px | 700 | 按钮文字 |
| T3 签押体 | serif | 14px | 400 | 状纸/文书风格 |
---
五、组件规格
### 按钮
| 类型 | 尺寸 | 圆角 | 线程变化 |
|------|------|------|----------|
| 主按钮 | 220×54 | 26px(T1)/8px(T2)/4px(T3) | 每线程圆角不同 |
| 次按钮 | 180×44 | — | 描边色=accent |
| 卡片按钮 | W-40×62 | 6-10px | 悬浮微升+阴影 |
### 卡片
| 类型 | 背景 | 边框 |
|------|------|------|
| 嫌疑人卡片 | --card | --accent 1.5px |
| 线索卡片 | --bg | --accent 2px |
| 场景图框 | 黑色半透明 | --border 2px |
### 导航
| 元素 | 样式 |
|------|------|
| 顶栏 | 半透明背景 + 案子号/剩余次数 |
| 分隔线 | 线程主题装饰线 |
| 进度条 | 分段式（非连续色块） |
| 印章 | 圆形/方形·线程独有文字 |
---
六、动效规范
| 动效 | 时长 | 缓动 | 线程变化 |
|------|------|------|----------|
| 按钮按下 | 150ms | ease-out | scale 1.0→0.94 |
| 卡片入场 | 200-250ms | ease-out | 展开/生长动画 |
| 打字机 | 逐字3帧 | — | 伴随键盘声 |
| 粒子背景 | 持续循环 | linear | 尘埃/蒸汽/墨迹/金粉/星尘 |
| 震动（错误） | 350-400ms | — | ±3-5px 水平震动 |
---
七、场景图规格
| 属性 | 规格 |
|------|------|
| 尺寸 | 768×1344 (9:16 竖屏) |
| 格式 | JPG 质量 25-75% |
| 文件大小 | <200KB |
| 每线程数量 | 5张 (Lv1-Lv5) |
| 风格 | 时代匹配的手绘/工笔/壁画风格 |
---
八、人物立绘规格
| 类型 | 尺寸 | 格式 | 文件大小 |
|------|------|------|----------|
| 侦探立绘 | 220×275 | PNG 透明 | <75KB |
| 嫌疑人头像 | 120×120 | PNG 透明 | <35KB |
---
九、音效体系
| 音效 | 时长 | 格式 | 大小 |
|------|------|------|------|
| BGM | 14-20s 循环 | MP3 64kbps | <130KB |
| SFX | <500ms | WAV | <35KB |
---
十、线程音效 Mapping
| 线程 | BGM BPM | BGM 风格 | 专属 SFX |
|------|---------|----------|----------|
| T1 | 130 | 快节奏 | click/clue/correct/wrong/combo |
| T2 | 110 | 爵士·黑胶 | +steam/punch/telegraph/rail/whistle |
| T3 | 95 | 古筝·笛箫 | +gavel/bamboo/brush/gong/drum |
| T4 | 88 | 编钟·琵琶 | +bell/scroll/vermillon/dharma_drum/golden_bell |
| T5 | 100 | 筝琶·钟磬 | +celestial/talisman/stardust/thunder/sutra |
---
最后更新: 2026-06-27 | T1-T3 已实现 | T4-T5 规划中
Use with MCP
Don't have the MCP? Install it here