# 互動式單字查詢 UI 線框圖設計

## 1. 頁面流程概覽

```
首頁 → 登入/註冊 → Dashboard → 詞卡生成頁 → 句子分析模式 → 互動式查詢 → 詞卡生成
  ↓         ↓          ↓           ↓            ↓             ↓           ↓
引導頁    認證流程    快速訪問    輸入界面    分析處理      點擊查詢     學習材料
```

## 2. 主要頁面線框圖

### 2.1 詞卡生成頁 - 輸入模式

```
┌─────────────────────────────────────────────────────────────────────────┐
│ [≡] DramaLing                                    [🔔] [👤] jett@email │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                    AI 智能生成詞卡 - 互動式單字查詢                     │
│                                                                         │
│  ┌─ 原始例句類型 ──────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │   ┌─────────────────────┐  ┌─────────────────────────────────┐  │   │
│  │   │    [✍️ 手動輸入]     │  │  [📷 影劇截圖] (訂閱功能)      │  │   │
│  │   │                     │  │                                 │  │   │
│  │   │ ● 選中狀態          │  │ ○ 未選中                       │  │   │
│  │   │ 貼上或輸入英文文本   │  │ 上傳影劇截圖 (Phase 2)         │  │   │
│  │   └─────────────────────┘  └─────────────────────────────────┘  │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─ 輸入英文文本 ──────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │  輸入英文句子（最多300字）...                                  │   │
│  │  ┌─────────────────────────────────────────────────────────────┐ │   │
│  │  │                                                             │ │   │
│  │  │                                                             │ │   │
│  │  │                                                             │ │   │
│  │  │                                                             │ │   │
│  │  └─────────────────────────────────────────────────────────────┘ │   │
│  │  最多 300 字元 • 目前：0 字元                  [還可輸入 300 字] │   │
│  │                                                                 │   │
│  │  💡 示例句子：                                                  │   │
│  │  ┌─────────────────────────────────────────────────────────────┐ │   │
│  │  │ [點擊使用] He brought this thing up during our meeting...  │ │   │
│  │  └─────────────────────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                  🔍 分析句子（點擊查詢單字）                    │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │  🆓 免費用戶：已使用 0/5 次 (3小時內)                           │   │
│  │  ⏰ 下次重置時間：2025-09-17 15:48                              │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.2 分析中狀態

```
┌─────────────────────────────────────────────────────────────────────────┐
│ [≡] DramaLing                                    [🔔] [👤] jett@email │
├─────────────────────────────────────────────────────────────────────────┤
│  [←] 返回輸入                       句子分析中                          │
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │                        🔄 正在分析句子...                       │   │
│  │                                                                 │   │
│  │              He brought this thing up during our meeting        │   │
│  │              and no one agreed.                                 │   │
│  │                                                                 │   │
│  │                   ⚡ AI 正在解析單字和片語                      │   │
│  │                                                                 │   │
│  │               ████████████████████░░░░░░ 80%                   │   │
│  │                                                                 │   │
│  │                      預計完成時間：5 秒                         │   │
│  │                                                                 │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  💡 小提示：分析完成後，您可以點擊任何單字查看詳細意思！                │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.3 分析結果 - 互動式查詢模式

