# UI-00 界面设计规范

> 文档类型：UI设计规范
> 版本：1.1
> 日期：2026-07-06
> 技术栈：Cocos Creator 3.8.8 + TypeScript
> 参考来源：`images/` 目录内截图
> 交付范围：仅 `启动 / 登录 / 注册 / 创建角色` 四个场景

---

## 一、设计总则

### 1.1 视觉关键词
- **黑金牌匾**
- **米白宣纸**
- **卷轴卡片**
- **古风写实**
- **强层级信息展示**
- **横版游戏优先**

### 1.2 视觉结论
- 主体不是单一深色面板，而是“深色背景 + 金边装饰 + 高对比插画”的混合结构。
- 标题、服务器条、按钮大多采用牌匾形态，形成强识别度。
- 信息区域以浅色大面板承载说明文本，适合横向布局中的左右分栏。
- 入口模块以大图卡片、角色立绘、服务器条和主按钮呈现，强调可点击、可浏览、可分组。
- 不使用底部固定导航作为一级入口。
- 游戏只有一个服务器，不存在区服、分区、跨区等概念。

### 1.3 不建议的风格
- 纯扁平现代风。
- 大面积高饱和霓虹色。
- 过度透明导致文字失焦。
- 过小的按钮和密集的边框装饰。
- 依赖鼠标悬停的交互表现。

---

## 二、色彩与层级

### 2.1 主色板

| 类别 | 色值 | 用途 |
|------|------|------|
| 背景深色 | `#0b0907` | 页面顶层背景、遮罩外层 |
| 面板深色 | `#3b2818` | 牌匾、服务器条、按钮外框 |
| 米白底色 | `#e8d8bf` | 注册表单、信息面板 |
| 浅纸色 | `#f8f0e2` | 输入框、次级内容区 |
| 金色描边 | `#d9b262` | 面板边框、标题框 |
| 暗金阴影 | `#8f6c3d` | 边框暗部、压边 |
| 朱红强调 | `#d83a2b` | 标识点、提示、状态灯 |
| 青蓝强调 | `#48b8e8` | 次级发光、装饰高光 |

### 2.2 文字层级

| 层级 | 色值 | 适用场景 |
|------|------|------|
| 一级标题 | `#f7e7b8` | 章节名、页面主标题 |
| 二级标题 | `#fff2dc` | 牌匾标题、弹窗标题 |
| 正文主字 | `#533415` | 米白底上的正文 |
| 正文次字 | `#725c42` | 辅助说明、注释 |
| 弱提示 | `#9a8665` | 不重要信息 |
| 绿色数值 | `#63c96f` | 正向收益、恢复、达成 |
| 红色数值 | `#d83a2b` | 伤害、损失、失败 |
| 蓝色数值 | `#48b8e8` | 技能名、特殊效果 |

### 2.3 层级原则
- 深色底负责“氛围”，米白底负责“阅读”。
- 金色负责“权重”和“可点击感”。
- 红绿蓝只用于关键数值和状态，不作为大面积背景色。

---

## 三、字体与排版

### 3.1 字号建议

| 用途 | 字号 |
|------|------|
| 页面主标题 | 34px - 52px |
| 牌匾标题 | 26px - 38px |
| 模块标题 | 20px - 26px |
| 正文内容 | 16px - 20px |
| 说明文字 | 12px - 16px |
| 辅助标签 | 11px - 14px |

### 3.2 排版规则
- 长文本优先使用左对齐，正文行高建议 `1.45 - 1.65`。
- 标题必须与背景形成强对比，避免压在复杂插画上。
- 数值和技能词可局部着色，但每段最多保留 2-3 种强调色。
- 手机端正文优先按段落阅读，不把整页塞成密集表格。

### 3.3 文字风格
- 标题偏硬朗、庄重。
- 正文偏清晰、温和、可连读。
- 数值表现要醒目，但不能盖过叙事文本。

---

## 四、页面结构

### 4.1 通用页面骨架
1. 左侧主视觉区：logo、插画、立绘或主背景。
2. 中央功能区：服务器条、表单、卡片、种族信息。
3. 右侧辅助区：说明、属性、切换、次级入口。
4. 底部操作区：主按钮、次按钮、说明文字。
5. 不引入世界地图、战斗、门派等额外场景。

### 4.2 主界面结构
- 启动页采用“黑色氛围底 + 巨型品牌标题 + 单服标识 + 登录按钮”的横版结构。
- 登录页采用“深色背景 + 巨型 Logo + 单服标识 + 大按钮”的横版结构。
- 注册页采用“左侧插画 + 右侧米白表单面板”的横版结构。
- 创建角色页采用“左侧种族卡与说明 + 右侧角色插画与属性”的横版结构。
- 不显示底部主导航，不显示战斗/地图/门派入口。

### 4.3 门派/管理页结构
- 本次交付不包含该类页面。

### 4.4 地图/风云录结构
- 本次交付不包含该类页面。

### 4.5 战斗页结构
- 本次交付不包含该类页面。

---

## 五、组件规范

### 5.1 牌匾标题
- 外形：横向长条、两端收尖或切角。
- 主体：深色底。
- 边框：金色外描边 + 暗金内压边。
- 文案：居中显示，字重偏高。

