jettcheng1018
/
dramaling-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-app/sop/archive/Drama_Ling_UIUX_Design_Mast...

20 KiB
Raw Blame History

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