GDD-36 UI与UX设计规范

文档类型：设计文档（UI/UX）版本：v2.0 日期：2026-07-09 技术栈：Cocos Creator 3.8.8 + TypeScript 替代文档：UI-00-界面设计规范 v1.6（本文档生效后 UI-00 废弃）决策引用：✅160（地图命名统一）、✅164（天启阵营分化命名）

一、设计总则

1.1 视觉关键词

黑金牌匾
米白宣纸
卷轴卡片
古风写实
强层级信息展示
横板游戏优先

1.2 设计哲学

深色底负责"氛围"，米白底负责"阅读"，金色负责"权重"和"可点击感"。

UI 不是独立装饰层，而是世界观叙事的一部分。玩家通过界面材质感知所处阵营与世界层级：

天道阵营：金色辉煌、秩序感、庄严
洪荒阵营：古铜粗粝、自然纹理、野性
幽冥阵营：暗紫幽光、符文蚀刻、阴郁
深潜裔：幽绿扭曲、触手纹理、不可名状
混沌中立：灰色斑驳、不对称、混乱

1.3 视觉结论（继承 UI-00 v1.6 并扩展）

主体不是单一深色面板，而是"深色背景 + 金边装饰 + 高对比插画"的混合结构。
标题、服务器条、按钮大多采用牌匾形态，形成强识别度。
信息区域以浅色大面板承载说明文本，适合横向布局中的左右分栏。
入口模块以大图卡片、角色立绘、服务器条和主按钮呈现，强调可点击、可浏览、可分组。
不使用底部固定导航作为一级入口。
游戏只有一个服务器，不存在区服、分区、跨区等概念（✅160）。
新增：全局 HUD 采用"三栏式"横板布局，信息密度向左右两侧收敛，中央留给主视觉与核心交互。

1.4 不建议的风格

纯扁平现代风。
大面积高饱和霓虹色（深潜裔除外，允许局部幽绿发光）。
过度透明导致文字失焦。
过小的按钮和密集的边框装饰。
依赖鼠标悬停的交互表现。

二、色彩与层级体系

2.1 主色板

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

2.2 阵营色（GDD-36 新增）

基于 ✅164 天启阵营分化命名体系，各阵营拥有独立的视觉识别色。

阵营	色值	情绪	应用场景
天道	`#f7e7b8`（辉煌金）	秩序、庄严、神圣	顶栏高亮、天道标识、神族/精灵·光明/天使裔 UI 变体
洪荒	`#c9872b`（古铜橙）	野性、自然、原始	洪荒标识、妖族/龙族/巫族/兽人族/巨人族 UI 变体
幽冥	`#8b5cf6`（幽冥紫）	阴郁、诡秘、死亡	幽冥标识、鬼族/魔族/冥族/吸血鬼族/精灵·暗影/堕天使裔 UI 变体
深潜裔	`#0d9488`（深渊绿）	疯狂、扭曲、不可名状	深潜裔 UI 变体（详见附录 C）
混沌中立	`#9ca3af`（混沌灰）	无序、中立、斑驳	混沌标识、地精族/矮人族/混沌裔 UI 变体

2.3 功能色

用途	色值	说明
正向收益	`#63c96f`	恢复、达成、绿色数值
负向损失	`#d83a2b`	伤害、失败、红色数值
特殊效果	`#48b8e8`	技能名、特殊状态、蓝色数值
警告	`#f59e0b`	注意、倒计时、待确认
禁用	`#725c42`	不可点击、已过期、灰色

2.4 文字层级

层级	色值	适用场景
一级标题	`#f7e7b8`	章节名、页面主标题
二级标题	`#fff2dc`	牌匾标题、弹窗标题
正文主字	`#533415`	米白底上的正文
正文次字	`#725c42`	辅助说明、注释
弱提示	`#9a8665`	不重要信息、加载中

2.5 层级原则

深色底 = 氛围层：背景、顶栏、底栏使用深色，营造沉浸感。
米白底 = 阅读层：表单、战报、说明文本使用米白/浅纸色，保证可读性。
金色 = 权重层：边框、标题、选中态使用金色，引导视觉焦点。
红绿蓝 = 状态层：仅用于关键数值和状态，不作为大面积背景色。
阵营色 = 识别层：仅在阵营相关界面（创角、种族信息、阵营标识）中使用，不滥用。

