xuqinmin12/lawless-design
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态
0e695d0596
lawless-design/docs/12_美术需求/GDD-36-UI与UX设计规范.md

712 行
28 KiB
Markdown
原始文件 普通视图 文件历史

initial: clean start
2026-07-09 14:39:17 +08:00
# 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. [设计总则](#一设计总则)
2. [色彩与层级体系](#二色彩与层级体系)
3. [字体与排版](#三字体与排版)
4. [横板HUD布局框架](#四横板hud布局框架)
5. [页面结构规范](#五页面结构规范)
6. [组件库规范](#六组件库规范)
7. [动效规范](#七动效规范)
8. [阵营风格变体](#八阵营风格变体)
9. [资源目录与命名规范](#九资源目录与命名规范)
10. [附录A：横板分辨率适配](#附录a横板分辨率适配)
11. [附录B：组件状态定义](#附录b组件状态定义)
12. [附录C：深潜裔风格变体详细规范](#附录c深潜裔风格变体详细规范)
13. [变更日志](#变更日志)
---
## 一、设计总则
### 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 层级原则
1. **深色底 = 氛围层**：背景、顶栏、底栏使用深色，营造沉浸感。
2. **米白底 = 阅读层**：表单、战报、说明文本使用米白/浅纸色，保证可读性。
3. **金色 = 权重层**：边框、标题、选中态使用金色，引导视觉焦点。
4. **红绿蓝 = 状态层**：仅用于关键数值和状态，不作为大面积背景色。
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 适配规则
1. **面板最大宽度**：任何信息面板不超过 1200px，居中显示。
2. **超宽屏处理**：两侧使用云雾/暗角/装饰性纹理填充，中央内容区保持 16:9 比例。
3. **窄屏处理**：
- 左侧导航栏可收缩为图标-only 模式（宽度 48px）
- 右侧面板可收起
- 底部快捷栏按钮数量减少，"更多"展开二级菜单
4. **安全区**：
- 顶部：预留 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 自此废弃*
在新工单中引用 复制永久链接