diff --git a/Drama_Ling_Enterprise_Design_Master_Plan.md b/Drama_Ling_Enterprise_Design_Master_Plan.md new file mode 100644 index 0000000..47bc20b --- /dev/null +++ b/Drama_Ling_Enterprise_Design_Master_Plan.md @@ -0,0 +1,389 @@ +# 🚀 Drama Ling 企業級UI設計總體計劃 + +**建立日期**: 2025-01-15 +**計劃版本**: v4.0 - 企業級重構 +**架構基礎**: 共用模組架構 v3.0 +**設計標準**: 企業級UI/UX規範 +**執行目標**: 95+ UI畫面完整重設計 + +## 📋 計劃概述 + +### 🎯 核心目標 +基於 Drama Ling v3.0 共用模組架構，創建企業級標準的完整UI設計系統，確保： +- **100%符合功能規格**: 嚴格按照 `/docs/02_design/function-specs/` 規格執行 +- **統一設計語言**: 完全遵循 `/docs/02_design/ui-ux/ui-ux-guidelines.md` 規範 +- **企業級品質**: 達到Fortune 500企業內部系統標準 +- **零設計債務**: 徹底重構，消除所有設計不一致問題 + +### 🏗️ 設計架構原則 +1. **規格優先**: 所有設計必須100%符合功能規格文件 +2. **模組化設計**: 基於v3.0共用模組架構的設計組件系統 +3. **一致性保證**: 跨平台設計語言統一 +4. **可擴展性**: 支援未來功能快速擴展的設計框架 +5. **無障礙標準**: 符合WCAG 2.1 AA級無障礙要求 + +## 🔍 階段一：設計規範完善與標準化 (第1-2週) + +### 1.1 UI/UX規範補全與更新 ⭐ **CRITICAL** + +**目標**: 建立企業級完整設計規範系統 + +**工作內容**: +- [ ] **色彩系統完善** + - 引用文件: `/docs/02_design/ui-ux/ui-ux-guidelines.md` (第35-103行) + - 補全遺失的色彩定義：狀態色彩、反饋色彩、學習進度色彩 + - 建立暗色/亮色主題完整色彩對照表 + - 定義色彩使用場景和層次規範 + +- [ ] **字體系統標準化** + - 引用文件: `/docs/02_design/ui-ux/ui-ux-guidelines.md` (第105-136行) + - 補全遺失字體規格：多語言字體、特殊用途字體 + - 建立響應式字體大小系統 (mobile/tablet/desktop) + - 定義字體層次和使用場景指南 + +- [ ] **間距與佈局系統** + - 引用文件: `/docs/02_design/ui-ux/ui-ux-guidelines.md` (第139-163行) + - 建立8px grid系統標準 + - 定義響應式佈局斷點和規則 + - 創建元件間距和頁面佈局標準模板 + +- [ ] **組件設計規範** + - 引用文件: `/docs/02_design/ui-ux/ui-ux-guidelines.md` (第188-200行) + - 補全缺失的組件規範：表單元件、遊戲化元件、學習專用元件 + - 建立組件狀態系統 (default/hover/active/disabled/loading) + - 定義組件變體和使用場景 + +**輸出物**: +- `ui-ux-guidelines.md` 完整更新版本 (企業級標準) +- `design-system-components.md` 完整組件庫文檔 +- `responsive-design-standards.md` 響應式設計標準 +- `accessibility-guidelines.md` 無障礙設計指南 + +### 1.2 企業級設計系統建立 + +**目標**: 創建可重用的設計系統和組件庫 + +**工作內容**: +- [ ] **原子設計系統**: Atoms → Molecules → Organisms → Templates → Pages +- [ ] **Design Tokens**: 設計變數化管理系統 +- [ ] **組件庫標準化**: 可重用UI組件集合 +- [ ] **圖標系統**: 學習情境專用圖標設計 +- [ ] **動畫設計語言**: 統一的動畫效果和互動反饋 + +**輸出物**: +- `design-system-tokens.css` - 完整設計變數系統 +- `component-library.html` - 互動式組件展示 +- `animation-guidelines.md` - 動畫設計標準 +- `icon-system.svg` - 完整圖標庫 + +## 📱 階段二：Mobile端企業級重設計 (第3-6週) + +### 2.1 核心學習功能頁面群組 (第3-4週) + +#### 2.1.1 情境對話系統 🎯 (優先級: P0) + +**規格參考**: +- 主規格: `/docs/02_design/function-specs/mobile/01_situational-dialogue-mobile.md` +- 共用模組: `/docs/02_design/function-specs/common/ai-algorithm-specs.md` +- 共用模組: `/docs/02_design/function-specs/common/speaking-evaluation-specs.md` +- 共用模組: `/docs/02_design/function-specs/common/pragmatic-analysis-specs.md` + +**需設計的頁面**: +- [ ] **UI_Dialogue_Practice_Main** - 情境對話練習主界面 + - 設計要求: 語音輸入界面 (參考: ai-algorithm-specs.md 語音處理) + - 設計要求: 即時AI反饋顯示 (參考: ai-algorithm-specs.md AI評估系統) + - 設計要求: 劇情任務和詞彙任務雙重可視化 + - 設計要求: 300秒限時挑戰計時器 + - UI規範: 語音優先設計、即時語法反饋 (ui-ux-guidelines.md 第27-28行) + +- [ ] **UI_Dialogue_Character_Selection** - 角色選擇頁面 + - 設計要求: 角色卡片設計，突出角色特色和學習情境 + - 設計要求: 角色能力和適合程度顯示 + +- [ ] **UI_Dialogue_Scene_Setting** - 場景設定頁面 + - 設計要求: 沉浸式場景展示 + - UI規範: 沉浸式學習環境設計 (ui-ux-guidelines.md 第9行) + +- [ ] **UI_AI_Assistance_Panel** - AI輔助功能面板 + - 設計要求: 回覆提示道具使用界面 + - 設計要求: 語法即時檢測顯示 + - UI規範: 智慧輔助、漸進引導 (ui-ux-guidelines.md 第21-22行) + +- [ ] **UI_Dialogue_Results** - 對話練習結果頁面 + - 設計要求: 口說評分五維雷達圖 (參考: speaking-evaluation-specs.md) + - 設計要求: 語用分析六維評估 (參考: pragmatic-analysis-specs.md) + - UI規範: 即時成就反饋 (ui-ux-guidelines.md 第25行) + +#### 2.1.2 詞彙學習系統 📝 (優先級: P0) + +**規格參考**: +- 主規格: `/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md` +- 共用模組: `/docs/02_design/function-specs/common/progressive-stage-system.md` + +**需設計的頁面**: +- [ ] **UI_Vocab_Learning_Enhanced** - 多媒體詞彙學習主界面 + - 設計要求: 詞彙展示 (音標、定義、例句) + - 設計要求: 雙語音頻系統 (標準速度/慢速) + - 設計要求: 智慧詞彙標註 (Source + Example) + - 設計要求: 視覺輔助學習 (例句配圖) + - UI規範: 詞彙學習流程 (ui-ux-guidelines.md 第29行) + +- [ ] **UI_Vocab_Choice_Practice** - 詞彙選擇練習頁面 + - 設計要求: 選擇題界面，支援多選和單選模式 + - 設計要求: 即時正確性反饋 + +- [ ] **UI_Vocab_Fluency_Results** - 流暢度練習綜合結果 + - 設計要求: 學習成效可視化展示 + - 設計要求: 進度追蹤和建議系統 + +- [ ] **UI_Vocab_Review_System** - 間隔複習系統界面 + - 設計要求: 複習提醒和排程界面 + - UI規範: 間隔複習提醒 (ui-ux-guidelines.md 第31行) + +#### 2.1.3 學習地圖系統 🗺️ (優先級: P0) + +**規格參考**: +- 主規格: `/docs/02_design/function-specs/mobile/03_learning-map-mobile.md` +- 共用模組: `/docs/02_design/function-specs/common/progressive-stage-system.md` + +**需設計的頁面**: +- [ ] **UI_Level_Map** - 學習地圖主畫面 (線性闖關版) + - 設計要求: 13階段×20劇本的地圖視覺化 + - 設計要求: 四關進度指示器 (詞彙學習→詞彙熟悉→口說練習→情境對話) + - 設計要求: 關卡狀態管理 (🔒鎖定/⏳可進行/🔄進行中/✅已完成) + - 引用規格: progressive-stage-system.md 完整關卡系統 + +- [ ] **UI_Current_Level_Info** - 當前可進行關卡資訊面板 + - 設計要求: 關卡詳細資訊展示 + - 設計要求: 開始學習入口和準備指南 + +- [ ] **UI_Level_Progress_Detail** - 關卡進度詳情頁面 + - 設計要求: 詳細進度追蹤和統計 + - 設計要求: 個人表現分析 + +- [ ] **UI_Stage_Overview** - 階段總覽和劇本選擇 + - 設計要求: 階段性學習目標展示 + - 設計要求: 劇本選擇和預覽功能 + +- [ ] **UI_Level_Locked_Modal** - 關卡鎖定提示彈窗 + - 設計要求: 解鎖條件清晰提示 + - 設計要求: 引導用戶完成前置任務 + +### 2.2 商業功能頁面群組 (第4-5週) + +#### 2.2.1 道具商店系統 🛒 (優先級: P1) + +**規格參考**: +- 主規格: `/docs/02_design/function-specs/mobile/04_item-shop-mobile.md` +- 共用模組: `/docs/02_design/function-specs/common/business-rules.md` + +**需設計的頁面**: +- [ ] **UI_Shop_Categories** - 道具商店分類主頁面 + - 設計要求: 鑽石購買區 (5個價格套餐) + - 設計要求: 學習輔助道具區 (回覆提示、補命、加時) + - 設計要求: 限時挑戰道具區 (時間暫停、時間加成) + - 引用規格: business-rules.md 命條系統和經濟系統 + +- [ ] **UI_Diamond_Purchase** - 鑽石購買頁面 + - 設計要求: 價格套餐展示和優惠信息 + - 設計要求: 支付流程整合 + +- [ ] **UI_Item_Details** - 單一道具詳情頁面 + - 設計要求: 道具功能詳細說明 + - 設計要求: 使用場景和效果展示 + +- [ ] **UI_Shop_Item_Confirm** - 道具購買確認彈窗 + - 設計要求: 購買資訊確認和風險提示 + - UI規範: 高風險按鈕文字標注 (ui-ux-guidelines.md 第194行) + +- [ ] **UI_Cost_Confirm_Popup** - 成本確認彈窗 (口說練習特別關卡) + - 設計要求: 特殊關卡成本說明 + - 設計要求: 用戶決策支援資訊 + +#### 2.2.2 用戶認證系統 🔐 (優先級: P1) + +**規格參考**: +- 主規格: `/docs/02_design/function-specs/mobile/05_user-authentication-mobile.md` +- 共用模組: `/docs/02_design/function-specs/common/business-rules.md` + +**需設計的頁面**: +- [ ] **UI_Login_Main** - 主要登入頁面 + - 設計要求: 多平台登入選項 (Google, Facebook, Apple) + - 設計要求: 記住登入和安全驗證 + - 設計要求: 錯誤處理和安全提示 + +- [ ] **UI_SignUp_Main** - 用戶註冊頁面 + - 設計要求: 分步驟註冊流程 + - 設計要求: 即時驗證和錯誤提示 + - 設計要求: 學習目標和程度設定 + +- [ ] **UI_PasswordReset_Form** - 密碼重置表單 + - 設計要求: 多步驟驗證流程 + - 設計要求: 安全性說明和引導 + +- [ ] **UI_PasswordReset_Popup** - 密碼重置確認彈窗 + - 設計要求: 重置成功確認和後續指引 + +- [ ] **UI_Account_List** - 帳戶列表管理頁面 + - 設計要求: 多帳戶管理和切換 + - 設計要求: 帳戶安全狀態顯示 + +- [ ] **UI_Account_Option** - 帳戶選項設定頁面 + - 設計要求: 帳戶設定和隱私控制 + - 設計要求: 帳戶關聯和解綁功能 + +### 2.3 支援功能頁面群組 (第5-6週) + +#### 2.3.1 系統介面和狀態頁面 📊 (優先級: P2) + +**需設計的頁面**: +- [ ] **UI_Insufficient_Resources** - 資源不足提示頁面 + - 設計要求: 清晰的資源不足說明 + - 設計要求: 獲取資源的引導路徑 + +- [ ] **UI_LifePoints_Display** - 生命點數顯示組件 + - 設計要求: 直觀的生命值視覺化 + - UI規範: 命條生命系統 (ui-ux-guidelines.md 第30行) + +- [ ] **UI_Subscription_Success** - 訂閱成功頁面 + - 設計要求: 訂閱確認和權益說明 + - 設計要求: 後續使用指引 + +- [ ] **UI_TimeWarp_Cards** - 時光卷使用介面 + - 設計要求: 時光卷功能說明和使用確認 + - 設計要求: 使用後效果展示 + +- [ ] **UI_LevelResult_SuccessResult** - 關卡成功結果頁面 + - 設計要求: 成就慶祝動畫和統計展示 + - UI規範: 即時成就反饋 (ui-ux-guidelines.md 第25行) + +## 💻 階段三：Web端企業級重設計 (第7-9週) + +### 3.1 Web端專屬功能設計 (第7-8週) + +**規格參考**: `/docs/02_design/function-specs/web/` 全部Web端規格 + +**設計重點**: +- [ ] **桌面優化界面**: 大螢幕佈局和多視窗支援 +- [ ] **鍵盤導航**: 完整的鍵盤操作支援 +- [ ] **批量操作**: 企業級批量管理功能 +- [ ] **高級分析**: 詳細的學習分析和報告功能 + +**需設計的主要頁面**: +- [ ] **詞彙學習Web版**: 桌面優化的詞彙學習界面 +- [ ] **情境對話Web版**: 大螢幕對話練習界面 +- [ ] **學習地圖Web版**: 多層級地圖導航界面 +- [ ] **道具商店Web版**: 企業級商店管理界面 +- [ ] **用戶認證Web版**: SSO和企業登入支援 + +### 3.2 響應式設計和跨平台整合 (第8-9週) + +**工作內容**: +- [ ] **響應式佈局**: Mobile → Tablet → Desktop 完整適配 +- [ ] **跨瀏覽器相容性**: Chrome, Firefox, Safari, Edge 完整支援 +- [ ] **效能優化**: 載入時間和互動回應最佳化 +- [ ] **PWA功能**: 漸進式Web應用功能整合 + +## 🔧 階段四：設計系統完善和品質保證 (第10-12週) + +### 4.1 設計系統文檔化和工具化 (第10-11週) + +**工作內容**: +- [ ] **設計規範手冊**: 完整的設計規範使用指南 +- [ ] **組件使用指南**: 每個組件的使用場景和最佳實踐 +- [ ] **設計審查清單**: 品質控制清單和審查標準 +- [ ] **維護指南**: 設計系統維護和更新流程 + +### 4.2 品質保證和使用性測試 (第11-12週) + +**工作內容**: +- [ ] **設計一致性審查**: 跨平台設計一致性檢查 +- [ ] **無障礙性測試**: WCAG 2.1 AA級合規驗證 +- [ ] **使用性測試**: 用戶測試和回饋收集 +- [ ] **效能評估**: 設計對系統效能的影響評估 + +## 📊 成功標準和驗收條件 + +### 🎯 品質標準 +1. **功能規格符合度**: 100%符合所有功能規格要求 +2. **設計一致性**: 跨平台設計語言100%統一 +3. **無障礙標準**: WCAG 2.1 AA級100%合規 +4. **效能標準**: 頁面載入時間<3秒，互動回應時間<200ms +5. **瀏覽器支援**: 主流瀏覽器100%相容 + +### 📋 驗收清單 +- [ ] 所有UI畫面符合對應功能規格文件要求 +- [ ] 所有設計符合UI/UX規範標準 +- [ ] 跨平台視覺一致性通過審查 +- [ ] 無障礙功能測試全部通過 +- [ ] 使用性測試滿意度≥90% + +## 📁 交付物清單 + +### 🎨 設計文檔 +- [ ] `ui-ux-guidelines.md` - 完善的UI/UX設計規範 +- [ ] `design-system-documentation.md` - 設計系統完整文檔 +- [ ] `component-library-guide.md` - 組件庫使用指南 +- [ ] `responsive-design-standards.md` - 響應式設計標準 + +### 💻 設計資產 +- [ ] `design-system.css` - 完整CSS設計系統 +- [ ] 95+ HTML原型頁面 (Mobile + Web) +- [ ] 完整SVG圖標庫 +- [ ] 設計系統展示網站 + +### 📋 支援文檔 +- [ ] `design-review-checklist.md` - 設計審查清單 +- [ ] `accessibility-compliance-report.md` - 無障礙合規報告 +- [ ] `usability-test-results.md` - 使用性測試報告 +- [ ] `maintenance-guidelines.md` - 維護指南 + +## 🚨 風險管控和品質保證 + +### ⚠️ 關鍵風險點 +1. **規格理解偏差**: 設計不符合功能規格要求 + - **控制措施**: 每個設計階段都進行規格文件交叉檢查 + - **責任人**: 設計師必須深度閱讀相關規格文件 + +2. **設計一致性風險**: 跨頁面設計語言不統一 + - **控制措施**: 建立設計審查機制，每週進行一致性檢查 + - **工具支援**: 建立設計系統檢查清單 + +3. **無障礙合規風險**: 無障礙功能不完整 + - **控制措施**: 每個組件設計完成都進行無障礙測試 + - **標準遵循**: 嚴格遵循WCAG 2.1 AA級標準 + +### 🔍 品質控制機制 +1. **階段性審查**: 每個階段結束進行全面審查 +2. **同行評議**: 設計師之間相互審查和回饋 +3. **用戶測試**: 關鍵頁面進行真實用戶測試 +4. **技術可行性評估**: 設計與開發團隊聯合評估 + +## 📞 執行支援和溝通機制 + +### 🤝 團隊協作 +- **設計團隊**: 負責設計執行和品質控制 +- **產品團隊**: 提供功能需求解釋和使用者回饋 +- **開發團隊**: 提供技術可行性建議和實現支援 +- **測試團隊**: 提供品質測試和驗收支援 + +### 📋 進度追蹤 +- **每週進度會議**: 檢討進度和解決阻礙 +- **里程碑審查**: 階段性成果展示和評估 +- **問題升級機制**: 重大問題快速上報和解決 +- **文檔同步更新**: 確保所有團隊資訊同步 + +--- + +**📝 重要聲明**: +本計劃基於Drama Ling v3.0共用模組架構制定，確保所有設計完全符合功能規格要求，達到企業級應用標準。所有設計師在執行前必須深入理解相關功能規格文件和UI/UX規範，確保設計品質和一致性。 + +**🎯 最終目標**: +創建Drama Ling史上最高品質的UI設計系統，為用戶提供世界級的沉浸式英語學習體驗。 + +--- + +**最後更新**: 2025-01-15 +**計劃版本**: v4.0 - 企業級重構 +**執行週期**: 12週 +**預期成果**: 95+ 企業級UI畫面 \ No newline at end of file diff --git a/docs/00_starter/README.md b/docs/00_starter/README.md index 9d85aac..b6587b2 100644 --- a/docs/00_starter/README.md +++ b/docs/00_starter/README.md @@ -21,15 +21,15 @@ docs/ ### 🚀 `/00_starter` - 專案基礎 **用途**: 包含專案初始化和AI輔助開發所使用的基礎模板和提示詞。 -| 檔案名稱 | 用途 | -|------|---------| -| `CLAUDE_TEMPLATE.md` | Claude AI 互動模板和專案設置 | -| `READ.md` | 使用入門模板的說明指引 | -| `business_function_design_prompt.md` | 生成業務功能設計的 AI 提示詞 | -| `generate_requirements_prompt.md` | 創建專案需求的 AI 提示詞 | -| `generate_system_structure_prompt.md` | 系統架構生成的 AI 提示詞 | -| `system_detail_prompt.md` | 詳細系統規格的 AI 提示詞 | -| `system_structured_schema.json` | 結構化系統設計輸出的 JSON 架構 | +| 檔案名稱 | 用途 | +| ------------------------------------- | ------------------------------ | +| `CLAUDE_TEMPLATE.md` | Claude AI 互動模板和專案設置 | +| `READ.md` | 使用入門模板的說明指引 | +| `business_function_design_prompt.md` | 生成業務功能設計的 AI 提示詞 | +| `generate_requirements_prompt.md` | 創建專案需求的 AI 提示詞 | +| `generate_system_structure_prompt.md` | 系統架構生成的 AI 提示詞 | +| `system_detail_prompt.md` | 詳細系統規格的 AI 提示詞 | +| `system_structured_schema.json` | 結構化系統設計輸出的 JSON 架構 | **使用時機**: 這些檔案主要在專案初始化時使用，以及與 AI 助手協作生成文檔和程式碼結構時使用。 @@ -38,13 +38,13 @@ docs/ ### 📋 `/01_requirement` - 需求文檔 **用途**: 包含核心專案需求、規格說明和系統設計文檔。**專注於知識管理和規格定義**。 -| 檔案名稱 | 用途 | -|------|---------| -| `founding_pitch.md` | 初始專案提案和商業案例 | -| `requirements.md` | **產品功能需求總覽** - 詳細的產品規格和功能概述 | -| `user-stories.md` | **用戶故事和使用場景** - 用戶需求和互動情境 | -| `business-rules.md` | **業務邏輯和規則定義** - 核心商業規則和流程 | -| `acceptance-criteria.md` | **驗收標準和測試條件** - 功能驗收和品質標準 | +| 檔案名稱 | 用途 | +| ------------------------------ | ----------------------------------------------------------------- | +| `founding_pitch.md` | 初始專案提案和商業案例 | +| `requirements.md` | **產品功能需求總覽** - 詳細的產品規格和功能概述 | +| `user-stories.md` | **用戶故事和使用場景** - 用戶需求和互動情境 | +| `business-rules.md` | **業務邏輯和規則定義** - 核心商業規則和流程 | +| `acceptance-criteria.md` | **驗收標準和測試條件** - 功能驗收和品質標準 | | `system_structure_design.json` | **結構化系統設計** - 從需求生成，包含模組、功能和UI視圖的JSON格式 | **關鍵文檔**: `requirements.md` 是產品應該做什麼以及如何運作的唯一真實來源。 @@ -54,20 +54,20 @@ docs/ ### 🎨 `/02_design` - 設計規格 (更新 2025-09-09) **用途**: 涵蓋使用者體驗、視覺設計和互動模式的文檔。**專注於知識管理和規格定義**。 -| 檔案名稱 | 用途 | -|------|---------| -| `ui-specifications.md` | **UI設計規範和標準** - 視覺設計標準和介面規範 | -| `ux-guidelines.md` | **用戶體驗設計指南** - 互動模式和使用者流程 | -| `component-library.md` | **UI組件庫文檔** - 可重用組件和設計系統 | -| `design-tokens.md` | **設計令牌和主題系統** - 顏色、字體、間距等設計變量 | -| `ai-algorithm-specs.md` | AI 分析演算法和語言處理規格 | -| `business-logic-rules.md` | 核心商業規則和邏輯流程定義 | -| `content-management-specs.md` | 內容創建、策劃和管理工作流程 | -| `gamification-mechanics.md` | 遊戲元素、成就和獎勵系統設計 | -| `ui-ux-guidelines.md` | 視覺設計標準、組件庫和使用者介面指南 | -| `function-specs/` | 平台別功能規格（mobile/web/common）| -| `html-prototypes/` | HTML原型和頁面範例 | -| `views/` | UI視圖設計檔案 | +| 檔案名稱 | 用途 | +| ---------------------------- | --------------------------------------------------- | +| `prototype-design-plan.md` | **原型設計製作計劃** - 雛形畫面開發的完整規劃 | +| `function-specs/` | **平台別功能規格** - mobile/web/common功能詳細規格 | +| `prototypes/` | **HTML原型系統** - 可互動的功能演示界面 | +| `ui-ux/` | **UI/UX設計系統** - 視覺規範、組件庫、樣式指南 | +| `views/` | **UI視圖設計檔案** - 介面設計的視覺化參考 | + +**實際子目錄結構**: +- `function-specs/common/` - 跨平台共用規格（API、資料模型、業務規則等） +- `function-specs/mobile/` - 行動端專用功能規格 +- `function-specs/web/` - 網頁端專用功能規格 +- `ui-ux/ui-ux-guidelines.md` - 統一的UI/UX設計規範 +- `ui-ux/dramaling-ui.css` - Drama Ling設計系統樣式表 **目標讀者**: 設計師、前端開發人員和產品經理。 @@ -76,14 +76,14 @@ docs/ ### 👨‍💻 `/03_development` - 開發文檔 (更新 2025-09-09) **用途**: 為開發人員提供編碼標準、工作流程和專案路線圖的指南。**專注於知識管理和規格定義**。 -| 檔案名稱 | 用途 | -|------|---------| -| `coding-standards.md` | **程式碼規範** - Flutter/Dart 和 .NET/C# 的程式碼風格指南、命名慣例和最佳實踐 | -| `architecture-overview.md` | **系統架構概述** - 整體系統架構和設計決策說明 | -| `deployment-guide.md` | **部署流程文檔** - 部署步驟、環境配置和發布流程 | -| `troubleshooting.md` | **常見問題排除** - 開發過程中常見問題的解決方案 | -| `development-workflow.md` | Git 工作流程、分支策略、程式碼審查流程和開發生命週期 | -| `project-roadmap.md` | **開發時程表** - 階段、里程碑和功能交付時程 | +| 檔案名稱 | 用途 | +| -------------------------- | ----------------------------------------------------------------------------- | +| `coding-standards.md` | **程式碼規範** - Flutter/Dart 和 .NET/C# 的程式碼風格指南、命名慣例和最佳實踐 | +| `architecture-overview.md` | **系統架構概述** - 整體系統架構和設計決策說明 | +| `deployment-guide.md` | **部署流程文檔** - 部署步驟、環境配置和發布流程 | +| `troubleshooting.md` | **常見問題排除** - 開發過程中常見問題的解決方案 | +| `development-workflow.md` | Git 工作流程、分支策略、程式碼審查流程和開發生命週期 | +| `project-roadmap.md` | **開發時程表** - 階段、里程碑和功能交付時程 | **目標讀者**: 所有參與專案的開發人員。 @@ -92,19 +92,19 @@ docs/ ### ⚙️ `/04_technical` - 技術規格 (更新 2025-09-09) **用途**: 技術實作細節、系統架構和整合規格說明。**專注於知識管理和規格定義**。 -| 子目錄/檔案 | 用途 | -|------|---------| -| `api-specifications.md` | **API接口文檔** - 完整API規格、端點定義和資料格式 | -| `database-schema.md` | **資料庫設計文檔** - 資料表結構、關聯和索引設計 | -| `security-requirements.md` | **安全性需求** - 安全標準、認證機制和資料保護 | -| `performance-standards.md` | **效能標準定義** - 效能指標、基準測試和優化準則 | -| `01_architecture/` | 系統架構設計和決策文檔 | -| `02_api/` | **REST API 文檔** - 完整API規格、端點文檔、Swagger UI | -| `03_frontend/` | 前端技術規格和實作指南 | -| `04_mobile/` | 移動端開發技術規格 | -| `05_deployment/` | 部署流程和環境配置 | -| `06_development/` | **開發過程管理** - 問題追蹤、環境設定和開發工具配置 | -| `07_planning/` | 技術規劃和決策記錄 | +| 子目錄/檔案 | 用途 | +| -------------------------- | ----------------------------------------------------- | +| `api-specifications.md` | **API接口文檔** - 完整API規格、端點定義和資料格式 | +| `database-schema.md` | **資料庫設計文檔** - 資料表結構、關聯和索引設計 | +| `security-requirements.md` | **安全性需求** - 安全標準、認證機制和資料保護 | +| `performance-standards.md` | **效能標準定義** - 效能指標、基準測試和優化準則 | +| `01_architecture/` | 系統架構設計和決策文檔 | +| `02_api/` | **REST API 文檔** - 完整API規格、端點文檔、Swagger UI | +| `03_frontend/` | 前端技術規格和實作指南 | +| `04_mobile/` | 移動端開發技術規格 | +| `05_deployment/` | 部署流程和環境配置 | +| `06_development/` | **開發過程管理** - 問題追蹤、環境設定和開發工具配置 | +| `07_planning/` | 技術規劃和決策記錄 | **關鍵文檔**: `02_api/` 目錄中的API文檔作為前端和後端團隊之間的契約。 @@ -135,15 +135,15 @@ docs/ ### ✅ 正確的內容分層 -| 內容類型 | 正確位置 | -|---------|----------| -| 產品規格和需求 | `docs/01_requirement/` | -| 設計標準和指南 | `docs/02_design/` | -| 技術架構和 API 規格 | `docs/04_technical/` | -| 編碼規範和流程 | `docs/03_development/` | -| 具體任務和待辦事項 | `TASKS.md` | -| 專案執行計畫 | `projects/[專案名].md` | -| 進度追蹤和狀態更新 | 專案管理工具 | +| 內容類型 | 正確位置 | +| ------------------- | ---------------------- | +| 產品規格和需求 | `docs/01_requirement/` | +| 設計標準和指南 | `docs/02_design/` | +| 技術架構和 API 規格 | `docs/04_technical/` | +| 編碼規範和流程 | `docs/03_development/` | +| 具體任務和待辦事項 | `TASKS.md` | +| 專案執行計畫 | `projects/[專案名].md` | +| 進度追蹤和狀態更新 | 專案管理工具 | --- @@ -176,7 +176,7 @@ docs/ - 主要文檔: `/02_design/ui-ux-guidelines.md`, `/02_design/gamification-mechanics.md` - 內容策略: `/02_design/content-management-specs.md` - 功能規格: `/02_design/function-specs/` -- 原型參考: `/02_design/html-prototypes/` +- 原型參考: `/02_design/prototypes/` --- @@ -198,16 +198,16 @@ docs/ ## 🔍 快速參考 -| 尋找... | 前往... | -|----------------|----------| -| 要建構什麼功能 | `/01_requirement/requirements.md` | -| API 端點和資料格式 | `/04_technical/02_api/` | -| 系統架構 | `/04_technical/01_architecture/` | -| UI 設計標準 | `/02_design/ui-ux-guidelines.md` | -| 如何貢獻程式碼 | `/03_development/development-workflow.md` | -| 開發時程表 | `/03_development/project-roadmap.md` | -| 功能規格 | `/02_design/function-specs/` | -| 部署流程 | `/04_technical/05_deployment/` | +| 尋找... | 前往... | +| ------------------ | ----------------------------------------- | +| 要建構什麼功能 | `/01_requirement/requirements.md` | +| API 端點和資料格式 | `/04_technical/02_api/` | +| 系統架構 | `/04_technical/01_architecture/` | +| UI 設計標準 | `/02_design/ui-ux-guidelines.md` | +| 如何貢獻程式碼 | `/03_development/development-workflow.md` | +| 開發時程表 | `/03_development/project-roadmap.md` | +| 功能規格 | `/02_design/function-specs/` | +| 部署流程 | `/04_technical/05_deployment/` | --- diff --git a/docs/02_design/views/UI_Account_List.png b/docs/01_requirement/views/UI_Account_List.png similarity index 100% rename from docs/02_design/views/UI_Account_List.png rename to docs/01_requirement/views/UI_Account_List.png diff --git a/docs/02_design/views/UI_Account_Option.png b/docs/01_requirement/views/UI_Account_Option.png similarity index 100% rename from docs/02_design/views/UI_Account_Option.png rename to docs/01_requirement/views/UI_Account_Option.png diff --git a/docs/02_design/views/UI_Assessment_Results.png b/docs/01_requirement/views/UI_Assessment_Results.png similarity index 100% rename from docs/02_design/views/UI_Assessment_Results.png rename to docs/01_requirement/views/UI_Assessment_Results.png diff --git a/docs/02_design/views/UI_Assessment_Test.png b/docs/01_requirement/views/UI_Assessment_Test.png similarity index 100% rename from docs/02_design/views/UI_Assessment_Test.png rename to docs/01_requirement/views/UI_Assessment_Test.png diff --git a/docs/02_design/views/UI_Challenge_Exit_Confirm.png b/docs/01_requirement/views/UI_Challenge_Exit_Confirm.png similarity index 100% rename from docs/02_design/views/UI_Challenge_Exit_Confirm.png rename to docs/01_requirement/views/UI_Challenge_Exit_Confirm.png diff --git a/docs/02_design/views/UI_Character_Details.png b/docs/01_requirement/views/UI_Character_Details.png similarity index 100% rename from docs/02_design/views/UI_Character_Details.png rename to docs/01_requirement/views/UI_Character_Details.png diff --git a/docs/02_design/views/UI_Correction_Fluency.png b/docs/01_requirement/views/UI_Correction_Fluency.png similarity index 100% rename from docs/02_design/views/UI_Correction_Fluency.png rename to docs/01_requirement/views/UI_Correction_Fluency.png diff --git a/docs/02_design/views/UI_Correction_Fluency_Practice.png b/docs/01_requirement/views/UI_Correction_Fluency_Practice.png similarity index 100% rename from docs/02_design/views/UI_Correction_Fluency_Practice.png rename to docs/01_requirement/views/UI_Correction_Fluency_Practice.png diff --git a/docs/02_design/views/UI_Correction_Grammar.png b/docs/01_requirement/views/UI_Correction_Grammar.png similarity index 100% rename from docs/02_design/views/UI_Correction_Grammar.png rename to docs/01_requirement/views/UI_Correction_Grammar.png diff --git a/docs/02_design/views/UI_Correction_Grammar_Retry.png b/docs/01_requirement/views/UI_Correction_Grammar_Retry.png similarity index 100% rename from docs/02_design/views/UI_Correction_Grammar_Retry.png rename to docs/01_requirement/views/UI_Correction_Grammar_Retry.png diff --git a/docs/02_design/views/UI_Correction_Pass_Result.png b/docs/01_requirement/views/UI_Correction_Pass_Result.png similarity index 100% rename from docs/02_design/views/UI_Correction_Pass_Result.png rename to docs/01_requirement/views/UI_Correction_Pass_Result.png diff --git a/docs/02_design/views/UI_Correction_Retry_Result.png b/docs/01_requirement/views/UI_Correction_Retry_Result.png similarity index 100% rename from docs/02_design/views/UI_Correction_Retry_Result.png rename to docs/01_requirement/views/UI_Correction_Retry_Result.png diff --git a/docs/02_design/views/UI_Cost_Confirm_Popup.png b/docs/01_requirement/views/UI_Cost_Confirm_Popup.png similarity index 100% rename from docs/02_design/views/UI_Cost_Confirm_Popup.png rename to docs/01_requirement/views/UI_Cost_Confirm_Popup.png diff --git a/docs/02_design/views/UI_Dialogue_Analysis.png b/docs/01_requirement/views/UI_Dialogue_Analysis.png similarity index 100% rename from docs/02_design/views/UI_Dialogue_Analysis.png rename to docs/01_requirement/views/UI_Dialogue_Analysis.png diff --git a/docs/02_design/views/UI_Dialogue_Main.png b/docs/01_requirement/views/UI_Dialogue_Main.png similarity index 100% rename from docs/02_design/views/UI_Dialogue_Main.png rename to docs/01_requirement/views/UI_Dialogue_Main.png diff --git a/docs/02_design/views/UI_Insufficient_Resources.png b/docs/01_requirement/views/UI_Insufficient_Resources.png similarity index 100% rename from docs/02_design/views/UI_Insufficient_Resources.png rename to docs/01_requirement/views/UI_Insufficient_Resources.png diff --git a/docs/02_design/views/UI_Keywords_Details.png b/docs/01_requirement/views/UI_Keywords_Details.png similarity index 100% rename from docs/02_design/views/UI_Keywords_Details.png rename to docs/01_requirement/views/UI_Keywords_Details.png diff --git a/docs/02_design/views/UI_Level_Locked_Modal.png b/docs/01_requirement/views/UI_Level_Locked_Modal.png similarity index 100% rename from docs/02_design/views/UI_Level_Locked_Modal.png rename to docs/01_requirement/views/UI_Level_Locked_Modal.png diff --git a/docs/02_design/views/UI_Level_Map.png b/docs/01_requirement/views/UI_Level_Map.png similarity index 100% rename from docs/02_design/views/UI_Level_Map.png rename to docs/01_requirement/views/UI_Level_Map.png diff --git a/docs/02_design/views/UI_Level_Selection_Modal.png b/docs/01_requirement/views/UI_Level_Selection_Modal.png similarity index 100% rename from docs/02_design/views/UI_Level_Selection_Modal.png rename to docs/01_requirement/views/UI_Level_Selection_Modal.png diff --git a/docs/02_design/views/UI_Level_Selection_Modal_A.png b/docs/01_requirement/views/UI_Level_Selection_Modal_A.png similarity index 100% rename from docs/02_design/views/UI_Level_Selection_Modal_A.png rename to docs/01_requirement/views/UI_Level_Selection_Modal_A.png diff --git a/docs/02_design/views/UI_Level_Selection_Modal_B.png b/docs/01_requirement/views/UI_Level_Selection_Modal_B.png similarity index 100% rename from docs/02_design/views/UI_Level_Selection_Modal_B.png rename to docs/01_requirement/views/UI_Level_Selection_Modal_B.png diff --git a/docs/02_design/views/UI_LifePoints_Display.png b/docs/01_requirement/views/UI_LifePoints_Display.png similarity index 100% rename from docs/02_design/views/UI_LifePoints_Display.png rename to docs/01_requirement/views/UI_LifePoints_Display.png diff --git a/docs/02_design/views/UI_Login_Main.png b/docs/01_requirement/views/UI_Login_Main.png similarity index 100% rename from docs/02_design/views/UI_Login_Main.png rename to docs/01_requirement/views/UI_Login_Main.png diff --git a/docs/02_design/views/UI_Onboarding_Frequency.png b/docs/01_requirement/views/UI_Onboarding_Frequency.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Frequency.png rename to docs/01_requirement/views/UI_Onboarding_Frequency.png diff --git a/docs/02_design/views/UI_Onboarding_Level.png b/docs/01_requirement/views/UI_Onboarding_Level.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Level.png rename to docs/01_requirement/views/UI_Onboarding_Level.png diff --git a/docs/02_design/views/UI_Onboarding_Notice.png b/docs/01_requirement/views/UI_Onboarding_Notice.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Notice.png rename to docs/01_requirement/views/UI_Onboarding_Notice.png diff --git a/docs/02_design/views/UI_Onboarding_Purpose.png b/docs/01_requirement/views/UI_Onboarding_Purpose.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Purpose.png rename to docs/01_requirement/views/UI_Onboarding_Purpose.png diff --git a/docs/02_design/views/UI_Onboarding_Result.png b/docs/01_requirement/views/UI_Onboarding_Result.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Result.png rename to docs/01_requirement/views/UI_Onboarding_Result.png diff --git a/docs/02_design/views/UI_Onboarding_TimeSlot.png b/docs/01_requirement/views/UI_Onboarding_TimeSlot.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_TimeSlot.png rename to docs/01_requirement/views/UI_Onboarding_TimeSlot.png diff --git a/docs/02_design/views/UI_Onboarding_Welcome.png b/docs/01_requirement/views/UI_Onboarding_Welcome.png similarity index 100% rename from docs/02_design/views/UI_Onboarding_Welcome.png rename to docs/01_requirement/views/UI_Onboarding_Welcome.png diff --git a/docs/02_design/views/UI_PasswordReset_Form.png b/docs/01_requirement/views/UI_PasswordReset_Form.png similarity index 100% rename from docs/02_design/views/UI_PasswordReset_Form.png rename to docs/01_requirement/views/UI_PasswordReset_Form.png diff --git a/docs/02_design/views/UI_PasswordReset_Popup.png b/docs/01_requirement/views/UI_PasswordReset_Popup.png similarity index 100% rename from docs/02_design/views/UI_PasswordReset_Popup.png rename to docs/01_requirement/views/UI_PasswordReset_Popup.png diff --git a/docs/02_design/views/UI_Profile_Dashboard.png b/docs/01_requirement/views/UI_Profile_Dashboard.png similarity index 100% rename from docs/02_design/views/UI_Profile_Dashboard.png rename to docs/01_requirement/views/UI_Profile_Dashboard.png diff --git a/docs/02_design/views/UI_Profile_Details.png b/docs/01_requirement/views/UI_Profile_Details.png similarity index 100% rename from docs/02_design/views/UI_Profile_Details.png rename to docs/01_requirement/views/UI_Profile_Details.png diff --git a/docs/02_design/views/UI_Profile_Locked.png b/docs/01_requirement/views/UI_Profile_Locked.png similarity index 100% rename from docs/02_design/views/UI_Profile_Locked.png rename to docs/01_requirement/views/UI_Profile_Locked.png diff --git a/docs/02_design/views/UI_Profile_Settings.png b/docs/01_requirement/views/UI_Profile_Settings.png similarity index 100% rename from docs/02_design/views/UI_Profile_Settings.png rename to docs/01_requirement/views/UI_Profile_Settings.png diff --git a/docs/02_design/views/UI_Reply_Assistance.png b/docs/01_requirement/views/UI_Reply_Assistance.png similarity index 100% rename from docs/02_design/views/UI_Reply_Assistance.png rename to docs/01_requirement/views/UI_Reply_Assistance.png diff --git a/docs/02_design/views/UI_Reply_Input.png b/docs/01_requirement/views/UI_Reply_Input.png similarity index 100% rename from docs/02_design/views/UI_Reply_Input.png rename to docs/01_requirement/views/UI_Reply_Input.png diff --git a/docs/02_design/views/UI_Result_Correction.png b/docs/01_requirement/views/UI_Result_Correction.png similarity index 100% rename from docs/02_design/views/UI_Result_Correction.png rename to docs/01_requirement/views/UI_Result_Correction.png diff --git a/docs/02_design/views/UI_Result_Dialogue_Analysis.png b/docs/01_requirement/views/UI_Result_Dialogue_Analysis.png similarity index 100% rename from docs/02_design/views/UI_Result_Dialogue_Analysis.png rename to docs/01_requirement/views/UI_Result_Dialogue_Analysis.png diff --git a/docs/02_design/views/UI_Result_Failure_A.png b/docs/01_requirement/views/UI_Result_Failure_A.png similarity index 100% rename from docs/02_design/views/UI_Result_Failure_A.png rename to docs/01_requirement/views/UI_Result_Failure_A.png diff --git a/docs/02_design/views/UI_Result_Failure_B.png b/docs/01_requirement/views/UI_Result_Failure_B.png similarity index 100% rename from docs/02_design/views/UI_Result_Failure_B.png rename to docs/01_requirement/views/UI_Result_Failure_B.png diff --git a/docs/02_design/views/UI_Result_Reward_Confirm.png b/docs/01_requirement/views/UI_Result_Reward_Confirm.png similarity index 100% rename from docs/02_design/views/UI_Result_Reward_Confirm.png rename to docs/01_requirement/views/UI_Result_Reward_Confirm.png diff --git a/docs/02_design/views/UI_Result_Score_Summary_A.png b/docs/01_requirement/views/UI_Result_Score_Summary_A.png similarity index 100% rename from docs/02_design/views/UI_Result_Score_Summary_A.png rename to docs/01_requirement/views/UI_Result_Score_Summary_A.png diff --git a/docs/02_design/views/UI_Result_Score_Summary_B.png b/docs/01_requirement/views/UI_Result_Score_Summary_B.png similarity index 100% rename from docs/02_design/views/UI_Result_Score_Summary_B.png rename to docs/01_requirement/views/UI_Result_Score_Summary_B.png diff --git a/docs/02_design/views/UI_Result_Small_Reward.png b/docs/01_requirement/views/UI_Result_Small_Reward.png similarity index 100% rename from docs/02_design/views/UI_Result_Small_Reward.png rename to docs/01_requirement/views/UI_Result_Small_Reward.png diff --git a/docs/02_design/views/UI_Result_Success_A.png b/docs/01_requirement/views/UI_Result_Success_A.png similarity index 100% rename from docs/02_design/views/UI_Result_Success_A.png rename to docs/01_requirement/views/UI_Result_Success_A.png diff --git a/docs/02_design/views/UI_Result_Success_B.png b/docs/01_requirement/views/UI_Result_Success_B.png similarity index 100% rename from docs/02_design/views/UI_Result_Success_B.png rename to docs/01_requirement/views/UI_Result_Success_B.png diff --git a/docs/02_design/views/UI_Shop_Categories.png b/docs/01_requirement/views/UI_Shop_Categories.png similarity index 100% rename from docs/02_design/views/UI_Shop_Categories.png rename to docs/01_requirement/views/UI_Shop_Categories.png diff --git a/docs/02_design/views/UI_Shop_Item_Confirm.png b/docs/01_requirement/views/UI_Shop_Item_Confirm.png similarity index 100% rename from docs/02_design/views/UI_Shop_Item_Confirm.png rename to docs/01_requirement/views/UI_Shop_Item_Confirm.png diff --git a/docs/02_design/views/UI_SignUp_Main.png b/docs/01_requirement/views/UI_SignUp_Main.png similarity index 100% rename from docs/02_design/views/UI_SignUp_Main.png rename to docs/01_requirement/views/UI_SignUp_Main.png diff --git a/docs/02_design/views/UI_Social_Friends.png b/docs/01_requirement/views/UI_Social_Friends.png similarity index 100% rename from docs/02_design/views/UI_Social_Friends.png rename to docs/01_requirement/views/UI_Social_Friends.png diff --git a/docs/02_design/views/UI_Social_GuestPrompt.png b/docs/01_requirement/views/UI_Social_GuestPrompt.png similarity index 100% rename from docs/02_design/views/UI_Social_GuestPrompt.png rename to docs/01_requirement/views/UI_Social_GuestPrompt.png diff --git a/docs/02_design/views/UI_Social_Main.png b/docs/01_requirement/views/UI_Social_Main.png similarity index 100% rename from docs/02_design/views/UI_Social_Main.png rename to docs/01_requirement/views/UI_Social_Main.png diff --git a/docs/02_design/views/UI_Social_Profile.png b/docs/01_requirement/views/UI_Social_Profile.png similarity index 100% rename from docs/02_design/views/UI_Social_Profile.png rename to docs/01_requirement/views/UI_Social_Profile.png diff --git a/docs/02_design/views/UI_Social_Ranking.png b/docs/01_requirement/views/UI_Social_Ranking.png similarity index 100% rename from docs/02_design/views/UI_Social_Ranking.png rename to docs/01_requirement/views/UI_Social_Ranking.png diff --git a/docs/02_design/views/UI_Social_Ranking_Guest.png b/docs/01_requirement/views/UI_Social_Ranking_Guest.png similarity index 100% rename from docs/02_design/views/UI_Social_Ranking_Guest.png rename to docs/01_requirement/views/UI_Social_Ranking_Guest.png diff --git a/docs/02_design/views/UI_Social_Search.png b/docs/01_requirement/views/UI_Social_Search.png similarity index 100% rename from docs/02_design/views/UI_Social_Search.png rename to docs/01_requirement/views/UI_Social_Search.png diff --git a/docs/02_design/views/UI_Subscription_Success.png b/docs/01_requirement/views/UI_Subscription_Success.png similarity index 100% rename from docs/02_design/views/UI_Subscription_Success.png rename to docs/01_requirement/views/UI_Subscription_Success.png diff --git a/docs/02_design/views/UI_Task_Display.png b/docs/01_requirement/views/UI_Task_Display.png similarity index 100% rename from docs/02_design/views/UI_Task_Display.png rename to docs/01_requirement/views/UI_Task_Display.png diff --git a/docs/02_design/views/UI_Tasks_Extra.png b/docs/01_requirement/views/UI_Tasks_Extra.png similarity index 100% rename from docs/02_design/views/UI_Tasks_Extra.png rename to docs/01_requirement/views/UI_Tasks_Extra.png diff --git a/docs/02_design/views/UI_TimeWarp_Cards.png b/docs/01_requirement/views/UI_TimeWarp_Cards.png similarity index 100% rename from docs/02_design/views/UI_TimeWarp_Cards.png rename to docs/01_requirement/views/UI_TimeWarp_Cards.png diff --git a/docs/02_design/views/UI_Vocab_Choice_Practice.png b/docs/01_requirement/views/UI_Vocab_Choice_Practice.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Choice_Practice.png rename to docs/01_requirement/views/UI_Vocab_Choice_Practice.png diff --git a/docs/02_design/views/UI_Vocab_Choice_Results.png b/docs/01_requirement/views/UI_Vocab_Choice_Results.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Choice_Results.png rename to docs/01_requirement/views/UI_Vocab_Choice_Results.png diff --git a/docs/02_design/views/UI_Vocab_Fluency_Matching.png b/docs/01_requirement/views/UI_Vocab_Fluency_Matching.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Fluency_Matching.png rename to docs/01_requirement/views/UI_Vocab_Fluency_Matching.png diff --git a/docs/02_design/views/UI_Vocab_Fluency_Reorganize.png b/docs/01_requirement/views/UI_Vocab_Fluency_Reorganize.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Fluency_Reorganize.png rename to docs/01_requirement/views/UI_Vocab_Fluency_Reorganize.png diff --git a/docs/02_design/views/UI_Vocab_Fluency_Results.png b/docs/01_requirement/views/UI_Vocab_Fluency_Results.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Fluency_Results.png rename to docs/01_requirement/views/UI_Vocab_Fluency_Results.png diff --git a/docs/02_design/views/UI_Vocab_Introduction.png b/docs/01_requirement/views/UI_Vocab_Introduction.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Introduction.png rename to docs/01_requirement/views/UI_Vocab_Introduction.png diff --git a/docs/02_design/views/UI_Vocab_Review_Main.png b/docs/01_requirement/views/UI_Vocab_Review_Main.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Review_Main.png rename to docs/01_requirement/views/UI_Vocab_Review_Main.png diff --git a/docs/02_design/views/UI_Vocab_Sentence_Results.png b/docs/01_requirement/views/UI_Vocab_Sentence_Results.png similarity index 100% rename from docs/02_design/views/UI_Vocab_Sentence_Results.png rename to docs/01_requirement/views/UI_Vocab_Sentence_Results.png diff --git a/docs/02_design/function-specs/common/business-rules.md b/docs/02_design/function-specs/common/business-rules.md index b866e34..8749fd4 100644 --- a/docs/02_design/function-specs/common/business-rules.md +++ b/docs/02_design/function-specs/common/business-rules.md @@ -18,19 +18,18 @@ - 訂閱用戶: 30個 - 進階用戶: 50個 - **恢復機制**: - - 免費用戶: 每5小時自動恢復1個命條 - 訂閱用戶: 每小時自動恢復3個命條 - 進階用戶: 每小時自動恢復5個命條 - **命條消耗**: 1、2、3關啟動時消耗命條(第2+關不消耗) ### 消耗場景 (四關闖關系統) -| 場景 | 命條消耗 | 說明 | -| -------------- | -------- | ---------------------------- | -| 第1關：詞彙學習 | 1個 | 啟動關卡時消耗，學習過程免費 | -| 第2關：詞彙熟悉 | 1個 | 啟動關卡時消耗，無論答對答錯 | +| 場景 | 命條消耗 | 說明 | +| ------------------------ | -------- | ----------------------------- | +| 第1關：詞彙學習 | 1個 | 啟動關卡時消耗，學習過程免費 | +| 第2關：詞彙熟悉 | 1個 | 啟動關卡時消耗，無論答對答錯 | | 第2+關：口說練習特別關卡 | 0個 | 付費關卡（5鑽石），不消耗命條 | -| 第3關：情境對話 | 1個 | 啟動關卡時消耗，無論成功失敗 | -| 對話有辱罵情形 | 3個 | 額外扣除懲罰 | +| 第3關：情境對話 | 1個 | 啟動關卡時消耗，無論成功失敗 | +| 對話有辱罵情形 | 3個 | 額外扣除懲罰 | ### 獲得命條方式 - **自動恢復**: 依用戶等級不同恢復速度(見上方基本規則) @@ -286,12 +285,12 @@ - **學習階層**: 第x階段 > 第x劇本 > 第x關卡 #### 關卡類型與規則 -| 關卡類型 | 收費模式 | 命條消耗 | 星級獲得 | 解鎖條件 | 通關條件 | -|---------|---------|----------|----------|----------|----------| -| 詞彙學習 | 免費 | 啟動扣1條 | 自動3星 | 無 | 全部答對 | -| 詞彙熟悉 | 免費 | 啟動扣1條 | 自動3星 | 完成第1關 | 全部答對 | -| 口說練習特別關卡 | 5鑽石 | 不扣命條 | 1-3星 | 完成第2關 | 平均70分+ | -| 情境對話 | 免費 | 啟動扣1條 | 1-3星 | 完成第2+關或跳過 | 雙重通關條件 | +| 關卡類型 | 收費模式 | 命條消耗 | 星級獲得 | 解鎖條件 | 通關條件 | +| ---------------- | -------- | --------- | -------- | ---------------- | ------------ | +| 詞彙學習 | 免費 | 啟動扣1條 | 自動3星 | 無 | 全部答對 | +| 詞彙熟悉 | 免費 | 啟動扣1條 | 自動3星 | 完成第1關 | 全部答對 | +| 口說練習特別關卡 | 5鑽石 | 不扣命條 | 1-3星 | 完成第2關 | 平均70分+ | +| 情境對話 | 免費 | 啟動扣1條 | 1-3星 | 完成第2+關或跳過 | 雙重通關條件 | ### 舊版關卡結構系統 #### BR-LEARN-01: 階段化學習架構 diff --git a/docs/02_design/function-specs/comprehensive-user-flows-with-ui.md b/docs/02_design/function-specs/common/comprehensive-user-flows-with-ui.md similarity index 100% rename from docs/02_design/function-specs/comprehensive-user-flows-with-ui.md rename to docs/02_design/function-specs/common/comprehensive-user-flows-with-ui.md diff --git a/docs/02_design/function-specs/platform-feature-mapping.md b/docs/02_design/function-specs/common/platform-feature-mapping.md similarity index 100% rename from docs/02_design/function-specs/platform-feature-mapping.md rename to docs/02_design/function-specs/common/platform-feature-mapping.md diff --git a/docs/02_design/function-specs/common/temp.md b/docs/02_design/function-specs/common/temp.md deleted file mode 100644 index 575e52e..0000000 --- a/docs/02_design/function-specs/common/temp.md +++ /dev/null @@ -1,16 +0,0 @@ - -詞彙 -- Vocab: optimal -- Level: B2 -- Definition: -The best or most effective possible in a particular situation. -- Original Sentence: -For the optimal coding experience, enable the recommended settings -- Example Sentence: -The optimal time to plant these seeds is in early spring. -- Example Image url: -- 例句音檔 -- 詞彙正常速度音檔 -- 詞彙慢速速度音檔 - -劇本 diff --git a/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md b/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md index 8de745f..b093d1b 100644 --- a/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md +++ b/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md @@ -6,7 +6,7 @@ **建立日期**: 2025-09-08 **最後更新**: 2025-09-12 **負責團隊**: 產品/設計/開發 -**原型參考**: `/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html` +**原型參考**: `/docs/02_design/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html` ### 主要功能 - **沉浸式詞彙展示**: 詞彙、音標、定義、多媒體整合展示 @@ -346,7 +346,7 @@ ## 📚 參考資源 -- **原型畫面**: `/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html` +- **原型畫面**: `/docs/02_design/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html` - **線性闖關系統**: `docs/02_design/function-specs/common/progressive-stage-system.md` - **UI/UX設計規範**: `docs/02_design/ui-ux/ui-ux-guidelines.md` - 按鈕文字標注原則 - **命條系統規則**: `docs/02_design/function-specs/common/business-rules.md` diff --git a/docs/02_design/ui-ux/ui-ux-guidelines.md b/docs/02_design/ui-ux/ui-ux-guidelines.md index 3e017df..4a71bbe 100644 --- a/docs/02_design/ui-ux/ui-ux-guidelines.md +++ b/docs/02_design/ui-ux/ui-ux-guidelines.md @@ -61,16 +61,22 @@ --error-red: #E74C3C; --warning-yellow: #F39C12; + /* 成功和確認 */ + --success-green: #4CAF50; + /* 資訊提示 */ --info-cyan: #3498DB; /* 暗色主題色調 */ --text-primary: #FFFFFF; --text-secondary: #B8BCC8; + --text-tertiary: #718096; --background-primary: #2C3E50; --background-secondary: #34495E; --background-dark: #1A252F; + --background-light: #F8F9FA; --divider: #4A5568; + --border-light: #E2E8F0; --card-background: #3A4A5C; } ``` @@ -313,6 +319,107 @@ .input-field::placeholder { color: var(--text-secondary); } + +/* 密碼輸入框 */ +.password-input-container { + position: relative; + width: 100%; +} + +.password-toggle-btn { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px; +} + +/* 輸入框標籤 */ +.input-label { + display: block; + margin-bottom: var(--space-2); + font-weight: 600; + color: var(--text-primary); + font-size: var(--text-sm); +} + +.input-label.required::after { + content: ' *'; + color: var(--error-red); +} +``` + +#### 表單驗證組件 +```css +.form-validation-message { + margin-top: var(--space-1); + font-size: var(--text-xs); + display: flex; + align-items: center; + gap: var(--space-1); +} + +.form-validation-message.error { + color: var(--error-red); +} + +.form-validation-message.success { + color: var(--success-green); +} + +.form-validation-message.warning { + color: var(--warning-yellow); +} + +.form-validation-message::before { + font-size: 1em; +} + +.form-validation-message.error::before { + content: '⚠️'; +} + +.form-validation-message.success::before { + content: '✅'; +} + +.form-validation-message.warning::before { + content: '⚡'; +} + +/* 即時驗證指示器 */ +.input-validation-indicator { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-xs); +} + +.input-validation-indicator.checking { + background: var(--warning-yellow); + animation: pulse 1s infinite; +} + +.input-validation-indicator.valid { + background: var(--success-green); + color: white; +} + +.input-validation-indicator.invalid { + background: var(--error-red); + color: white; +} ``` #### 輸入框狀態 @@ -321,6 +428,372 @@ - [ ] **錯誤狀態**: 紅色邊框，搭配錯誤訊息 - [ ] **成功狀態**: 綠色邊框，表示輸入正確 - [ ] **禁用狀態**: 灰色背景，無法互動 +- [ ] **載入狀態**: 顯示驗證進度指示器 +- [ ] **必填狀態**: 標籤顯示紅色星號標記 + +#### 社交登入按鈕組件 *(新增用戶認證功能)* +```css +.social-login-container { + display: flex; + flex-direction: column; + gap: var(--space-3); + margin: var(--space-6) 0; +} + +.social-login-button { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); + width: 100%; + padding: 16px 24px; + border-radius: var(--radius-lg); + font-weight: 600; + font-size: var(--text-base); + border: 2px solid transparent; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.social-login-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.6s ease; +} + +.social-login-button:hover::before { + left: 100%; +} + +.social-login-button.google { + background: #ffffff; + color: #1f1f1f; + border-color: #dadce0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.social-login-button.google:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-2px); +} + +.social-login-button.facebook { + background: #1877f2; + color: white; + border-color: #1877f2; +} + +.social-login-button.facebook:hover { + background: #166fe5; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3); +} + +.social-login-button.apple { + background: #000000; + color: white; + border-color: #000000; +} + +.social-login-button.apple:hover { + background: #1a1a1a; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.social-login-icon { + width: 24px; + height: 24px; + flex-shrink: 0; +} + +/* 分隔線設計 */ +.login-divider { + display: flex; + align-items: center; + margin: var(--space-6) 0; + color: var(--text-secondary); + font-size: var(--text-sm); +} + +.login-divider::before, +.login-divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--divider); + margin: 0 var(--space-4); +} +``` + +### 模態視窗和彈窗組件 *(新增核心互動元素)* + +#### 基礎模態視窗設計 +```css +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-4); + animation: modalOverlayFadeIn 0.3s ease; +} + +@keyframes modalOverlayFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.modal-content { + background: var(--card-background); + border-radius: var(--radius-2xl); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + max-width: 90vw; + max-height: 90vh; + overflow-y: auto; + position: relative; + animation: modalContentSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes modalContentSlideIn { + from { + transform: scale(0.8) translateY(40px); + opacity: 0; + } + to { + transform: scale(1) translateY(0); + opacity: 1; + } +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6); + border-bottom: 1px solid var(--divider); +} + +.modal-title { + font-size: var(--text-xl); + font-weight: 700; + color: var(--text-primary); + margin: 0; +} + +.modal-close-btn { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--background-secondary); + border: none; + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.modal-close-btn:hover { + background: var(--error-red); + color: white; + transform: scale(1.1); +} + +.modal-body { + padding: var(--space-6); +} + +.modal-footer { + display: flex; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6); + border-top: 1px solid var(--divider); +} +``` + +#### 確認對話框設計 +```css +.confirmation-dialog { + text-align: center; + padding: var(--space-8); + max-width: 400px; +} + +.confirmation-icon { + width: 64px; + height: 64px; + margin: 0 auto var(--space-4) auto; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; +} + +.confirmation-icon.warning { + background: linear-gradient(135deg, #ff9800, #ff5722); + color: white; +} + +.confirmation-icon.danger { + background: linear-gradient(135deg, #f44336, #d32f2f); + color: white; +} + +.confirmation-icon.info { + background: linear-gradient(135deg, #2196f3, #1976d2); + color: white; +} + +.confirmation-title { + font-size: var(--text-xl); + font-weight: 700; + color: var(--text-primary); + margin-bottom: var(--space-3); +} + +.confirmation-message { + font-size: var(--text-base); + color: var(--text-secondary); + margin-bottom: var(--space-6); + line-height: 1.6; +} + +.confirmation-actions { + display: flex; + gap: var(--space-3); + justify-content: center; +} +``` + +#### 購買確認彈窗設計 *(基於商店功能規格)* +```css +.purchase-confirmation-modal { + max-width: 480px; + width: 100%; +} + +.purchase-item-preview { + display: flex; + align-items: center; + gap: var(--space-4); + padding: var(--space-4); + background: var(--background-secondary); + border-radius: var(--radius-lg); + margin-bottom: var(--space-4); +} + +.purchase-item-icon { + width: 64px; + height: 64px; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-light)); + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; +} + +.purchase-item-details { + flex: 1; +} + +.purchase-item-name { + font-size: var(--text-lg); + font-weight: 700; + color: var(--text-primary); + margin-bottom: var(--space-1); +} + +.purchase-item-description { + font-size: var(--text-sm); + color: var(--text-secondary); + margin-bottom: var(--space-2); +} + +.purchase-price-info { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-4); + background: rgba(0, 229, 204, 0.1); + border-radius: var(--radius-lg); + margin-bottom: var(--space-4); +} + +.purchase-quantity-selector { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.quantity-btn { + width: 32px; + height: 32px; + border-radius: 50%; + border: 2px solid var(--primary-teal); + background: transparent; + color: var(--primary-teal); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + transition: all 0.3s ease; +} + +.quantity-btn:hover { + background: var(--primary-teal); + color: white; +} + +.quantity-display { + min-width: 40px; + text-align: center; + font-weight: 700; + color: var(--text-primary); +} + +.purchase-total { + font-size: var(--text-xl); + font-weight: 700; + color: var(--primary-teal); +} + +.purchase-balance-info { + display: flex; + justify-content: space-between; + font-size: var(--text-sm); + color: var(--text-secondary); + margin-bottom: var(--space-4); +} + +.balance-insufficient { + color: var(--error-red); + font-weight: 600; +} +``` ### 卡片組件 @@ -354,6 +827,354 @@ - [ ] **詞彙卡片**: 翻轉式設計、學習進度、收藏功能 - [ ] **成就徽章**: 圓形設計、發光效果、等級色彩區分 +#### 商店道具卡片設計 *(基於道具商店規格)* +```css +.shop-item-card { + background: var(--card-background); + border-radius: var(--radius-xl); + padding: var(--space-6); + border: 2px solid var(--divider); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + position: relative; + overflow: hidden; +} + +.shop-item-card:hover { + transform: translateY(-8px); + border-color: var(--primary-teal); + box-shadow: 0 12px 40px rgba(0, 229, 204, 0.3); +} + +.shop-item-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary-teal), var(--accent-violet)); + transform: translateX(-100%); + transition: transform 0.4s ease; +} + +.shop-item-card:hover::before { + transform: translateX(0); +} + +.shop-item-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); +} + +.shop-item-icon { + width: 56px; + height: 56px; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-light)); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + box-shadow: 0 4px 12px rgba(0, 229, 204, 0.3); +} + +.shop-item-badge { + background: var(--accent-violet); + color: white; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 600; +} + +.shop-item-badge.hot { + background: linear-gradient(135deg, #ff6b35, #f7931e); + animation: hotBadgePulse 2s ease-in-out infinite; +} + +.shop-item-badge.new { + background: linear-gradient(135deg, #4caf50, #2e7d32); +} + +.shop-item-badge.limited { + background: linear-gradient(135deg, #e91e63, #ad1457); +} + +@keyframes hotBadgePulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.shop-item-title { + font-size: var(--text-lg); + font-weight: 700; + color: var(--text-primary); + margin-bottom: var(--space-2); +} + +.shop-item-description { + font-size: var(--text-sm); + color: var(--text-secondary); + margin-bottom: var(--space-4); + line-height: 1.5; +} + +.shop-item-price-section { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); +} + +.shop-item-price { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.shop-item-price-current { + font-size: var(--text-xl); + font-weight: 700; + color: var(--primary-teal); + display: flex; + align-items: center; + gap: var(--space-1); +} + +.shop-item-price-original { + font-size: var(--text-sm); + color: var(--text-secondary); + text-decoration: line-through; +} + +.shop-item-discount { + background: var(--error-red); + color: white; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + font-size: var(--text-xs); + font-weight: 600; +} + +.diamond-icon { + width: 20px; + height: 20px; + color: var(--primary-teal); +} + +.shop-item-bundle-info { + background: rgba(0, 229, 204, 0.1); + border: 1px solid rgba(0, 229, 204, 0.3); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + font-size: var(--text-xs); + color: var(--primary-teal); + font-weight: 600; + margin-bottom: var(--space-4); +} + +.shop-item-actions { + display: flex; + gap: var(--space-2); +} + +.shop-item-btn-primary { + flex: 1; + background: var(--primary-teal); + color: var(--background-dark); + border: none; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; +} + +.shop-item-btn-primary:hover { + background: var(--primary-teal-light); + transform: translateY(-2px); +} + +.shop-item-btn-secondary { + background: transparent; + color: var(--text-secondary); + border: 1px solid var(--divider); + padding: var(--space-2); + border-radius: var(--radius-md); + cursor: pointer; + transition: all 0.3s ease; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.shop-item-btn-secondary:hover { + color: var(--primary-teal); + border-color: var(--primary-teal); +} +``` + +#### 學習進度組件設計 *(基於學習系統規格)* +```css +.progress-card { + background: var(--card-background); + border-radius: var(--radius-xl); + padding: var(--space-6); + border: 1px solid var(--divider); + position: relative; + overflow: hidden; +} + +.progress-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); +} + +.progress-title { + font-size: var(--text-lg); + font-weight: 700; + color: var(--text-primary); +} + +.progress-percentage { + font-size: var(--text-2xl); + font-weight: 900; + color: var(--primary-teal); + position: relative; +} + +.progress-percentage::after { + content: '%'; + font-size: 0.6em; + margin-left: 2px; +} + +.progress-bar-container { + background: var(--background-secondary); + border-radius: var(--radius-full); + height: 12px; + overflow: hidden; + margin-bottom: var(--space-4); + position: relative; +} + +.progress-bar { + height: 100%; + background: linear-gradient(90deg, var(--primary-teal), var(--primary-teal-light)); + border-radius: var(--radius-full); + position: relative; + transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +.progress-bar::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: progressShimmer 2s ease-in-out infinite; +} + +@keyframes progressShimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +.progress-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + gap: var(--space-4); + margin-bottom: var(--space-4); +} + +.progress-stat { + text-align: center; +} + +.progress-stat-value { + font-size: var(--text-xl); + font-weight: 700; + color: var(--text-primary); + margin-bottom: var(--space-1); +} + +.progress-stat-label { + font-size: var(--text-xs); + color: var(--text-secondary); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.progress-milestones { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--space-4); + padding-top: var(--space-4); + border-top: 1px solid var(--divider); +} + +.milestone { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + opacity: 0.5; + transition: all 0.3s ease; +} + +.milestone.achieved { + opacity: 1; +} + +.milestone.current { + opacity: 1; + transform: scale(1.1); +} + +.milestone-icon { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--divider); + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + color: var(--text-secondary); + transition: all 0.3s ease; +} + +.milestone.achieved .milestone-icon { + background: var(--primary-teal); + color: white; +} + +.milestone.current .milestone-icon { + background: var(--accent-violet); + color: white; + box-shadow: 0 0 20px rgba(155, 89, 182, 0.5); +} + +.milestone-label { + font-size: var(--text-xs); + color: var(--text-secondary); + font-weight: 600; + text-align: center; + max-width: 60px; +} +``` + ### 導航組件 #### 底部導航列 @@ -397,6 +1218,385 @@ - [ ] **排行榜**: 獎盃圖示，社交競爭和好友 - [ ] **個人中心**: 用戶頭像，統計和設定 +### 通知和反饋組件 *(新增系統反饋機制)* + +#### Toast 通知設計 +```css +.toast-container { + position: fixed; + top: var(--space-4); + right: var(--space-4); + z-index: 3000; + display: flex; + flex-direction: column; + gap: var(--space-2); + pointer-events: none; +} + +.toast { + background: var(--card-background); + border-radius: var(--radius-lg); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + padding: var(--space-4); + min-width: 300px; + max-width: 400px; + pointer-events: auto; + animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + position: relative; + overflow: hidden; + border-left: 4px solid var(--info-cyan); +} + +.toast.success { + border-left-color: var(--success-green); +} + +.toast.warning { + border-left-color: var(--warning-yellow); +} + +.toast.error { + border-left-color: var(--error-red); +} + +@keyframes toastSlideIn { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +.toast-header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-2); +} + +.toast-icon { + width: 24px; + height: 24px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + flex-shrink: 0; +} + +.toast.success .toast-icon { + background: var(--success-green); + color: white; +} + +.toast.warning .toast-icon { + background: var(--warning-yellow); + color: var(--background-dark); +} + +.toast.error .toast-icon { + background: var(--error-red); + color: white; +} + +.toast.info .toast-icon { + background: var(--info-cyan); + color: white; +} + +.toast-title { + font-size: var(--text-base); + font-weight: 700; + color: var(--text-primary); + flex: 1; +} + +.toast-close { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: var(--space-1); + border-radius: var(--radius-sm); + transition: all 0.3s ease; +} + +.toast-close:hover { + background: var(--background-secondary); + color: var(--text-primary); +} + +.toast-message { + font-size: var(--text-sm); + color: var(--text-secondary); + line-height: 1.5; +} + +.toast-progress { + position: absolute; + bottom: 0; + left: 0; + height: 3px; + background: var(--primary-teal); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); + animation: toastProgress 5s linear forwards; +} + +@keyframes toastProgress { + from { + width: 100%; + } + to { + width: 0%; + } +} +``` + +#### 命條顯示組件 *(基於命條系統規格)* +```css +.life-points-display { + display: flex; + align-items: center; + gap: var(--space-2); + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(8px); + border-radius: var(--radius-full); + padding: var(--space-2) var(--space-4); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.life-points-icon { + width: 24px; + height: 24px; + color: var(--error-red); + animation: heartbeat 2s ease-in-out infinite; +} + +@keyframes heartbeat { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } +} + +.life-points-count { + display: flex; + gap: var(--space-1); +} + +.life-point { + width: 16px; + height: 16px; + border-radius: 50%; + transition: all 0.3s ease; + border: 2px solid var(--error-red); +} + +.life-point.active { + background: var(--error-red); + box-shadow: 0 0 8px rgba(231, 76, 60, 0.5); +} + +.life-point.lost { + background: transparent; + opacity: 0.3; +} + +.life-points-text { + font-size: var(--text-sm); + font-weight: 700; + color: white; + margin-left: var(--space-2); +} + +/* 命條不足警告 */ +.life-points-warning { + background: linear-gradient(135deg, var(--error-red), #c62828); + color: white; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + margin: var(--space-4) 0; + display: flex; + align-items: center; + gap: var(--space-3); + animation: warningPulse 2s ease-in-out infinite; +} + +@keyframes warningPulse { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); + } + 50% { + box-shadow: 0 0 20px 5px rgba(231, 76, 60, 0); + } +} + +.life-points-warning-icon { + font-size: 1.5rem; + animation: shake 0.8s ease-in-out infinite; +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} + +.life-points-warning-text { + flex: 1; +} + +.life-points-warning-title { + font-weight: 700; + margin-bottom: var(--space-1); +} + +.life-points-warning-message { + font-size: var(--text-sm); + opacity: 0.9; +} +``` + +#### 資源不足提示組件 +```css +.resource-insufficient-card { + background: linear-gradient(135deg, #ff5722 0%, #d32f2f 100%); + color: white; + border-radius: var(--radius-2xl); + padding: var(--space-8); + text-align: center; + max-width: 400px; + margin: 0 auto; + position: relative; + overflow: hidden; +} + +.resource-insufficient-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); + animation: resourceWarningGlow 3s ease-in-out infinite; +} + +@keyframes resourceWarningGlow { + 0%, 100% { + opacity: 0.3; + transform: scale(1); + } + 50% { + opacity: 0.6; + transform: scale(1.1); + } +} + +.resource-insufficient-icon { + width: 80px; + height: 80px; + margin: 0 auto var(--space-4) auto; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + font-size: 2.5rem; + position: relative; + z-index: 1; +} + +.resource-insufficient-title { + font-size: var(--text-2xl); + font-weight: 700; + margin-bottom: var(--space-3); + position: relative; + z-index: 1; +} + +.resource-insufficient-message { + font-size: var(--text-base); + margin-bottom: var(--space-6); + opacity: 0.9; + line-height: 1.6; + position: relative; + z-index: 1; +} + +.resource-insufficient-stats { + display: flex; + justify-content: space-around; + background: rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + padding: var(--space-4); + margin-bottom: var(--space-6); + position: relative; + z-index: 1; +} + +.resource-stat { + text-align: center; +} + +.resource-stat-label { + font-size: var(--text-xs); + opacity: 0.8; + margin-bottom: var(--space-1); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.resource-stat-value { + font-size: var(--text-xl); + font-weight: 700; +} + +.resource-solutions { + display: flex; + flex-direction: column; + gap: var(--space-3); + position: relative; + z-index: 1; +} + +.resource-solution-btn { + background: rgba(255, 255, 255, 0.2); + border: 2px solid rgba(255, 255, 255, 0.3); + color: white; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.resource-solution-btn:hover { + background: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.5); + transform: translateY(-2px); +} + +.resource-solution-btn.primary { + background: rgba(255, 255, 255, 0.9); + color: var(--error-red); + border-color: white; +} + +.resource-solution-btn.primary:hover { + background: white; + transform: translateY(-4px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} +``` + ## 互動設計規範 ### 情境對話介面設計 *(新增核心功能)* @@ -1356,6 +2556,15 @@ --- -**最後更新**: 2024年9月5日 -**基於實際設計**: 05_views 目錄中的71個畫面設計 -**審查週期**: 每兩週檢討一次，與實際設計保持同步 \ No newline at end of file +**最後更新**: 2025年9月12日 +**基於實際設計**: 完整整合function-specs規格，包含用戶認證、商店系統、學習流程等95個UI視圖 +**新增組件系統**: +- 用戶認證組件（登入表單、社交登入、密碼驗證） +- 商店道具組件（商品卡片、購買確認、價格顯示） +- 學習進度組件（進度條、里程碑、統計儀表板） +- 模態視窗系統（基礎模態、確認對話框、購買彈窗） +- 系統通知組件（Toast通知、命條顯示、資源警告） +- 完整表單驗證系統（即時驗證、錯誤提示、成功反饋） + +**審查週期**: 每兩週檢討一次，與實際設計保持同步 +**整合狀態**: ✅ 已與所有function-specs規格完整整合 \ No newline at end of file diff --git a/prototypes/screens/phase1/01-login.html b/prototypes/screens/phase1/01-login.html deleted file mode 100644 index f3280c2..0000000 --- a/prototypes/screens/phase1/01-login.html +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - Drama Ling - 登入 - - - - -
- - - - -
-
-
- - -
- -
- - -
- - - -
- - -
- 或者 -
- - - - - - -
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase1/02-signup.html b/prototypes/screens/phase1/02-signup.html deleted file mode 100644 index 7494c42..0000000 --- a/prototypes/screens/phase1/02-signup.html +++ /dev/null @@ -1,491 +0,0 @@ - - - - - - Drama Ling - 註冊 - - - - -
- - - - -
-
-
-
- - -
- -
- - -
-
- -
- - -
- -
- - -
- -
- - -
- - -
- -
-
13-17歲
-
18-24歲
-
25-34歲
-
35-44歲
-
45-54歲
-
55歲以上
-
-
- - -
- -
- 我同意 服務條款 和 隱私政策 -
-
- - - -
- - -
- 或者 -
- - - - - - -
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase1/03-onboarding.html b/prototypes/screens/phase1/03-onboarding.html deleted file mode 100644 index ba1f79c..0000000 --- a/prototypes/screens/phase1/03-onboarding.html +++ /dev/null @@ -1,562 +0,0 @@ - - - - - - Drama Ling - 新手引導 - - - - -
- -
-