三、字体与排版

3.1 字号体系

用途	字号	字重	说明
页面主标题	42px - 56px	Bold	启动页标题、场景大标题
牌匾标题	28px - 38px	Bold	顶栏、弹窗标题
模块标题	22px - 28px	SemiBold	卡片标题、分区标题
正文内容	16px - 20px	Regular	说明文本、战报
数值显示	18px - 24px	Bold	HP/能量数值、伤害数字
说明文字	12px - 14px	Regular	辅助标签、提示
辅助标签	10px - 12px	Regular	角标、状态标识

3.2 排版规则

长文本优先使用左对齐，正文行高建议 1.5 - 1.7。
标题必须与背景形成强对比，避免压在复杂插画上。
数值和技能词可局部着色，但每段最多保留 3 种强调色。
手机端正文优先按段落阅读，不把整页塞成密集表格。
横板布局中，长文本区域宽度不超过 600px，避免行过长导致阅读疲劳。

3.3 文字风格

标题偏硬朗、庄重，可使用轻微阴影增强立体感。
正文偏清晰、温和、可连读。
数值表现要醒目，使用 Bold 字重，但字号不能超过同级标题。
战报文本使用等宽或类书法体增强沉浸感。

四、横板HUD布局框架

4.1 全局HUD骨架（GDD-36 新增）

横板游戏主界面采用**"三栏式"布局**：顶部信息条 + 左侧导航栏 + 中央主视觉区 + 右侧信息面板 + 底部快捷栏。

ASCII 线框图

┌─────────────────────────────────────────────────────────────────────────────┐
│  [头像] [境界] [能量] [货币]          [系统] [公告] [活动] [设置]             │  ← 顶部信息条 (8%)
├────┬────────────────────────────────────────────────────────────┬───────────┤
│    │                                                            │           │
│ 🏠 │              主视觉区（场景/立绘/战斗画面）               │  [委托]   │
│ 📜 │                                                            │  ·寻找    │
│ ⚔️ │                                                            │  ·采集    │
│ 🎒 │                                                            │           │
│ 👥 │                                                            │  [事件]   │
│ ⚙️ │                                                            │  ·天启    │
│    │                                                            │  ·共鸣    │
│    │                                                            │           │
│    │                                                            │  [聊天]   │
│    │                                                            │  〔世界〕 │
│    │                                                            │  〔队伍〕 │
├────┴────────────────────────────────────────────────────────────┴───────────┤
│  [修炼]  [探索]  [炼丹]  [社交]  [背包]  [洞府]  [更多...]                    │  ← 底部快捷栏 (10%)
└─────────────────────────────────────────────────────────────────────────────┘
     ↑                        ↑                                  ↑
  左侧导航栏(8%)          中央主视觉区(70%)                  右侧面板(22%)

区域划分

区域	宽度占比	高度占比	说明
顶部信息条	100%	8%	玩家状态、境界、能量、货币、系统入口
左侧导航栏	8%	74%	竖排图标按钮，主场景/委托/战斗/背包/社交/设置
中央主视觉区	70%	74%	场景渲染、角色立绘、战斗画面、交互对象
右侧面板	22%	74%	委托追踪、事件通知、聊天面板、属性速览
底部快捷栏	100%	10%	核心功能快捷入口：修炼、探索、炼丹、社交、背包、洞府

4.2 顶部信息条

形态：横向牌匾，两端切角，与战斗页顶栏牌匾同族组件。
内容：
- 左侧：玩家头像（圆形，带阵营色边框）+ 境界标签（如「炼气期」）
- 中央：能量条（青蓝 #48b8e8）+ 能量数值
- 右侧：货币速览（铜钱/银两/灵石/鸿蒙紫气）+ 系统按钮组
交互：
- 点击头像：展开角色详情面板
- 点击能量条：展开能量详情（恢复速率、纯净度、丹毒）
- 点击货币：展开对应货币说明或充值入口（鸿蒙紫气）

