28 KiB
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(天启阵营分化命名)
目录
- 设计总则
- 色彩与层级体系
- 字体与排版
- 横板HUD布局框架
- 页面结构规范
- 组件库规范
- 动效规范
- 阵营风格变体
- 资源目录与命名规范
- 附录A:横板分辨率适配
- 附录B:组件状态定义
- 附录C:深潜裔风格变体详细规范
- 变更日志
一、设计总则
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)
- HP条:绿→红渐变
- 标签:条体上方或左侧,显示「名称 当前值/最大值」,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.pngui_panel_popup_800x600.pngui_icon_hp_32x32.png
图标
icon_{类别}_{名称}_{尺寸}.png
示例:
icon_skill_fireball_64x64.pngicon_item_potion_red_32x32.pngicon_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 自此废弃