歡迎來到 Drama Ling！

-

讓我們了解您的學習需求

-
- -
-
- -
-
-
-
-
- - -
-
🎭
-

用英語演出你的故事

-

- Drama Ling 結合情境對話和AI智能分析，讓您在真實場景中練習英語，提升溝通能力。我們將根據您的學習目標和程度，為您量身打造個人化的學習路徑。 -

-
- - - - - - -
-
- - -
- - -
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase1/04-learning-path-selection.html b/prototypes/screens/phase1/04-learning-path-selection.html deleted file mode 100644 index 814d775..0000000 --- a/prototypes/screens/phase1/04-learning-path-selection.html +++ /dev/null @@ -1,571 +0,0 @@ - - - - - - Drama Ling - 選擇學習路徑 - - - - -
- -
-

選擇您的學習路徑

-

- 根據您的英語程度和學習目標，我們為您推薦了以下學習路徑。每個路徑都經過精心設計，幫助您循序漸進地提升英語能力。 -

-
- - -
- -
-
💬
-

日常對話精通

- -
-
-
-
-
-
-
-
- 適合初學者 -
- -

- 從基礎問候開始，逐步掌握購物、用餐、問路等日常情境對話，建立英語溝通的信心基礎。 -

- -
    -
  • 13個階段循序學習
    • -
  • 20+真實場景劇本
    • -
  • AI即時發音糾正
    • -
  • 詞彙量從300增至1500
    • -
  • 三維對話能力評估
    • -