4.3 左侧导航栏

形态：竖排图标按钮列，每个按钮为方形（48×48px），带金色边框。
内容：
- 🏠 主场景（返回当前场景）
- 📜 委托（当前委托/事件列表）
- ⚔️ 战斗（进入战斗或显示战斗状态）
- 🎒 背包（物品/装备/空间）
- 👥 社交（好友/队伍/帮派/家族）
- ⚙️ 设置（系统设置/退出）
交互：
- 点击展开对应功能面板（右侧面板区域切换内容）
- 当前选中态：金色边框 + 底色高亮 #2a1f14
- 未选中态：降低透明度至 60%
- 新消息/待处理提示：右上角红点/数字角标

4.4 中央主视觉区

形态：占据屏幕最大区域，无边框，直接渲染场景或立绘。
内容：
- 城镇/野外场景：TiledMap 渲染 + 角色精灵 + NPC + 可交互对象
- 战斗场景：左右对峙布局（详见 §5.5 战斗页）
- 创角场景：中央角色全身立绘 + 背景
交互：
- 点击地面：角色移动（点击移动，A* 寻路）
- 点击 NPC/对象：触发交互面板
- 点击其他玩家：弹出互动菜单

4.5 右侧面板

形态：可切换的抽屉式面板，默认显示委托追踪 + 聊天。
内容：
- 委托追踪区：当前进行中的委托/事件列表，点击跳转详情
- 事件通知区：天启/共鸣/世界Boss等事件提醒
- 聊天面板：底部输入框 + 频道切换标签（世界/队伍/帮派/系统）
交互：
- 委托可点击展开详情或导航
- 聊天支持纵向滚动，新消息自动滚动到底部
- 面板可收起/展开（点击标题栏箭头）

4.6 底部快捷栏

形态：横向排列的大按钮（宽度自适应，高度 56-64px）。
内容：修炼、探索、炼丹、社交、背包、洞府、更多...
交互：
- 主按钮样式：金色边框 + 深色底，点击后展开对应功能
- "更多"按钮：展开二级菜单（不常用的功能入口）
- 有未读/待处理时显示角标

五、页面结构规范

5.1 启动页（Splash）

继承 UI-00 v1.6 §4.2.1 / §11.1，保持不变。

5.2 登录页

继承 UI-00 v1.6 §11.2，保持不变。

5.3 注册页

继承 UI-00 v1.6 §11.3，保持不变。

5.4 创建角色页

继承 UI-00 v1.6 §4.2 / §11.4，扩展以下内容：

新增：种族选择卡片使用阵营色描边
- 人族：金色 #d9b262
- 妖族：古铜 #c9872b
- 神族：辉煌金 #f7e7b8
- 幽冥族：幽冥紫 #8b5cf6
新增：选中种族后，右侧信息面板顶部显示阵营标识色条
新增：深潜裔分支在选中时，UI 元素应用附录 C 的扭曲动效

5.5 战斗页

继承 UI-00 v1.6 §4.5，扩展以下内容：

新增：阵营标识使用阵营色圆点（详见 §2.2）
新增：ATB 条满条时的发光效果使用阵营色而非统一金色
新增：深潜裔角色在战斗中的 UI 元素（HP条边框、能量条）使用幽绿 #0d9488

5.6 主界面（HUD）

详见 §4 横板HUD布局框架。

5.7 弹窗/面板

形态：半透明黑遮罩 #0b0907 透明度 70% + 米白底面板 #f8f0e2
标题：顶部牌匾位，深色底 #3b2818 + 金色字 #f7e7b8
内容区：支持纵向滚动，底部保留主操作按钮
关闭：右上角 × 按钮，最小交互区 44×44px
尺寸限制：
- 小弹窗：宽 400-500px，高自适应
- 中弹窗：宽 600-800px，高 500-700px
- 大面板：宽 1000-1200px，高 700-900px

六、组件库规范

6.1 牌匾标题

外形：横向长条、两端收尖或切角。
主体：深色底 #3b2818。
边框：金色外描边 #d9b262 + 暗金内压边 #8f6c3d。
文案：居中显示，字重 Bold，颜色 #f7e7b8。
尺寸：高度 40-56px，宽度自适应内容或撑满容器。

