# 🎨 Drama Ling 設計雛形畫面制作計劃

## 📋 計劃概述

**文檔名稱**: Drama Ling 設計雛形畫面制作計劃  
**建立日期**: 2025-09-11  
**最後更新**: 2025-09-12  
**版本**: v1.1 - 更新詞彙學習系統和文件路徑  
**目標**: 基於完整功能規格創建可視化雛形畫面，讓用戶能直觀體驗系統功能和流程

## 🎯 計劃目標與範圍

### 主要目標
1. **可視化驗證** - 將抽象的功能規格轉化為具體可見的界面
2. **用戶體驗驗證** - 讓用戶實際感受四關學習流程和交互設計
3. **設計一致性確保** - 確保所有畫面符合UI/UX設計規範
4. **功能流程展示** - 完整展示從註冊到學習的完整用戶旅程

### 實現範圍
- **核心學習流程** - 四關線性闖關系統的完整視覺呈現
- **商業功能展示** - 付費轉換、道具商店等關鍵商業功能
- **用戶引導系統** - 新手教學和引導流程
- **響應式設計** - 支援桌面和移動端的視覺效果

## 📚 設計依據與內容出處

### 🏗️ 系統架構依據
**出處**: `/docs/02_design/function-specs/common/system_structure_design.json`
- **UI視圖定義**: 102個完整UI組件規範
- **組件交互邏輯**: 每個組件的交互行為和導航關係
- **數據綁定**: 26個數據模型與UI的對應關係

### 🎮 核心學習系統設計
**出處**: `/docs/02_design/function-specs/common/progressive-stage-system.md`
- **四關闖關機制**: 第1關詞彙學習 → 第2關詞彙熟悉 → 第2+關口說練習 → 第3關情境對話
- **13階段×20劇本**: 完整的學習內容架構
- **解鎖條件和通關標準**: 星級評分和進度管理

### 💎 商業模式設計
**出處**: `/docs/02_design/function-specs/common/business-rules.md`
- **命條系統**: 不同用戶等級的命條上限和恢復機制
- **鑽石經濟**: 購買套餐、道具定價、付費轉換策略
- **訂閱服務**: 免費試用、付費方案、特權功能

### 🎨 設計系統規範
**出處**: `/docs/02_design/ui-ux/dramaling-ui.css` & `/docs/02_design/ui-ux/ui-ux-guidelines.md`
- **設計語言**: 色彩系統、字體規範、組件樣式
- **Duolingo風格**: 厚實3D按鈕、12px圓角、下壓動畫效果
- **響應式佈局**: 桌面和移動端的適配方案

### 🔄 完整用戶流程
**出處**: `/docs/02_design/function-specs/comprehensive-user-flows-with-ui.md`
- **8大主要流程**: 完整的用戶旅程映射
- **UI視圖整合**: 每個流程步驟對應具體UI組件
- **錯誤處理流程**: 網路中斷、進度恢復等邊界情況

### 🤖 AI分析系統
**出處**: `/docs/02_design/function-specs/common/ai-algorithm-specs.md` & `speaking-evaluation-specs.md`
- **三維對話評估**: 語法評分、口說評分、語用分析
- **五維口說評分**: 發音、流暢度、韻律、完整度、準確度
- **即時反饋系統**: AI分析結果的視覺呈現

## 🎨 設計雛形畫面計劃

### 第一階段：核心學習流程畫面 (優先級最高)

#### 1.1 用戶認證與引導畫面
**基於**: `UI_Login_Social`, `UI_Onboarding_Welcome`, `UI_Tutorial_Step_1/2/3`
- **登入頁面** - 社交登入選項、品牌展示、表單設計
- **新手引導** - 三步驟教學系統的視覺設計
- **個人化設定** - 學習目標、程度評估、時間偏好設定

**設計重點**:
- 體現Drama Ling品牌特色（戲劇化、生動有趣）
- 清晰的操作引導和進度提示
- 符合Duolingo風格的按鈕和交互效果