- -
- ⏱️ - 預估完成時間：8-12週 -
-
- - -
-
💼
-

商務英語專精

- -
-
-
-
-
-
-
-
- 中高級 -
- -

- 專為職場人士設計，涵蓋會議討論、簡報演示、商務談判等專業場景，提升職場競爭力。 -

- -
    -
  • 職場核心情境訓練
    • -
  • 商務詞彙2000+
    • -
  • 簡報技巧專項練習
    • -
  • 談判對話深度分析
    • -
  • 專業表達能力評估
    • -
- -
- ⏱️ - 預估完成時間：12-16週 -
-
- - -
-
✈️
-

旅遊英語達人

- -
-
-
-
-
-
-
-
- 初中級 -
- -

- 為愛好旅遊的您量身打造，掌握機場、飯店、餐廳、景點等旅遊必備對話技能。 -

- -
    -
  • 旅遊場景全覆蓋
    • -
  • 緊急狀況應對訓練
    • -
  • 文化交流對話練習
    • -
  • 實用短語快速記憶
    • -
  • 口音適應性訓練
    • -
- -
- ⏱️ - 預估完成時間：6-10週 -
-
- - -
-
📚
-

考試準備強化

- -
-
-
-
-
-
-
-
- 高級 -
- -

- 針對TOEIC、IELTS、TOEFL等英語檢定考試，重點強化口說測驗的應答技巧和流暢度。 -

