第二十七课：游戏 UI 设计基础

道具图标画完了，还要住进格子、对话框、血条里——这就是 UI（用户界面）。

好 UI 像空气：玩家几乎感觉不到它，却随时知道「还有多少血、点哪里、NPC 在说什么」。坏 UI 挡操作、挡画面、字体糊成一团。

像素游戏尤其省空间：基分辨率本来就小，所以 少、准、一致 比「华丽边框」更重要。

1、UI 大概分三块

HUD（游玩时常驻）

元素	常见位置
血 / 蓝条	左上或角色旁
快捷栏 / 技能	底部
小地图	右上
任务提示	侧边

上面这种顶栏：时间、双方头像、心、资源条——都是 HUD。信息要读得快，别盖住子弹飞行的关键区。

菜单

主菜单、暂停、背包、商店、设置……通常整页或弹层，可以稍复杂。

对话框 / 提示

NPC 对白、获得物品、确认退出。像开场那张：下方面板 + 头像 + 字，游戏画面仍在。

做小项目时，先备一套「零件」：面板、关闭钮、主按钮、次按钮、心形 HP、箭头……风格统一，再往各界面组装。

2、四条原则（够用）

1. 清晰——图标 + 颜色（必要时再加字）；红血蓝蓝，别反着用
2. 一致——同功能同样式；确认/取消位置别每关换
3. 反馈——悬停高亮、按下凹陷、受伤血条动、冷却图标变灰
4. 少挡戏——中心留给玩法；能按键才显示的面板就别常亮

像素特殊点：空间少 → 默认隐藏次要信息；半透明面板可以，但文字对比度不能掉。

3、像素 UI 绘制要点

• 深底 + 浅边 / 浅字，或木纹/金属框，选一跟美术风格走（接第22课 Style Guide）
• 文字与背景对比要够；复杂场景上不要直接甩字，先垫面板
• 像素字用 Nearest，字号用字体原生高度的整数倍（第23课同一条）
• 边框宜细（1～2 px）；装饰留给重要窗，日常按钮保持干净

按钮形态可以多种：填色块、线框、纯文字下划线——同一游戏里挑 一到两种 主样式就够，别三种各用一回。

4、按钮要画「状态」

至少这几态：

状态	视觉
默认	正常色
悬停	更亮 / 描边加强
按下	整体下沉或明暗对调
禁用	降饱和、半透明

像素「凸起感」常用：上/左亮边 + 下/右暗边；按下时反过来。文字也可加 1 px 阴影，免得糊进底色。

5、九宫格（9-slice）：框能变大不裂角

对话框、背包底、长按钮经常要拉伸。整张图硬拉 → 1 px 边变粗、圆角扁掉。

九宫格把图切成 9 块：

角固定 | 上下边水平拉 | 角固定
左右边竖直拉 | 中间四面拉 | …
角固定 | 上下边水平拉 | 角固定

四个角不拉伸；四条边单向拉；中间填内容。

引擎里：

• Godot：NinePatchRect，设 Patch Margin
• Unity：Sprite Border + Image Type = Sliced

画素材时：先做一小块完整框（如 24×24），角上装饰放在四周，中间留白给拉伸。

6、血条与布局（HUD 最小集）

血条常见层：

1. 外框
2. 空槽底色
3. 当前值填充（可缩短）
4. 可选：延迟白条、数字 80/100

减血用滑动或延迟条，别瞬跳；残血可闪。

布局自测：

[HP/MP ……]              [小地图]
           游戏可视区
[技能格格格格]        [道具]

把上一课的 32× 图标丢进技能格；放进真实场景图上看——挡不挡跳跃落点？字糊不糊？

7、作业

做一套能拼成最小 HUD 的像素 UI：

1. 布局草图一张：标出血条、快捷栏（4 格）、对话框大致位置
2. 素材：
   • 血条框 + 填充条
   • 4 个技能/道具格（可接第26课图标）
   • 对话框边框（按九宫格思路画，角完整）
3. 按钮：同一按钮的默认 / 悬停 / 按下 / 禁用 四态（建议约 48×24）
4. 拼一张 mockup：叠到游戏画面或第25课场景上，检查遮挡与可读性

选做：把对话框框导入引擎，拉成两种大小，截图证明角没变形。

下一课进入 特效 VFX：打击闪白、火花、命中感——UI 告诉你「还有多少血」，特效告诉你「这一下打没打上」。