#### 1.2 學習地圖與關卡選擇
**基於**: `UI_Level_Map`, `UI_Level_Selection_Modal`, `UI_ChallengeLevel_ChoosePopup1`
- **學習地圖主頁** - 13階段的視覺化呈現，劇本解鎖狀態
- **關卡選擇彈窗** - 四關的視覺區分和選擇界面
- **進度追蹤** - 星級顯示、完成狀態、下一個目標

**設計重點**:
- 清晰的階層關係和解鎖邏輯展示
- 遊戲化的地圖設計，增強探索感
- 明確的難度梯度和學習路徑指引

#### 1.3 四關學習畫面詳細設計
**基於**: `UI_Vocab_Level1_Learning`, `UI_Vocab_Level2_Mastery`, `UI_Vocab_Level2Plus_Speaking`, `UI_Dialogue_Practice_Main`

##### 第1關：詞彙學習畫面
- **沉浸式詞彙瀏覽** - 多媒體詞彙展示，包含音標、定義、音檔
- **雙語境展示** - Source句子(真實語境) + Example句子(教學例句)
- **自由導航** - 用戶可自由前後瀏覽，無測試壓力的純學習體驗
- **直接詞彙標註** - 使用originalHighlight/exampleHighlight進行精確標註

##### 第2關：詞彙熟悉畫面  
- **句子重組界面** - 拖拽操作、元素排列、提示系統
- **詞彙配對界面** - 圖像與詞彙的匹配遊戲設計
- **練習結果展示** - 正確答案確認、錯誤糾正

##### 第2+關：口說練習畫面
- **錄音界面** - 錄音按鈕、音頻波形、重錄選項
- **AI評分展示** - 五維評分雷達圖、詳細分析結果
- **改善建議** - 個人化的發音改善指導

##### 第3關：情境對話畫面
- **對話界面** - 聊天室風格、AI角色形象、輸入選項
- **任務追蹤** - 雙重任務進度、詞彙使用提示
- **即時分析** - 語法檢查、評分反饋、建議顯示

#### 1.4 結果與獎勵畫面
**基於**: `UI_Result_Success_A`, `UI_LevelResult_ScoreSummary`, `UI_Speaking_Feedback`
- **成功結果頁** - 慶祝動畫、星級展示、經驗值獲得
- **評分總結** - 三維評估結果、詳細分數分析
- **獎勵確認** - 鑽石獲得、道具解鎖、進度更新

### 第二階段：商業功能與輔助系統畫面

#### 2.1 商業功能畫面
**基於**: `UI_Shop_Categories`, `UI_PaymentFlow`, `UI_Life_Points_Display`
- **道具商店** - 分類展示、價格標籤、購買確認
- **付費流程** - 套餐選擇、付款界面、成功確認
- **命條系統** - 命條顯示、恢復時間、購買選項

#### 2.2 輔助功能畫面
**基於**: `UI_Reply_Assistance`, `UI_AdViewing`, `UI_TimeWarpChallenge_Main`
- **回覆輔助** - AI建議展示、翻譯功能、使用提示
- **廣告系統** - 獎勵廣告界面、觀看進度、獲得確認
- **限時挑戰** - 倒數計時、挑戰進度、道具使用

### 第三階段：社交與分析功能畫面

#### 3.1 社交功能畫面
**基於**: `UI_Social_Ranking`, `UI_PersonalCenter_FriendMain`, `UI_BadgeCollection`
- **排行榜系統** - 好友排名、週月榜單、獎勵展示
- **好友系統** - 好友列表、學習動態、挑戰邀請
- **成就收藏** - 徽章展示、進度追蹤、分享功能

#### 3.2 學習分析畫面
**基於**: `UI_Vocab_Progress_Dashboard`, `UI_ReviewSchedule`, `UI_Profile_Dashboard`
- **進度儀表板** - 學習統計圖表、趨勢分析、弱項識別
- **複習系統** - 間隔複習計劃、複習提醒、掌握度評估
- **個人檔案** - 學習成就、設定管理、數據匯出