- -
    -
  • 考試題型專項練習
    • -
  • 高頻詞彙密集訓練
    • -
  • 答題策略深度解析
    • -
  • 時間管理技巧培養
    • -
  • 模擬考試實戰演練
    • -
- -
- ⏱️ - 預估完成時間：10-14週 -
-
-
- - -
- -

請先選擇一個學習路徑

-
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase1/05-four-stage-learning.html b/prototypes/screens/phase1/05-four-stage-learning.html deleted file mode 100644 index c2c9e48..0000000 --- a/prototypes/screens/phase1/05-four-stage-learning.html +++ /dev/null @@ -1,971 +0,0 @@ - - - - - - Drama Ling - 四關學習系統 - - - - -
- -
- - -
- -
-
-
-
-
-
-
-
-
- -
-
- 150 -
-
-
- - -
-

階段1：基礎對話入門

-

掌握日常生活中最常用的基礎對話技巧

- - -
-
-
3
-
已完成劇本
-
-
-
9
-
獲得星數
-
-
-
45
-
學會詞彙
-
-
-
- - -
-

選擇劇本開始學習

- -
- -
-
-
-
問候與自我介紹
-
咖啡廳初次見面
-
-
已完成
-
- - -
-
-
- ✓ - 詞彙學習 -
-
- -
- ✓ - 詞彙熟悉 -
-
- -
- 💎 - 口說練習 -
-
- -
- ✓ - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
- - -
-
-
-
購物與詢價
-
服飾店購買衣物
-
-
已完成
-
- -
-
-
- ✓ - 詞彙學習 -
-
- -
- ✓ - 詞彙熟悉 -
-
- -
- 🔒 - 口說練習 -
-
- -
- ✓ - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
- - -
-
-
-
餐廳點餐
-
西餐廳用餐體驗
-
-
已完成
-
- -
-
-
- ✓ - 詞彙學習 -
-
- -
- ✓ - 詞彙熟悉 -
-
- -
- 💎 - 口說練習 -
-
- -
- ✓ - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
- - -
-
-
-
問路指南
-
街頭問路與指路
-
-
可開始
-
- -
-
-
- 1 - 詞彙學習 -
-
- -
- 🔒 - 詞彙熟悉 -
-
- -
- 💎 - 口說練習 -
-
- -
- 🔒 - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
- - -
-
-
-
天氣聊天
-
日常天氣話題
-
-
🔒 鎖定
-
- -
-
-
- 🔒 - 詞彙學習 -
-
- -
- 🔒 - 詞彙熟悉 -
-
- -
- 💎 - 口說練習 -
-
- -
- 🔒 - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
- - -
-
-
-
醫院看診
-
醫院掛號就診
-
-
🔒 鎖定
-
- -
-
-
- 🔒 - 詞彙學習 -
-
- -
- 🔒 - 詞彙熟悉 -
-
- -
- 💎 - 口說練習 -
-
- -
- 🔒 - 情境對話 -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase1/index.html b/prototypes/screens/phase1/index.html deleted file mode 100644 index 88ccc48..0000000 --- a/prototypes/screens/phase1/index.html +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - Drama Ling - 第1階段核心流程原型展示 - - - - -
- -
-

