第二十七課：遊戲 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 告訴你「還有多少血」，特效告訴你「這一下打沒打上」。