lawless-design/docs/12_美术需求/GDD-36-UI与UX设计规范.md
2026-07-09 14:39:17 +08:00

28 KiB

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布局框架
  5. 页面结构规范
  6. 组件库规范
  7. 动效规范
  8. 阵营风格变体
  9. 资源目录与命名规范
  10. 附录A横板分辨率适配
  11. 附录B组件状态定义
  12. 附录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 填充色变黄 #f59e0bHP < 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 自此废弃