6.2 主按钮

用途：核心操作，如"修炼""结束战斗""进入洪荒"。
常态：背景 #2a1f14 + 金色边框 #d9b262 + 文字 #f7e7b8
按下态：缩放到 0.96，边框亮度 +20%
禁用态：背景 #1a120c + 灰色边框 #725c42 + 灰色文字 #9a8665
尺寸：高度 48-56px，宽度根据文字自适应（最小 120px）
圆角：4-6px

6.3 次按钮

用途：次级操作、切换标签、辅助入口。
常态：背景透明或 #1a120c + 暗金边框 #8f6c3d + 文字 #e8d8bf
按下态：背景 #2a1f14 + 金色边框
尺寸：高度 36-44px，宽度自适应

6.4 图文卡片

比例：接近人物立绘卡，宽高比 2:3 或 3:4。
边框：金色边框，选中态加粗 + 发光。
选中态 vs 未选中态：
- 选中：边框 #d9b262 + 底色 #2a1f14 + 角色立绘亮度 100%
- 未选中：边框 #8f6c3d + 底色 #1a120c + 角色立绘亮度 70%
信息层：底部叠加渐变遮罩，显示名称 + 简短描述

6.5 进度条

形态：圆角矩形，高度 12-16px。
外框：暗金 #8f6c3d，2px。
填充：
- HP条：绿→红渐变 #63c96f → #d83a2b，低于 30% 变红并闪烁（每 0.5s）
- 能量条：青蓝 #48b8e8
- ATB条：阵营色（详见 §2.2）
标签：条体上方或左侧，显示「名称当前值/最大值」，12px。

6.6 标签页（Tab）

形态：短条牌匾式结构。
选中态：高亮金边 + 浅底色 #2a1f14 + 文字 #f7e7b8
未选中态：降低对比度至 50%，文字 #9a8665
切换动画：高亮渐变过渡 0.2s

6.7 列表项

常态：米白底 #f8f0e2，文字 #533415
Hover：浅金底色 #f5ecd8
选中态：金色左边框 4px + 底色 #f5ecd8
间距：项间距 8-12px，内边距 12-16px

6.8 输入框

常态：浅纸色底 #f8f0e2 + 暗金边框 #8f6c3d + 文字 #533415
聚焦态：金色边框 #d9b262 + 轻微外发光
错误态：红色边框 #d83a2b + 红色提示文字
尺寸：高度 44-48px，宽度自适应

6.9 提示气泡（Tooltip）

形态：深色底 #1a120c + 金色边框 #d9b262，箭头指向触发元素。
内容：支持标题 + 正文 + 数值。
行为：hover/长按触发，3秒后自动消失，支持点击外部关闭。
尺寸：最大宽度 320px，高度自适应。

6.10 加载指示器

形态：金色罗盘旋转动画，中心显示百分比。
动画：罗盘外环 60秒/周，内环 30秒/周，方向相反。
尺寸：64×64px（小）、96×96px（中）、128×128px（大）。

七、动效规范

7.1 基础转场

动效	时长	缓动函数	说明
页面切换	0.25s - 0.35s	ease-in-out	淡入淡出，中央主视觉区可叠加缩放
弹窗出现	0.2s	ease-out	轻微上浮 20px + 淡入
弹窗关闭	0.15s	ease-in	下沉 10px + 淡出
面板滑入	0.25s	ease-out	从边缘滑入（右侧面板从右，左侧面板从左）
面板滑出	0.2s	ease-in	向边缘滑出

7.2 按钮交互

状态	表现	时长
按下	缩放到 0.96	0.08s
释放	恢复到 1.0	0.12s
禁用	灰度 80% + 透明度 60%	即时
高亮（可点击）	边框呼吸发光（透明度 70%→100% 循环）	1.5s

7.3 数值反馈

动效	触发	表现	时长
伤害弹出	受到/造成伤害	数值文字放大弹出 + 上飘淡出	0.6s
恢复弹出	受到治疗	绿色数值上浮 + 粒子散开	0.5s
暴击特效	暴击命中	文字放大 1.5x + 红色闪光 + 屏幕微震	0.4s
获得物品	掉落/奖励	物品图标从中央飞入背包位置	0.5s
属性变化	突破/装备	属性数值高亮闪烁后更新	0.3s