Drama Ling 原型展示

-

第1階段：核心學習流程畫面

-

- 本展示包含 Drama Ling 核心學習流程的完整用戶體驗，從用戶註冊到四關學習系統的主要界面。 - 每個畫面都基於完整的 UI/UX 設計系統，整合了 102 個 UI 元件，並實現了 Duolingo 風格的遊戲化學習體驗。 - 所有畫面均採用響應式設計，支援桌面和行動裝置。 -

-
- - -
- -
-
🔐
-

用戶登入

-
- ✅ - 已完成 -
-

- 完整的用戶認證界面，支援電子郵件登入和 Google OAuth，包含表單驗證和載入狀態處理。 -

-
    -
  • UI_Login_Screen - 用戶登入界面
    • -
  • UI_Login_Form - 登入表單
    • -
  • UI_Google_Login_Button - Google登入
    • -
  • 響應式設計與動畫效果
    • -
  • 表單驗證與錯誤處理
    • -
- 查看登入畫面 -
- - -
-
📝
-

用戶註冊

-
- ✅ - 已完成 -
-

- 詳細的註冊流程，包含個人資料填寫、年齡選擇、服務條款確認等完整用戶資料收集。 -

-
    -
  • UI_Signup_Form - 註冊表單
    • -
  • UI_Age_Selection - 年齡範圍選擇
    • -
  • UI_Terms_Checkbox - 服務條款勾選
    • -
  • 密碼強度驗證
    • -
  • 即時表單驗證
    • -
- 查看註冊畫面 -
- - -
-
🎯
-

新手引導

-
- ✅ - 已完成 -
-

- 三步驟引導流程，收集用戶學習目標和英語程度，為後續學習路徑推薦提供數據基礎。 -

-
    -
  • UI_Onboarding_Steps - 三步驟引導
    • -
  • UI_Learning_Goals_Selection - 學習目標選擇
    • -
  • UI_English_Level_Assessment - 程度評估
    • -
  • 步驟指示器與進度追蹤
    • -
  • 數據收集與儲存
    • -
- 查看引導畫面 -
- - -
-
🛤️
-

學習路徑選擇

-
- ✅ - 已完成 -
-

- 四種專業學習路徑選擇，包含日常對話、商務英語、旅遊英語、考試準備等不同學習方向。 -

-
    -
  • UI_Learning_Path_Card - 學習路徑卡片
    • -
  • UI_Difficulty_Badge - 難度等級標識
    • -
  • UI_Time_Estimate - 完成時間預估
    • -
  • 智能推薦系統
    • -
  • 路徑特色說明
    • -
- 查看路徑選擇 -
- - -
-
🎮
-

四關學習系統

-
- ✅ - 已完成 -
-

- Drama Ling 的核心學習界面，展示13個階段的線性闖關系統，每個劇本包含4個循序漸進的學習關卡。 -

-
    -
  • UI_Four_Stage_Learning_Main - 主學習界面
    • -
  • UI_Life_Points_Display - 生命點數系統
    • -
  • UI_Script_Card - 劇本卡片設計
    • -
  • UI_Four_Stage_Progress - 四關進度顯示
    • -
  • UI_Stars_Rating - 星級評價系統
    • -
- 查看學習系統 -
-
- - -
-

完整用戶流程體驗

-

- 體驗從註冊到開始學習的完整流程，所有畫面間的導航和數據傳遞都已實現 -

- -
-
用戶登入
-
→
-
新手引導
-
→
-
路徑選擇
-
→
-
開始學習
-
- - 開始完整流程體驗 -
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase2/01-item-shop.html b/prototypes/screens/phase2/01-item-shop.html deleted file mode 100644 index 5e37989..0000000 --- a/prototypes/screens/phase2/01-item-shop.html +++ /dev/null @@ -1,935 +0,0 @@ - - - - - - Drama Ling - 道具商店 - - - - -
- -
-
-
🛒
-
-

道具商店

-

提升學習效率，解鎖更多可能

-
-
- - -
-
-
- 1,250 -
- -
-
- - -
-
- - - - - -
-
- -
- -
-

- 📚 - 學習輔助道具 -

-

- 提升學習效果，讓英語學習更輕鬆有趣。這些道具能在四關闖關過程中提供即時幫助。 -

- -
- -
-
熱門
-
💡
-

智能回覆提示

-

- 在情境對話中獲得AI智能回覆建議，幫助您選擇最恰當的回應。每次使用提供3個優質回覆選項。 -

-
-
-
-
- 50 -
-
- -
-
- - -
-
🌐
-

即時翻譯輔助

-

- 遇到不熟悉的詞彙或句子時，一鍵查看中文翻譯和詳細解釋。包含文化背景說明。 -

-
-
-
-
- 30 -
-
- -
-
- - -
-
✏️
-

語法檢查器

-

- AI語法檢查工具，即時分析您的句子結構，提供語法改善建議和正確用法示例。 -

-
-
-
-
- 40 -
-
- -
-
- - -
-
🎤
-

發音練習加強

-

- 額外的發音練習機會，包含音標指導和發音技巧提示。AI評分系統提供詳細改善建議。 -

-
-
-
-
- 60 -
-
- -
-
-
-
- - -
-

- ❤️ - 生命補充道具 -

-

- 快速恢復生命點數，持續您的學習進度。不同套餐適合不同學習強度的需求。 -

- -
- -
-
💖
-

立即補命

-

- 立即恢復1個生命點數，繼續您的學習之旅。適合偶爾使用的學習者。 -

-
-
-
-
- 20 -
-
- -
-
- - -
-
推薦
-
💕
-

完全恢復

-

- 將生命點數恢復至滿格狀態，適合密集學習時使用。比單次購買更划算。 -

-
-
-
-
- 80 -
- 100💎 - -20% -
- -
-
- - -
-
🛡️
-

生命守護

-

- 24小時內失敗不消耗生命點數，安心挑戰困難關卡。適合想要突破瓶頸的學習者。 -

-
-
-
-
- 150 -
-
- -
-
-
-
- - -
-

- ⚡ - 挑戰道具 -

-

- 在限時挑戰和競技模式中獲得優勢，提升排行榜名次和獎勵獲得。 -

- -
- -
-
⏸️
-

時間暫停

-

- 在300秒限時挑戰中暫停計時5秒，爭取更多思考時間。每次挑戰可使用1次。 -

-
-
-
-
- 35 -
-
- -
-
- - -
-
⏰
-

時間加成

-

- 為限時挑戰增加30秒額外時間，完成更多題目獲得更高分數。 -

-
-
-
-
- 45 -
-
- -
-
- - -
-
熱門
-
✨
-

經驗雙倍

-

- 接下來的3次學習獲得雙倍經驗值，快速提升等級和解鎖新內容。 -

-
-
-
-
- 70 -
-
- -
-
-
-
- - -
-

- 👑 - 會員專區 -

-

- 專為付費會員準備的超值道具包，享受更優惠的價格和獨家內容。 -

- -
- -
-
🎁
-

會員專享包

-

- 包含5次智能回覆提示、3次完全恢復、2次時間暫停。只有會員才能享受的超值組合。 -

-
-
-
-
- 200 -
- 350💎 - -43% -
- -
-
- - -
-
🚀
-

VIP學習加速器

-

- 7天內所有學習獲得3倍經驗值，生命恢復速度加倍，專屬徽章顯示。 -

-
-
-
-
- 500 -
-
- -
-
-
-
- - -
-

- 💎 - 鑽石購買專區 -

-

- 選擇最適合您的鑽石套餐，享受更豐富的學習體驗。首次購買享有新手優惠。 -

- -
- -
-
💎 500
-
NT$ 30
-
首次購買專享
- -
- - -
-
💎 1,200
-
NT$ 60
-
贈送200鑽石
- -
- - -
-
💎 2,500
-
NT$ 99
-
贈送500鑽石
- -
- - -
-
💎 5,000
-
NT$ 190
-
贈送1000鑽石
- -
- - -
-
💎 12,000
-
NT$ 390
-
贈送3000鑽石
- -
-
-
-
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase2/02-payment-flow.html b/prototypes/screens/phase2/02-payment-flow.html deleted file mode 100644 index 08288de..0000000 --- a/prototypes/screens/phase2/02-payment-flow.html +++ /dev/null @@ -1,864 +0,0 @@ - - - - - - Drama Ling - 付費流程 - - - - -
-
- -
-
💰
-