### 第四階段：系統功能與錯誤處理畫面

#### 4.1 系統功能畫面
**基於**: `UI_Sync_Progress`, `UI_Daily_Goal_Setting`, `UI_Learning_Path_Selection`
- **數據同步** - 同步進度條、狀態提示、衝突解決
- **目標設定** - 每日目標、提醒設置、完成追蹤
- **學習路徑** - 路徑推薦、難度選擇、個人化建議

#### 4.2 錯誤處理畫面
**基於**: `UI_Network_Error`, `UI_Offline_Mode_Notice`, `UI_Data_Recovery`
- **網路錯誤** - 錯誤提示、重試選項、離線模式
- **離線通知** - 功能限制說明、重新連線、本地功能
- **數據恢復** - 進度恢復選項、中斷說明、用戶選擇

## 🛠️ 技術實現方案

### 開發技術選擇
1. **HTML/CSS/JavaScript** - 基於現有的dramaling-ui.css框架
2. **響應式設計** - 使用CSS Grid和Flexbox實現跨設備適配
3. **動畫效果** - CSS3動畫和JavaScript實現互動效果
4. **模擬數據** - 創建JSON格式的模擬數據支援各種狀態展示

### 文件組織結構
```
docs/02_design/prototypes/
├── assets/                     # 資源文件  
│   ├── css/                   # 樣式表
│   ├── js/                    # JavaScript文件
│   └── images/                # 圖片資源
├── components/                 # 可重用組件庫
├── screens/                    # 雛形畫面
│   ├── phase1/                # 第一階段：核心學習流程
│   ├── phase2/                # 第二階段：商業功能與輔助系統  
│   └── phase3/                # 第三階段：社交與分析功能
└── index.html                 # 主導覽頁面
```

### 數據模擬策略
**基於**: `/docs/02_design/function-specs/common/data-models.md`
- **用戶數據模擬** - 不同等級用戶的狀態展示
- **學習進度模擬** - 各種完成程度的視覺效果
- **AI評分模擬** - 不同分數範圍的結果展示
- **商業狀態模擬** - 付費/免費用戶的功能差異

## 📋 制作時程與里程碑

### 第一週：核心學習流程 (Day 1-7)
- **Day 1-2**: 認證登入和新手引導畫面
- **Day 3-4**: 學習地圖和關卡選擇界面
- **Day 5-6**: 四關學習畫面（第1關、第2關）
- **Day 7**: 四關學習畫面（第2+關、第3關）

### 第二週：商業與輔助功能 (Day 8-14)
- **Day 8-9**: 結果獎勵和評分系統畫面
- **Day 10-11**: 商業功能（商店、付費、命條）
- **Day 12-13**: 輔助功能（回覆輔助、廣告、挑戰）
- **Day 14**: 第一階段整合與調優

### 第三週：社交與分析功能 (Day 15-21)
- **Day 15-16**: 社交功能（排行榜、好友、成就）
- **Day 17-18**: 學習分析（進度、複習、檔案）
- **Day 19-20**: 系統功能（同步、目標、路徑）
- **Day 21**: 錯誤處理和邊界情況畫面

### 第四週：整合與優化 (Day 22-28)
- **Day 22-24**: 響應式設計優化和跨設備測試
- **Day 25-26**: 用戶流程整合和導覽系統完善
- **Day 27**: 最終調優和品質檢查
- **Day 28**: 文檔整理和交付準備

## 🎯 設計優先級與重點

### 高優先級 (必須完成)
1. **四關學習流程** - 產品核心價值展示
2. **用戶引導系統** - 新用戶體驗關鍵
3. **商業轉換界面** - 商業模式驗證
4. **AI評分展示** - 技術優勢呈現

### 中優先級 (重要功能)
1. **社交功能界面** - 用戶黏性增強
2. **學習分析系統** - 個人化體驗展示
3. **道具商店系統** - 商業生態完整性
4. **錯誤處理界面** - 用戶體驗完整性

