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