# LinguaForge 使用者流程與 UI/UX 設計

## 1. 使用者旅程地圖

### 1.1 新使用者旅程
```
開啟 App → 歡迎頁面 → 註冊/登入 → 引導教學 → 設定學習目標 → 開始第一張詞卡
```

### 1.2 回訪使用者旅程
```
開啟 App → 自動登入 → 首頁儀表板 → 選擇學習活動 → 完成學習 → 查看進度
```

## 2. 核心使用者流程

### 2.1 註冊與登入流程
```mermaid
flowchart TD
    A[App 啟動畫面] --> B{是否已登入?}
    B -->|是| C[首頁儀表板]
    B -->|否| D[歡迎頁面]
    D --> E[選擇註冊/登入]
    E --> F{選擇方式}
    F -->|註冊| G[輸入 Email/密碼]
    F -->|登入| H[輸入憑證]
    G --> I[Email 驗證]
    I --> J[設定個人資料]
    J --> K[引導教學]
    H --> L{驗證成功?}
    L -->|是| C
    L -->|否| M[顯示錯誤]
    M --> H
    K --> C
```

### 2.2 AI 詞卡生成流程
```mermaid
flowchart TD
    A[首頁] --> B[點擊「新增詞卡」]
    B --> C[輸入英文句子]
    C --> D[系統標記可選單字]
    D --> E[使用者選擇目標單字]
    E --> F[點擊「生成詞卡」]
    F --> G[顯示載入動畫]
    G --> H[AI 生成內容]
    H --> I[顯示詞卡預覽]
    I --> J{使用者確認?}
    J -->|確認| K[儲存詞卡]
    J -->|編輯| L[手動調整內容]
    L --> K
    K --> M[加入學習清單]
```

### 2.3 間隔重複複習流程
```mermaid
flowchart TD
    A[開啟 App] --> B[檢查今日複習]
    B --> C{有待複習詞卡?}
    C -->|是| D[顯示複習提醒]
    C -->|否| E[顯示「今日完成」]
    D --> F[進入複習模式]
    F --> G[顯示詞卡正面]
    G --> H[使用者回想]
    H --> I[顯示答案]
    I --> J[自評難度 0-5]
    J --> K[更新複習排程]
    K --> L{還有詞卡?}
    L -->|是| G
    L -->|否| M[顯示複習統計]
    M --> N[返回首頁]
```

### 2.4 語音評估流程
```mermaid
flowchart TD
    A[詞卡詳情頁] --> B[點擊「練習發音」]
    B --> C[顯示目標文字]
    C --> D[點擊錄音按鈕]
    D --> E[開始錄音]
    E --> F[使用者朗讀]
    F --> G[停止錄音]
    G --> H[上傳音檔]
    H --> I[等待評估]
    I --> J[顯示評分結果]
    J --> K{分數滿意?}
    K -->|否| L[重新錄音]
    K -->|是| M[儲存記錄]
    L --> D
    M --> N[返回詞卡]
```

## 3. 畫面架構

### 3.1 App 資訊架構
```
App
├── 未登入狀態
│   ├── 歡迎頁
│   ├── 登入頁
│   ├── 註冊頁
│   └── 忘記密碼
├── 已登入狀態
│   ├── 首頁 (Tab 1)
│   │   ├── 今日複習卡片
│   │   ├── 學習統計
│   │   └── 快速操作
│   ├── 詞卡庫 (Tab 2)
│   │   ├── 所有詞卡
│   │   ├── 分類檢視
│   │   ├── 搜尋
│   │   └── 詞卡詳情
│   ├── 新增 (Tab 3)
│   │   ├── 句子輸入
│   │   ├── AI 生成
│   │   └── 手動建立
│   ├── 複習 (Tab 4)
│   │   ├── 複習模式
│   │   ├── 練習模式
│   │   └── 測驗模式
│   └── 個人 (Tab 5)
│       ├── 個人資料
│       ├── 學習設定
│       ├── 訂閱管理
│       └── 設定
```

## 4. 線框圖設計

### 4.1 首頁儀表板
```
┌─────────────────────────────┐
│  🔔 LinguaForge      👤     │
├─────────────────────────────┤
│                             │
│  今日學習目標               │
│  ████████░░  15/20 完成     │
│                             │
├─────────────────────────────┤
│  待複習詞卡                 │
│  ┌─────────┐ ┌─────────┐   │
│  │ abandon │ │ achieve │   │
│  │  放棄   │ │  達成   │   │
│  └─────────┘ └─────────┘   │
│         查看全部 →          │
├─────────────────────────────┤
│  學習統計                   │
│  連續 7 天 🔥               │
│  本週複習 156 張            │
│  正確率 85%                 │
├─────────────────────────────┤
│  快速操作                   │
│  [開始複習] [新增詞卡]      │
└─────────────────────────────┘
│ 首頁│詞卡│ ➕ │複習│個人 │
└─────────────────────────────┘
```

