手遊 HUD 資訊層級：戰鬥態、大廳態與彈窗該顯示什麼

HUD 常見問題不是「少做了一個血條」，而是 同一螢幕疊了太多同級資訊：戰鬥中彈出大廳級入口、過場動畫仍顯示可點商店、Modal 開啟時底層 HUD 還在搶點擊。企劃稿往往按 單幀 mock 畫，不會標「戰鬥態隱藏貨幣條」——需要 狀態 × 層級 規格，程式才能在 可見性 + 輸入攔截 + 繪製排序 裡落地。

下文以 Unity UGUI（Prefab、Canvas.sortingOrder、Graphic Raycast）為主表述；Godot 用 CanvasLayer layer + Control mouse_filter，Cocos 用 節點繪製順序 + BlockInputEvents / 全螢幕遮罩，判據與表格同構。Safe Area、飄字層、Canvas 排序細節見 Safe Area、飄字；真機／多語言／Release 仍疊加 發布前自查 第 1、2、5 項。

失敗判據（任一即未通過）： Modal／過場／支付流程中 底層 HUD 仍可互動（除非規格明確「半螢幕可操作」）；戰鬥態出現 非戰鬥必需且不可關閉 的促銷入口擋操作區；同一資訊 兩處重複顯示（如金幣頂欄 + 戰鬥內又大號金幣）且無產品說明；狀態切換時 殘留上一態控件（可見或佔 Raycast）；與 多語言 疊加後，長文案語言在 戰鬥態精簡佈局 仍爆框。

---

先定狀態，再定控件

遊戲狀態（範例）	HUD 目標	典型顯示	典型隱藏／降級
大廳／主介面	導覽 + 資源 + 活動	頂欄貨幣、底欄 Tab、活動入口	戰鬥技能欄、準星
戰鬥／關卡內	操作 + 生存資訊	血條、技能、暫停	大廳 Tab、全螢幕活動 Banner
過場／CG	無互動或僅跳過	跳過按鈕	幾乎全部 HUD（或僅保留跳過）
Modal 彈窗（商店、設定）	焦點在彈窗	彈窗內控件	底層 HUD 關 Raycast 或整層隱藏
支付／合規	完成流程	協議、確認	遊戲內促銷浮層

狀態列舉由 企劃 + 程式 共定（如 GameUIState.Lobby | Combat | Cinematic | Modal），UI 根 訂閱狀態機（Unity Prefab 分組／Godot 場景分支／Cocos 預製體），避免每個按鈕在腳本裡散落 SetActive／visible。

---

層級與排序（與引擎無關的約定）

建議 從下到上 寫進規格（數字越大越靠前）：

層級	內容	互動
L0	全螢幕背景／場景 UI bleed	無
L1	戰鬥 HUD（血條、搖桿區佔位）	有
L2	戰鬥飄字／提示	無 Raycast（見 飄字）
L3	系統 Toast／跑馬燈	通常無
L4	Modal／全螢幕彈窗	有；擋 L1–L3 點擊
L5	網路斷線、強制更新	有；擋全部

Unity：sortingOrder／多 Canvas 分工；Godot：CanvasLayer layer；Cocos：同 Canvas 下節點順序或分層 Canvas + 遮罩。Modal 開啟時必須抬升 L4，並對 L1 關 Raycast／mouse_filter／BlockInput，不能僅靠「視覺上蓋住仍點穿」。

---

資訊優先級（戰鬥態範例）

戰鬥態若只能留 N 個可讀區塊（小螢幕），建議預設上限：

優先級	區塊	可降級策略
P0	生命／失敗條件相關	不隱藏
P0	暫停／退出戰鬥	不隱藏
P1	技能／主要操作	可合併為更少按鈕
P2	任務目標短文本	縮為 icon + 長按詳情
P3	貨幣、活動入口	戰鬥態預設隱藏 或進暫停選單
P3	聊天入口	收起到 icon

「降級」須在 多語言壓力語言 下仍可讀（DE／ES 等），不能只縮英文。

---

驗收步驟（5 步）

1. 列表化狀態 — 從主流程提取狀態切換點（進關、開商店、CG、斷線重連）。
2. 逐態截圖對比 — Editor Play 與 真機 Release 各一套（對照 發布前第 1、5 項）；檢查 SetActive(false)／visible=false 的節點是否仍攔截點擊。
3. Modal 抽測 — 商店／設定／支付開啟時，點底層原 HUD 按鈕 必須無效（全螢幕透明 Raycast 或 BlockInput 遮罩）。

4. 與 Safe Area 交叉 — 戰鬥態 P0 控件均在 safe 內（見 Safe Area）。
5. 寫回可版本化資源 — 狀態表驅動（Unity ScriptableObject／Godot Resource／Cocos 配置表），非 Scene 裡臨時隱藏。

---

設計稿要補什麼

交付	用途
分狀態 wireframe（至少 Lobby／Combat／Modal）	程式配置 visibility
戰鬥態「可隱藏清單」標註	避免 mock 裡畫滿元素
Modal 規格：底層是否半透明、是否可點透	定 Raycast 策略
促銷／活動層 z 序	與 L4／L5 對齊

不要求設計師寫狀態機；表格 + 標註 即可減少程式猜。

---

回修路徑表

現象	最可能原因	建議動作	負責
彈窗後仍能點戰鬥按鈕	未關底層 Raycast	Modal 層關 Graphic Raycast／遮罩全螢幕	程式
戰鬥滿螢幕活動入口	未做狀態表	戰鬥態隱藏 P3；企劃確認	程式 + 企劃
過場 HUD 殘留	未監聽 Cinematic 狀態	狀態機統一 Hide HUD	程式
兩套貨幣顯示	大廳條未關	Combat 態關頂欄或合併資料源	程式 + 企劃
長語言戰鬥態爆框	精簡佈局未測 DE／ES	見 多語言爆框	設計 + 程式

---

常見問題

大廳和戰鬥用兩個 Canvas 嗎？
可以；也可同一 Canvas 下分組。關鍵是 狀態 visibility + Raycast，不是 Canvas 數量本身。

半螢幕商店算 Modal 嗎？
算。須寫清底層是否可點、是否暫停戰鬥邏輯。

和 UX「少即是多」衝突？
層級表是 產品規則，不是審美結論；P3 隱藏可由企劃在活動期臨時打開，但須過狀態機開關。

3D 遊戲頭頂血條算 HUD 嗎？
算 戰鬥資訊層，與 L1 並列管理；World Space 排序見 飄字／Safe Area 相關約定。