遊戲 UI 前端
概述
每當遊戲需要可見的介面層時，請使用此技能。任務不是產生通用的儀表板 UI。任務是產生一個可讀、具主題性的瀏覽器遊戲介面，以支援遊玩體驗。
預設假設：在 Canvas 或 WebGL 中建構遊戲世界，並在 DOM 中建構大量文字 UI。
前端標準
- 在編碼前確立視覺方向。
- 類型與幻想風格
- 材質語言
- 字體排印
- 色板
- 動感基調
- 使用 CSS 變數來管理 UI 主題。
- 建立清晰的層級結構。
- 優先顯示關鍵的戰鬥或生存資訊
- 其次顯示次要工具
- 不常用的設定放在選單或抽屜後方
- 優先保護遊玩區，尤其在 3D 環境中。
- 初始畫面應讓人在幾秒內感到可以遊玩。
- 預設使用一個主要的常駐 HUD 叢集，最多一個較小的次要叢集。
- 在正常遊玩時保持遊玩區中心暢通。
- 在正常遊玩時保持遊玩區中下方大致暢通。
- 將傳說、實地筆記、任務細節與長控制列表放在抽屜、切換開關或暫停畫面後方。
- 偏好情境提示與短暫提示，而非永久性的方框面板。
- 確保覆蓋層在動態背景下仍然可讀。
- 在需要時使用背景面板、邊緣處理、對比度與適度的模糊效果。
- 從一開始就同時為桌面與行動裝置進行設計。
- 圍繞相機與輸入控制邊界來設計 3D UI。
- 當選單、對話框或指標驅動的 UI 啟用時，暫停或封鎖相機控制輸入。
- 明確指出指標鎖定、拖動觀察與選單互動的狀態。
3D 入門預設
對於探索、穿越或第三人稱入門框架，偏好以下 UI 預算：
- 一個位於邊緣的簡潔目標晶片或狀態條
- 一個短暫的控制提示或互動提示
- 一個可選的可折疊次要介面，例如日記、地圖或任務記錄
不要在首次載入時開啟所有資訊介面。在使用者開啟任何更深層的 UI 之前，場景應該是可讀的。
作為 3D 瀏覽器遊戲的預設實作限制：
- 避免永遠存在的全寬頁首、多卡片內文與全寬頁尾的佈局
- 在正常移動時，避免大面積的中央或中下方覆蓋層
- 在桌面上，常駐 HUD 覆蓋視口的面積不應超過約 20-25%，除非使用者明確要求更密集的佈局
- 在行動裝置上，在覆蓋遊玩區的大面板出現之前，先收縮為窄堆疊或情境晶片
提示規則
當要求模型設計或實作遊戲 UI 時，請包含：
- 遊戲幻想風格
- 相機或視角
- 玩家操作
- HUD 層次
- 相機或控制模式（當遊戲為 3D 時）
- 動感基調
- 桌面與行動裝置的期望
- 遊玩區保護與揭露策略
- 需避免的明確反模式
使用 ../../references/frontend-prompts.md 獲取具體的提示範本。
動畫規則
- 偏好少數有意義的轉場，而非持續的微動畫。
- 將強烈的動畫保留給狀態變更、獎勵、危險與引導。
- 對非必要動畫尊重「減少動畫」設定。
- 避免 3D HUD 動畫與相機動畫相互競爭。
理想範例
- HUD 元素在不壓平場景的情況下仍然清晰可讀。
- 選單感覺是遊戲世界的一部分，而非 SaaS 管理面板。
- 佈局在不同斷點之間能乾淨地適配。
- 指標、鍵盤與遊戲狀態的回饋是明確的。
- 在 3D 遊戲中，選單與 HUD 狀態不與相機控制或指標鎖定衝突。
- 在 3D 遊戲中，第一個可遊玩的視角應將大部分視口保留給移動、瞄準與空間閱讀。
- 常駐資訊密度夠低，使得截圖仍然看起來像遊戲場景，而非 UI 合成圖。
反模式
- 通用的應用程式儀表板佈局
- 沒有主題的平面佔位符樣式
- 未經考量的預設字體堆疊
- 遮蔽遊玩區的密集覆蓋層
- 大面積標題卡或多段落筆記覆蓋在即時可遊玩的場景上
- 圍繞視口每個邊緣平均分佈的同等權重方框面板
- 控制項、目標、筆記與傳說在首次載入時全部展開
- 在 3D 遊玩中使用全寬頂部與底部 Chrome，搭配大面積的常駐中央或內文面板
- 對每個元素施加過多的動畫
- 當 DOM 更清晰且更省資源時，仍使用 Canvas-only UI
- 當標準 DOM 更清晰時，強行將 HUD 控制項置入 3D 場景
- 在彈出視窗或物品欄面板下方，仍讓相機輸入保持活動
參考資料
- 共享架構：
../web-game-foundations/SKILL.md - 提示食譜：
../../references/frontend-prompts.md - 低 Chrome 的 3D 佈局模式：
../../references/three-hud-layout-patterns.md - React 託管的 3D UI 上下文：
../react-three-fiber-game/SKILL.md - 試玩審查：
../../references/playtest-checklist.md