17 KiB

Raw Blame History

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

📋 計劃概述

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

🎯 計劃目標與範圍

主要目標

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

實現範圍

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

📚 設計依據與內容出處

🏗️ 系統架構依據

出處: /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

網路錯誤 - 錯誤提示、重試選項、離線模式
離線通知 - 功能限制說明、重新連線、本地功能
數據恢復 - 進度恢復選項、中斷說明、用戶選擇

🛠️ 技術實現方案

開發技術選擇

HTML/CSS/JavaScript - 基於現有的dramaling-ui.css框架
響應式設計 - 使用CSS Grid和Flexbox實現跨設備適配
動畫效果 - CSS3動畫和JavaScript實現互動效果
模擬數據 - 創建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: 文檔整理和交付準備

🎯 設計優先級與重點

高優先級 (必須完成)

四關學習流程 - 產品核心價值展示
用戶引導系統 - 新用戶體驗關鍵
商業轉換界面 - 商業模式驗證
AI評分展示 - 技術優勢呈現

中優先級 (重要功能)

社交功能界面 - 用戶黏性增強
學習分析系統 - 個人化體驗展示
道具商店系統 - 商業生態完整性
錯誤處理界面 - 用戶體驗完整性

低優先級 (補充功能)

高級設定功能 - 進階用戶需求
數據匯出功能 - 企業用戶需求
多語言切換 - 國際化需求
無障礙功能 - 特殊用戶需求

🔍 品質控制與驗證標準

設計一致性檢查

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

功能完整性驗證

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

響應式設計檢查

桌面端適配 - 1920×1080、1366×768等主流解析度
移動端適配 - iPhone、Android等主流設備
平板電腦適配 - iPad等中等尺寸螢幕
交互適配 - 觸控與滑鼠操作的適配

性能與可用性

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

📊 預期成果與交付物

主要交付物

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

原型檔案結構

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

驗證目標

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

後續應用

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

🚀 執行方案與下一步

立即開始項目

環境準備 - 設置開發環境和工具鏈
資源整理 - 收集所有設計規範和素材資源
第一個畫面 - 從登入頁面開始制作第一個雛形
迭代優化 - 基於實際效果調整設計和技術方案

📋 完整頁面設計清單 (基於function-specs)

🎯 Mobile端功能頁面 (基於 `/mobile/` 規格)

用戶認證系統 - 登入、註冊、社交登入 (05_user-authentication-mobile.md)
情境對話功能 - AI對話、評分反饋 (01_situational-dialogue-mobile.md)
詞彙學習系統 - 沉浸式學習體驗 (02_vocabulary-learning-mobile.md) ✅
學習地圖 - 關卡選擇、進度追蹤 (03_learning-map-mobile.md)
道具商店 - 商品購買、付費流程 (04_item-shop-mobile.md) ✅

🖥️ Web端功能頁面 (基於 `/web/` 規格)

用戶認證系統 - 桌面端登入體驗 (user-authentication-web.md)
情境對話功能 - 大螢幕對話界面 (situational-dialogue-web.md)
詞彙學習系統 - 桌面端學習體驗 (vocabulary-learning-web.md)
學習地圖 - 桌面端地圖導覽 (learning-map-web.md)
道具商店 - 桌面端購買體驗 (item-shop-web.md)

🔧 Common功能系統 (基於 `/common/` 規格)

AI算法展示 - 三維評分系統視覺化 (ai-algorithm-specs.md)
口說評分界面 - 五維度評分展示 (speaking-evaluation-specs.md)
語用分析界面 - 六維語用建議系統 (pragmatic-analysis-specs.md)
進度追蹤系統 - 線性闖關進度管理 (progressive-stage-system.md)
內容管理界面 - 劇本、詞彙管理 (content-management-specs.md)

🔄 整合功能頁面 (基於綜合規格)

完整用戶流程 - 端到端學習旅程 (comprehensive-user-flows-with-ui.md)
平台功能映射 - 跨平台功能展示 (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: 社交與分析

社交排行榜 - 好友競爭系統
學習分析 - 個人進度儀表板
成就系統 - 徽章收集展示
數據同步 - 跨平台進度管理

協作機制

規範優先 - 每個頁面設計前先完善UI/UX規範
迭代設計 - 快速原型→測試→優化的循環
跨平台一致 - 確保mobile/web體驗的一致性
功能完整 - 每個頁面都要體現完整的用戶流程

📝 計劃總結

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

🎯 核心價值

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

17 KiB Raw Blame History Unescape Escape