購買鑽石

-

選擇最適合您的套餐，立即開始豐富的學習體驗

-
- - -
-
-
1
-
-
-
-
2
-
-
-
-
3
-
-
- - -
- -
-

- 💎 - 選擇鑽石套餐 -

- -
-
-
💎 500
-
NT$ 30
-
新手專享
-
- -
-
💎 1,200
-
NT$ 60
-
+200贈送
-
- -
-
💎 2,500
-
NT$ 99
-
+500贈送
-
- -
-
💎 5,000
-
NT$ 190
-
+1000贈送
-
- -
-
💎 12,000
-
NT$ 390
-
+3000贈送
-
-
-
- -
- - -
-
- - -
- -
-

- 💳 - 選擇支付方式 -

- -
-
-
🍎
-
-
Apple Pay
-
安全快速的一鍵支付
-
-
- -
-
📱
-
-
Google Pay
-
Google 官方支付服務
-
-
- -
-
💳
-
-
信用卡
-
Visa / MasterCard
-
-
- -
-
🔵
-
-
PayPal
-
國際通用支付平台
-
-
-
-
- - -
-
- 套餐內容： - 請選擇套餐 -
-
- 基礎鑽石： - 0 -
-
- 贈送鑽石： - 0 -
-
- 總計： - NT$ 0 -
-
- -
- - -
-
- - -
- -
- -
正在處理您的付款...
-
請勿關閉此頁面，我們正在與支付服務商確認您的交易
-
-
- - -
- -
-
✅
-

付款成功！

-

- 恭喜您！鑽石已經成功充值到您的帳戶中。現在您可以盡情享受 Drama Ling 的完整學習體驗了！ -

- -
-
- 購買項目： - - -
-
- 獲得鑽石： - - -
-
- 交易時間： - - -
-
- -
- - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase2/03-life-points-system.html b/prototypes/screens/phase2/03-life-points-system.html deleted file mode 100644 index 35da79b..0000000 --- a/prototypes/screens/phase2/03-life-points-system.html +++ /dev/null @@ -1,1064 +0,0 @@ - - - - - - Drama Ling - 生命點數系統 - - - - -
- -
-
❤️
-

生命點數系統

-

- 生命點數是您學習進度的守護者，合理管理生命點數讓學習更有節奏感 -

-
- - -
-
-
免費用戶
- -
- -
- -
- -
- 4 / 5 -
-
當前生命點數
-
-
- - -
-

- ⏰ - 生命恢復倒計時 -

- -
-
04:32:15
-
下次恢復生命點數
-
- - -
-
-
-
-
- -
-
-
每5小時
-
恢復頻率
-
-
-
+1
-
單次恢復
-
-
-
1個
-
即將恢復
-
-
-
-
- - -
-

- 💊 - 生命點數獲取方式 -

- -
- -
-
推薦
-
-
💖
-
-

立即補充

-
-
-

- 使用鑽石立即恢復生命點數，繼續您的學習進程。快速、便捷、即時生效。 -

-
-
-
1個
-
恢復數量
-
-
-
20💎
-
消耗鑽石
-
-
-
- -
-
- - -
-
-
📺
-
-

觀看廣告

-
-
-

- 觀看30秒廣告即可免費獲得1個生命點數。每日限制3次機會。 -

-
-
-
1個
-
恢復數量
-
-
-
2/3
-
剩餘次數
-
-
-
- -
-
- - -
-
-
👑
-
-

升級會員

-
-
-

- 升級為付費會員，享受更多生命點數上限和更快的恢復速度。 -

-
-
-
30個
-
生命上限
-
-
-
每小時
-
恢復頻率
-
-
-
- -
-
- - -
-
-
⏳
-
-

耐心等待

-
-
-

- 免費等待自然恢復，培養良好的學習節奏，避免過度學習造成疲勞。 -

-
-
-
免費
-
恢復成本
-
-
-
4小時
-
等待時間
-
-
-
- -
-
-
-
- - -
-

- ⭐ - 會員等級比較 -

- -
-
-

免費用戶

-
    -
  • 5個生命上限
    • -
  • 每5小時恢復1個
    • -
  • 每日3次免費廣告
    • -
  • 基本學習功能
    • -
  • 社群排行榜
    • -
-
- -
-

付費會員

-
    -
  • 30個生命上限
    • -
  • 每小時恢復3個
    • -
  • 無廣告體驗
    • -
  • 專屬學習道具
    • -
  • 優先客服支援
    • -
-
- -
-

無限會員

-
    -
  • 無限生命點數
    • -
  • 即時無限恢復
    • -
  • 所有付費內容
    • -
  • 專屬VIP徽章
    • -
  • 一對一學習指導
    • -
-
-
-
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase2/04-reply-assistance.html b/prototypes/screens/phase2/04-reply-assistance.html deleted file mode 100644 index 1eef2e0..0000000 --- a/prototypes/screens/phase2/04-reply-assistance.html +++ /dev/null @@ -1,1086 +0,0 @@ - - - - - - Drama Ling - 智能回覆輔助 - - - - -
- -
-
-
🍽️
-
-
餐廳點餐情境
-
與服務生進行點餐對話
-
-
- - -
-
-
-
-
- AI輔助 -
- -
-
- 3次 -
-
-
- - -
- -
-
🤖
-
-
-
- 歡迎來到 Tony's Restaurant！我是您今晚的服務生。請問您想要看看我們的菜單嗎？ -
-
14:25
-
- - -
-
- 🌐 翻譯輔助 - -
-
- 中文翻譯：歡迎來到托尼餐廳！我是您今晚的服務生。請問您想要看看我們的菜單嗎？
- 關鍵詞彙：restaurant (餐廳)、waiter (服務生)、menu (菜單) -
-
-
-
- - -
-
😊
-
-
-
- Yes, I'd like to see the menu please. Do you have any recommendations? -
-
14:26
-
-
-
- - -
-
🤖
-
-
-
- Of course! Here's our menu. I highly recommend our signature pasta and the grilled salmon. They're very popular tonight. What kind of cuisine do you prefer? -
-
14:27
-
-
-
-
- - -
-
-

- 💡 智能回覆建議 - AI -

-
-
- 50鑽石 -
-
- - -
-
- - -
-
- - - - - - -
-
- - - - \ No newline at end of file diff --git a/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html b/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html deleted file mode 100644 index dfae485..0000000 --- a/prototypes/screens/phase2/05-vocabulary-learning-enhanced.html +++ /dev/null @@ -1,1008 +0,0 @@ - - - - - - Drama Ling - 詞彙學習 (增強版) - - - - -
- -
-
-
📚
-
-
詞彙學習 - 第1關
-
餐廳點餐情境
-
-
- - -
-
-
-
-
-
-
-
-
3/5
-
-
- - -
-
- -
-
- optimal - B2 -
-
/ˈɒp.tɪ.məl/
- - -
-
-
🔊
-
正常速度
-
-
-
🐌
-
慢速度
-
-
-
- - -
-

- 📖 - Definition 定義 -

-
- The best or most effective possible in a particular situation. -
-
- - -
-

- 💬 - Examples 例句 -

