dramaling-vocab-learning/docs/02_design/user-flows.md

# DramaLing 用戶流程文檔

## 1. 核心用戶流程圖

```mermaid
graph TD
    Start[用戶訪問網站] --> Check{已登入?}
    Check -->|否| Landing[首頁]
    Check -->|是| Dashboard[儀表板]

    Landing --> SignUp[註冊]
    Landing --> Login[登入]

    SignUp --> EmailVerify[郵件驗證]
    EmailVerify --> Dashboard
    Login --> Dashboard

    Dashboard --> Generate[AI生成詞卡]
    Dashboard --> Learn[開始學習]
    Dashboard --> Manage[管理詞卡]

    Generate --> Review[預覽生成結果]
    Review --> Save[保存到卡組]

    Learn --> Mode{選擇模式}
    Mode --> Flip[翻卡學習]
    Mode --> Quiz[測驗模式]

    Manage --> CRUD[增刪改查]
```

## 2. 詳細用戶流程

### 2.1 新用戶註冊流程

#### 流程步驟
1. **進入首頁**
   - 看到產品介紹
   - 點擊「免費開始」或「註冊」

2. **選擇註冊方式**
   - Option A: Email 註冊
   - Option B: Google 快速註冊

3. **Email 註冊路徑**
   ```
   輸入資料 → 提交表單 → 發送驗證郵件 → 查收郵件 → 點擊驗證連結 → 完成註冊
   ```
   - 輸入：Email、密碼、用戶名
   - 即時驗證：密碼強度、Email 格式
   - 錯誤提示：Email 已註冊、密碼不符要求

4. **Google 註冊路徑**
   ```
   點擊 Google 登入 → 授權 → 自動創建帳號 → 進入儀表板
   ```

5. **註冊成功**
   - 自動登入
   - 顯示歡迎引導
   - 推薦首次操作

#### UI 狀態
- Loading：提交中顯示載入動畫
- Error：顯示錯誤訊息並保留用戶輸入
- Success：跳轉到儀表板

#### 異常處理
- 驗證郵件未收到 → 提供重發按鈕
- 驗證連結過期 → 提示重新發送
- Google 登入失敗 → 回退到手動註冊

### 2.2 AI 詞卡生成流程

#### 流程步驟
1. **進入生成頁面**
   - 從儀表板點擊「生成新詞卡」
   - 或從頂部導航欄快速入口

2. **選擇生成方式**
   ```
   文字輸入模式 ←→ 主題選擇模式
   ```

3. **文字輸入模式**
   ```
   貼上文本 → 設定參數 → 點擊生成 → 等待 AI 處理 → 預覽結果
   ```
   - 輸入區：支援拖放文件
   - 參數設定：
     - 生成數量（5-20）
     - 難度等級（初/中/高）
     - 包含例句（開/關）
   - 進度顯示：生成中顯示進度條

4. **主題選擇模式**
   ```
   選擇主題 → 選擇子類別 → 設定數量 → 生成
   ```
   - 熱門主題快速選擇
   - 自定義主題輸入

5. **預覽與編輯**
   ```
   查看生成結果 → 編輯個別詞卡 → 刪除不需要的 → 確認保存
   ```
   - 卡片視圖預覽
   - 即時編輯功能
   - 批量操作選項

6. **保存到卡組**
   ```
   選擇現有卡組 OR 創建新卡組 → 添加標籤 → 完成
   ```

#### 限制與配額
- 免費用戶：每日 50 個詞卡
- 顯示剩餘配額
- 超出限制提示升級

#### 錯誤處理
- AI 服務不可用 → 顯示友善錯誤，提供重試
- 生成失敗 → 保留用戶輸入，允許重新生成
- 網路中斷 → 自動保存草稿

### 2.3 學習流程

#### 流程步驟
1. **選擇學習內容**
   ```
   儀表板 → 選擇卡組 → 選擇學習模式 → 開始學習
   ```
   - 顯示待複習數量
   - 推薦學習順序

2. **翻卡學習模式**
   ```
   顯示正面 → 思考 → 翻轉查看答案 → 自評難度 → 下一張
   ```
   - 操作方式：
     - 點擊翻轉
     - 鍵盤空格鍵
     - 手機滑動手勢
   - 評分選項：
     - 😔 完全不記得 (1分)
     - 😕 有印象但錯誤 (2分)
     - 😐 困難但正確 (3分)
     - 🙂 猶豫後正確 (4分)
     - 😄 輕鬆正確 (5分)

3. **測驗模式**
   ```
   顯示題目 → 選擇答案 → 即時反饋 → 查看解釋 → 下一題
   ```
   - 題型：
     - 英翻中選擇
     - 中翻英選擇
     - 聽力選擇
     - 拼寫填空
   - 即時顯示對錯
   - 錯誤時顯示正確答案

