35 KiB
35 KiB
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 通用页面骨架
- 左侧主视觉区：logo、插画、立绘或主背景。
- 中央功能区：服务器条、表单、卡片、种族信息。
- 右侧辅助区：说明、属性、切换、次级入口。
- 底部操作区：主按钮、次按钮、说明文字。
- 不引入世界地图、战斗、门派等额外场景。
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、服务器条和主按钮。
- 重要插画可以缩短高度，但不能裁掉标题、表单和主按钮。
- 创建角色页的信息区必须优先保留，不允许为了塞卡片而挤压说明。
十、四场景落地约束
- 启动页只保留主标题、主视觉、进入按钮、加载提示。
- 登录页只保留账号、密码、记住登录/找回账号/设备校验、登录按钮，且只展示单服标识，不提供区服切换。
- 注册页只保留账号、密码、确认密码、昵称、设备绑定/协议确认、创建账号。
- 创建角色页必须包含种族选择、性别选择、名字输入和种族说明。
- 选中一个种族后，必须立即展示该种族的信息，不得再把信息藏在二级页。
- 性别只影响立绘、姿态和语音，不影响种族成长规则。
- 不加入地图、战斗、门派、背包等额外模块。
- 启动和登录两页允许使用更强的国风主视觉，但必须保持信息层级清楚，不能把按钮藏进复杂背景里。
- 画面基准为横版，不再按竖屏手机稿执行。
- 单服务器项目不得在任何页面出现“区”“分区”“切换区服”等字样。
七、动效规范
7.1 基础动效
- 页面切换：淡入淡出
0.25s - 0.35s - 弹窗出现：轻微上浮 + 淡入
0.2s - 按钮点击：缩放到
0.96 - 标签切换：高亮渐变过渡
7.2 视觉特效
- 角色头像可使用环形光效或气焰光晕。
- 关键数值弹出时可上浮并淡出。
- 战斗表现允许使用闪光、残影、冲击波等效果，但不能淹没文字。
八、资源约束
8.1 背景与插画
- 背景图优先使用低饱和、景深感强的国风场景。
- 复杂插画只适合做大区域背景，不适合放进密集信息区。
8.2 图标与装饰
- 图标风格要统一，尽量采用同一批描边与阴影规则。
- 装饰只用于增强识别，不可影响信息阅读。
8.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 启动/登录/注册/创建角色规范：对齐最新参考效果图与实现，启动页增加罗盘阵法，登录/注册改为居中面板，创建角色改为横向四种族卡片 + 信息面板 |
