40 KiB
40 KiB
互動式單字查詢 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 斷點定義
/* 手機 */
@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 觸控優化
/* 手機觸控優化 */
@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 -->
<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 色彩對比
/* 符合 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 線框圖設計涵蓋了完整的用戶介面規劃，包括主要頁面、互動流程、響應式適配和無障礙設計，為開發團隊提供了詳細的實現指南。