# Drama Ling - 行動版 UI/UX 設計展示

✨
✦
⭐
✧
✨
✦

## 📱 行動版按鈕系統

## 🎴 卡片組件

### 詞彙學習卡片

學習新詞彙並掌握正確發音

初級 已完成

### 對話練習完成

⭐ ⭐ ⭐ ⭐ ⭐

獲得 15 XP 和 2 鑽石

### 生命值不足

生命值 2/5

3小時後恢復或購買生命值

## 🗺️ 六角形關卡地圖

📚
詞彙
🎯
練習
💬
對話
🔒
鎖定
🔒
鎖定

## 💭 對話氣泡

🤖
Hello! What would you like to eat?
😊
I'm thinking about having some pizza.

## 📝 表單元件

用戶名稱
電子郵件

## 📊 狀態指示器

●
在線
●
學習中
●
離線
●
錯誤

## 🎮 互動示範

### 點擊上方按鈕體驗效果

## 📈 進度追蹤

學習進度 65%
詞彙掌握度 80%

## 🏆 徽章系統

新手上路 詞彙達人 對話新手 連續學習7天