### 低優先級 (補充功能)
1. **高級設定功能** - 進階用戶需求
2. **數據匯出功能** - 企業用戶需求  
3. **多語言切換** - 國際化需求
4. **無障礙功能** - 特殊用戶需求

## 🔍 品質控制與驗證標準

### 設計一致性檢查
1. **色彩系統一致性** - 符合dramaling-ui.css定義
2. **組件樣式統一** - 按鈕、卡片、表單等元素規範
3. **字體與排版** - 層級清晰、可讀性良好
4. **圖標與插圖** - 風格統一、意義明確

### 功能完整性驗證
1. **用戶流程完整** - 從註冊到學習的端到端體驗
2. **交互邏輯正確** - 按鈕點擊、頁面導航、狀態變化
3. **數據展示準確** - 模擬數據符合真實業務邏輯
4. **錯誤處理完善** - 異常情況的友好提示和處理

### 響應式設計檢查
1. **桌面端適配** - 1920×1080、1366×768等主流解析度
2. **移動端適配** - iPhone、Android等主流設備
3. **平板電腦適配** - iPad等中等尺寸螢幕
4. **交互適配** - 觸控與滑鼠操作的適配

### 性能與可用性
1. **載入速度** - 頁面載入時間控制在3秒內
2. **動畫流暢** - 60fps的動畫效果
3. **操作反饋** - 即時的視覺和觸覺反饋
4. **無障礙支援** - 基本的鍵盤導航和螢幕朗讀支援

## 📊 預期成果與交付物

### 主要交付物
1. **完整雛形系統** - 涵蓋所有主要功能的可互動原型 (`/docs/02_design/prototypes/`)
2. **流程演示文檔** - 主要用戶旅程的視覺演示
3. **設計規範文檔** - 雛形制作中確立的設計標準
4. **技術實現文檔** - 前端實現的技術方案和代碼結構

### 原型檔案結構
```
docs/02_design/prototypes/
├── screens/              # 具體功能畫面
│   ├── phase1/          # 第一階段：核心學習流程
│   ├── phase2/          # 第二階段：商業功能與輔助系統
│   └── phase3/          # 第三階段：社交與分析功能
├── components/          # 可重用組件庫
└── assets/             # 共用資源文件
```

### 驗證目標
1. **業務邏輯驗證** - 功能規格的視覺化確認
2. **用戶體驗驗證** - 設計決策的可用性測試
3. **技術可行性驗證** - 實現方案的技術風險評估
4. **商業價值驗證** - 付費轉換流程的效果預估

### 後續應用
1. **開發指導** - 為正式開發提供視覺參考
2. **用戶測試** - 進行用戶可用性測試的基礎
3. **投資展示** - 向投資者展示產品概念的工具
4. **團隊溝通** - 跨部門溝通的視覺化工具

## 🚀 執行方案與下一步

### 立即開始項目
1. **環境準備** - 設置開發環境和工具鏈
2. **資源整理** - 收集所有設計規範和素材資源
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. **規範優先** - 每個頁面設計前先完善UI/UX規範
2. **迭代設計** - 快速原型→測試→優化的循環
3. **跨平台一致** - 確保mobile/web體驗的一致性
4. **功能完整** - 每個頁面都要體現完整的用戶流程

---

**📝 計劃總結**

本計劃基於Drama Ling完整的功能規格文檔系統，確保每個設計決策都有明確的依據和出處。通過分階段、有優先級的制作方式，將在4週內交付一個完整、可互動的雛形系統，為後續的產品開發、用戶測試和商業驗證提供堅實的基礎。

**🎯 核心價值**
- **完整性** - 涵蓋所有核心功能和用戶流程
- **真實性** - 基於真實業務邏輯和數據模型
- **可用性** - 支援實際的用戶交互和體驗測試
- **可維護性** - 清晰的代碼結構和文檔支援後續開發