11 KiB

Raw Blame History

LinguaForge 使用者流程與 UI/UX 設計

1. 使用者旅程地圖

1.1 新使用者旅程

開啟 App → 歡迎頁面 → 註冊/登入 → 引導教學 → 設定學習目標 → 開始第一張詞卡

1.2 回訪使用者旅程

開啟 App → 自動登入 → 首頁儀表板 → 選擇學習活動 → 完成學習 → 查看進度

2. 核心使用者流程

2.1 註冊與登入流程

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 詞卡生成流程

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 間隔重複複習流程

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 語音評估流程

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 互動設計原則

即時反饋: 所有操作提供視覺/觸覺反饋
載入狀態: 明確的進度指示器
錯誤處理: 友善的錯誤訊息與復原建議
手勢操作: 支援滑動切換詞卡
鍵盤優化: 自動聚焦、完成按鈕

5.3 無障礙設計

支援 VoiceOver/TalkBack
足夠的顏色對比度 (WCAG AA)
可調整字體大小
支援深色模式

6. 動畫與過渡

6.1 微互動動畫

// 詞卡翻轉動畫
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 設計規範文件

元件庫規範
顏色使用指南
文字樣式指南
間距與佈局規範
圖標使用規範

11 KiB Raw Blame History Unescape Escape

LinguaForge 使用者流程與 UI/UX 設計

1. 使用者旅程地圖

1.1 新使用者旅程

1.2 回訪使用者旅程

2. 核心使用者流程

2.1 註冊與登入流程

2.2 AI 詞卡生成流程

2.3 間隔重複複習流程

2.4 語音評估流程

3. 畫面架構

3.1 App 資訊架構

4. 線框圖設計

4.1 首頁儀表板

4.2 詞卡生成頁面

4.3 詞卡複習界面

4.4 語音評估界面

5. UI 設計原則

5.1 視覺設計

5.2 互動設計原則

5.3 無障礙設計

6. 動畫與過渡

6.1 微互動動畫

6.2 頁面過渡

7. 響應式設計考量

7.1 裝置適配

7.2 橫豎屏切換

8. 原型連結與設計交付

8.1 設計工具

8.2 設計規範文件

11 KiB

Raw Blame History