詞彙學習功能規格文檔 (Web版)
📋 功能概述
功能名稱: 詞彙學習訓練系統 (Web端)
建立日期: 2025-09-09
最後更新: 2025-09-09
負責團隊: 前端Web/設計/開發
對應Mobile規格: ../mobile/02_詞彙學習功能規格.md
主要功能
- 漸進式詞彙學習路徑：介紹→練習→測試→複習
- 多維度練習模式：選擇題、圖片匹配、句子應用
- 流暢度評估系統：反應時間與正確率綜合評判
- 間隔複習機制：基於遺忘曲線的智能複習安排
- 個人化學習調整：根據表現動態調整難度和內容
Web端特色功能
- 快捷鍵操作: 支援鍵盤快捷鍵提升學習效率
- 大螢幕優化: 利用桌面螢幕空間展示更多學習內容
- 多視窗支援: 可同時開啟多個學習模組進行對比學習
- 高級統計面板: 詳細的學習數據可視化分析
適用場景
- 辦公室或家中的深度學習時段
- 需要大量文字輸入的詞彙練習
- 詳細學習數據分析和複習規劃
- 多螢幕環境下的沉浸式學習
與其他功能的關聯
- 情境對話系統: 為對話提供詞彙基礎，指定詞彙在對話中使用
- 學習地圖系統: 按階段解鎖詞彙學習內容
- 複習系統: 整合間隔複習演算法，安排詞彙複習
- 成就系統: 詞彙掌握里程碑和學習成就追蹤
💻 涉及的Web頁面
主要頁面
- Page_Vocab_Introduction_W - 詞彙介紹主頁面 (Web版)
- Page_Vocab_Choice_Practice_W - 詞彙選擇練習頁面 (Web版)
- Page_Vocab_Fluency_Matching_W - 圖片匹配練習頁面 (Web版)
- Page_Vocab_Fluency_Reorganize_W - 句子重組練習頁面 (Web版)
- Page_Vocab_Review_Main_W - 詞彙複習主頁面 (Web版)
結果反饋頁面
- Page_Vocab_Choice_Results_W - 選擇題結果分析 (Web版)
- Page_Vocab_Fluency_Results_W - 流暢度練習綜合結果 (Web版)
- 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版使用者操作流程
- 快速瀏覽: 頁面載入 → 自動播放發音 → 快速瀏覽定義和例句
- 深度學習: 展開筆記編輯器 → 記錄重點 → 查詢相關詞彙 → 使用快捷鍵快速操作
- 多標籤學習: 右鍵開啟相關詞彙 → 多標籤對比學習 → 統一管理學習進度
- 鍵盤操作: 全程使用快捷鍵 → 提升學習效率 → 無需使用滑鼠
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版測試要點
瀏覽器相容性測試
響應式測試
快捷鍵測試
效能測試
📝 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接口規格