7.4 战斗动效（继承 UI-00 v1.6 §4.5.6）

动效	触发	表现	时长
攻击动画	任一方行动	立绘短暂前冲+缩放 1.05→1.0	0.3s
受击动画	被命中方	立绘短暂后退+闪红	0.2s
ATB 满条	行动条满	金色光圈扩散 + 条体高亮	0.3s
天赋触发	天赋生效	角色光环闪现 + 战报特殊标记	0.5s
Boss 阶段变化	HP 降至阈值	全屏震动+场景色调变化	1.0s
战斗结束	一方 HP≤0	胜方立绘放大居中 + 败方淡出	1.0s

7.5 环境动效

动效	场景	表现
罗盘旋转	启动页	外环 60s/周，内环 30s/周
灵气流动	创角页/主界面	角色底部光晕缓慢脉动（呼吸效果）
背景视差	城镇/野外	远景缓慢移动，中景正常，近景快速
粒子飘落	战斗/突破	金色/阵营色粒子从顶部飘落

八、阵营风格变体

8.1 设计原则

基础交互结构（布局、按钮位置、信息层级）绝不因阵营改变。变体仅影响：装饰纹理、边框样式、光效颜色、字体滤镜、背景氛围。

8.2 天道阵营（金）

边框：标准金色 #d9b262，云纹/龙纹装饰
光效：暖金色辉光，神圣感
背景纹理：暗纹祥云、星辰轨迹
字体：标准黑体，标题可加轻微金色阴影

8.3 洪荒阵营（铜）

边框：古铜色 #c9872b，粗犷石纹/兽骨装饰
光效：橙红色火焰光晕
背景纹理：岩石裂纹、兽皮纹理
字体：标题可加粗糙边缘滤镜

8.4 幽冥阵营（紫）

边框：幽冥紫 #8b5cf6，蚀刻符文/锁链装饰
光效：暗紫色幽光，鬼火效果
背景纹理：暗纹符咒、雾气弥漫
字体：标题可加哥特式尖角滤镜

8.5 深潜裔阵营（绿）

详见 附录 C。

8.6 混沌中立（灰）

边框：混沌灰 #9ca3af，不规则碎裂边缘
光效：无稳定光效，随机闪烁
背景纹理：噪点、色块错位、不对称图案
字体：标题轻微扭曲，但不影响可读性

九、资源目录与命名规范

9.1 目录结构

images/
├── README.md                          # 资源目录索引
├── references/                        # 参考图
│   ├── screenshots/                   # 竞品/参考游戏截图
│   └── analysis/                      # 色值提取、布局标注等分析图
├── concept/                           # 概念设计/场景效果图
│   ├── town/                          # 城镇场景
│   ├── wilderness/                    # 野外场景
│   └── battle/                        # 战斗场景
├── characters/                        # 角色立绘
│   ├── human/                         # 人族
│   ├── phoenix/                       # 凤族
│   ├── fox/                           # 狐妖
│   ├── snake/                         # 蛇族
│   ├── tiger/                         # 虎族
│   ├── monkey/                        # 猴族
│   ├── wizard/                        # 巫族
│   └── 风格约束.md                     # 立绘风格约束
├── UI/                                # UI素材/切图
│   ├── components/                    # 通用组件
│   ├── screens/                       # 界面效果图
│   └── icons/                         # 图标
├── scenes/                            # 场景效果图
│   └── character_creation/            # 创建角色场景
└── marketing/                         # 宣发素材
    └── wizard_posters/                # 巫族海报

9.2 命名规范

角色立绘

{种族}_{职业/分支}_{性别}_{版本标签}.png