-
- -
-
Example
-
- The optimal time to plant these seeds is in early spring. -
-
- -
- -
-
- 🌱 Optimal Planting Time -
-
- Visual example showing the concept in context -
-
-
- - -
-
Source
-
- For the optimal coding experience, enable the recommended settings. -
-
-
-
- -
-
- - -
- - -
-
optimal
-
Word 3 of 5
-
- - -
-
- - - - - - - - - - - - \ No newline at end of file diff --git a/sop/archive/ANALYSIS_REPORT.md b/sop/archive/ANALYSIS_REPORT.md new file mode 100644 index 0000000..787a8cb --- /dev/null +++ b/sop/archive/ANALYSIS_REPORT.md @@ -0,0 +1,253 @@ +# Common Function Specs 文件分析報告 + +## 📋 執行摘要 + +**分析日期**: 2025-09-12 +**分析範圍**: `/docs/02_design/function-specs/common/` 資料夾 +**文件總數**: 10個文件 +**總體評估**: 🟡 **中等品質** - 有明確架構但存在重疊和缺失 + +--- + +## 📁 現有文件清單與用途分析 + +### 🎯 **核心系統規格** (4個文件) + +| 文件名 | 用途 | 品質評估 | 大小 | +|--------|------|----------|------| +| **progressive-stage-system.md** | 線性闖關學習系統的完整架構定義 | ✅ 優秀 | 9.9KB | +| **business-rules.md** | 跨平台業務邏輯和規則(命條、付費、鑽石系統) | ✅ 優秀 | 29.7KB | +| **data-models.md** | 所有核心數據實體結構和關係 | ✅ 優秀 | 37.4KB | +| **api-specifications.md** | 完整API接口文檔和端點定義 | ✅ 優秀 | 22.8KB | + +### 🤖 **AI系統規格** (3個文件) + +| 文件名 | 用途 | 品質評估 | 大小 | +|--------|------|----------|------| +| **ai-algorithm-specs.md** | AI對話分析算法整合規格 | 🟡 中等 | 18.6KB | +| **speaking-evaluation-specs.md** | 五維度口說評分系統詳細規格 | ✅ 優秀 | 3.0KB | +| **pragmatic-analysis-specs.md** | 六維語用分析標準和建議系統 | ✅ 優秀 | 8.8KB | + +### 📚 **內容管理** (1個文件) + +| 文件名 | 用途 | 品質評估 | 大小 | +|--------|------|----------|------| +| **content-management-specs.md** | 學習內容管理和劇本架構 | 🟡 中等 | 14.0KB | + +### 🔧 **系統架構** (1個文件) + +| 文件名 | 用途 | 品質評估 | 大小 | +|--------|------|----------|------| +| **system_structure_design.json** | 結構化系統設計和模組定義 | ✅ 優秀 | 111KB | + +--- + +## 🔍 **重複性分析** + +### ✅ **無重複問題的文件組合** +- **progressive-stage-system.md** ↔ **business-rules.md**: 前者定義學習架構，後者定義業務規則，職責清晰 +- **speaking-evaluation-specs.md** ↔ **pragmatic-analysis-specs.md**: 前者評分，後者建議，功能互補 +- **data-models.md** ↔ **api-specifications.md**: 前者定義數據結構，後者定義接口契約，標準分層 + +### 🟡 **輕微重疊但可接受** +- **ai-algorithm-specs.md** 與其他AI文件: 作為整合規格引用其他模組，角色清晰 +- **content-management-specs.md** 與 **data-models.md**: 前者專注內容架構，後者涵蓋所有數據模型 + +### 🚨 **需要注意的潛在重複** +- **system_structure_design.json** 包含所有系統模組定義，與其他文件可能存在信息重複，但作為系統總覽是必要的 + +--- + +## 📊 **行業標準對比分析** + +### 🏆 **符合行業最佳實踐** + +#### ✅ **架構分層清晰** +``` +Business Rules → Data Models → API Specs + ↓ ↓ ↓ + 業務邏輯 → 數據結構 → 接口定義 +``` + +#### ✅ **模組化設計** +- 每個文件職責單一且明確 +- 支援跨文件引用和依賴管理 +- 遵循"關注點分離"原則 + +#### ✅ **完整性覆蓋** +- **業務層**: business-rules.md +- **應用層**: progressive-stage-system.md, ai-algorithm-specs.md +- **數據層**: data-models.md +- **接口層**: api-specifications.md +- **內容層**: content-management-specs.md + +### 🎯 **行業標準參考** + +| 標準實踐 | Drama Ling 現狀 | 評估 | +|----------|-----------------|------| +| **業務規則文檔** | ✅ 完整的 business-rules.md | 符合 | +| **數據模型規範** | ✅ 詳細的 data-models.md | 符合 | +| **API契約文檔** | ✅ 完整的 api-specifications.md | 符合 | +| **系統架構圖** | ✅ system_structure_design.json | 符合 | +| **測試規格** | ❌ 缺失 | 需要 | +| **安全規格** | ❌ 缺失 | 需要 | +| **性能規格** | ❌ 缺失 | 需要 | + +--- + +## ⚠️ **缺失分析** + +### 🚨 **高優先級缺失** + +#### 1. **測試規格文檔** (`testing-specifications.md`) +```yaml +缺失內容: + - 單元測試標準 + - 整合測試策略 + - E2E測試場景 + - 性能測試基準 +重要性: 🔴 高 +影響: 開發品質保證 +``` + +#### 2. **安全規格文檔** (`security-requirements.md`) +```yaml +缺失內容: + - 數據加密標準 + - 用戶隱私保護 + - API安全規範 + - 漏洞防護策略 +重要性: 🔴 高 +影響: 系統安全風險 +``` + +#### 3. **錯誤處理規格** (`error-handling-specs.md`) +```yaml +缺失內容: + - 統一錯誤碼定義 + - 錯誤回復策略 + - 用戶友好錯誤訊息 + - 日誌記錄標準 +重要性: 🟡 中 +影響: 用戶體驗和維護性 +``` + +### 🟡 **中優先級缺失** + +#### 4. **性能規格文檔** (`performance-standards.md`) +```yaml +缺失內容: + - 響應時間標準 + - 併發處理能力 + - 資源使用限制 + - 擴展性要求 +重要性: 🟡 中 +影響: 系統性能表現 +``` + +#### 5. **國際化規格** (`internationalization-specs.md`) +```yaml +缺失內容: + - 多語言支援策略 + - 本地化內容管理 + - 時區和貨幣處理 + - 文化適應性設計 +重要性: 🟡 中 +影響: 全球化擴展 +``` + +### 🟢 **低優先級缺失** + +#### 6. **監控與日誌規格** (`monitoring-logging-specs.md`) +#### 7. **備份與恢復規格** (`backup-recovery-specs.md`) +#### 8. **第三方整合規格** (`third-party-integration-specs.md`) + +--- + +## 🏗️ **結構優化建議** + +### 📁 **建議的資料夾重組結構** + +``` +docs/02_design/function-specs/common/ +├── 01_core-system/ # 核心系統規格 +│ ├── progressive-stage-system.md +│ ├── business-rules.md +│ ├── data-models.md +│ └── system_structure_design.json +├── 02_api-interfaces/ # 接口規格 +│ ├── api-specifications.md +│ ├── error-handling-specs.md # 新增 +│ └── security-requirements.md # 新增 +├── 03_ai-systems/ # AI系統規格 +│ ├── ai-algorithm-specs.md +│ ├── speaking-evaluation-specs.md +│ └── pragmatic-analysis-specs.md +├── 04_content-management/ # 內容管理 +│ └── content-management-specs.md +├── 05_quality-assurance/ # 品質保證 +│ ├── testing-specifications.md # 新增 +│ ├── performance-standards.md # 新增 +│ └── monitoring-logging-specs.md # 新增 +└── 06_localization/ # 本地化 + └── internationalization-specs.md # 新增 +``` + +### 🔄 **遷移優先順序** + +1. **Phase 1 (立即)**: 創建缺失的高優先級文檔 +2. **Phase 2 (短期)**: 重組資料夾結構，保持向後兼容 +3. **Phase 3 (長期)**: 添加中低優先級規格文檔 + +--- + +## 📈 **品質評估總結** + +### 🎯 **強項** +- ✅ **核心業務邏輯完整**: business-rules.md 和 progressive-stage-system.md 提供完整的系統規則 +- ✅ **數據架構清晰**: data-models.md 定義完整的數據關係 +- ✅ **API設計規範**: api-specifications.md 提供完整的接口契約 +- ✅ **AI系統專業**: 口說評分和語用分析規格詳細且專業 + +### ⚠️ **需要改善** +- 🔶 **缺乏品質保證規格**: 測試、安全、性能規格缺失 +- 🔶 **錯誤處理不統一**: 缺乏統一的錯誤處理策略 +- 🔶 **監控機制不足**: 缺乏運營監控和日誌管理規格 + +### 📊 **總體分數** +``` +內容完整性: ⭐⭐⭐⭐⚪ (4/5) +結構組織性: ⭐⭐⭐⚪⚪ (3/5) +專業標準性: ⭐⭐⭐⭐⚪ (4/5) +維護便利性: ⭐⭐⭐⚪⚪ (3/5) + +總體評分: 70/100 (🟡 中等品質) +``` + +--- + +## 🚀 **行動建議** + +### 🔴 **立即行動 (本週)** +1. **創建 `security-requirements.md`** - 定義基本安全標準 +2. **創建 `testing-specifications.md`** - 建立測試框架和標準 +3. **創建 `error-handling-specs.md`** - 統一錯誤處理策略 + +### 🟡 **短期計劃 (本月)** +1. **重組資料夾結構** - 按照建議的6大分類重組 +2. **更新文檔間引用** - 確保所有交叉引用正確 +3. **建立文檔維護流程** - 定期更新和審查機制 + +### 🟢 **長期規劃 (三個月)** +1. **完善品質保證體系** - 添加性能、監控等規格 +2. **國際化準備** - 創建本地化和國際化規格 +3. **建立文檔自動化** - 使用工具自動檢查文檔一致性 + +--- + +**報告結論**: Drama Ling 的 Common Function Specs 具有良好的核心基礎，業務邏輯和數據架構清晰完整。主要改善方向是補強品質保證相關規格，並優化文檔組織結構以提升維護效率。 + +--- + +**分析者**: Claude AI +**審查建議**: 建議產品團隊基於此報告制定文檔改善計劃，優先處理安全和測試規格的缺失問題。 \ No newline at end of file diff --git a/sop/archive/Drama_Ling_UIUX_Design_Master_Plan.md b/sop/archive/Drama_Ling_UIUX_Design_Master_Plan.md new file mode 100644 index 0000000..9a973d6 --- /dev/null +++ b/sop/archive/Drama_Ling_UIUX_Design_Master_Plan.md @@ -0,0 +1,483 @@ +# Drama Ling UI/UX 設計完整計劃 + +**制定日期**: 2025-09-12 +**計劃版本**: v1.0 +**基於架構**: function-specs v3.0 共用模組架構 +**設計規範**: ui-ux-guidelines.md v2.0 + +## 🎯 計劃概述 + +基於 `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs` 的完整規格文件，設計所有頁面的UI/UX原型。所有設計將嚴格遵循 `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/ui-ux-guidelines.md` 的設計規範，並在規範不足時先補充規範再進行設計。 + +## 📋 第一階段：UI/UX規範完善 + +### 1.1 現有規範分析與補充 + +**目標**: 確保UI/UX規範涵蓋所有功能設計需求 + +**參考文件**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/ui-ux-guidelines.md` (主要規範) +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/business-rules.md` (業務規則) +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/progressive-stage-system.md` (系統架構) + +**需補充的設計規範**: + +#### 1.1.1 組件規範補充 ✅ (待驗證) +- [ ] **學習地圖組件**: 13階段×20劇本的地圖視覺化設計 + - 引用: `progressive-stage-system.md` - 線性闖關架構 + - 設計要素: 六角形關卡節點、連接線、狀態顏色、進度動畫 +- [ ] **命條系統組件**: 生命點數的視覺表現 + - 引用: `business-rules.md` - 命條系統規則 + - 設計要素: 心形圖標、數量顯示、恢復計時器、不足警告 +- [ ] **道具商店組件**: 鑽石和道具的購買界面 + - 引用: `business-rules.md` - 道具商店系統 + - 設計要素: 商品卡片、價格標籤、購買確認、餘額顯示 + +#### 1.1.2 互動設計規範補充 +- [ ] **語音輸入設計**: 語音優先的交互模式 + - 引用: `ai-algorithm-specs.md` - 語音處理規格 + - 設計要素: 語音波形、錄音狀態、即時轉換反饋 +- [ ] **AI輔助界面**: 智能提示和建議的展示方式 + - 引用: `ai-algorithm-specs.md` - AI算法規格 + - 設計要素: 對話氣泡、建議卡片、漸進式引導 +- [ ] **評分反饋系統**: 即時評分和建議的視覺化 + - 引用: `speaking-evaluation-specs.md` - 口說評分系統 + - 設計要素: 分數動畫、雷達圖、改進建議 + +#### 1.1.3 平台適配規範補充 +- [ ] **響應式設計規則**: Mobile和Web端的適配標準 + - 引用: `platform-feature-mapping.md` - 平台對應關係 + - 設計要素: 斷點設定、組件縮放、交互差異 +- [ ] **Web端專屬組件**: 桌面環境的特殊組件 + - 引用: `web/README.md` - Web端特色功能 + - 設計要素: 鍵盤快捷鍵、多視窗、批量操作 + +**輸出物**: +- `ui-ux-guidelines.md` 的完整更新版本 +- 新增組件設計規範文檔 +- 設計系統組件庫更新 + +### 1.2 設計系統建立 + +**目標**: 建立可重用的設計系統和組件庫 + +**工作項目**: +- [ ] **色彩系統**: 完整的色彩變數定義 +- [ ] **字體系統**: 響應式字體和行高規範 +- [ ] **間距系統**: 統一的空間和佈局規則 +- [ ] **組件庫**: 可重用的UI組件集合 +- [ ] **圖標系統**: 學習情境專用的圖標設計 + +**參考文件**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/dramaling-ui.css` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/ui-showcase.html` + +## 📱 第二階段：Mobile端頁面設計 + +### 2.1 核心學習功能頁面 + +#### 2.1.1 情境對話系統 (優先級: P0) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/01_situational-dialogue-mobile.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/ai-algorithm-specs.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/speaking-evaluation-specs.md` + +**需設計的頁面**: +- [ ] `UI_Dialogue_Practice_Main` - 情境對話練習主界面 + - 語音輸入界面 (參考: ai-algorithm-specs.md 語音處理) + - 即時AI反饋顯示 (參考: ai-algorithm-specs.md AI評估系統) + - 劇情任務和詞彙任務雙重可視化 + - 300秒限時挑戰計時器 +- [ ] `UI_Dialogue_Character_Selection` - 角色選擇頁面 +- [ ] `UI_Dialogue_Scene_Setting` - 場景設定頁面 +- [ ] `UI_AI_Assistance_Panel` - AI輔助功能面板 + - 回覆提示道具使用界面 + - 語法即時檢測顯示 +- [ ] `UI_Dialogue_Results` - 對話練習結果頁面 + - 口說評分五維雷達圖 (參考: speaking-evaluation-specs.md) + - 語用分析六維評估 (參考: pragmatic-analysis-specs.md) + +#### 2.1.2 詞彙學習系統 (優先級: P0) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/progressive-stage-system.md` + +**需設計的頁面**: +- [ ] `UI_Vocab_Learning_Enhanced` - 多媒體詞彙學習主界面 + - 詞彙展示 (音標、定義、例句) + - 雙語音頻系統 (標準速度/慢速) + - 智慧詞彙標註 (Source + Example) + - 視覺輔助學習 (例句配圖) +- [ ] `UI_Vocab_Choice_Practice` - 詞彙選擇練習頁面 +- [ ] `UI_Vocab_Fluency_Results` - 流暢度練習綜合結果 +- [ ] `UI_Vocab_Review_System` - 間隔複習系統界面 + +#### 2.1.3 學習地圖系統 (優先級: P0) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/03_learning-map-mobile.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/progressive-stage-system.md` + +**需設計的頁面**: +- [ ] `UI_Level_Map` - 學習地圖主畫面 (線性闖關版) + - 13階段×20劇本的地圖視覺化 + - 四關進度指示器 (詞彙學習→詞彙熟悉→口說練習→情境對話) + - 關卡狀態管理 (🔒鎖定/⏳可進行/🔄進行中/✅已完成) +- [ ] `UI_Current_Level_Info` - 當前可進行關卡資訊面板 +- [ ] `UI_Level_Progress_Detail` - 關卡進度詳情頁面 +- [ ] `UI_Stage_Overview` - 階段總覽和劇本選擇 +- [ ] `UI_Level_Locked_Modal` - 關卡鎖定提示彈窗 + +### 2.2 商業功能頁面 + +#### 2.2.1 道具商店系統 (優先級: P1) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/04_item-shop-mobile.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/business-rules.md` + +**需設計的頁面**: +- [ ] `UI_Shop_Categories` - 道具商店分類主頁面 + - 鑽石購買區 (5個價格套餐) + - 學習輔助道具區 (回覆提示、補命、加時) + - 限時挑戰道具區 (時間暫停、時間加成) +- [ ] `UI_Diamond_Purchase` - 鑽石購買頁面 +- [ ] `UI_Item_Details` - 單一道具詳情頁面 +- [ ] `UI_Shop_Item_Confirm` - 道具購買確認彈窗 +- [ ] `UI_Cost_Confirm_Popup` - 成本確認彈窗 (口說練習特別關卡) +- [ ] `UI_Insufficient_Resources` - 資源不足提示頁面 +- [ ] `UI_Purchase_Success` - 購買成功頁面 + +#### 2.2.2 用戶認證系統 (優先級: P1) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/05_user-authentication-mobile.md` +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/business-rules.md` + +**需設計的頁面**: +- [ ] `UI_Login_Main` - 登入主頁面 + - Email + 密碼登入 + - 第三方登入 (Google、Apple) + - 記住登入功能 +- [ ] `UI_SignUp_Main` - 註冊主頁面 +- [ ] `UI_PasswordReset_Form` - 密碼重設頁面 +- [ ] `UI_Profile_Settings` - 用戶資料設定頁面 +- [ ] `UI_Subscription_Plans` - 訂閱方案頁面 + - 7天免費體驗 + - 月費/年費訂閱選項 +- [ ] `UI_Account_Security` - 帳戶安全設定頁面 + +### 2.3 支援功能頁面 + +#### 2.3.1 系統通知和反饋 (優先級: P2) + +**需設計的頁面**: +- [ ] `UI_Achievement_Notification` - 成就通知彈窗 +- [ ] `UI_Level_Complete_Celebration` - 關卡完成慶祝頁面 +- [ ] `UI_Daily_Streak_Reward` - 每日連續學習獎勵 +- [ ] `UI_System_Maintenance` - 系統維護提示頁面 +- [ ] `UI_Network_Error` - 網路錯誤處理頁面 + +#### 2.3.2 學習分析和報告 (優先級: P2) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/data-models.md` + +**需設計的頁面**: +- [ ] `UI_Learning_Analytics` - 學習分析報告頁面 +- [ ] `UI_Progress_Statistics` - 進度統計頁面 +- [ ] `UI_Vocabulary_Review_Schedule` - 詞彙複習排程 +- [ ] `UI_Speaking_Improvement_Report` - 口說能力改善報告 + +## 💻 第三階段：Web端頁面設計 + +### 3.1 核心功能Web端適配 + +#### 3.1.1 詞彙學習系統 (Web版) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/vocabulary-learning-web.md` + +**需設計的頁面**: +- [ ] `Page_Vocab_Learning_W` - Web版詞彙學習主頁面 + - 大螢幕多詞彙並列展示 + - 鍵盤快捷鍵支援 + - 批量學習進度管理 +- [ ] `Page_Vocab_Batch_Practice_W` - 批量詞彙練習頁面 +- [ ] `Page_Vocab_Analytics_W` - 詞彙學習分析頁面 + +#### 3.1.2 情境對話系統 (Web版) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/situational-dialogue-web.md` + +**需設計的頁面**: +- [ ] `Page_Dialogue_Practice_W` - Web版情境對話練習頁面 + - 桌面端語音輸入優化 + - 多螢幕支援 + - 詳細的即時分析面板 +- [ ] `Page_Dialogue_History_W` - 對話練習歷史記錄 +- [ ] `Page_Advanced_Analytics_W` - 進階對話分析頁面 + +#### 3.1.3 學習地圖系統 (Web版) + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/learning-map-web.md` + +**需設計的頁面**: +- [ ] `Page_Learning_Map_W` - Web版學習地圖主頁面 + - 完整的13階段×20劇本視覺化 + - 滑鼠懸停詳細資訊 + - 鍵盤導航支援 +- [ ] `Page_Stage_Management_W` - 階段管理頁面 +- [ ] `Page_Batch_Progress_W` - 批量進度管理頁面 + +### 3.2 Web端專屬功能 + +#### 3.2.1 企業級功能 + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/user-authentication-web.md` + +**需設計的頁面**: +- [ ] `Page_SSO_Login_W` - 企業單點登入頁面 +- [ ] `Page_Two_Factor_Auth_W` - 雙因素認證設定頁面 +- [ ] `Page_Session_Management_W` - 會話管理頁面 +- [ ] `Page_Admin_Dashboard_W` - 管理員儀表板 + +#### 3.2.2 高級商店功能 + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/item-shop-web.md` + +**需設計的頁面**: +- [ ] `Page_Shop_Main_W` - Web版道具商店主頁面 + - 大螢幕完整商店展示 + - 批量購買支援 + - 價格比較工具 +- [ ] `Page_Diamond_Purchase_W` - Web版鑽石購買頁面 +- [ ] `Page_Price_Comparison_W` - 價格比較分析頁面 +- [ ] `Page_Bulk_Purchase_W` - 批量購買頁面 +- [ ] `Page_Payment_Methods_W` - 支付方式管理頁面 +- [ ] `Page_Purchase_History_W` - 購買歷史頁面 + +## 🧩 第四階段：共用組件設計 + +### 4.1 核心功能組件 + +**規格參考**: +- `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/business-rules.md` + +**需設計的組件**: +- [ ] `Component_LifePoints_Display` - 命條顯示組件 + - 心形生命值圖標 + - 數量和恢復時間顯示 + - 不足時的警告狀態 +- [ ] `Component_Diamond_Balance` - 鑽石餘額顯示組件 +- [ ] `Component_Progress_Indicator` - 學習進度指示器 +- [ ] `Component_Achievement_Badge` - 成就徽章組件 +- [ ] `Component_Star_Rating` - 星級評分組件 + +### 4.2 互動功能組件 + +**需設計的組件**: +- [ ] `Component_Voice_Input` - 語音輸入組件 + - 錄音狀態指示 + - 語音波形顯示 + - 即時轉換反饋 +- [ ] `Component_AI_Suggestion` - AI建議組件 +- [ ] `Component_Timer_Display` - 計時器組件 +- [ ] `Component_Score_Animation` - 分數動畫組件 +- [ ] `Component_Celebration_Effect` - 慶祝動畫效果 + +### 4.3 購買流程組件 + +**需設計的組件**: +- [ ] `Modal_Purchase_Confirm` - 購買確認模態視窗 + - 商品資訊展示 + - 支付方式選擇 + - 安全驗證流程 +- [ ] `Modal_Payment_Processing` - 支付處理模態視窗 +- [ ] `Component_Price_Tag` - 價格標籤組件 +- [ ] `Component_Discount_Badge` - 折扣標籤組件 + +## 🎨 第五階段：視覺設計精修 + +### 5.1 品牌視覺一致性 + +**工作項目**: +- [ ] **圖標系統設計**: 學習情境專用圖標集合 +- [ ] **插圖系統設計**: 學習場景插圖和角色設計 +- [ ] **動畫效果設計**: 學習回饋和成就慶祝動畫 +- [ ] **色彩應用指南**: 各功能區域的色彩使用規範 + +### 5.2 用戶體驗優化 + +**工作項目**: +- [ ] **微互動設計**: 按鈕點擊、狀態切換的細微動畫 +- [ ] **載入狀態設計**: 各種載入和等待狀態的友善提示 +- [ ] **錯誤處理設計**: 友善的錯誤提示和解決方案引導 +- [ ] **無障礙設計**: 色彩對比、鍵盤導航、螢幕閱讀器支援 + +## 📊 第六階段：原型開發與驗證 + +### 6.1 高保真原型開發 + +**工作項目**: +- [ ] **Mobile端原型**: 完整的移動端交互原型 +- [ ] **Web端原型**: 桌面端功能完整原型 +- [ ] **響應式驗證**: 各種螢幕尺寸的適配測試 +- [ ] **交互流程驗證**: 完整用戶旅程的原型測試 + +### 6.2 設計系統文檔 + +**工作項目**: +- [ ] **組件庫文檔**: 完整的組件使用說明 +- [ ] **設計規範手冊**: 設計師和開發者使用指南 +- [ ] **品牌指南**: 視覺識別和品牌應用規範 +- [ ] **無障礙設計指南**: WCAG 2.1 AA合規指南 + +## 🔧 執行方法與工具 + +### 工具選擇 +- **設計工具**: Figma (主要), Adobe XD (輔助) +- **原型工具**: Figma Prototype, Principle +- **協作工具**: Figma Team, Abstract (版本控制) +- **開發交接**: Figma Dev Mode, Zeplin + +### 版本控制 +- **設計檔案**: 統一命名規範和版本控制 +- **組件庫**: 版本化管理，向下相容性考量 +- **規範文檔**: Git版本控制，變更記錄追蹤 + +## ⏰ 時程規劃 + +### 第一階段：UI/UX規範完善 (1週) +- 天數 1-2: 現有規範分析 +- 天數 3-5: 補充設計規範 +- 天數 6-7: 設計系統建立 + +### 第二階段：Mobile端設計 (3週) +- 週1: 核心學習功能頁面設計 +- 週2: 商業功能頁面設計 +- 週3: 支援功能頁面設計 + +### 第三階段：Web端設計 (2週) +- 週1: 核心功能Web端適配 +- 週2: Web端專屬功能設計 + +### 第四階段：組件設計 (1週) +- 天數 1-3: 核心功能組件 +- 天數 4-5: 互動功能組件 +- 天數 6-7: 購買流程組件 + +### 第五階段：視覺精修 (1週) +- 天數 1-4: 品牌視覺一致性 +- 天數 5-7: 用戶體驗優化 + +### 第六階段：原型驗證 (1週) +- 天數 1-4: 高保真原型開發 +- 天數 5-7: 設計系統文檔 + +**總計**: 9週 (約2個月) + +## 🎯 成功指標 + +### 設計品質指標 +- [ ] **規範完整度**: UI/UX規範涵蓋所有功能設計需求 +- [ ] **設計一致性**: 跨平台設計元素一致性達95%以上 +- [ ] **無障礙合規**: WCAG 2.1 AA標準100%合規 +- [ ] **響應式覆蓋**: 支援5種以上主要螢幕尺寸 + +### 用戶體驗指標 +- [ ] **學習效率**: 用戶完成學習任務的時間減少20% +- [ ] **互動滿意度**: 用戶界面滿意度評分8分以上(10分制) +- [ ] **轉換效率**: 付費轉換漏斗各環節流失率低於15% +- [ ] **錯誤發生率**: 用戶操作錯誤率低於5% + +### 開發支援指標 +- [ ] **設計交接效率**: 設計到開發的交接時間減少50% +- [ ] **組件重用率**: 設計組件重用率達80%以上 +- [ ] **開發一致性**: 開發實現與設計稿一致性達95%以上 +- [ ] **維護效率**: 設計變更的維護時間減少60% + +## 📋 風險管控 + +### 設計風險 +- **風險**: 規範更新導致已完成設計需要大幅修改 +- **應對**: 分階段驗證，及早發現問題 +- **風險**: 跨平台設計一致性難以維持 +- **應對**: 建立嚴格的設計系統和組件庫 + +### 時程風險 +- **風險**: 設計複雜度超出預期時程 +- **應對**: 設定優先級，核心功能優先完成 +- **風險**: 規格文件理解偏差導致返工 +- **應對**: 定期與產品團隊對齊確認 + +### 品質風險 +- **風險**: 用戶體驗測試反饋需要重大修改 +- **應對**: 早期進行用戶研究和可用性測試 +- **風險**: 無障礙設計要求影響視覺效果 +- **應對**: 從設計初期就考慮無障礙需求 + +## 📚 關鍵參考文件清單 + +### 核心規格文件 (必讀) +1. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/README.md` - 總覽和架構說明 +2. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/business-rules.md` - 共同業務規則 +3. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/progressive-stage-system.md` - 線性闖關學習系統 +4. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/platform-feature-mapping.md` - 平台功能對應表 + +### Mobile端規格文件 +1. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/01_situational-dialogue-mobile.md` +2. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/02_vocabulary-learning-mobile.md` +3. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/03_learning-map-mobile.md` +4. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/04_item-shop-mobile.md` +5. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/mobile/05_user-authentication-mobile.md` + +### Web端規格文件 +1. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/vocabulary-learning-web.md` +2. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/situational-dialogue-web.md` +3. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/learning-map-web.md` +4. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/item-shop-web.md` +5. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/web/user-authentication-web.md` + +### 共用模組規格文件 +1. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/ai-algorithm-specs.md` - AI算法規格 +2. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/speaking-evaluation-specs.md` - 口說評分系統 +3. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/pragmatic-analysis-specs.md` - 語用分析系統 +4. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/content-management-specs.md` - 內容管理規格 +5. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/data-models.md` - 數據模型 +6. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/api-specifications.md` - API規格 + +### UI/UX設計規範文件 +1. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/ui-ux-guidelines.md` - 主要設計規範 +2. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/dramaling-ui.css` - CSS設計系統 +3. `/Users/jettcheng1018/code/dramaling-app/docs/02_design/ui-ux/ui-showcase.html` - 組件展示 + +## 📞 溝通與協作 + +### 定期檢查點 +- **每週設計評審**: 與產品經理和開發團隊的設計進度檢視 +- **雙週用戶測試**: 關鍵功能的用戶可用性測試 +- **月度設計總結**: 設計成果和問題總結報告 + +### 協作方式 +- **設計協作**: Figma團隊協作，即時同步設計進展 +- **跨團隊溝通**: Slack頻道，重要決策留存記錄 +- **文檔協作**: 設計規範和說明的協作編輯 + +--- + +**計劃制定者**: Claude AI +**審核狀態**: 待產品團隊確認 +**下次更新**: 根據第一階段執行結果調整 + +**重要提醒**: +1. 所有設計必須嚴格遵循引用的規格文件內容 +2. UI/UX規範不足時必須先補充規範再進行設計 +3. 跨平台一致性是設計成功的關鍵指標 +4. 用戶學習效果始終是設計決策的第一優先考量 \ No newline at end of file diff --git a/docs/02_design/prototype-design-plan.md b/sop/archive/prototype-design-plan.md similarity index 73% rename from docs/02_design/prototype-design-plan.md rename to sop/archive/prototype-design-plan.md index 61ce9af..6a531f5 100644 --- a/docs/02_design/prototype-design-plan.md +++ b/sop/archive/prototype-design-plan.md @@ -4,7 +4,8 @@ **文檔名稱**: Drama Ling 設計雛形畫面制作計劃 **建立日期**: 2025-09-11 -**版本**: v1.0 +**最後更新**: 2025-09-12 +**版本**: v1.1 - 更新詞彙學習系統和文件路徑 **目標**: 基於完整功能規格創建可視化雛形畫面，讓用戶能直觀體驗系統功能和流程 ## 🎯 計劃目標與範圍 @@ -42,7 +43,7 @@ - **訂閱服務**: 免費試用、付費方案、特權功能 ### 🎨 設計系統規範 -**出處**: `/docs/02_design/ui-ux/dramaling-ui.css` & `/docs/02_design/function-specs/common/ui-ux-guidelines.md` +**出處**: `/docs/02_design/ui-ux/dramaling-ui.css` & `/docs/02_design/ui-ux/ui-ux-guidelines.md` - **設計語言**: 色彩系統、字體規範、組件樣式 - **Duolingo風格**: 厚實3D按鈕、12px圓角、下壓動畫效果 - **響應式佈局**: 桌面和移動端的適配方案 @@ -89,9 +90,10 @@ **基於**: `UI_Vocab_Level1_Learning`, `UI_Vocab_Level2_Mastery`, `UI_Vocab_Level2Plus_Speaking`, `UI_Dialogue_Practice_Main` ##### 第1關：詞彙學習畫面 -- **詞彙介紹界面** - 詞彙卡片設計、發音按鈕、示意圖展示 -- **選擇題測驗** - 4選1界面、即時反饋、錯誤重測機制 -- **進度指示** - 5個詞彙的學習進度條 +- **沉浸式詞彙瀏覽** - 多媒體詞彙展示，包含音標、定義、音檔 +- **雙語境展示** - Source句子(真實語境) + Example句子(教學例句) +- **自由導航** - 用戶可自由前後瀏覽，無測試壓力的純學習體驗 +- **直接詞彙標註** - 使用originalHighlight/exampleHighlight進行精確標註 ##### 第2關：詞彙熟悉畫面 - **句子重組界面** - 拖拽操作、元素排列、提示系統 @@ -166,25 +168,16 @@ ### 文件組織結構 ``` -prototype-screens/ -├── assets/ # 資源文件 -│ ├── css/ -│ │ ├── dramaling-ui.css # 現有設計系統 -│ │ └── prototype-theme.css # 雛形專用樣式 -│ ├── js/ -│ │ ├── prototype-core.js # 核心交互邏輯 -│ │ └── mock-data.js # 模擬數據 +docs/02_design/prototypes/ +├── assets/ # 資源文件 +│ ├── css/ # 樣式表 +│ ├── js/ # JavaScript文件 │ └── images/ # 圖片資源 +├── components/ # 可重用組件庫 ├── screens/ # 雛形畫面 -│ ├── 01_authentication/ # 認證相關畫面 -│ ├── 02_learning_core/ # 核心學習畫面 -│ ├── 03_business/ # 商業功能畫面 -│ ├── 04_social/ # 社交功能畫面 -│ └── 05_system/ # 系統功能畫面 -├── flows/ # 流程演示 -│ ├── onboarding-flow.html # 新手引導流程 -│ ├── learning-flow.html # 學習流程演示 -│ └── purchase-flow.html # 購買流程演示 +│ ├── phase1/ # 第一階段：核心學習流程 +│ ├── phase2/ # 第二階段：商業功能與輔助系統 +│ └── phase3/ # 第三階段：社交與分析功能 └── index.html # 主導覽頁面 ``` @@ -270,11 +263,22 @@ prototype-screens/ ## 📊 預期成果與交付物 ### 主要交付物 -1. **完整雛形系統** - 涵蓋所有主要功能的可互動原型 +1. **完整雛形系統** - 涵蓋所有主要功能的可互動原型 (`/docs/02_design/prototypes/`) 2. **流程演示文檔** - 主要用戶旅程的視覺演示 3. **設計規範文檔** - 雛形制作中確立的設計標準 4. **技術實現文檔** - 前端實現的技術方案和代碼結構 +### 原型檔案結構 +``` +docs/02_design/prototypes/ +├── screens/ # 具體功能畫面 +│ ├── phase1/ # 第一階段：核心學習流程 +│ ├── phase2/ # 第二階段：商業功能與輔助系統 +│ └── phase3/ # 第三階段：社交與分析功能 +├── components/ # 可重用組件庫 +└── assets/ # 共用資源文件 +``` + ### 驗證目標 1. **業務邏輯驗證** - 功能規格的視覺化確認 2. **用戶體驗驗證** - 設計決策的可用性測試 @@ -295,11 +299,69 @@ prototype-screens/ 3. **第一個畫面** - 從登入頁面開始制作第一個雛形 4. **迭代優化** - 基於實際效果調整設計和技術方案 +## 📋 完整頁面設計清單 (基於function-specs) + +### 🎯 **Mobile端功能頁面** (基於 `/mobile/` 規格) +1. **用戶認證系統** - 登入、註冊、社交登入 (`05_user-authentication-mobile.md`) +2. **情境對話功能** - AI對話、評分反饋 (`01_situational-dialogue-mobile.md`) +3. **詞彙學習系統** - 沉浸式學習體驗 (`02_vocabulary-learning-mobile.md`) ✅ +4. **學習地圖** - 關卡選擇、進度追蹤 (`03_learning-map-mobile.md`) +5. **道具商店** - 商品購買、付費流程 (`04_item-shop-mobile.md`) ✅ + +### 🖥️ **Web端功能頁面** (基於 `/web/` 規格) +1. **用戶認證系統** - 桌面端登入體驗 (`user-authentication-web.md`) +2. **情境對話功能** - 大螢幕對話界面 (`situational-dialogue-web.md`) +3. **詞彙學習系統** - 桌面端學習體驗 (`vocabulary-learning-web.md`) +4. **學習地圖** - 桌面端地圖導覽 (`learning-map-web.md`) +5. **道具商店** - 桌面端購買體驗 (`item-shop-web.md`) + +### 🔧 **Common功能系統** (基於 `/common/` 規格) +1. **AI算法展示** - 三維評分系統視覺化 (`ai-algorithm-specs.md`) +2. **口說評分界面** - 五維度評分展示 (`speaking-evaluation-specs.md`) +3. **語用分析界面** - 六維語用建議系統 (`pragmatic-analysis-specs.md`) +4. **進度追蹤系統** - 線性闖關進度管理 (`progressive-stage-system.md`) +5. **內容管理界面** - 劇本、詞彙管理 (`content-management-specs.md`) + +### 🔄 **整合功能頁面** (基於綜合規格) +1. **完整用戶流程** - 端到端學習旅程 (`comprehensive-user-flows-with-ui.md`) +2. **平台功能映射** - 跨平台功能展示 (`platform-feature-mapping.md`) + +## 🎨 **設計執行策略** + +### Phase 1: UI/UX規範完善 ⭐ **當前重點** +- **檢查現有規範** - 分析 `/ui-ux/ui-ux-guidelines.md` 完整性 +- **補充缺失規範** - 為缺少的組件添加設計規範 +- **統一設計語言** - 確保所有頁面遵循一致標準 + +### Phase 2: 核心學習系統頁面 +- **詞彙學習系統** - 沉浸式多媒體體驗 ✅ +- **情境對話系統** - AI互動與評分展示 +- **進度管理系統** - 四關闖關視覺化 +- **學習地圖** - 13階段×20劇本導覽 + +### Phase 3: 商業與輔助系統 +- **用戶認證流程** - 登入註冊完整體驗 +- **道具商店系統** - 完整購買生態 ✅ +- **命條與獎勵** - 遊戲化機制展示 ✅ +- **廣告與挑戰** - 額外收益機制 ✅ + +### Phase 4: AI智能系統 +- **口說評分界面** - 五維度專業評估 +- **語用分析展示** - 六維語用建議 +- **AI算法可視化** - 三維評估系統 +- **即時反饋系統** - 智能學習輔助 + +### Phase 5: 社交與分析 +- **社交排行榜** - 好友競爭系統 +- **學習分析** - 個人進度儀表板 +- **成就系統** - 徽章收集展示 +- **數據同步** - 跨平台進度管理 + ### 協作機制 -1. **每日進度更新** - 每天匯報制作進度和遇到的問題 -2. **週度檢查** - 每週進行設計品質和技術實現檢查 -3. **用戶反饋收集** - 定期收集用戶對雛形效果的反饋 -4. **迭代改進** - 根據反饋持續優化雛形質量 +1. **規範優先** - 每個頁面設計前先完善UI/UX規範 +2. **迭代設計** - 快速原型→測試→優化的循環 +3. **跨平台一致** - 確保mobile/web體驗的一致性 +4. **功能完整** - 每個頁面都要體現完整的用戶流程 --- diff --git a/sop/archive/prototypes/mobile/auth/UI_Login_Main.html b/sop/archive/prototypes/mobile/auth/UI_Login_Main.html new file mode 100644 index 0000000..d5479ae --- /dev/null +++ b/sop/archive/prototypes/mobile/auth/UI_Login_Main.html @@ -0,0 +1,959 @@ + + + + + + Drama Ling - 登入 + + + + +
+ +
+
+ + + + +
+ 或者使用 +
+ + + +
+ 還沒有帳戶？ 立即註冊 +
+ +
+ 遊客模式體驗 +
+ +
+ 🔒 您的資料受到 AES-256 加密保護 +
+
+
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/auth/UI_PasswordReset_Form.html b/sop/archive/prototypes/mobile/auth/UI_PasswordReset_Form.html new file mode 100644 index 0000000..845ab93 --- /dev/null +++ b/sop/archive/prototypes/mobile/auth/UI_PasswordReset_Form.html @@ -0,0 +1,1293 @@ + + + + + + Drama Ling - 重置密碼 + + + + +
+ +
+
+
+ +
🔒
+

