340 lines
11 KiB
Markdown
340 lines
11 KiB
Markdown
# LinguaForge 使用者流程與 UI/UX 設計
|
||
|
||
## 1. 使用者旅程地圖
|
||
|
||
### 1.1 新使用者旅程
|
||
```
|
||
開啟 App → 歡迎頁面 → 註冊/登入 → 引導教學 → 設定學習目標 → 開始第一張詞卡
|
||
```
|
||
|
||
### 1.2 回訪使用者旅程
|
||
```
|
||
開啟 App → 自動登入 → 首頁儀表板 → 選擇學習活動 → 完成學習 → 查看進度
|
||
```
|
||
|
||
## 2. 核心使用者流程
|
||
|
||
### 2.1 註冊與登入流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[App 啟動畫面] --> B{是否已登入?}
|
||
B -->|是| C[首頁儀表板]
|
||
B -->|否| D[歡迎頁面]
|
||
D --> E[選擇註冊/登入]
|
||
E --> F{選擇方式}
|
||
F -->|註冊| G[輸入 Email/密碼]
|
||
F -->|登入| H[輸入憑證]
|
||
G --> I[Email 驗證]
|
||
I --> J[設定個人資料]
|
||
J --> K[引導教學]
|
||
H --> L{驗證成功?}
|
||
L -->|是| C
|
||
L -->|否| M[顯示錯誤]
|
||
M --> H
|
||
K --> C
|
||
```
|
||
|
||
### 2.2 AI 詞卡生成流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[首頁] --> B[點擊「新增詞卡」]
|
||
B --> C[輸入英文句子]
|
||
C --> D[系統標記可選單字]
|
||
D --> E[使用者選擇目標單字]
|
||
E --> F[點擊「生成詞卡」]
|
||
F --> G[顯示載入動畫]
|
||
G --> H[AI 生成內容]
|
||
H --> I[顯示詞卡預覽]
|
||
I --> J{使用者確認?}
|
||
J -->|確認| K[儲存詞卡]
|
||
J -->|編輯| L[手動調整內容]
|
||
L --> K
|
||
K --> M[加入學習清單]
|
||
```
|
||
|
||
### 2.3 間隔重複複習流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[開啟 App] --> B[檢查今日複習]
|
||
B --> C{有待複習詞卡?}
|
||
C -->|是| D[顯示複習提醒]
|
||
C -->|否| E[顯示「今日完成」]
|
||
D --> F[進入複習模式]
|
||
F --> G[顯示詞卡正面]
|
||
G --> H[使用者回想]
|
||
H --> I[顯示答案]
|
||
I --> J[自評難度 0-5]
|
||
J --> K[更新複習排程]
|
||
K --> L{還有詞卡?}
|
||
L -->|是| G
|
||
L -->|否| M[顯示複習統計]
|
||
M --> N[返回首頁]
|
||
```
|
||
|
||
### 2.4 語音評估流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[詞卡詳情頁] --> B[點擊「練習發音」]
|
||
B --> C[顯示目標文字]
|
||
C --> D[點擊錄音按鈕]
|
||
D --> E[開始錄音]
|
||
E --> F[使用者朗讀]
|
||
F --> G[停止錄音]
|
||
G --> H[上傳音檔]
|
||
H --> I[等待評估]
|
||
I --> J[顯示評分結果]
|
||
J --> K{分數滿意?}
|
||
K -->|否| L[重新錄音]
|
||
K -->|是| M[儲存記錄]
|
||
L --> D
|
||
M --> N[返回詞卡]
|
||
```
|
||
|
||
## 3. 畫面架構
|
||
|
||
### 3.1 App 資訊架構
|
||
```
|
||
App
|
||
├── 未登入狀態
|
||
│ ├── 歡迎頁
|
||
│ ├── 登入頁
|
||
│ ├── 註冊頁
|
||
│ └── 忘記密碼
|
||
├── 已登入狀態
|
||
│ ├── 首頁 (Tab 1)
|
||
│ │ ├── 今日複習卡片
|
||
│ │ ├── 學習統計
|
||
│ │ └── 快速操作
|
||
│ ├── 詞卡庫 (Tab 2)
|
||
│ │ ├── 所有詞卡
|
||
│ │ ├── 分類檢視
|
||
│ │ ├── 搜尋
|
||
│ │ └── 詞卡詳情
|
||
│ ├── 新增 (Tab 3)
|
||
│ │ ├── 句子輸入
|
||
│ │ ├── AI 生成
|
||
│ │ └── 手動建立
|
||
│ ├── 複習 (Tab 4)
|
||
│ │ ├── 複習模式
|
||
│ │ ├── 練習模式
|
||
│ │ └── 測驗模式
|
||
│ └── 個人 (Tab 5)
|
||
│ ├── 個人資料
|
||
│ ├── 學習設定
|
||
│ ├── 訂閱管理
|
||
│ └── 設定
|
||
```
|
||
|
||
## 4. 線框圖設計
|
||
|
||
### 4.1 首頁儀表板
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 🔔 LinguaForge 👤 │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ 今日學習目標 │
|
||
│ ████████░░ 15/20 完成 │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ 待複習詞卡 │
|
||
│ ┌─────────┐ ┌─────────┐ │
|
||
│ │ abandon │ │ achieve │ │
|
||
│ │ 放棄 │ │ 達成 │ │
|
||
│ └─────────┘ └─────────┘ │
|
||
│ 查看全部 → │
|
||
├─────────────────────────────┤
|
||
│ 學習統計 │
|
||
│ 連續 7 天 🔥 │
|
||
│ 本週複習 156 張 │
|
||
│ 正確率 85% │
|
||
├─────────────────────────────┤
|
||
│ 快速操作 │
|
||
│ [開始複習] [新增詞卡] │
|
||
└─────────────────────────────┘
|
||
│ 首頁│詞卡│ ➕ │複習│個人 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 4.2 詞卡生成頁面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← 新增詞卡 │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ 輸入包含生詞的句子： │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ I need to abandon │ │
|
||
│ │ this bad habit. │ │
|
||
│ └─────────────────────┘ │
|
||
│ │
|
||
│ 選擇要學習的單字： │
|
||
│ [abandon] [need] [habit] │
|
||
│ │
|
||
│ 已選擇: abandon │
|
||
│ │
|
||
│ [🤖 AI 生成詞卡] │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ 生成中... │
|
||
│ ⚪⚪⚪⚫⚪ │
|
||
│ │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 4.3 詞卡複習界面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 複習模式 5/20 ✕ │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ │
|
||
│ abandon │
|
||
│ │
|
||
│ /əˈbændən/ │
|
||
│ │
|
||
│ [🔊 播放發音] │
|
||
│ │
|
||
│ │
|
||
│ [點擊顯示答案] │
|
||
│ │
|
||
│ │
|
||
└─────────────────────────────┘
|
||
|
||
顯示答案後:
|
||
┌─────────────────────────────┐
|
||
│ 複習模式 5/20 ✕ │
|
||
├─────────────────────────────┤
|
||
│ abandon │
|
||
│ /əˈbændən/ │
|
||
│ │
|
||
│ v. 放棄、遺棄 │
|
||
│ │
|
||
│ 例句: │
|
||
│ He had to abandon his │
|
||
│ plan due to lack of funds. │
|
||
│ │
|
||
│ 圖片: [相關圖片] │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ 這個單字的難度如何？ │
|
||
│ 😵 很難 😕 困難 😐 一般 │
|
||
│ 🙂 簡單 😊 很簡單 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 4.4 語音評估界面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← 發音練習 │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ 請朗讀以下句子： │
|
||
│ │
|
||
│ "I need to abandon this │
|
||
│ bad habit immediately." │
|
||
│ │
|
||
│ ┌──────────┐ │
|
||
│ │ 🎤 │ │
|
||
│ │ 點擊錄音 │ │
|
||
│ └──────────┘ │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ 評估結果: │
|
||
│ │
|
||
│ 準確度: ████████░░ 85% │
|
||
│ 流暢度: ███████░░░ 72% │
|
||
│ 完整度: ██████████ 100% │
|
||
│ │
|
||
│ 綜合評分: 86 分 👍 │
|
||
│ │
|
||
│ [重新錄音] [下一個] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## 5. UI 設計原則
|
||
|
||
### 5.1 視覺設計
|
||
- **色彩方案**:
|
||
- 主色: #4F46E5 (靛藍)
|
||
- 輔色: #10B981 (綠色-成功)
|
||
- 警告: #F59E0B (琥珀)
|
||
- 錯誤: #EF4444 (紅色)
|
||
- 背景: #F9FAFB (淺灰)
|
||
|
||
- **字體**:
|
||
- 英文: SF Pro Display / Inter
|
||
- 中文: PingFang TC / Noto Sans TC
|
||
|
||
- **間距系統**: 4px 基準網格
|
||
|
||
### 5.2 互動設計原則
|
||
1. **即時反饋**: 所有操作提供視覺/觸覺反饋
|
||
2. **載入狀態**: 明確的進度指示器
|
||
3. **錯誤處理**: 友善的錯誤訊息與復原建議
|
||
4. **手勢操作**: 支援滑動切換詞卡
|
||
5. **鍵盤優化**: 自動聚焦、完成按鈕
|
||
|
||
### 5.3 無障礙設計
|
||
- 支援 VoiceOver/TalkBack
|
||
- 足夠的顏色對比度 (WCAG AA)
|
||
- 可調整字體大小
|
||
- 支援深色模式
|
||
|
||
## 6. 動畫與過渡
|
||
|
||
### 6.1 微互動動畫
|
||
```javascript
|
||
// 詞卡翻轉動畫
|
||
CardFlip: {
|
||
duration: 400ms,
|
||
easing: 'ease-in-out',
|
||
transform: 'rotateY(180deg)'
|
||
}
|
||
|
||
// 進度條動畫
|
||
ProgressBar: {
|
||
duration: 300ms,
|
||
easing: 'ease-out'
|
||
}
|
||
|
||
// 成功反饋
|
||
SuccessPulse: {
|
||
scale: [1, 1.1, 1],
|
||
duration: 300ms
|
||
}
|
||
```
|
||
|
||
### 6.2 頁面過渡
|
||
- 推入/推出: 頁面導航
|
||
- 淡入/淡出: 模態視窗
|
||
- 底部滑入: 操作表單
|
||
|
||
## 7. 響應式設計考量
|
||
|
||
### 7.1 裝置適配
|
||
- iPhone SE (375px)
|
||
- iPhone 14 (390px)
|
||
- iPhone 14 Plus (428px)
|
||
- iPad (768px+)
|
||
- Android 各尺寸
|
||
|
||
### 7.2 橫豎屏切換
|
||
- 詞卡複習: 支援橫屏顯示更多內容
|
||
- 統計圖表: 橫屏顯示詳細圖表
|
||
- 其他頁面: 鎖定豎屏
|
||
|
||
## 8. 原型連結與設計交付
|
||
|
||
### 8.1 設計工具
|
||
- **線框圖**: Figma / Sketch
|
||
- **原型**: Figma / Principle
|
||
- **設計系統**: Figma Variables
|
||
- **交付**: Zeplin / Figma Dev Mode
|
||
|
||
### 8.2 設計規範文件
|
||
- 元件庫規範
|
||
- 顏色使用指南
|
||
- 文字樣式指南
|
||
- 間距與佈局規範
|
||
- 圖標使用規範 |