4. **學習結束**
   ```
   完成所有詞卡 → 顯示學習報告 → 更新統計 → 返回儀表板
   ```
   - 顯示內容：
     - 學習時長
     - 正確率
     - 掌握程度
     - 獲得經驗值

#### 中斷處理
- 學習中退出 → 提示保存進度
- 自動保存學習記錄
- 下次從中斷處繼續

### 2.4 詞卡管理流程

#### 流程步驟
1. **查看詞卡**
   ```
   進入卡組 → 瀏覽詞卡列表 → 查看詳情
   ```
   - 視圖切換：網格/列表
   - 排序選項：時間/字母/難度
   - 篩選器：標籤/狀態/難度

2. **編輯詞卡**
   ```
   選擇詞卡 → 點擊編輯 → 修改內容 → 保存
   ```
   - 可編輯欄位：
     - 單字/片語
     - 翻譯
     - 例句
     - 標籤
     - 筆記

3. **批量操作**
   ```
   進入選擇模式 → 勾選多個 → 選擇操作 → 確認執行
   ```
   - 批量移動
   - 批量刪除
   - 批量添加標籤
   - 批量重設進度

4. **搜尋功能**
   ```
   輸入關鍵字 → 即時搜尋 → 顯示結果 → 點擊查看
   ```
   - 搜尋範圍：單字、翻譯、例句
   - 高亮顯示匹配內容

### 2.5 個人設定流程

#### 流程步驟
1. **進入設定**
   ```
   點擊頭像 → 選擇設定 → 進入設定頁面
   ```

2. **個人資料**
   ```
   編輯資料 → 上傳頭像 → 保存更改
   ```
   - 可修改：用戶名、頭像、簡介
   - 不可修改：Email（需驗證）

3. **學習設定**
   ```
   調整參數 → 預覽效果 → 確認保存
   ```
   - 每日目標
   - 提醒時間
   - 學習模式偏好
   - 音效設定

4. **帳號安全**
   ```
   修改密碼 → 管理登入裝置 → 下載數據 → 刪除帳號
   ```
   - 修改密碼需驗證舊密碼
   - 顯示最近登入記錄
   - 數據導出（JSON/CSV）

## 3. 錯誤狀態處理

### 3.1 網路錯誤
```
檢測到錯誤 → 顯示錯誤提示 → 提供重試按鈕 → 自動重試(3次)
```
- 保留用戶輸入
- 顯示離線提示
- 恢復後自動同步

### 3.2 權限錯誤
```
未登入訪問受限頁面 → 重定向到登入 → 登入後返回原頁面
```
- 保存目標 URL
- 登入後自動跳轉

### 3.3 資料錯誤
```
載入失敗 → 顯示錯誤頁面 → 提供操作選項
```
- 友善的錯誤訊息
- 返回上一頁選項
- 聯繫支援連結

## 4. 行動裝置適配

### 4.1 觸控優化
- 按鈕最小 44x44px
- 滑動手勢支援
- 長按顯示選單
- 下拉刷新

### 4.2 螢幕適配
- 豎屏為主設計
- 橫屏特殊處理
- 安全區域適配
- 鍵盤彈出處理

### 4.3 性能優化
- 圖片延遲載入
- 虛擬滾動
- 離線快取
- 減少動畫

## 5. 無障礙設計

### 5.1 鍵盤導航
```
Tab 順序 → 焦點提示 → Enter 確認 → Esc 取消
```
- 所有功能可鍵盤操作
- 清晰的焦點指示
- 跳過導航連結

### 5.2 螢幕閱讀器
- 語義化 HTML
- ARIA 標籤
- 圖片替代文字
- 表單標籤關聯

### 5.3 視覺輔助
- 高對比模式
- 字體大小調整
- 顏色不作為唯一標識
- 動畫可關閉

## 6. 性能考量

### 6.1 載入優化
- 骨架屏顯示
- 漸進式載入
- 關鍵路徑優先
- 預載入下一頁

### 6.2 交互響應
- 樂觀更新
- 即時反饋
- 防抖處理
- 載入狀態提示

### 6.3 資料快取
- 本地存儲常用資料
- 智能預載入
- 背景同步
- 離線可用

## 7. 安全考量

### 7.1 輸入驗證
- 前端即時驗證
- 後端二次驗證
- XSS 防護
- SQL 注入防護

### 7.2 敏感操作
- 二次確認
- 密碼驗證
- 操作日誌
- 異常檢測

### 7.3 資料保護
- HTTPS 傳輸
- 敏感資料加密
- Token 定期更新
- 安全標頭設置