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

DramaLing 用戶流程文檔

1. 核心用戶流程圖

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 定期更新
• 安全標頭設置