鸿蒙游戏 HUD 如何设计？

子玥酱 （掘金 / 知乎 / CSDN / 简书同名）

大家好，我是子玥酱，一名长期深耕在一线的前端程序媛 👩‍💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。

我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案，

在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。

技术方向： 前端 / 跨端 / 小程序 / 移动端工程化 内容平台： 掘金、知乎、CSDN、简书 创作特点： 实战导向、源码拆解、少空谈多落地 **文章状态：**长期稳定更新，大量原创输出

我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在"API 怎么用"，而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍，希望能帮你在实际工作中少走弯路。

子玥酱 · 前端成长记录官 ✨

👋 如果你正在做前端，或准备长期走前端这条路

📚 关注我，第一时间获取前端行业趋势与实践总结

🎁 可领取 11 类前端进阶学习资源 （工程化 / 框架 / 跨端 / 面试 / 架构）

💡 一起把技术学"明白"，也用"到位"

持续写作，持续进阶。

愿我们都能在代码和生活里，走得更稳一点 🌱

文章目录

- 引言
- [一、什么是 HUD？](#一、什么是 HUD？)
- [二、HUD 最大的问题是什么？](#二、HUD 最大的问题是什么？)
- 三、一个核心原则
- [四、HUD 的黄金分层](#四、HUD 的黄金分层)
- - [PlayerHUD 负责](#PlayerHUD 负责)
  - [SkillHUD 负责](#SkillHUD 负责)
  - [MiniMapHUD 负责](#MiniMapHUD 负责)
- [五、为什么 HUD 不应该直接读全部 Store？](#五、为什么 HUD 不应该直接读全部 Store？)
- [六、HUD 与 System 的关系](#六、HUD 与 System 的关系)
- 七、伤害飘字怎么设计？
- [八、Boss HUD 是独立系统](#八、Boss HUD 是独立系统)
- [九、多端场景下的 HUD](#九、多端场景下的 HUD)
- [十、HUD 不应该拥有状态](#十、HUD 不应该拥有状态)
- [十一、未来的 HUD：AI HUD](#十一、未来的 HUD：AI HUD)
- 十二、一个关键认知升级
- 总结

引言

很多开发者刚开始做鸿蒙游戏时，对 HUD（Head-Up Display，抬头显示）的理解非常简单：

text 复制代码

血条
金币
经验条
技能按钮

然后直接写：

ts 复制代码

Column() {

  Text(`${store.hp}`)

  Text(`${store.gold}`)

}

游戏小的时候没问题，但只要你开始增加：

text 复制代码

Buff
任务
小地图
技能冷却
伤害飘字
Boss状态
队友状态

很快就会出现一个现象：

text 复制代码

HUD越来越复杂
页面越来越臃肿
性能开始下降

最后整个 UI 变成：

text 复制代码

巨型页面

很多人以为：

HUD 只是一个界面。

实际上在大型游戏里：

HUD 本质上是一个独立系统。

一、什么是 HUD？

很多人理解：

text 复制代码

HUD = UI

实际上：

text 复制代码

HUD = 游戏状态可视化层

例如，玩家状态：

text 复制代码

HP
MP
经验
等级

敌人状态：

text 复制代码

Boss血量
Debuff
仇恨

系统状态：

text 复制代码

任务
时间
金币
网络延迟

本质都是：

text 复制代码

Store中的状态

经过：

text 复制代码

HUD

展示给玩家。

二、HUD 最大的问题是什么？

很多项目后期会写成这样：

ts 复制代码

if (store.hp < 30) {
  showWarning()
}

if (store.bossHp <= 0) {
  hideBossBar()
}

if (store.skillCd > 0) {
  updateSkillIcon()
}

问题：

text 复制代码

HUD开始写业务逻辑

最后变成：

text 复制代码

UI控制游戏

而不是：

text 复制代码

游戏驱动UI

这是非常危险的。

三、一个核心原则

HUD 永远不应该决定游戏逻辑，正确关系：

text 复制代码

Store
   ↓
HUD

而不是：

text 复制代码

HUD
 ↓
Store

例如，错误：

ts 复制代码

if (buttonClick) {
  store.hp += 100
}

正确：

ts 复制代码

buttonClick
      ↓
InputSystem
      ↓
ItemSystem
      ↓
Store
      ↓
HUD更新

四、HUD 的黄金分层

推荐拆成：

text 复制代码

HUD
├── PlayerHUD
├── SkillHUD
├── MissionHUD
├── MiniMapHUD
├── BattleHUD

而不是：

text 复制代码

GameHUD.ts
（3000行）

PlayerHUD 负责

text 复制代码

血量
蓝量
等级
经验

例如：

ts 复制代码

@Component
struct PlayerHUD {

  @Observed store: PlayerStore

  build() {
    Progress({
      value: store.hp,
      total: store.maxHp
    })
  }

}

SkillHUD 负责

text 复制代码

技能按钮
冷却显示
连招提示

MiniMapHUD 负责

text 复制代码

地图
NPC
任务点

这样：

text 复制代码

职责清晰
独立维护

五、为什么 HUD 不应该直接读全部 Store？

很多项目会这样：

ts 复制代码

@Observed store: GameStore

然后：

text 复制代码

整个HUD监听整个Store

问题来了，玩家金币变化：

text 复制代码

整个HUD刷新

经验变化：

text 复制代码

整个HUD刷新

Boss受伤：

text 复制代码

整个HUD刷新

性能直接崩掉，正确方式：

text 复制代码

PlayerStore
SkillStore
MissionStore

拆分状态域，例如：

ts 复制代码

PlayerHUD
   ↓
PlayerStore

SkillHUD
   ↓
SkillStore

这样：

text 复制代码

局部更新

性能提升巨大。

六、HUD 与 System 的关系

很多开发者容易混淆：

text 复制代码

BattleSystem
BattleHUD

看起来很像，其实职责完全不同。

BattleSystem：

text 复制代码

计算伤害
处理战斗
修改状态

BattleHUD：

text 复制代码

显示伤害
显示血条
显示Buff

一句话：

System 改变世界，HUD 展示世界。

七、伤害飘字怎么设计？

很多人会写：

ts 复制代码

Text("-100")

然后直接放页面，问题：

text 复制代码

难管理
难复用

正确做法，增加：

text 复制代码

EffectHUD

结构：

text 复制代码

DamageText
HealText
CriticalText

统一管理：

ts 复制代码

effectHUD.showDamage(100)

这样：

text 复制代码

战斗逻辑
视觉表现
完全解耦

八、Boss HUD 是独立系统

大型游戏中：

text 复制代码

Boss血条
Boss技能提示
阶段切换
危险预警

复杂度极高，所以建议：

text 复制代码

BossHUD

独立存在。

例如：

text 复制代码

PlayerHUD
BossHUD

完全分开，不要塞进一个页面。

九、多端场景下的 HUD

鸿蒙最大的特点：

text 复制代码

手机
平板
PC

屏幕差异巨大。

传统思路：

text 复制代码

做三套HUD

维护成本爆炸。

System 架构思路：

text 复制代码

Store统一
HUD自适应

例如：

text 复制代码

手机：
底部技能栏

PC：
右下技能栏

但读取的：

text 复制代码

同一个SkillStore

十、HUD 不应该拥有状态

一个经典错误：

ts 复制代码

class SkillHUD {

  private cooldown = 10

}

问题：

text 复制代码

状态重复
数据不一致

正确：

ts 复制代码

store.cooldown

唯一来源：

text 复制代码

Store

HUD：

text 复制代码

只读

十一、未来的 HUD：AI HUD

随着 AI Agent 加入游戏，HUD 会出现新形态。

例如：

text 复制代码

AI建议
路径推荐
战斗策略
自动提示

未来可能变成：

text 复制代码

PlayerHUD
BattleHUD
AIHUD

AI 不直接控制游戏，而是：

text 复制代码

辅助玩家决策

十二、一个关键认知升级

初学者认为：

text 复制代码

HUD = 界面

进阶之后理解：

text 复制代码

HUD = 状态可视化系统

再进一步：

HUD 是 Store 与玩家之间的翻译层。

它负责把：

text 复制代码

系统状态

变成：

text 复制代码

玩家能理解的信息

总结

鸿蒙游戏中的 HUD 设计，推荐遵循：

text 复制代码

Store
   ↓
System
   ↓
HUD
   ↓
Player

核心原则：

text 复制代码

Store存状态
System改状态
HUD展示状态

如果用一句话总结：

优秀的 HUD 从来不是"界面堆砌"，而是一个让玩家看懂游戏世界的状态可视化系统。