### 5.2 主按钮
- 用于核心操作，如“修炼”“结束战斗”“关闭”。
- 背景以浅金、米白、浅灰为主，避免过亮刺眼。
- 文字居中，按钮高度建议不小于 44px。
- 点击态使用轻微缩放或亮度变化，不依赖悬停。

### 5.3 次按钮
- 用于次级操作、切换标签、辅助入口。
- 颜色比主按钮更淡，边框比主按钮更轻。
- 与主按钮区分时，优先通过色阶和尺寸区分，不只靠文字。

### 5.4 图文卡片
- 图卡以竖向角色卡为主，比例接近人物立绘卡。
- 选角页种族卡必须在“选中态”与“未选中态”之间有明显差异。
- 选中一个种族后，右侧/下方必须同步显示该种族的说明信息。

### 5.5 弹窗
- 弹窗背景使用半透明黑遮罩。
- 弹窗主体优先米白或浅纸色。
- 标题固定在弹窗顶部牌匾位。
- 正文区支持长文本滚动，底部保留单一主操作按钮。
- 登录提示、命名冲突、种族未解锁等状态可以复用弹窗。

### 5.6 标签与筛选
- 标签采用短条牌匾式结构。
- 选中态可用高亮金边或浅底色。
- 未选中态应降低对比度，但仍需保持可读性。

### 5.7 底部导航
- 底部导航是一级入口，图标必须大、明确、稳定。
- 图标下方可带书法字或定制字形，但不能影响可点区域。
- 当前选中态必须一眼可辨，建议使用亮边、底纹或发光感。

---

## 六、手机端适配

### 6.1 设计原则
- 以横版游戏屏为主，设计基准使用 `1600 x 1000`。
- 必须同时兼容 `1366 x 768` 到 `1920 x 1200` 的常见横向分辨率。
- 所有核心页面必须先保证横版可用，再考虑更大屏。

### 6.2 安全区
- 左右两侧保留视觉呼吸区。
- 底部保留主按钮与说明文字的安全区。
- 主要按钮不要贴边放置。

### 6.3 点击区域
- 所有可点击元素最小交互区建议 `44px x 44px`。
- 图文卡片、服务器条、标签、关闭按钮都要留出冗余点击空间。
- 不把操作点做得过小，避免误触和疲劳。

### 6.4 长文本处理
- 战报、风云录、说明类文本必须支持纵向滚动。
- 长文本区域应与正文底色一致，减少视觉跳变。
- 文本过长时优先保留完整信息，不强行压缩字号到不可读。

### 6.5 窄屏规则
- 宽屏优先，小屏缩放时必须保留 Logo、服务器条和主按钮。
- 重要插画可以缩短高度，但不能裁掉标题、表单和主按钮。
- 创建角色页的信息区必须优先保留，不允许为了塞卡片而挤压说明。

---

## 十、四场景落地约束

1. 启动页只保留主标题、主视觉、进入按钮、加载提示。
2. 登录页只保留账号、密码、记住登录/找回账号/设备校验、登录按钮，且只展示单服标识，不提供区服切换。
3. 注册页只保留账号、密码、确认密码、昵称、设备绑定/协议确认、创建账号。
4. 创建角色页必须包含种族选择、性别选择、名字输入和种族说明。
5. 选中一个种族后，必须立即展示该种族的信息，不得再把信息藏在二级页。
6. 性别只影响立绘、姿态和语音，不影响种族成长规则。
7. 不加入地图、战斗、门派、背包等额外模块。
8. 启动和登录两页允许使用更强的国风主视觉，但必须保持信息层级清楚，不能把按钮藏进复杂背景里。
9. 画面基准为横版，不再按竖屏手机稿执行。
10. 单服务器项目不得在任何页面出现“区”“分区”“切换区服”等字样。

---

## 七、动效规范

### 7.1 基础动效
- 页面切换：淡入淡出 `0.25s - 0.35s`
- 弹窗出现：轻微上浮 + 淡入 `0.2s`
- 按钮点击：缩放到 `0.96`
- 标签切换：高亮渐变过渡

### 7.2 视觉特效
- 角色头像可使用环形光效或气焰光晕。
- 关键数值弹出时可上浮并淡出。
- 战斗表现允许使用闪光、残影、冲击波等效果，但不能淹没文字。

---

## 八、资源约束

### 8.1 背景与插画
- 背景图优先使用低饱和、景深感强的国风场景。
- 复杂插画只适合做大区域背景，不适合放进密集信息区。

### 8.2 图标与装饰
- 图标风格要统一，尽量采用同一批描边与阴影规则。
- 装饰只用于增强识别，不可影响信息阅读。

### 8.3 可维护性
- 页面结构必须模块化，标题、按钮、卡片、弹窗尽量复用组件。
- 新页面优先遵循本规范，不额外引入另一套视觉语言。

---

## 九、落地优先级

1. 先统一顶栏、牌匾、按钮、弹窗。
2. 再统一正文板、卡片、标签、底部导航。
3. 最后补动效和装饰纹理。

---

*UI设计规范 v1.1 | 2026-07-06 | 基于 `images/` 截图整理*