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

4.9 KiB
Raw Blame History

🎭 Drama Ling HTML 原型系統

📖 概述

這是 Drama Ling 項目的 HTML 原型系統，用於在正式開發前確認頁面設計、交互流程和視覺效果。

🎯 使用目的

✅ 優勢

  • 視覺化確認: 直接在瀏覽器中查看實際效果
  • 快速迭代: HTML/CSS 修改比 Vue 組件更快速
  • 跨團隊溝通: 設計師、產品經理、開發者都能直觀理解
  • 規格明確: 避免開發階段的猜測和重工
  • 組件識別: 清楚了解需要開發的可重用組件
  • 交互演示: 展示表單驗證、動畫效果等互動功能

📁 目錄結構

html-prototypes/
├── index.html              # 原型導航頁面
├── assets/
│   └── style.css           # 全局樣式和設計系統
├── pages/                  # 主要頁面原型
│   ├── home.html          # 首頁
│   ├── register.html      # 註冊頁面 ✅
│   ├── login.html         # 登入頁面
│   ├── dashboard.html     # 學習儀表板
│   ├── vocabulary.html    # 詞彙學習
│   ├── dialogue.html      # 對話練習
│   ├── roleplay.html      # 角色扮演
│   └── ...
├── components/             # UI 組件展示
│   ├── buttons.html       # 按鈕組件
│   ├── forms.html         # 表單組件
│   ├── cards.html         # 卡片組件
│   └── modals.html        # 彈窗組件
└── specs/                  # 設計規格展示
    ├── colors.html        # 色彩規範
    ├── typography.html    # 字體規範
    ├── spacing.html       # 間距規範
    └── icons.html         # 圖示規範

🚀 開始使用

1. 打開導航頁面

open docs/02_design/html-prototypes/index.html

2. 瀏覽頁面原型

  • 點擊導航卡片查看各個頁面原型
  • 每個頁面都有完整的樣式和基礎交互功能
  • 右上角有原型狀態標記

3. 測試交互功能

  • 表單驗證（即時反饋）
  • 密碼強度檢查
  • 響應式布局
  • 動畫效果

🎨 設計系統

色彩規範

  • 主要色: #00E5CC (青綠色)
  • 輔助色: #8E44AD (紫色)
  • 功能色: 錯誤、警告、成功、資訊
  • 深色主題: 完整的深色配色方案

字體系統

  • 主字體: Inter, PingFang TC
  • 等寬字體: JetBrains Mono
  • 尺寸階層: xs, sm, base, lg, xl, 2xl, 3xl, 4xl

間距系統

  • 基礎單位: 0.25rem (4px)
  • 階層: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20

📝 原型狀態管理

狀態標記

  • 🟡 Draft: 草稿階段，待完善
  • 🟣 Review: 審查階段，等待反饋
  • 🟢 Final: 最終確認，可用於開發

更新流程

  1. 創建/修改 HTML 原型
  2. 測試所有交互功能
  3. 標記適當的狀態
  4. 團隊審查和反饋
  5. 最終確認後用於 Vue 開發

🔧 開發轉換指南

從 HTML 到 Vue 的轉換步驟

1. 組件拆分

<!-- HTML 原型中的卡片 -->
<div class="card">
  <h3>標題</h3>
  <p>內容</p>
</div>

<!-- 轉換為 Vue 組件 -->
<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

2. 樣式提取

  • 將 CSS 轉換為 SCSS
  • 使用設計 token (CSS 變量)
  • 組件化樣式管理

3. 交互邏輯

  • JavaScript 函數轉換為 Vue 方法
  • 表單驗證轉換為 Vue 響應式數據
  • 事件處理整合 Vue 生命周期

4. 數據流

  • 靜態內容轉換為響應式數據
  • 整合 API 調用
  • 狀態管理 (Pinia)

📋 檢查清單

新頁面原型創建時

  • 使用統一的樣式系統
  • 實現基礎交互功能
  • 響應式設計測試
  • 無障礙訪問考量
  • 瀏覽器兼容性測試
  • 添加原型狀態標記

準備轉換為 Vue 時

  • 識別可重用組件
  • 確認設計規格完整
  • 測試所有用戶流程
  • 整理設計 token
  • 準備資產文件 (圖片、圖標)

🌟 最佳實踐

1. 保持一致性

  • 使用統一的 CSS 變量
  • 遵循命名規範
  • 保持視覺風格一致

2. 注重細節

  • 微交互和動畫
  • 錯誤狀態處理
  • 載入狀態展示
  • 空狀態設計

3. 考慮實際場景

  • 真實數據長度
  • 網絡延遲情況
  • 錯誤處理流程
  • 邊界條件測試

4. 文檔記錄

  • 交互說明
  • 特殊需求註記
  • 技術實現提醒

🚀 下一步計劃

即將完成的頁面

  1. 登入頁面 - 用戶認證流程
  2. 首頁 - 產品展示和導航
  3. 學習儀表板 - 主要學習界面
  4. 詞彙學習 - 核心學習模組

未來擴展

  • 移動端特化版本
  • 深色/淺色主題切換
  • 多語言版本展示
  • 組件庫完整化

📞 聯絡資訊

如有問題或建議，請：

  • 查看具體頁面的註解說明
  • 參考設計規格文檔
  • 提出改進建議

記住：原型的目標是確認需求，避免開發階段的大幅修改！ ✨