257 lines
11 KiB
Markdown
257 lines
11 KiB
Markdown
# 詞彙學習功能規格文檔 (Web版)
|
||
|
||
## 📋 功能概述
|
||
|
||
**功能名稱**: 詞彙學習訓練系統 (Web端)
|
||
**建立日期**: 2025-09-09
|
||
**最後更新**: 2025-09-09
|
||
**負責團隊**: 前端Web/設計/開發
|
||
**對應Mobile規格**: `../mobile/02_詞彙學習功能規格.md`
|
||
|
||
### 主要功能
|
||
- 漸進式詞彙學習路徑：介紹→練習→測試→複習
|
||
- 多維度練習模式：選擇題、圖片匹配、句子應用
|
||
- 流暢度評估系統：反應時間與正確率綜合評判
|
||
- 間隔複習機制：基於遺忘曲線的智能複習安排
|
||
- 個人化學習調整：根據表現動態調整難度和內容
|
||
|
||
### Web端特色功能
|
||
- **快捷鍵操作**: 支援鍵盤快捷鍵提升學習效率
|
||
- **大螢幕優化**: 利用桌面螢幕空間展示更多學習內容
|
||
- **多視窗支援**: 可同時開啟多個學習模組進行對比學習
|
||
- **高級統計面板**: 詳細的學習數據可視化分析
|
||
|
||
### 適用場景
|
||
- 辦公室或家中的深度學習時段
|
||
- 需要大量文字輸入的詞彙練習
|
||
- 詳細學習數據分析和複習規劃
|
||
- 多螢幕環境下的沉浸式學習
|
||
|
||
### 與其他功能的關聯
|
||
- **情境對話系統**: 為對話提供詞彙基礎，指定詞彙在對話中使用
|
||
- **學習地圖系統**: 按階段解鎖詞彙學習內容
|
||
- **複習系統**: 整合間隔複習演算法，安排詞彙複習
|
||
- **成就系統**: 詞彙掌握里程碑和學習成就追蹤
|
||
|
||
## 💻 涉及的Web頁面
|
||
|
||
### 主要頁面
|
||
1. **Page_Vocab_Introduction_W** - 詞彙介紹主頁面 (Web版)
|
||
2. **Page_Vocab_Choice_Practice_W** - 詞彙選擇練習頁面 (Web版)
|
||
3. **Page_Vocab_Fluency_Matching_W** - 圖片匹配練習頁面 (Web版)
|
||
4. **Page_Vocab_Fluency_Reorganize_W** - 句子重組練習頁面 (Web版)
|
||
5. **Page_Vocab_Review_Main_W** - 詞彙複習主頁面 (Web版)
|
||
|
||
### 結果反饋頁面
|
||
1. **Page_Vocab_Choice_Results_W** - 選擇題結果分析 (Web版)
|
||
2. **Page_Vocab_Fluency_Results_W** - 流暢度練習綜合結果 (Web版)
|
||
3. **Page_Vocab_Analytics_Dashboard_W** - 詞彙學習分析儀表板 (Web專用)
|
||
|
||
## 🎯 詳細頁面規格
|
||
|
||
### Page_Vocab_Introduction_W - 詞彙介紹主頁面 (Web版)
|
||
|
||
#### 功能說明
|
||
- **頁面目的**: 在桌面環境中為用戶介紹新詞彙，提供豐富的學習資源和互動體驗
|
||
- **進入條件**: 從學習地圖選擇詞彙學習關卡，或透過瀏覽器書籤直接進入
|
||
- **退出條件**: 完成詞彙介紹進入練習階段，或關閉瀏覽器標籤
|
||
|
||
#### Web版特有功能
|
||
- **多列布局**: 左側詞彙資訊，右側相關詞彙和例句
|
||
- **詞典整合**: 滑鼠懸停即時顯示釋義，右鍵查詢外部詞典
|
||
- **筆記功能**: 內建筆記編輯器，支援Markdown格式
|
||
- **書籤管理**: 瀏覽器書籤整合，快速收藏重要詞彙
|
||
|
||
#### 頁面欄位細節
|
||
|
||
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|
||
|---------|---------|------|--------|----------|----------|
|
||
| 目標詞彙文字 | String | 是 | - | 1-50字 | 始終顯示，大字體標題 |
|
||
| 音標顯示 | String | 是 | - | IPA音標格式 | 詞彙下方，支援點擊複製 |
|
||
| 中文定義 | String | 是 | - | 10-100字 | 主要定義區域 |
|
||
| 英文定義 | String | 否 | - | 10-200字 | 進階模式顯示，可切換 |
|
||
| 詞性標記 | String | 是 | - | n./v./adj.等 | 色彩編碼顯示 |
|
||
| 例句1-5 | String | 是 | - | 10-100字 | 多例句並列顯示 |
|
||
| 使用情境說明 | String | 是 | - | 20-200字 | 獨立區塊顯示 |
|
||
| 相關詞彙推薦 | Array | 否 | [] | 詞彙陣列 | 右側面板顯示 |
|
||
| 詞頻統計 | Number | 否 | - | 1-5星評級 | 使用頻率指示 |
|
||
| 用戶筆記 | String | 否 | - | 不限長度 | 可摺疊筆記區域 |
|
||
| 學習進度 | Number | 是 | 0 | 0-100% | 進度條顯示 |
|
||
|
||
#### Web版互動元素
|
||
|
||
| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|
||
|---------|---------|----------|--------|----------|------|
|
||
| 發音播放按鈕 | 按鈕 | 點擊/空白鍵 | Space | 正常→播放中 | 支援重複播放和語速調節 |
|
||
| 慢速發音按鈕 | 按鈕 | 點擊/Shift+Space | Shift+Space | 正常→播放中 | 0.5x-1.5x語速調節 |
|
||
| 例句發音按鈕 | 按鈕 | 點擊/數字鍵1-5 | 1-5 | 正常→播放中 | 每個例句對應數字鍵 |
|
||
| 收藏按鈕 | 按鈕 | 點擊/Ctrl+D | Ctrl+D | 未收藏↔已收藏 | 整合瀏覽器書籤 |
|
||
| 相關詞彙按鈕 | 按鈕 | 點擊/右鍵新標籤 | Ctrl+Click | - | 支援新標籤開啟 |
|
||
| 筆記編輯器 | 文本區域 | 點擊/Ctrl+N | Ctrl+N | 收合→展開 | 支援Markdown語法 |
|
||
| 詞典查詢按鈕 | 按鈕 | 右鍵選單 | F1 | - | 新視窗開啟外部詞典 |
|
||
| 開始練習按鈕 | 按鈕 | 點擊/Enter | Enter | - | 主要行動按鈕 |
|
||
| 跳過介紹按鈕 | 按鈕 | 點擊/Shift+Enter | Shift+Enter | - | 快速通道 |
|
||
|
||
#### Web版使用者操作流程
|
||
1. **快速瀏覽**: 頁面載入 → 自動播放發音 → 快速瀏覽定義和例句
|
||
2. **深度學習**: 展開筆記編輯器 → 記錄重點 → 查詢相關詞彙 → 使用快捷鍵快速操作
|
||
3. **多標籤學習**: 右鍵開啟相關詞彙 → 多標籤對比學習 → 統一管理學習進度
|
||
4. **鍵盤操作**: 全程使用快捷鍵 → 提升學習效率 → 無需使用滑鼠
|
||
|
||
### Page_Vocab_Analytics_Dashboard_W - 詞彙學習分析儀表板 (Web專用)
|
||
|
||
#### 功能說明
|
||
- **頁面目的**: 提供詳細的詞彙學習數據分析和可視化圖表
|
||
- **進入條件**: 從詞彙學習結果頁面點擊"詳細分析"，或從主選單進入
|
||
- **退出條件**: 返回學習模組或關閉頁面
|
||
|
||
#### Web版專有功能
|
||
- **多維度數據視覺化**: 雷達圖、趨勢圖、熱力圖等豐富圖表
|
||
- **自訂報告**: 用戶可選擇時間範圍和分析維度
|
||
- **數據匯出**: 支援CSV、PDF格式匯出
|
||
- **印刷友善格式**: 優化列印版面配置
|
||
|
||
#### 頁面欄位細節
|
||
|
||
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|
||
|---------|---------|------|--------|----------|----------|
|
||
| 時間範圍選擇器 | DateRange | 是 | 最近7天 | 有效日期範圍 | 頁面頂部，始終可見 |
|
||
| 整體學習統計 | Object | 是 | - | 統計物件 | 卡片式布局顯示 |
|
||
| 詞彙掌握度分布圖 | Chart | 是 | - | 圖表數據 | 圓餅圖顯示 |
|
||
| 學習進度趨勢圖 | Chart | 是 | - | 時間序列數據 | 折線圖顯示 |
|
||
| 錯誤分析熱力圖 | Chart | 是 | - | 矩陣數據 | 熱力圖顯示 |
|
||
| 詞彙分類統計 | Table | 是 | - | 表格數據 | 可排序表格 |
|
||
| 學習建議清單 | Array | 是 | - | 建議陣列 | 列表形式顯示 |
|
||
| 薄弱點識別 | Array | 是 | - | 詞彙陣列 | 標籤雲顯示 |
|
||
|
||
#### Web版互動元素
|
||
|
||
| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|
||
|---------|---------|----------|--------|----------|------|
|
||
| 時間範圍篩選器 | 日期選擇器 | 點擊/Tab導航 | T | 收合→展開 | 支援快速預設範圍 |
|
||
| 圖表縮放控制 | 按鈕組 | 滑鼠滾輪/+- | +/- | - | 支援圖表放大縮小 |
|
||
| 數據篩選器 | 下拉選單 | 點擊/方向鍵 | F | - | 多選篩選條件 |
|
||
| 匯出按鈕 | 按鈕 | 點擊/Ctrl+E | Ctrl+E | 正常→處理中 | 背景處理匯出 |
|
||
| 列印按鈕 | 按鈕 | 點擊/Ctrl+P | Ctrl+P | - | 優化列印格式 |
|
||
| 全螢幕按鈕 | 按鈕 | 點擊/F11 | F11 | 正常↔全螢幕 | 沉浸式分析模式 |
|
||
| 數據表格排序 | 表格標題 | 點擊/方向鍵 | ↑/↓ | 升序↔降序 | 支援多列排序 |
|
||
| 圖表類型切換 | 選項卡 | 點擊/數字鍵 | 1-5 | - | 快速切換圖表類型 |
|
||
|
||
## 🌐 Web端技術特點
|
||
|
||
### 響應式設計
|
||
- **桌面優先**: 1200px以上寬度的最佳化設計
|
||
- **平板適應**: 768px-1199px的平板橫向模式支援
|
||
- **快捷鍵系統**: 完整的鍵盤操作支援
|
||
- **無障礙設計**: 符合WCAG 2.1 AA標準
|
||
|
||
### 效能最佳化
|
||
- **懶載入**: 圖片和音頻按需載入
|
||
- **快取策略**: 離線學習內容快取
|
||
- **預載入**: 預先載入下一個詞彙內容
|
||
- **CDN加速**: 音頻和圖片資源CDN分發
|
||
|
||
### 瀏覽器整合
|
||
- **書籤同步**: 與瀏覽器書籤系統整合
|
||
- **歷史記錄**: 學習歷程納入瀏覽器歷史
|
||
- **標籤管理**: 支援多標籤同時學習
|
||
- **快捷鍵**: 瀏覽器原生快捷鍵支援
|
||
|
||
## ⌨️ Web版快捷鍵一覽
|
||
|
||
### 通用快捷鍵
|
||
- `Space` - 播放/暫停詞彙發音
|
||
- `Shift + Space` - 播放慢速發音
|
||
- `1-5` - 播放對應例句發音
|
||
- `Enter` - 確認/下一步
|
||
- `Esc` - 取消/返回
|
||
- `Tab` - 焦點移動
|
||
- `Ctrl + D` - 收藏詞彙
|
||
- `Ctrl + N` - 開啟/關閉筆記
|
||
- `F1` - 開啟詞典查詢
|
||
|
||
### 學習過程快捷鍵
|
||
- `A/B/C/D` - 選擇對應選項
|
||
- `Ctrl + Enter` - 提交答案
|
||
- `Shift + Enter` - 跳過題目
|
||
- `Ctrl + R` - 重新開始
|
||
- `Ctrl + H` - 顯示提示
|
||
|
||
### 分析頁面快捷鍵
|
||
- `T` - 開啟時間範圍選擇器
|
||
- `F` - 開啟篩選器
|
||
- `Ctrl + E` - 匯出數據
|
||
- `Ctrl + P` - 列印報告
|
||
- `F11` - 全螢幕模式
|
||
- `+/-` - 縮放圖表
|
||
|
||
## 📊 Web版業務邏輯差異
|
||
|
||
### 學習會話管理
|
||
- **多標籤支援**: 可同時進行多個學習會話
|
||
- **會話暫存**: 瀏覽器關閉前自動保存學習進度
|
||
- **跨裝置同步**: 透過帳戶同步學習狀態
|
||
- **離線模式**: 支援離線學習，上線後同步
|
||
|
||
### 數據分析增強
|
||
- **實時圖表**: 學習過程中即時更新統計圖表
|
||
- **歷史對比**: 可對比不同時間段的學習表現
|
||
- **詳細報告**: 比Mobile版更詳盡的分析報告
|
||
- **數據匯出**: 支援學習數據的多格式匯出
|
||
|
||
## 🧪 Web版測試要點
|
||
|
||
### 瀏覽器相容性測試
|
||
- [ ] Chrome 90+ 功能完整性
|
||
- [ ] Firefox 85+ 功能完整性
|
||
- [ ] Safari 14+ 功能完整性
|
||
- [ ] Edge 90+ 功能完整性
|
||
|
||
### 響應式測試
|
||
- [ ] 1920x1080 桌面解析度最佳化
|
||
- [ ] 1366x768 筆電解析度適配
|
||
- [ ] 1024x768 平板橫向模式
|
||
- [ ] 縮放至50%-200%正常顯示
|
||
|
||
### 快捷鍵測試
|
||
- [ ] 所有定義快捷鍵正常工作
|
||
- [ ] 快捷鍵與瀏覽器原生功能不衝突
|
||
- [ ] 焦點管理和鍵盤導航順序正確
|
||
- [ ] 無障礙輔助工具相容性
|
||
|
||
### 效能測試
|
||
- [ ] 頁面載入時間 < 3秒
|
||
- [ ] 音頻播放延遲 < 200ms
|
||
- [ ] 圖表渲染流暢度 >= 30fps
|
||
- [ ] 記憶體使用量合理範圍
|
||
|
||
## 📝 Web端開發注意事項
|
||
|
||
### 前端開發
|
||
- 使用現代JavaScript框架 (React/Vue/Angular)
|
||
- 圖表庫選用 D3.js 或 Chart.js
|
||
- 音頻播放使用 Web Audio API
|
||
- 響應式設計使用 CSS Grid 和 Flexbox
|
||
|
||
### 用戶體驗
|
||
- 首屏載入優化，關鍵內容優先載入
|
||
- 快捷鍵提示和幫助系統
|
||
- 錯誤處理和離線狀態提示
|
||
- 學習進度的視覺化反饋
|
||
|
||
### 整合注意事項
|
||
- PWA支援，可安裝為桌面應用
|
||
- 通知API整合，支援桌面通知
|
||
- 資料同步策略，離線優先設計
|
||
- SEO優化，學習內容可被搜尋引擎索引
|
||
|
||
---
|
||
|
||
**文檔狀態**: 🟢 已完成
|
||
**最後更新**: 2025-09-09
|
||
**版本**: v1.0
|
||
**相關文檔**:
|
||
- `../mobile/02_詞彙學習功能規格.md` - 對應的Mobile版規格
|
||
- `../common/業務規則.md` - 共同業務邏輯
|
||
- `../common/數據模型.md` - 數據結構定義
|
||
- `../common/API規格.md` - API接口規格 |