611 行
35 KiB
Markdown
611 行
35 KiB
Markdown
# UI-00 界面设计规范
|
||
|
||
> ⚠️ **本文档已废弃（Deprecated）**
|
||
>
|
||
> 自 2026-07-09 起，所有 UI/UX 设计规范以 **GDD-36 UI与UX设计规范** 为准。
|
||
> 本文档保留仅作历史参考，不再更新。
|
||
>
|
||
> → 请查阅：`docs/12_美术需求/GDD-36-UI与UX设计规范.md`
|
||
|
||
---
|
||
|
||
> 文档类型：UI设计规范
|
||
> 版本：1.6
|
||
> 日期：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.2.1 启动页结构
|
||
|
||
启动页为游戏首屏，采用**全屏深色氛围底 + 顶部阵法罗盘 + 居中品牌标题 + 主按钮 + 底部加载进度**的纵向居中结构。
|
||
|
||
#### 布局示意图（ASCII 线框）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ╭─────────────╮ │
|
||
│ │ 八卦罗盘 │ ← 顶部阵法装饰，缓慢旋转 │
|
||
│ ╰─────────────╯ │
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 洪荒大陆 │ ← 主标题，黑金牌匾 │
|
||
│ │ 以能量为修为... │ ← 副标题 │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ 进入洪荒 │ ← 主按钮，金边装饰 │
|
||
│ └─────────────────────┘ │
|
||
│ │
|
||
│ 无任务引导 · 无独立经验条 · 离线可恢复 │
|
||
│ │
|
||
│ ┌────────────────────────────────────┐ │
|
||
│ │ █████████████░░░░░░░░░░░░░░░░░░░░░ │ ← 资源加载进度条 │
|
||
│ └────────────────────────────────────┘ │
|
||
│ 正在载入洪荒资源... 26% │
|
||
│ │
|
||
│ 点击屏幕任意处进入洪荒 │
|
||
└─────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 区域划分
|
||
|
||
| 区域 | 位置 | 高度占比 | 说明 |
|
||
|------|------|---------|------|
|
||
| **阵法罗盘** | 顶部居中 | 18% | 金色八卦/刻度装饰，持续缓慢旋转，营造仙侠氛围 |
|
||
| **品牌标题区** | 中上部 | 22% | 黑金牌匾承载「洪荒大陆」主标题与副标题 |
|
||
| **主按钮区** | 中部 | 10% | 「进入洪荒」主按钮，金边四角装饰，可呼吸发光 |
|
||
| **特性说明** | 按钮下方 | 5% | 小字说明游戏核心特性 |
|
||
| **加载进度区** | 底部 | 8% | 进度条 + 百分比文字，加载完成后自动跳转登录页 |
|
||
| **点击提示** | 最底部 | 3% | 提示用户可点击屏幕任意处跳过加载 |
|
||
|
||
#### 色彩应用
|
||
|
||
| 元素 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 启动页背景 | `#0b0c15` 加深色光晕 | 深色氛围底，顶部叠加金色/棕色光晕 |
|
||
| 远景山脉剪影 | `#151821` / `#0d0e14` | 多层山峦剪影，增强场景纵深感 |
|
||
| 罗盘外环 | `#d9b262` 透明度 90 | 金色圆环，由小矩形拼接成环 |
|
||
| 罗盘内环 | `#8f6c3d` 透明度 120 | 暗金内环 |
|
||
| 罗盘符文 | `#d9b262` | 八卦方向符文，正方向字号加大 |
|
||
| 主标题牌匾 | `#1a120c` 底 + `#d9b262` 边框 | 与战斗页顶栏牌匾同族 |
|
||
| 主标题文字 | `#f7e7b8` | 一级标题色，加粗 |
|
||
| 副标题文字 | `#e8d8bf` | 二级标题色 |
|
||
| 主按钮底 | `#2a1f14` | 深色底，金色边框 |
|
||
| 主按钮文字 | `#f7e7b8` | 加粗，醒目 |
|
||
| 特性说明 | `#9a8665` | 弱提示色 |
|
||
| 进度条填充 | `#d9b262` | 金色填充 |
|
||
| 进度条边框 | `#8f6c3d` | 暗金压边 |
|
||
| 进度文字 | `#9a8665` | 加载中弱提示，完成后变为 `#f7e7b8` |
|
||
|
||
#### 交互规则
|
||
|
||
- **自动跳转**：启动页加载模拟约 4.2 秒后自动跳转 `Login` 场景。
|
||
- **点击跳过**：用户点击屏幕任意处可立即进入登录页。
|
||
- **罗盘动画**：罗盘入场缩放淡入，之后持续 60 秒旋转一周。
|
||
- **按钮光效**：主按钮外框持续呼吸发光，吸引点击。
|
||
- **进度模拟**：进度从 0% 递增至 100%，文字同步更新为 `正在载入洪荒资源... N%`。
|
||
|
||
#### 实现文件
|
||
|
||
- 场景：`client/assets/scenes/Splash.scene`
|
||
- 脚本：`client/assets/scripts/ui/scenes/SplashScreen.ts`
|
||
|
||
### 4.3 门派/管理页结构
|
||
- 本次交付不包含该类页面。
|
||
|
||
### 4.4 城镇/野外移动交互
|
||
|
||
> 本节此前标注"不包含该类页面"，现随城镇/野外实时场景（效果图见 `docs/效果图/城镇内走动效果_高清.png`、`野外探索_效果图_高清.png`）与实时位置同步（TDD-11）的引入正式补充。
|
||
|
||
- **移动方式：点击移动（Click-to-Move），不做虚拟摇杆**。玩家点击地面任意可达点，角色自动寻路（客户端 A* 寻路，基于 Cocos TiledMap 碰撞层）走向目标点，途中播放行走骨骼动画循环，到达后播放待机动画。
|
||
- 不采用摇杆的理由：移动端不占用额外屏幕区域给摇杆，横屏古风UI（黑金牌匾风格）留给信息展示；点击移动是同类古风/挂机手游的通用交互，学习成本低。
|
||
- 途中点击新目标点：立即重新寻路，取消原路径，无需先到达再重新点击。
|
||
- 遇到障碍物/其他玩家角色：寻路自动绕行，不允许穿模；其他玩家角色本身不参与碰撞阻挡（避免城镇拥挤时寻路死锁），仅作为视觉可见对象。
|
||
- 移动时的位置广播不受输入方式影响：客户端按 TDD-11 §5.1 心跳频率广播当前位置/朝向/动作状态，服务端/其他玩家看到的表现与是否使用摇杆无关。
|
||
- 城镇内的可交互对象（NPC/传送点/坊市摊位）用点击直接触发交互面板，若距离过远则先自动寻路靠近再触发。
|
||
|
||
### 4.5 战斗页结构
|
||
|
||
战斗界面采用**横版左右对峙**布局，以全自动ATB即时制为核心（详见 GDD-03）。玩家不参与战斗决策，界面聚焦于"观战体验"——实时展示双方状态、ATB行动序列、战报文字，并提供「一键完成」与「逃跑」两个操作入口。
|
||
|
||
#### 4.5.1 整体布局（ASCII 线框图）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||
│ [境界·炼气期] [阵营:光明] ⚔ 战斗中 · 第 7 动 [阵营:暗黑] [境界·金丹期] │ ← 顶栏信息条（牌匾式）
|
||
├─────────────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ │
|
||
│ │ ╭─────╮ │ ──── VS ──── │ ╭─────╮ │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ │ 我方 │ │ ★ 神通对决 · 天地异象 ★ │ │ 敌方│ │ │
|
||
│ │ │ 立绘 │ │ │ │ 立绘│ │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ ╰─────╯ │ │ ╰─────╯ │ │
|
||
│ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ ┌─ HP ──────────────┐ ┌─ HP ──────────────┐ │
|
||
│ │ ████████████░░░░░ │ 72% │ █████░░░░░░░░░░░░ │ 31% │ ← 血条
|
||
│ └───────────────────┘ └───────────────────┘ │
|
||
│ ┌─ 能量 ────────────┐ ┌─ 能量 ────────────┐ │
|
||
│ │ ██████████░░░░░░░ │ 60% │ ███░░░░░░░░░░░░░░ │ 18% │ ← 能量条
|
||
│ └───────────────────┘ └───────────────────┘ │
|
||
│ │
|
||
│ ┌─ ATB ────────────────────────────────────────────────────────┐ │
|
||
│ │ 我方 ████████████████████░░░░░░░░ 82% │ │
|
||
│ │ 敌方 ██████████████░░░░░░░░░░░░░░ 58% │ │ ← ATB 速度条
|
||
│ └──────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ 〔铁爪传〕铁爪裹挟血月之力，三式连划划破虎气，斩开鬼族的阴身！暴击！ │ │
|
||
│ │ 〔幽灵〕阳气侵蚀（天赋触发）：白昼残念的阳气从地底涌出，灼烧着血脉…… │ │
|
||
│ │ 〔铁爪传〕猎爪·三式 → 幽灵 612 伤害（暴击！） │ │
|
||
│ │ 〔幽灵〕阴魂索命 → 铁爪传 287 伤害 │ │
|
||
│ │ 〔铁爪传〕天赋触发：猎食本能觉醒，目标猎食标记 +1 层 │ │
|
||
│ │ ... │ │ ← 实时战报滚动区
|
||
│ └───────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ ⚡ 一键完成 │ │ 设 置 │ │ 逃 跑 │ │ ← 底部操作区
|
||
│ │ 倒计时 8s │ │ │ │ 成功率35% │ │
|
||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.5.2 区域划分
|
||
|
||
| 区域 | 位置 | 高度占比 | 说明 |
|
||
|------|------|---------|------|
|
||
| **顶栏信息条** | 顶部 | 8% | 牌匾式横条，居中显示"⚔ 战斗中 · 第 N 动"，两侧显示双方境界/阵营标识 |
|
||
| **角色立绘区** | 中上部 | 35% | 左右分栏，各放一方角色立绘（半身或全身），中间"VS"分隔 |
|
||
| **状态条区** | 立绘下方 | 12% | 双方 HP 条 + 能量条，左右对称排列 |
|
||
| **ATB 速度条区** | 状态条下方 | 10% | 横向双行进度条，分别显示双方 ATB 填充进度 |
|
||
| **战报滚动区** | 中下部 | 25% | 米白底面板，实时滚动战斗文字（左对齐，支持纵向滚动） |
|
||
| **底部操作区** | 底部 | 10% | 三个按钮横排：一键完成（主按钮）/ 设置（次按钮）/ 逃跑（次按钮） |
|
||
|
||
#### 4.5.3 色彩应用
|
||
|
||
| 元素 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 顶栏牌匾底色 | `#3b2818` | 与登录页牌匾统一 |
|
||
| 顶栏牌匾边框 | `#d9b262` | 金色描边 |
|
||
| 顶栏文字 | `#f7e7b8` | 一级标题色 |
|
||
| 战斗背景 | `#0b0907` 加场景插画 | 深色氛围底，可叠加半透明场景图（山林/洞府/擂台） |
|
||
| VS 分隔装饰 | `#d9b262` + 发光 | 金色 + 青蓝高光 `#48b8e8` |
|
||
| HP 条（我方） | `#63c96f` → `#d83a2b` | 绿色→红色渐变，低于 30% 变红并闪烁 |
|
||
| HP 条（敌方） | `#d83a2b` | 红色，始终警示色 |
|
||
| 能量条 | `#48b8e8` | 青蓝色，与技能/能量体系视觉一致 |
|
||
| ATB 条（我方） | `#63c96f` | 绿色，满条时高亮闪烁 |
|
||
| ATB 条（敌方） | `#d83a2b` | 红色，满条时警示 |
|
||
| 战报滚动区底色 | `#f8f0e2`（浅纸色） | 米白底，保证文字可读性 |
|
||
| 战报文字 | `#533415`（正文主字） | 左对齐，行高 1.5 |
|
||
| 伤害数值 | `#d83a2b` | 红色，暴击加粗放大 |
|
||
| 恢复数值 | `#63c96f` | 绿色 |
|
||
| 技能名 | `#48b8e8` | 蓝色强调 |
|
||
| 一键完成按钮 | 金色描边 `#d9b262` + 浅金底 | 主按钮样式，高亮可点时发光 |
|
||
| 一键完成（未就绪） | 灰色 `#725c42` + 暗边框 | 不可点击态，显示倒计时 |
|
||
| 逃跑按钮 | `#3b2818` 底 + `#d9b262` 边框 | 次按钮样式 |
|
||
| 境界/阵营标识 | `#f7e7b8` 文字 + `#8f6c3d` 底框 | 小型牌匾标签 |
|
||
|
||
#### 4.5.4 关键 UI 元素详细说明
|
||
|
||
**① 顶栏信息条**
|
||
- 形态：横向牌匾，两端切角，与启动页标题牌匾同族组件。
|
||
- 内容：左=我方境界标签（如「炼气期」），中=「⚔ 战斗中 · 第 N 动」，右=敌方境界标签。
|
||
- 阵营标识：境界标签下方用小圆点或图标标注阵营（光明/暗黑/中性），光明用 `#f7e7b8`，暗黑用 `#d83a2b`，中性用 `#9a8665`。
|
||
|
||
**② 角色立绘区**
|
||
- 左侧我方面向右，右侧敌方面向左，形成对峙感。
|
||
- 立绘使用角色创建页同规格素材（半身或全身，带透明底）。
|
||
- 立绘底部可叠加淡色光晕/气焰，颜色与阵营一致。
|
||
- PVE 战斗：敌方立绘使用怪物图鉴素材；PVP 战斗：使用对方角色立绘。
|
||
- 立绘区域可播放简单的攻击/受击动画（缩放+位移），但不影响信息阅读。
|
||
|
||
**③ HP 条与能量条**
|
||
- 每条宽度占屏幕 30%-35%，高度 16-20px。
|
||
- HP 条上方用小字标注「HP 数值/最大值」，字体 12px，颜色 `#f7e7b8`。
|
||
- 能量条标注「能量 数值/最大值」，字体 12px。
|
||
- HP 低于 30% 时条体变红并每 0.5s 闪烁一次，提示危险。
|
||
- HP 条使用圆角矩形，外框 `#8f6c3d` 暗金压边。
|
||
|
||
**④ ATB 速度条**
|
||
- 采用双行横向进度条，上下排列。
|
||
- 左侧标签：我方角色名 / 敌方角色名，字体 14px。
|
||
- 进度条填充动画平滑（0.3s 线性插值），满条瞬间触发发光效果。
|
||
- 满条后进度条短暂高亮（`#d9b262` 金光闪烁 0.3s），然后归零重新填充。
|
||
- 可在条体上叠加当前行动标记（如一个小型⚔图标移至最右端表示即将行动）。
|
||
|
||
**⑤ 实时战报滚动区**
|
||
- 容器：米白底面板 `#f8f0e2`，外框金色描边 `#d9b262`，圆角 8px。
|
||
- 内容：每条战报为一行，格式为「〔角色名〕技能描述 → 目标 数值伤害/效果」。
|
||
- 文字样式：正文色 `#533415`，技能名 `#48b8e8`，伤害 `#d83a2b`，恢复 `#63c96f`。
|
||
- 新战报从底部插入，自动滚动到最新一条；支持手动上滑查看历史。
|
||
- 天赋触发、暴击、Boss 阶段变化等特殊事件使用加粗+左侧图标标记。
|
||
- 战报区高度约占屏幕 25%，最少可显示 4-5 行。
|
||
|
||
**⑥ 一键完成按钮**
|
||
- 主按钮样式：金色描边 `#d9b262` + 浅金底色，高度 48px，宽度 180px。
|
||
- **未就绪态**：灰色底 `#725c42`，文字「还需等待 Ns」，不可点击。
|
||
- **就绪态**：高亮金色发光，文字「⚡ 一键完成」，点击后跳过剩余战斗。
|
||
- **已使用态**：灰色，文字「已完成」，不可点击。
|
||
- 按钮旁可显示道具消耗提示（如「速战令 ×1」）。
|
||
|
||
**⑦ 逃跑按钮**
|
||
- 次按钮样式：深色底 `#3b2818` + 金色边框 `#d9b262`，高度 48px，宽度 140px。
|
||
- 文字：「逃跑」+ 当前成功率百分比（如「逃跑 35%」）。
|
||
- 点击后立即尝试逃跑（若已预设阈值则自动触发，此按钮为手动触发入口）。
|
||
- 逃跑成功：屏幕淡出 + 结果弹窗；逃跑失败：按钮短暂变灰 1s 后恢复。
|
||
|
||
**⑧ 设置按钮**
|
||
- 次按钮样式，位于一键完成与逃跑之间。
|
||
- 点击展开设置面板（弹窗），可调整逃跑阈值、战报显示速度、是否自动滚动等。
|
||
|
||
#### 4.5.5 战斗结果弹窗
|
||
|
||
战斗结束后弹出结果面板：
|
||
|
||
```
|
||
┌──────────────────────────────────────┐
|
||
│ ⚔ 战 斗 结 束 ⚔ │ ← 牌匾标题
|
||
│ │
|
||
│ 【 胜 利 】 │ ← 结果文字（胜利/失败/平局）
|
||
│ │
|
||
│ ┌────────────────────────────────┐ │
|
||
│ │ 战利品 │ │
|
||
│ │ · 妖晶 × 32 │ │ ← 奖励列表
|
||
│ │ · 幽灵骨髓碎片 × 1 │ │
|
||
│ │ · 荣耀积分 +30 │ │
|
||
│ └────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────┐ │
|
||
│ │ 战斗回顾 │ │
|
||
│ │ 总行动: 18 动 | 用时: 12.4s │ │ ← 战斗统计
|
||
│ │ 我方伤害: 4,820 | 承伤: 2,160 │ │
|
||
│ └────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────┐ │
|
||
│ │ 确 认 │ │ ← 主按钮
|
||
│ └────────────┘ │
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
- 背景：半透明黑遮罩 + 结果面板（米白底 `#e8d8bf`，金色边框）。
|
||
- 胜利：文字 `#63c96f` 绿色，可叠加光芒动效。
|
||
- 失败：文字 `#d83a2b` 红色，叠加碎裂/暗淡效果。
|
||
- 平局：文字 `#9a8665` 弱提示色。
|
||
- 确认按钮：主按钮样式，点击关闭面板返回原场景。
|
||
|
||
#### 4.5.6 动效规范（战斗专属）
|
||
|
||
| 动效 | 触发 | 表现 | 时长 |
|
||
|------|------|------|------|
|
||
| 攻击动画 | 任一方行动 | 立绘短暂前冲+缩放 1.05→1.0 | 0.3s |
|
||
| 受击动画 | 被命中方 | 立绘短暂后退+闪红（`#d83a2b` 半透明叠加） | 0.2s |
|
||
| 暴击特效 | 暴击命中 | 屏幕轻震+文字放大弹出 | 0.4s |
|
||
| 治疗特效 | 恢复 HP | 绿色粒子上浮 +HP 数值弹出上飘 | 0.5s |
|
||
| ATB 满条 | 行动条满 | 金色光圈扩散 + 条体高亮 | 0.3s |
|
||
| 天赋触发 | 天赋生效 | 角色光环闪现 + 战报特殊标记 | 0.5s |
|
||
| Boss 阶段变化 | HP 降至阈值 | 全屏震动+场景色调变化 | 1.0s |
|
||
| 战斗结束 | 一方 HP≤0 | 胜方立绘放大居中 + 败方淡出 | 1.0s |
|
||
| 逃跑成功 | 逃跑判定通过 | 我方立绘快速移出画面 +「逃跑成功」文字 | 0.5s |
|
||
|
||
#### 4.5.7 手机端适配要点
|
||
|
||
- 横版优先，设计基准 `1600 × 1000`。
|
||
- 立绘区在窄屏下可缩短高度，但不可裁切头部和武器关键部分。
|
||
- 战报区在窄屏下保持最少 3 行可见，支持滚动。
|
||
- 按钮最小交互区 `44px × 44px`，间距不小于 12px。
|
||
- HP/能量条在窄屏下可缩短宽度但保持比例可读。
|
||
- ATB 条在窄屏下可合并为单条对比视图（上下排列不变，宽度自适应）。
|
||
|
||
---
|
||
|
||
## 五、组件规范
|
||
|
||
### 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. 最后补动效和装饰纹理。
|
||
|
||
---
|
||
|
||
## 十一、启动 / 登录 / 注册 / 创建角色横版落地补充
|
||
|
||
> 本章节针对当前客户端实现做补充约束，与 §4.2 共同构成四场景验收标准。所有界面均基于 1280×720 横版基准，采用深色氛围底 + 金边装饰 + 米白宣纸面板的黑金牌匾风格。
|
||
|
||
### 11.1 启动页（Splash）
|
||
|
||
- 全屏深色氛围底 `#0b0c15`，叠加顶部金色光晕与多层山峦剪影。
|
||
- 顶部中央八卦罗盘阵法装饰，持续缓慢旋转。
|
||
- 中央黑金牌匾标题「洪荒大陆」，副标题「以能量为修为，以机遇写命运」。
|
||
- 金色「进入洪荒」主按钮，四角装饰，带呼吸发光。
|
||
- 特性说明：「无任务引导 · 无独立经验条 · 离线可恢复」。
|
||
- 底部金色进度条，文字格式「正在载入洪荒资源... N%」。
|
||
- 点击屏幕任意处或加载模拟完成后进入登录页。
|
||
- 实现文件：`client/assets/scripts/ui/scenes/SplashScreen.ts`
|
||
|
||
### 11.2 登录页
|
||
|
||
- 中央米白宣纸表单面板，顶部「登录」黑金牌匾。
|
||
- 账号/密码输入框，密码框支持隐藏显示。
|
||
- 「记住账号」复选框 + 「忘记密码？」文字按钮。
|
||
- 金色「登录」主按钮。
|
||
- 底部三个图标按钮：「游客登录」「找回账号」「设备校验」。
|
||
- 「洪荒公告」信息框，展示版本/玩法提示。
|
||
- 底部服务器信息栏：「当前服务器：洪荒1服 流畅」+ 「切换服务器」按钮。
|
||
- 登录成功后跳转创建角色页。
|
||
- 实现文件：`client/assets/scripts/ui/scenes/LoginScreen.ts`
|
||
|
||
### 11.3 注册页
|
||
|
||
- 中央米白宣纸表单面板，顶部「注册」黑金牌匾。
|
||
- 账号（4-16字）、密码（6-16字）、确认密码、昵称（2-8字）输入框。
|
||
- 「绑定当前设备」复选框。
|
||
- 「我已阅读并同意《用户协议》与《隐私政策》」复选框。
|
||
- 金色「创建账号」主按钮 + 「返回登录」次按钮。
|
||
- 底部「小提示」框：说明创角仅选种族、隐藏天赋需自行发现。
|
||
- 注册成功后跳转登录页。
|
||
- 实现文件：`client/assets/scripts/ui/scenes/RegisterScreen.ts`
|
||
|
||
### 11.4 创建角色页
|
||
|
||
- 顶部「选角」黑金牌匾，副标题「初始仅定种族，天赋与职业靠机遇」。
|
||
- 中部横向四个种族卡片：人族、妖族、神族、幽冥族。
|
||
- 卡片使用种族主题色描边，选中态加深底色并高亮边框。
|
||
- 选中种族后，下方深色信息面板展示：
|
||
- 种族名称与描述
|
||
- 种族天赋
|
||
- 能量名称
|
||
- 初始世界
|
||
- 种族特性
|
||
- 隐藏天赋
|
||
- 信息面板右侧显示能量漩涡图标与能量名称。
|
||
- 底部左侧「返回」按钮，中央提示「创角仅选种族，不选职业」。
|
||
- 底部右侧金色「进入出生地」主按钮。
|
||
- 实现文件：`client/assets/scripts/ui/scenes/CharacterSelectScreen.ts`
|
||
|
||
---
|
||
|
||
*UI设计规范 v1.6 | 2026-07-04 | 基于参考效果图与当前客户端实现整理*
|
||
|
||
---
|
||
|
||
## 版本记录
|
||
|
||
| 版本 | 日期 | 变更内容 |
|
||
|------|------|---------|
|
||
| v1.0 | 2026-07-04 | 初始版本：覆盖启动/登录/注册/创建角色四个场景的视觉规范 |
|
||
| v1.1 | 2026-07-06 | 微调排版与措辞 |
|
||
| v1.2 | 2026-07-06 | 新增 §4.5 战斗界面设计规范：含布局线框图、色彩应用、关键 UI 元素（双方立绘、HP/能量条、ATB 速度条、战报滚动区、一键完成/逃跑/设置按钮、境界/阵营标识）、战斗结果弹窗、战斗专属动效规范、手机端适配要点；对齐 GDD-03 战斗系统设计 |
|
||
| v1.3 | 2026-07-06 | 补充§4.4"城镇/野外移动交互"：正式确定移动方式为点击移动+客户端 A* 寻路，不做虚拟摇杆；说明与 TDD-11 实时位置同步的关系 |
|
||
| v1.4 | 2026-07-06 | 补充创建角色页规范：明确要求中央角色全身立绘展示，并在种族选择区附近增加男/女性别切换控件，且选中性别需与立绘一致 |
|
||
| v1.5 | 2026-07-04 | 新增 §11 四场景横版落地补充：启动/登录/注册布局、创建角色效果图白名单、深潜裔分支、DragonBones 骨骼预览要求 |
|
||
| v1.6 | 2026-07-04 | 重写 §11 启动/登录/注册/创建角色规范：对齐最新参考效果图与实现，启动页增加罗盘阵法，登录/注册改为居中面板，创建角色改为横向四种族卡片 + 信息面板 |
|