```
┌─────────────────────────────────────────────────────────────────────────┐
│ [≡] DramaLing                                    [🔔] [👤] jett@email │
├─────────────────────────────────────────────────────────────────────────┤
│  [←] 返回輸入                       句子分析結果                        │
│                                                                         │
│  ┌─ 原始句子分析 ──────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │  📝 用戶輸入：                                                  │   │
│  │  He brought this thing up during our meeting and no one agreed.│   │
│  │                                                                 │   │
│  │  ✅ 語法檢查：無錯誤                                           │   │
│  │                                                                 │   │
│  │  📖 整句意思：                                                  │   │
│  │  他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會     │   │
│  │  議中有人提出某個議題或想法，但得不到其他與會者的認同。           │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─ 點擊查詢單字意思 ──────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │  💡 使用說明：點擊下方句子中的任何單字，可以立即查看詳細意思。   │   │
│  │  🟡 黃色邊框 = 高價值片語  🟢 綠色邊框 = 高價值單字  🔵 藍色 = 其他 │   │
│  │  ⭐ 高價值詞彙點擊免費 | 💰 其他詞彙點擊收費                    │   │
│  │                                                                 │   │
│  │  ╔═══════════════════════════════════════════════════════════╗   │   │
│  │  ║ He [brought]⭐ this [thing] [up]⭐ during our [meeting]⭐ ║   │   │
│  │  ║ and no [one] [agreed].                                   ║   │   │
│  │  ╚═══════════════════════════════════════════════════════════╝   │   │
│  │                                                                 │   │
│  │  範例：                                                         │   │
│  │  • brought/up 🟡 黃色邊框 + ⭐（高價值片語，免費點擊）          │   │
│  │  • meeting 🟢 綠色邊框 + ⭐（高價值單字，免費點擊）             │   │
│  │  • thing/one 🔵 藍色邊框（低價值單字，點擊扣1次）              │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─ 操作選項 ──────────────────────────────────────────────────────┐   │
│  │  [🔄 分析新句子]              [📖 生成學習詞卡]                 │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  📊 使用統計：今日已分析 1 個句子，剩餘 4 次免費額度                    │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.4 單字資訊彈窗 - 低價值單字 (收費)

```
                          ┌─ thing ─────────────────────── × ┐
                          │                                 │
                          │ 💰 低價值詞彙（扣除 1 次使用額度）│
                          │ ┌─────────────────────────────┐   │
                          │ │ ⚠️ 此查詢將消耗 1 次額度      │   │
                          │ │ 剩餘額度：3/5 次             │   │
                          │ │ [✅ 確認查詢] [❌ 取消]       │   │
                          │ └─────────────────────────────┘   │
                          │                                 │
                          │ 📘 noun | /θɪŋ/ | [🔊 US] [🔊 UK] │
                          │                                 │
                          │ 🇹🇼 翻譯：事情、東西              │
                          │                                 │
                          │ 📖 定義：An object, fact, or     │
                          │ situation                       │
                          │                                 │
                          │ 🔗 同義詞：                      │
                          │ [object] [matter] [item]        │
                          │                                 │
                          │ 📝 例句：                        │
                          │ • 原始：He brought this thing up │
                          │   翻譯：他提出了這件事           │
                          │                                 │
                          │ • 生成：That's an important     │
                          │   thing to remember             │
                          │   翻譯：那是需要記住的重要事情   │
                          │   [📷 查看例句圖] [🔊 播放]      │
                          │                                 │
                          │ 🎯 難度：A1 (基礎)               │
                          │                                 │
                          │ [📚 加入學習清單] [📖 生成詞卡]   │
                          └─────────────────────────────────┘
```

### 2.5 單字資訊彈窗 - 高價值片語 (免費)

```
                      ┌─ brought ───────────────────────── × ┐
                      │                                     │
                      │ ⭐ 高價值片語（免費查詢）             │
                      │ ┌─────────────────────────────────┐ │
                      │ │ 🟡 片語：bring up                │ │
                      │ │ 🇹🇼 意思：提出（話題）、養育      │ │
                      │ │ ⚡ 提醒：在這個句子中，"brought   │ │
                      │ │ up" 是一個片語，意思是"提出話題" │ │
                      │ │ ，而不是單純的"帶來"             │ │
                      │ │ 🎯 學習價值：⭐⭐⭐⭐⭐ (極高)     │ │
                      │ └─────────────────────────────────┘ │
                      │                                     │
                      │ 📘 verb | /brɔːt/ | [🔊 US] [🔊 UK]   │
                      │                                     │
                      │ 🇹🇼 單字翻譯：帶來、提出             │
                      │                                     │
                      │ 📖 單字定義：Past tense of bring;   │
                      │ to take or carry something to a     │
                      │ place                               │
                      │                                     │
                      │ 🔗 同義詞：[carried] [took] [delivered] │
                      │ 🔄 反義詞：[removed] [took away]     │
                      │                                     │
                      │ 📝 例句：                            │
                      │ • 原始：He brought this thing up    │
                      │   翻譯：他提出了這件事               │
                      │                                     │
                      │ • 生成：She brought up an important │
                      │   point about the budget            │
                      │   翻譯：她提出了關於預算的重要觀點   │
                      │   [📷 查看例句圖] [🔊 播放]          │
                      │                                     │
                      │ 🎯 難度：B1 (中級)                   │
                      │                                     │
                      │ [📚 加入學習清單] [📖 生成詞卡]       │
                      └─────────────────────────────────────┘
