196 lines
4.9 KiB
Markdown
196 lines
4.9 KiB
Markdown
# 🎭 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. 打開導航頁面
|
|
```bash
|
|
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
|
|
<!-- HTML 原型中的卡片 -->
|
|
<div class="card">
|
|
<h3>標題</h3>
|
|
<p>內容</p>
|
|
</div>
|
|
```
|
|
|
|
```vue
|
|
<!-- 轉換為 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. **詞彙學習** - 核心學習模組
|
|
|
|
### 未來擴展
|
|
- 移動端特化版本
|
|
- 深色/淺色主題切換
|
|
- 多語言版本展示
|
|
- 組件庫完整化
|
|
|
|
---
|
|
|
|
## 📞 聯絡資訊
|
|
|
|
如有問題或建議，請：
|
|
- 查看具體頁面的註解說明
|
|
- 參考設計規格文檔
|
|
- 提出改進建議
|
|
|
|
**記住：原型的目標是確認需求，避免開發階段的大幅修改！** ✨ |