600 lines
40 KiB
Markdown
600 lines
40 KiB
Markdown
# 互動式單字查詢 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 線框圖設計涵蓋了完整的用戶介面規劃，包括主要頁面、互動流程、響應式適配和無障礙設計，為開發團隊提供了詳細的實現指南。 |