```

### 2.6 例句圖片檢視器

```
┌─────────────────────────────────────────────────────────────────────────┐
│                                                               [× 關閉] │
│                                                                         │
│                          📷 例句情境圖                                  │
│                     "bring up" - 提出話題                              │
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │                        [圖片載入中...]                          │   │
│  │                                                                 │   │
│  │                     會議室場景插圖                              │   │
│  │                 一個人在會議中舉手發言                          │   │
│  │                                                                 │   │
│  │              💬 "Let me bring up another point..."              │   │
│  │                                                                 │   │
│  │                                                                 │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│                     📝 情境說明：會議中提出新話題                       │
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │ [🔊 播放例句]  [📱 分享圖片]  [💾 儲存到相簿]  [❤️ 收藏]        │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.7 語法錯誤修正顯示

```
┌─────────────────────────────────────────────────────────────────────────┐
│  [←] 返回輸入                       句子分析結果                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─ 原始句子分析 ──────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │  📝 用戶輸入：                                                  │   │
│  │  I go to school yesterday and meet my friends.                 │   │
│  │                                                                 │   │
│  │  ❌ 語法檢查：發現 2 個錯誤                                     │   │
│  │  ┌─ 建議修正 ───────────────────────────────────────────────┐ │   │
│  │  │                                                         │ │   │
│  │  │  🔧 修正後：                                            │ │   │
│  │  │  I went to school yesterday and met my friends.        │ │   │
│  │  │                                                         │ │   │
│  │  │  📋 修正說明：                                          │ │   │
│  │  │  1. "go" → "went" (過去式時態修正)                      │ │   │
│  │  │  2. "meet" → "met" (過去式時態修正)                     │ │   │
│  │  │                                                         │ │   │
│  │  │  [✅ 使用修正版本]              [❌ 保持原始版本]        │ │   │
│  │  └─────────────────────────────────────────────────────────┘ │   │
│  │                                                                 │   │
│  │  📖 整句意思：                                                  │   │
│  │  我昨天去學校遇見了我的朋友們。這句話描述了過去發生的事情...     │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─ 點擊查詢單字意思 ──────────────────────────────────────────────┐   │
│  │  💡 以下基於修正後的句子進行分析                                │   │
│  │  🟡 黃色邊框 + ⭐ = 高價值片語  🟢 綠色邊框 + ⭐ = 高價值單字    │   │
│  │                                                                 │   │
│  │  ╔═══════════════════════════════════════════════════════════╗   │   │
│  │  ║ I [went]⭐ to school [yesterday] and [met]⭐ my friends.  ║   │   │
│  │  ╚═══════════════════════════════════════════════════════════╝   │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

### 2.8 使用限制提醒

```
┌─────────────────────────────────────────────────────────────────────────┐
│                             ⚠️ 使用限制提醒                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                          🆓 免費用戶限制                                │
│                                                                         │
│              您今日的句子分析額度已用完 (5/5 次)                        │
│                                                                         │
│                     ⏰ 下次重置時間：3小時後                            │
│                       (2025-09-17 18:48)                               │
│                                                                         │
│  ┌─ 升級建議 ──────────────────────────────────────────────────────┐   │
│  │                                                                 │   │
│  │  🌟 升級到付費方案，享受無限制分析：                             │   │
│  │                                                                 │   │
│  │  ✅ 無限次句子分析                                              │   │
│  │  ✅ 每日50張例句圖生成                                          │   │
│  │  ✅ 進階AI分析功能                                              │   │
│  │  ✅ 優先客服支援                                                │   │
│  │                                                                 │   │
│  │              [🚀 立即升級 NT$99/月]                             │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│  ┌─ 其他選項 ──────────────────────────────────────────────────────┐   │
│  │  [⏰ 設定提醒]  [📚 瀏覽現有詞卡]  [🏠 返回首頁]               │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

