遊戲 UI 按鈕需兼顧「可點擊性暗示」與「視覺回饋」。本教學拆解普通態/懸停態/按下態/禁用態四狀態按鈕設計，重點講解斜面浮雕、內外發光、漸層疊加、紋理噪點、投影層級等質感構建技巧，適合 UI 新手系統入門。

四狀態設計規範

• 普通態：基礎漸層+邊框+圖標，清晰可辨。
• 懸停態：亮度 +10%、外發光增強、邊框高光加粗。
• 按下態：內陰影加深、漸層方向反轉、整體下移 1-2px、外發光減弱。
• 禁用態：去色/降飽和、不透明度 50%、移除發光/陰影，視覺退後。

質感構建關鍵步驟（以普通態為例）

1. 圓角矩形工具畫按鈕基礎形（半徑 8-12px）。
2. 圖層樣式：
    • 漸層疊加：線性/徑向，顏色對應品牌色系（如藍系 #2A7BFF→#004ECC）。
    • 斜面與浮雕：外部斜面、大小 5px、柔化 3px、角度 90°、高光「螢幕」40%、陰影「正片疊底」30%。
    • 描邊：1px、漸層/顏色深於基底、位置「內部」。
    • 內發光：顏色品牌主色、大小 8px、噪點 5%、來源「中心」。
    • 外發光：同色、大小 12px、範圍 30%、模式「螢幕」。
    • 投影：距離 2px、大小 4px、不透明度 25%。
3. 圖標/文字置中，同樣加內發光/投影確保可讀性。
4. 將上述樣式存為「圖層樣式預設」，一鍵套用至其他按鈕尺寸。

狀態切換實作

用圖層合成/智能物件/圖層合成面板管理四狀態，或輸出四張 PNG 供前端 CSS Sprite 使用。注意保持圖層結構一致，僅修改樣式參數，確保視覺一致性。

步驟截圖：