### 4.2 詞卡生成頁面
```
┌─────────────────────────────┐
│  ← 新增詞卡                 │
├─────────────────────────────┤
│                             │
│  輸入包含生詞的句子：       │
│  ┌─────────────────────┐   │
│  │ I need to abandon   │   │
│  │ this bad habit.     │   │
│  └─────────────────────┘   │
│                             │
│  選擇要學習的單字：         │
│  [abandon] [need] [habit]   │
│                             │
│  已選擇: abandon            │
│                             │
│  [🤖 AI 生成詞卡]           │
│                             │
├─────────────────────────────┤
│  生成中...                  │
│  ⚪⚪⚪⚫⚪                │
│                             │
└─────────────────────────────┘
```

### 4.3 詞卡複習界面
```
┌─────────────────────────────┐
│  複習模式      5/20    ✕    │
├─────────────────────────────┤
│                             │
│                             │
│         abandon             │
│                             │
│         /əˈbændən/          │
│                             │
│       [🔊 播放發音]         │
│                             │
│                             │
│    [點擊顯示答案]           │
│                             │
│                             │
└─────────────────────────────┘

顯示答案後:
┌─────────────────────────────┐
│  複習模式      5/20    ✕    │
├─────────────────────────────┤
│         abandon             │
│         /əˈbændən/          │
│                             │
│     v. 放棄、遺棄           │
│                             │
│  例句:                      │
│  He had to abandon his     │
│  plan due to lack of funds. │
│                             │
│  圖片: [相關圖片]           │
│                             │
├─────────────────────────────┤
│  這個單字的難度如何？       │
│  😵 很難  😕 困難  😐 一般  │
│  🙂 簡單  😊 很簡單         │
└─────────────────────────────┘
```

### 4.4 語音評估界面
```
┌─────────────────────────────┐
│  ← 發音練習                 │
├─────────────────────────────┤
│                             │
│  請朗讀以下句子：           │
│                             │
│  "I need to abandon this    │
│   bad habit immediately."    │
│                             │
│      ┌──────────┐           │
│      │    🎤    │           │
│      │  點擊錄音 │           │
│      └──────────┘           │
│                             │
├─────────────────────────────┤
│  評估結果:                  │
│                             │
│  準確度: ████████░░ 85%     │
│  流暢度: ███████░░░ 72%     │
│  完整度: ██████████ 100%    │
│                             │
│  綜合評分: 86 分 👍          │
│                             │
│  [重新錄音] [下一個]        │
└─────────────────────────────┘
```

## 5. UI 設計原則

### 5.1 視覺設計
- **色彩方案**:
  - 主色: #4F46E5 (靛藍)
  - 輔色: #10B981 (綠色-成功)
  - 警告: #F59E0B (琥珀)
  - 錯誤: #EF4444 (紅色)
  - 背景: #F9FAFB (淺灰)

- **字體**:
  - 英文: SF Pro Display / Inter
  - 中文: PingFang TC / Noto Sans TC

- **間距系統**: 4px 基準網格

### 5.2 互動設計原則
1. **即時反饋**: 所有操作提供視覺/觸覺反饋
2. **載入狀態**: 明確的進度指示器
3. **錯誤處理**: 友善的錯誤訊息與復原建議
4. **手勢操作**: 支援滑動切換詞卡
5. **鍵盤優化**: 自動聚焦、完成按鈕

### 5.3 無障礙設計
- 支援 VoiceOver/TalkBack
- 足夠的顏色對比度 (WCAG AA)
- 可調整字體大小
- 支援深色模式

## 6. 動畫與過渡

### 6.1 微互動動畫
```javascript
// 詞卡翻轉動畫
CardFlip: {
  duration: 400ms,
  easing: 'ease-in-out',
  transform: 'rotateY(180deg)'
}

// 進度條動畫
ProgressBar: {
  duration: 300ms,
  easing: 'ease-out'
}

// 成功反饋
SuccessPulse: {
  scale: [1, 1.1, 1],
  duration: 300ms
}
```

### 6.2 頁面過渡
- 推入/推出: 頁面導航
- 淡入/淡出: 模態視窗
- 底部滑入: 操作表單

## 7. 響應式設計考量

### 7.1 裝置適配
- iPhone SE (375px)
- iPhone 14 (390px)
- iPhone 14 Plus (428px)
- iPad (768px+)
- Android 各尺寸

### 7.2 橫豎屏切換
- 詞卡複習: 支援橫屏顯示更多內容
- 統計圖表: 橫屏顯示詳細圖表
- 其他頁面: 鎖定豎屏

## 8. 原型連結與設計交付

### 8.1 設計工具
- **線框圖**: Figma / Sketch
- **原型**: Figma / Principle
- **設計系統**: Figma Variables
- **交付**: Zeplin / Figma Dev Mode

### 8.2 設計規範文件
- 元件庫規範
- 顏色使用指南
- 文字樣式指南
- 間距與佈局規範
- 圖標使用規範