## 3. 行動裝置適配版本

### 3.1 手機版 - 輸入介面 (375px)

```
┌─────────────────────────────────┐
│ ≡ DramaLing              🔔 👤 │
├─────────────────────────────────┤
│                                 │
│      AI 智能詞卡生成            │
│                                 │
│ ┌─ 輸入類型 ─────────────────┐ │
│ │ [✍️ 手動]     [📷 截圖]    │ │
│ │   ●            ○          │ │
│ └───────────────────────────────┘ │
│                                 │
│ ┌─ 英文句子 ─────────────────┐ │
│ │ 輸入英文句子（最多300字）  │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │                         │ │ │
│ │ │                         │ │ │
│ │ │                         │ │ │
│ │ └─────────────────────────┘ │ │
│ │ 0/50 字                    │ │
│ │                            │ │
│ │ 💡 示例：                  │ │
│ │ [He brought this up...]    │ │
│ └───────────────────────────────┘ │
│                                 │
│ ┌─────────────────────────────┐ │
│ │   🔍 分析句子（點擊查詢）   │ │
│ └─────────────────────────────┘ │
│                                 │
│ 🆓 免費：0/5 次                  │
│ ⏰ 重置：3小時後                 │
│                                 │
└─────────────────────────────────┘
```

### 3.2 手機版 - 分析結果

```
┌─────────────────────────────────┐
│ ← 返回           句子分析結果   │
├─────────────────────────────────┤
│                                 │
│ ┌─ 原始句子 ─────────────────┐ │
│ │ He brought this thing up    │ │
│ │ during our meeting and no   │ │
│ │ one agreed.                 │ │
│ │                             │ │
│ │ 📝 整句意思：               │ │
│ │ 他在會議中提出了這件事...   │ │
│ └───────────────────────────────┘ │
│                                 │
│ ┌─ 點擊查詢 ─────────────────┐ │
│ │ 💡 點擊單字查看詳細意思     │ │
│ │ 🟡 黃色=片語 🔵 藍色=單字   │ │
│ │                             │ │
│ │ ╔═════════════════════════╗ │ │
│ │ ║ He [brought] this       ║ │ │
│ │ ║ [thing] [up] during our ║ │ │
│ │ ║ [meeting] and no [one]  ║ │ │
│ │ ║ [agreed].               ║ │ │
│ │ ╚═════════════════════════╝ │ │
│ └───────────────────────────────┘ │
│                                 │
│ ┌─ 操作 ─────────────────────┐ │
│ │ [🔄 新句子] [📖 生成詞卡]   │ │
│ └───────────────────────────────┘ │
│                                 │
│ 📊 今日：1/5 次                  │
└─────────────────────────────────┘
```

### 3.3 手機版 - 單字彈窗

```
┌─────────────────────────────────┐
│                             × │
│           brought               │
├─────────────────────────────────┤
│ ⚠️ 這個單字屬於片語！            │
│                                 │
│ 🔶 片語：bring up               │
│ 🇹🇼 意思：提出（話題）、養育    │
│ ⚡ 提醒：這裡是"提出話題"的意思  │
│                                 │
├─────────────────────────────────┤
│ 📘 verb | /brɔːt/              │
│ [🔊 US] [🔊 UK]                │
│                                 │
│ 🇹🇼 翻譯：帶來、提出            │
│                                 │
│ 📖 定義：Past tense of bring;  │
│ to take or carry something to   │
│ a place                         │
│                                 │
│ 🔗 同義詞：                     │
│ [carried] [took] [delivered]    │
│                                 │
│ 📝 例句：                       │
│ • 原始：He brought this up      │
│   翻譯：他提出了這件事          │
│                                 │
│ • 生成：She brought up a point  │
│   翻譯：她提出了一個觀點        │
│   [📷] [🔊]                     │
│                                 │
│ 🎯 難度：B1                     │
│                                 │
│ [📚 加入清單] [📖 生成詞卡]      │
│                                 │
└─────────────────────────────────┘
```

