作品展示

一組完整的遊戲卡牌 UI 設計流程圖解，涵蓋卡面基礎框架、稀有度邊框、角色立繪遮罩、屬性圖標、技能描述區、特效光暈、動態狀態（普通/按下/禁用/升級）等完整狀態機設計。適合 UI 設計師參考圖層結構規範與視覺規範制定。

圖層結構規範參考

• 群組：Card_Base — 背景紋理、邊框、稀有度色條、陰影。
• 群組：Character — 立繪圖層（智能對象）、遮罩蒙版、邊緣發光、呼吸動畫關鍵幀。
• 群組：Info — 名稱文字、職業圖標、稀有度星級、屬性數值(攻/防/血)、技能圖標+文字描述。
• 群組：FX — 邊框流光、稀有度粒子、元素屬性光效、全息投影動畫序列幀。
• 群組：States — Normal / Hover / Pressed / Disabled / Upgrading / MaxLevel 等狀態組，各含獨立效果圖層，通過圖層組顯隱切換狀態。

專業建議

1. 智能對象承載立繪：原畫替換只需雙擊智能對象更新，所有狀態同步。
2. 文字樣式統一：定義段落/字符樣式，確保多語言版本一鍵切換。
3. 切圖標註輸出：配合「圖層導出為」/「存儲為 Web」輸出 @1x/@2x/@3x，命名規範 card_{rarity}_{state}_{element}@2x.png。
4. 動效交付：關鍵幀導出 PNG 序列或 After Effects 構圖，提供給動效設計師/程式端實現。