重置密碼

+

請輸入您的帳戶資訊以重置密碼

+ +
+
+
+
+
+
+ +
+ +
+
+ + +
+
+ + +
+ + +
+
+ +

+ 我們已發送6位驗證碼到您的郵箱 +

+ +
+ + + + + + +
+
+ + + +
+

沒有收到驗證碼？

+ +
+
+ + +
+
+ + +
+
+
+
+
密碼強度
+
+
+ +
+ + +
+
+ + +
+ +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/auth/UI_SignUp_Main.html b/sop/archive/prototypes/mobile/auth/UI_SignUp_Main.html new file mode 100644 index 0000000..f5e44df --- /dev/null +++ b/sop/archive/prototypes/mobile/auth/UI_SignUp_Main.html @@ -0,0 +1,1299 @@ + + + + + + Drama Ling - 註冊 + + + + +
+ +
+
+ + +
+

建立帳戶

+ + +
+
+
+
+
+
+ + + + + + +
+
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/dialogue/UI_Dialogue_Practice_Main.html b/sop/archive/prototypes/mobile/dialogue/UI_Dialogue_Practice_Main.html new file mode 100644 index 0000000..ccd9cec --- /dev/null +++ b/sop/archive/prototypes/mobile/dialogue/UI_Dialogue_Practice_Main.html @@ -0,0 +1,1443 @@ + + + + + + Drama Ling - AI 情境對話練習 + + + +
+ +
+
14:32
+
+ 📶 + 📶 + 🔋 +
+
+ + +
+
+ +

AI 情境對話

+ +
+
+ + +
+
+
+
+ ❤️ + 5 +
+
+ 💎 + 1,250 +
+
+ ⭐ + 0 +
+
+
+ 05:00 +
+
+
+ + +
+
+ + +
+
+
👩‍🍳
+
+

Sarah

+
餐廳服務員
+
+
+ +
+
+ 歡迎來到我們的餐廳！今天是個美好的日子，我想為您推薦我們的招牌菜。您有什麼特別想嚐試的嗎？或者您有任何飲食限制我需要知道的？ +
+
+ +
+ + + +
+
+ + +
+
+ + +
+ +
+
+
+
1
+
禮貌詢問今日特色菜單推薦
+
+
+
2
+
表達個人飲食偏好或限制
+
+
+
3
+
確認點餐內容並詢問建議
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + + +
+ +
+
+ + +
+ +
+ + +
+ + + + +
+
+
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/map/UI_Level_Map.html b/sop/archive/prototypes/mobile/map/UI_Level_Map.html new file mode 100644 index 0000000..108271f --- /dev/null +++ b/sop/archive/prototypes/mobile/map/UI_Level_Map.html @@ -0,0 +1,1912 @@ + + + + + + Drama Ling - 智能學習地圖 + + + +
+ +
+
14:32
+
+ 📶 + 🔋 + 📡 +
+
+ + +
+
+
+ +
+

智能學習地圖

+
Stage 1: 初級對話技巧
+
+ +
+ + +
+
+

學習統計

+
連續7天
+
+ +
+
+ ❤️ +
5
+
命條
+
+
+ 💎 +
1,250
+
鑽石
+
+
+ ⭐ +
127
+
總星數
+
+
+ +
+
+
Stage 1 進度
+
3/20
+
+
+
+
+
+
+
+
+ + +
+ 🎉 +
恭喜！完成劇本 2
+
解鎖新成就「對話新手」，獲得 50 鑽石獎勵！
+
+ + +
+ +
+
進行中
+ +
+
1
+
+
第1關
+

詞彙學習

+

+ 掌握餐廳點餐情境的5個核心詞彙，包含發音、定義和實際使用情境 +

+
+
+ +
+ +
+
+ + +
+
+

劇本 3: 餐廳點餐

+

完成四個關卡，掌握完整的對話技能

+
+ +
+
+
1
+
+
詞彙學習
+
學習核心詞彙與發音
+
+ ⭐ + ⭐ + ⭐ +
+
+
+ +
+
🔒
+
+
詞彙熟悉
+
透過練習鞏固詞彙記憶
+
+ ☆ + ☆ + ☆ +
+
+
+ +
+
🔒
+
+
口說練習
+
發音評估與流利度訓練
+
+ ☆ + ☆ + ☆ +
+
+
+ +
+
🔒
+
+
情境對話
+
與AI進行真實對話練習
+
+ ☆ + ☆ + ☆ +
+
+
+
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/shop/UI_Shop_Categories.html b/sop/archive/prototypes/mobile/shop/UI_Shop_Categories.html new file mode 100644 index 0000000..5e7c44b --- /dev/null +++ b/sop/archive/prototypes/mobile/shop/UI_Shop_Categories.html @@ -0,0 +1,1290 @@ + + + + + + Drama Ling - 道具商店 + + + + +
+ +
+ +
+
+ +

道具商店

+
+ 💎 + 1,250 +
+
+
+ +
+ +
+
🌟 推薦
+
🎯 學習輔助
+
❤️ 生命管理
+
⏰ 時間控制
+
✨ 特殊道具
+
+ + + + + +
+
+

🎯 學習輔助道具

+
+ +
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/sop/archive/prototypes/mobile/vocabulary/UI_Vocab_Learning_Enhanced.html b/sop/archive/prototypes/mobile/vocabulary/UI_Vocab_Learning_Enhanced.html new file mode 100644 index 0000000..9383c86 --- /dev/null +++ b/sop/archive/prototypes/mobile/vocabulary/UI_Vocab_Learning_Enhanced.html @@ -0,0 +1,1699 @@ + + + + + + Drama Ling - 智能詞彙學習系統 + + + +
+ +
+
14:32
+
+ 📶 + 🔋 + 📡 +
+
+ + +
+
+ +
+

智能詞彙學習

+
Stage 1 - Script 3: 餐廳點餐
+
+ +
+ + +
+
+
學習進度
+
1 / 5
+
+ +
+ +
+ +
+
+
+ +
+ 掌握餐廳點餐情境的核心詞彙 +
+
+
+ + +
+ +
+
+

recommend

+
/ˌrekəˈmend/
+ B1 +
+ +
+

+ To suggest that someone or something would be good or suitable for a particular job or purpose, or to suggest that a particular action should be done. +

+
+ + +
+

發音練習

+
+ + +
+
+
正常速度
+
慢速練習
+
+
+
+ + +
+
+
📖
+

情境例句

+
+ +
+
+

+ I would recommend this restaurant to anyone looking for authentic Italian cuisine. +

+ +
+ +
+ 3.2s +
+
+ + 義式餐廳推薦 +
+
+ + +
+
劇本語境
+

+ "What would you recommend for someone who's never been here before?" +

+
+
+ + + + + +
+ 使用 ← → 切換詞彙，空格鍵播放音頻 +
+ + + +
+ + + + \ No newline at end of file