## 4. 互動流程圖

### 4.1 完整用戶旅程

```
開始
  ↓
選擇輸入模式 (手動/截圖)
  ↓
[手動模式]
輸入英文句子 (≤50字)
  ↓
點擊「分析句子」
  ↓
檢查使用限制
  ↓                ↓
 通過              超限
  ↓                ↓
顯示分析中...      顯示升級提醒
  ↓                ↓
AI 分析完成        [升級] or [等待]
  ↓
顯示互動式文字
  ↓
點擊任意單字
  ↓
顯示單字資訊彈窗
  ↓                ↓
普通單字           片語/俚語
  ↓                ↓
基礎資訊           片語警告 + 基礎資訊
  ↓                ↓
[播放發音]         [播放發音]
[查看例句圖]       [查看例句圖]
[加入學習清單]     [加入學習清單]
[生成詞卡]         [生成詞卡]
  ↓
關閉彈窗
  ↓
繼續查詢其他單字 or 分析新句子 or 生成詞卡
```

### 4.2 錯誤處理流程

```
用戶操作
  ↓
系統檢查
  ↓        ↓        ↓        ↓
正常      網路錯誤   API錯誤   使用超限
  ↓        ↓        ↓        ↓
執行      重試提示   錯誤提示   升級提示
          ↓        ↓        ↓
          [重試]    [回報]    [升級/等待]
          [取消]    [返回]    [返回]
```

## 5. 響應式設計斷點

### 5.1 斷點定義

```css
/* 手機 */
@media (max-width: 767px) {
  .container { padding: 1rem; }
  .word-popup {
    width: 90vw;
    position: fixed;
    bottom: 0;
    transform: none;
  }
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 1.5rem; }
  .interactive-text { font-size: 1.1rem; }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container { padding: 2rem; }
  .word-popup { min-width: 400px; }
}
```

### 5.2 觸控優化

```css
/* 手機觸控優化 */
@media (max-width: 767px) {
  .clickable-word {
    min-height: 44px; /* iOS 建議最小觸控面積 */
    padding: 8px 4px;
    margin: 2px;
  }

  .close-button {
    min-width: 44px;
    min-height: 44px;
  }
}
```

## 6. 無障礙設計 (A11y)

### 6.1 鍵盤導航

```
Tab 鍵順序：
1. 輸入模式選擇
2. 文字輸入框
3. 分析按鈕
4. 可點擊單字 (依序)
5. 彈窗內元素
6. 關閉按鈕
```

### 6.2 螢幕閱讀器支援

```html
<!-- 語義化 HTML -->
<main role="main" aria-label="互動式單字查詢">
  <section aria-label="句子輸入區">
    <input
      aria-label="輸入英文句子，最多300字元"
      aria-describedby="char-count"
    />
    <div id="char-count" aria-live="polite">目前：0 字元</div>
  </section>

  <section aria-label="分析結果區">
    <div role="button"
         tabindex="0"
         aria-label="單字：brought，點擊查看詳細資訊"
         data-word="brought">
      brought
    </div>
  </section>
</main>

<!-- 彈窗 -->
<dialog role="dialog"
        aria-labelledby="word-title"
        aria-describedby="word-definition">
  <h2 id="word-title">brought</h2>
  <p id="word-definition">Past tense of bring...</p>
</dialog>
```

### 6.3 色彩對比

```css
/* 符合 WCAG AA 標準 */
:root {
  --text-primary: #1a1a1a;      /* 對比度 13.26:1 */
  --text-secondary: #4a4a4a;    /* 對比度 8.59:1 */
  --border-focus: #0066cc;       /* 高對比度焦點邊框 */
  --bg-phrase: #fff4cc;          /* 片語背景 */
  --bg-phrase-text: #8b4513;     /* 片語文字 */
}

.clickable-word:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
```

這份 UI 線框圖設計涵蓋了完整的用戶介面規劃，包括主要頁面、互動流程、響應式適配和無障礙設計，為開發團隊提供了詳細的實現指南。