# 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. 用戶學習效果始終是設計決策的第一優先考量