字段	取值示例
种族	人族、妖族、凤族、巫族、龙族、兽人族、巨人族、鬼族、魔族、冥族、吸血鬼族、堕天使裔、精灵族_光明、精灵族_暗影、天使裔、神族、地精族、矮人族、混沌裔
职业/分支	修真_飞剑、儒生、释、百工、箓道天师、阵法师、自然道人、丹道真人、深潜裔_沉睡之核、深潜裔_溺渊之主、深潜裔_门与钥匙、深潜裔_黄衣之王、深潜裔_黑山羊母树、狐妖、蛇族、虎族、猴族
性别	男、女
版本标签	重制、普通、疯狂、人形版、绿色版

示例：

人族_修真_飞剑_男_重制.png
人族_深潜裔_黄衣之王_女_疯狂_重制.png
妖族_狐妖_女_重制.png

场景效果图

{场景名}_{用途}_{版本}.png

示例：

凤族创角场景_效果图.png
城镇_太古秘境_效果图.png

UI 切图

ui_{组件名}_{状态}_{尺寸}.png

示例：

ui_button_primary_normal_256x64.png
ui_panel_popup_800x600.png
ui_icon_hp_32x32.png

图标

icon_{类别}_{名称}_{尺寸}.png

示例：

icon_skill_fireball_64x64.png
icon_item_potion_red_32x32.png
icon_status_poison_24x24.png

附录A：横板分辨率适配

A.1 基准分辨率

级别	分辨率	目标设备	说明
设计基准	1600 × 900	16:9 平板/横屏手机	所有 UI 以此为准设计
最小支持	1366 × 768	低端平板	核心内容不可裁切
最大支持	2560 × 1440	高端平板/PC	超采样渲染
超宽屏	21:9	折叠屏展开	两侧加装饰性暗角，不拉伸核心内容

A.2 适配规则

面板最大宽度：任何信息面板不超过 1200px，居中显示。
超宽屏处理：两侧使用云雾/暗角/装饰性纹理填充，中央内容区保持 16:9 比例。
窄屏处理：
- 左侧导航栏可收缩为图标-only 模式（宽度 48px）
- 右侧面板可收起
- 底部快捷栏按钮数量减少，"更多"展开二级菜单
安全区：
- 顶部：预留 24px（避免刘海/状态栏遮挡）
- 底部：预留 32px（避免手势条/导航栏遮挡）
- 左右：各预留 16px

A.3 缩放策略

元素	缩放策略
文字	不缩放，保持物理可读性（最小 10px）
图标/按钮	等比缩放，最小 32×32px
立绘/插画	等比缩放，可裁切边缘但不可裁切主体
背景	覆盖全屏，允许裁切
面板	宽度自适应，高度固定或自适应

附录B：组件状态定义

B.1 按钮状态

状态	视觉表现	交互
Normal	标准样式	可点击
Hover	边框亮度 +15%	可点击（仅PC）
Pressed	缩放 0.96，边框亮度 +25%	点击中
Disabled	灰度 80%，透明度 60%	不可点击
Highlight	边框呼吸发光	引导点击

B.2 输入框状态

状态	视觉表现
Normal	浅纸色底 + 暗金边框
Focused	金色边框 + 轻微外发光
Filled	内容色文字，边框保持
Error	红色边框 + 红色提示文字
Disabled	灰色底 + 灰色文字

B.3 列表项状态

状态	视觉表现
Normal	米白底 + 深色文字
Hover	浅金底色
Selected	金色左边框 + 浅金底色
Disabled	灰色文字 + 透明度 50%

B.4 进度条状态

状态	视觉表现
Normal	标准填充色
Warning	填充色变黄 `#f59e0b`（HP < 50%）
Critical	填充色变红 + 闪烁（HP < 30%）
Full	填充色高亮 + 金色光晕

附录C：深潜裔风格变体详细规范

C.1 设计理念

深潜裔（克苏鲁轴）的 UI 变体不是"黑暗版"，而是"认知扭曲版"。玩家不应感到"暗黑酷炫"，而应感到"哪里不对劲"。

C.2 色彩替换

标准元素	深潜裔替换	说明
金色边框 `#d9b262`	暗紫 `#4c1d95` + 幽绿发光 `#0d9488`	边框本身暗紫，外发光幽绿
米白底色 `#f8f0e2`	灰白 `#d1d5db` + 轻微噪点纹理	不干净，有杂质感
金色文字 `#f7e7b8`	苍白 `#e5e7eb` + 轻微模糊	像被水浸泡过
深色背景 `#0b0907`	深海蓝黑 `#0a1628`	更冷、更深

C.3 装饰替换

标准装饰	深潜裔替换
云纹	触手缠绕纹理
龙纹	眼球/瞳孔图案
祥云	气泡/深渊纹理
星辰	不可名状的几何错位

C.4 动效替换

标准动效	深潜裔替换
金色呼吸发光	幽绿不规则脉动（频率不固定）
罗盘旋转	罗盘扭曲变形（偶尔卡顿/回退）
粒子飘落	微小眼球/触手状粒子
弹窗出现	轻微延迟 + 边缘抖动

C.5 字体处理

标题：在标准字体基础上加轻微扭曲滤镜（波浪形偏移，幅度 1-2px）
正文：保持清晰可读，不加扭曲
禁止：过度扭曲导致无法阅读、全大写、字母间距异常

C.6 实现约束

深潜裔风格变体仅在玩家选择深潜裔种族后生效。
变体实现为"皮肤层"，覆盖在标准 UI 之上，不改变交互逻辑。
性能影响：扭曲滤镜使用 Shader 实现，单 Pass，不影响帧率。

变更日志

版本	日期	变更内容
v2.0	2026-07-09	初始版本，替代 UI-00 v1.6。新增：横板HUD三栏式布局框架、阵营色体系（✅164）、组件库扩展（进度条/标签页/列表项/提示气泡/加载指示器）、深潜裔风格变体（附录C）、资源目录与命名规范、分辨率适配附录。继承并整合 UI-00 v1.6 的启动/登录/注册/创建角色/战斗页面规范。

GDD-36 v2.0 | 2026-07-09 | UI/UX设计规范唯一权威文档，UI-00 自此废弃

目录​

一、设计总则​

1.1 视觉关键词​

1.2 设计哲学​

1.3 视觉结论（继承 UI-00 v1.6 并扩展）​

1.4 不建议的风格​

二、色彩与层级体系​

2.1 主色板​

2.2 阵营色（GDD-36 新增）​

2.3 功能色​

2.4 文字层级​

2.5 层级原则​

三、字体与排版​

3.1 字号体系​

3.2 排版规则​

3.3 文字风格​

四、横板HUD布局框架​

4.1 全局HUD骨架（GDD-36 新增）​

ASCII 线框图​

区域划分​

4.2 顶部信息条​

4.3 左侧导航栏​

4.4 中央主视觉区​

4.5 右侧面板​

4.6 底部快捷栏​

五、页面结构规范​

5.1 启动页（Splash）​

5.2 登录页​

5.3 注册页​

5.4 创建角色页​

5.5 战斗页​

5.6 主界面（HUD）​

5.7 弹窗/面板​

六、组件库规范​

6.1 牌匾标题​

6.2 主按钮​

6.3 次按钮​

6.4 图文卡片​

6.5 进度条​

6.6 标签页（Tab）​

6.7 列表项​

6.8 输入框​

6.9 提示气泡（Tooltip）​

6.10 加载指示器​

七、动效规范​

7.1 基础转场​

7.2 按钮交互​

7.3 数值反馈​

7.4 战斗动效（继承 UI-00 v1.6 §4.5.6）​

7.5 环境动效​

八、阵营风格变体​

8.1 设计原则​

8.2 天道阵营（金）​

8.3 洪荒阵营（铜）​

8.4 幽冥阵营（紫）​

8.5 深潜裔阵营（绿）​

8.6 混沌中立（灰）​

九、资源目录与命名规范​

9.1 目录结构​

9.2 命名规范​

角色立绘​

场景效果图​

UI 切图​

图标​

附录A：横板分辨率适配​

A.1 基准分辨率​

A.2 适配规则​

A.3 缩放策略​

附录B：组件状态定义​

B.1 按钮状态​

B.2 输入框状态​

B.3 列表项状态​

B.4 进度条状态​

附录C：深潜裔风格变体详细规范​

C.1 设计理念​

C.2 色彩替换​

C.3 装饰替换​

C.4 动效替换​

C.5 字体处理​

C.6 实现约束​

目录