UX 低保真原型
Translation Tool UI Mockups
版本: 1.0
日期: 2026-03-13
项目: 翻译工具 (Translation Tool)
目录
- 主窗口布局
- 导入界面
- 翻译进度界面
- 术语预览界面
1. 主窗口布局
1.1 整体布局结构 (Mermaid)
flowchart TB
subgraph Main["主窗口 (1200x800)"]
subgraph Header["顶部导航栏 (1200x60)"]
H1["Logo"]
H2["菜单: 文件 | 编辑 | 视图 | 帮助"]
H3["状态: 已连接 ✓"]
end
subgraph LeftPanel["左侧作品列表 (300x740)"]
L1["搜索框"]
L2["筛选: 全部 | 进行中 | 已完成"]
L3["作品列表 (可滚动)"]
L4["┌─ 作品 A ────────┐"]
L5["│ 章节: 12/25 │"]
L6["│ 进度: ████░░ 48%│"]
L7["└────────────────┘"]
L8["┌─ 作品 B ────────┐"]
L9["│ 章节: 8/10 │"]
L10["│ 进度: ██████ 80%│"]
L11["└────────────────┘"]
L12["+ 新建作品"]
end
subgraph CenterPanel["中间作品详情 (500x740)"]
C1["作品标题: 示例小说"]
C2["原文语言: 中文 → 日文"]
C3["┌─────────────────────────┐"]
C4["│ 章节列表 │"]
C5["├─────────────────────────┤"]
C6["│ ✓ 第1章 │ 翻译完成 │"]
C7["│ → 第2章 │ 翻译中... │"]
C8["│ ⏸ 第3章 │ 待翻译 │"]
C9["│ ⏸ 第4章 │ 待翻译 │"]
C10["└─────────────────────────┘"]
C11["原文预览区"]
C12["译文预览区"]
end
subgraph RightPanel["右侧翻译进度 (400x740)"]
R1["当前进度"]
R2["████████████░░░ 60%"]
R3["章节: 15/25"]
R4["已翻译: 45,230 / 75,400 字"]
R5["────────────────────"]
R6["预计完成: 约2小时15分"]
R7["────────────────────"]
R8["术语表预览"]
R9["┌────────────────┐"]
R10["│ 主角 → 主人公 │"]
R11["│ 魔法 → 魔法 │"]
R12["│ 剑 → 剣 │"]
R13["└────────────────┘"]
R14["[查看全部术语]"]
R15["────────────────────"]
R16["[⏸ 暂停] [▶ 继续]"]
end
end
1.2 ASCII 线框图
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ 📚 TranslationTool 文件 编辑 视图 帮助 ● 已连接 Claude API │
├──────────────┬─────────────────────────────────┬────────────────────────────────────┤
│ │ │ │
│ 🔍 搜索... │ 作品标题: 示例小说 │ 当前翻译进度 │
│ │ 原文: 中文 → 目标: 日文 │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ ────────────│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ ████████████░░░░ 60% │
│ 筛选: [全部] │ │ │
│ [进行中] │ 章节列表 │ 📊 统计 │
│ [已完成] │ ┌─────────────────────────┐ │ • 章节: 15 / 25 │
│ │ │ ✓ 第1章 │ 翻译完成 │ │ • 字数: 45,230 / 75,400 │
│ ────────────│ │ → 第2章 │ 翻译中 45% │ │ • 已用时间: 1h 23m │
│ 📁 作品列表 │ │ ⏸ 第3章 │ 待翻译 │ │ • 预计剩余: 1h 45m │
│ │ │ ⏸ 第4章 │ 待翻译 │ │ │
│ ┌─────────┐ │ │ ⏸ 第5章 │ 待翻译 │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │📕 作品A │ │ │ ... │ │ │
│ │12/25 章 │ │ └─────────────────────────┘ │ 📖 术语预览 │
│ │███░ 48% │ │ │ ┌──────────────────────────┐ │
│ └─────────┘ │ 原文预览: │ │ 主角 → 主人公 │ │
│ │ "这是一个风雨交加的夜 │ │ 魔法 → 魔法 │ │
│ ┌─────────┐ │ 晚，主人公独自走在空 │ │ 剑 → 剣 │ │
│ │📗 作品B │ │ 旷的街道上..." │ │ ... │ │
│ │ 8/10 章 │ │ │ └──────────────────────────┘ │
│ │████ 80% │ │ 译文预览: │ [查看全部术语 →] │
│ └─────────┘ │ "これは嵐の夜であり、 │ │
│ │ 主人公は一人で寂しい │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ ┌─────────┐ │ 街を歩いていた..." │ │
│ │📙 作品C │ │ │ [ ⏸ 暂停 ] [ ▶ 继续 ] │
│ │ 3/15 章 │ │ [编辑术语] [开始翻译] │ [ ⏹ 停止 ] [ 📁 导出 ] │
│ │██░ 20% │ │ │ │
│ └─────────┘ │ │ │
│ │ │ │
│ │ │ │
│ [+ 新建作品]│ │ │
├──────────────┴─────────────────────────────────┴────────────────────────────────────┤
│ 状态栏: 就绪 | 最后更新: 2026-03-13 13:45 | 版本 1.0.0 │
└─────────────────────────────────────────────────────────────────────────────────────┘
2. 导入界面
2.1 导入流程 (Mermaid)
flowchart LR
Start([开始]) --> Browse[点击选择文件<br/>或拖放文件]
Browse --> Analyze{分析文件}
Analyze -->|成功| ShowInfo[显示文件信息]
Analyze -->|失败| ShowError[显示错误信息]
ShowError --> Browse
ShowInfo --> Confirm{确认导入?}
Confirm -->|取消| Start
Confirm -->|确认| Process[处理文件]
Process --> Extract[提取章节信息]
Extract --> Count[统计字数]
Count --> Estimate[计算预计时间]
Estimate --> Complete([导入完成])
Complete --> Main[进入主界面]
2.2 导入界面布局
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ 📚 导入 TXT 文件 │
│ │
│ ┌─────────────────────────┐ │
│ │ │ │
│ │ ════════════ │ │
│ │ │ 拖放文件到此处 │ │ │
│ │ │ 或 │ │ │
│ │ │ [选择文件] │ │ │
│ │ ════════════ │ │
│ │ │ │
│ │ 支持 .txt 格式文件 │ │
│ │ │ │
│ └─────────────────────────┘ │
│ │
│ 或选择最近使用的文件: │
│ ┌─────────────────────────┐ │
│ │ 📄 novel_chapter01.txt │ │
│ │ 📄 story_part2.txt │ │
│ │ 📄 book_final.txt │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ 📋 文件分析结果 │
│ │
│ 文件名: my_novel.txt │
│ 大小: 2.4 MB │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 📊 统计信息: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ 检测到的章节数: 25 章 │ │
│ │ 总字数: 75,400 字 │ │
│ │ 平均章节长度: 3,016 字/章 │ │
│ │ 检测到的语言: 中文 (简体) │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ⏱️ 时间估算: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ 假设翻译速度: 500 字/分钟 │ │
│ │ 预计总时间: 约 2小时 30分钟 │ │
│ │ 建议批处理: 每次翻译 5 章 │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ 🎯 翻译设置: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ 原文语言: [中文 ▼] │ │
│ │ 目标语言: [日文 ▼] │ │
│ │ 翻译模型: [Claude 3.5 Sonnet ▼] │ │
│ │ 使用术语表: [✓] 启用自动术语提取 │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ [← 返回] [确认导入 →] │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
3. 翻译进度界面
3.1 翻译状态流程
stateDiagram-v2
[*] --> Queued: 文件导入
Queued --> Processing: 开始翻译
Processing --> Paused: 用户暂停
Paused --> Processing: 用户继续
Processing --> Completed: 全部完成
Processing --> Failed: 翻译失败
Failed --> Processing: 重试
Paused --> [*]: 取消
Completed --> [*]
note right of Processing
当前: 第15章 / 共25章
进度: 60%
end note
3.2 进度界面布局
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ 📖 正在翻译: 示例小说 - 第15章 │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ 总体进度 ┃ │
│ ┃ ████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 60% ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ ┌────────────────────────┬────────────────────────┬─────────────────────────┐ │
│ │ 已完成章节 │ 进行中 │ 待翻译 │ │
│ │ 14 / 25 │ 第15章 │ 10 章 │ │
│ │ ████████████████ │ ████████░░ │ ░░░░░░░░░░░░░░░ │ │
│ └────────────────────────┴────────────────────────┴─────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────┐ │
│ │ 当前翻译内容: 第15章 - 决战 │ │
│ ├──────────────────────────────────────────────────────────────────────────────┤ │
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
│ │ │ 原文 (中文) │ │ 译文 (日文) │ │ │
│ │ ├─────────────────────┤ ├─────────────────────┤ │ │
│ │ │ "决战的时刻终于到 │ │ "決戦の時がついに │ │ │
│ │ │ 来了。主人公紧紧 │ │ 来た。主人公はしっ │ │ │
│ │ │ 握着手中的剑，眼 │ │ かりと剣を握り、 │ │ │
│ │ │ 前的敌人露出了一 │ │ 目の前の敵をじっと │ │ │
│ │ │ 丝不苟的表情..." │ │ 見つめた..." │ │ │
│ │ │ │ │ [正在生成...] │ │ │
│ │ └─────────────────────┘ └─────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 📊 详细统计: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ • 当前章节进度: ████████░░ 45% │ │
│ │ • 已翻译字数: 45,230 / 75,400 字 │ │
│ │ • 本章节已翻译: 1,357 / 3,016 字 │ │
│ │ • 平均翻译速度: 约 485 字/分钟 │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ⏱️ 时间统计: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ • 已用时间: 1小时 23分钟 │ │
│ │ • 预计剩余时间: 1小时 45分钟 │ │
│ │ • 预计完成时间: 15:30 (今天) │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ [⏸ 暂停翻译] [⏹ 停止翻译] [📁 导出已完成] [⚙️ 设置] │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
3.3 暂停状态界面
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ⏸ 翻译已暂停 │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ╔═════════════════════════════╗ │
│ ║ ║ │
│ ║ ⏸ 翻译已暂停 ║ │
│ ║ ║ │
│ ║ 已完成: 14/25 章 (60%) ║ │
│ ║ ║ │
│ ╚═════════════════════════════╝ │
│ │
│ 您可以: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ [ ▶ 继续翻译 ] 从暂停处继续翻译 │ │
│ │ [ 💾 保存进度 ] 保存当前进度，稍后继续 │ │
│ │ [ 📁 导出译文 ] 导出已翻译的章节 │ │
│ │ [ ⚙️ 修改设置 ] 调整翻译参数 │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💡 提示: 暂停时您可以修改术语表、调整翻译设置，或导出已完成的部分 │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
4. 术语预览界面
4.1 术语管理流程
flowchart LR
Auto[自动术语提取<br/>AI分析原文] --> Preview[术语预览界面]
Manual[手动添加术语] --> Preview
Import[导入术语表] --> Preview
Preview --> Edit{操作}
Edit -->|修改| Update[更新术语]
Edit -->|删除| Delete[移除术语]
Edit -->|批量| Batch[批量编辑模式]
Batch --> BatchExport[导出CSV]
Batch --> BatchImport[导入CSV]
Update --> Save[保存术语表]
Delete --> Save
BatchExport --> Save
BatchImport --> Save
Save --> Apply[应用到翻译]
Apply --> Translate[继续翻译]
4.2 术语表界面
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ 📖 术语表管理 - 示例小说 │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 🔍 搜索术语: [_______________] 筛选: [全部 ▼] 排序: [频次 ↓▼] │
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ ☐ 原文 │ 译文 │ 频次 │ 类别 │ 状态 │ 操作 ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 主角 │ 主人公 │ 156 │ 人物 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 魔法 │ 魔法 │ 89 │ 技能 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 剑 │ 剣 │ 67 │ 武器 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 龙 │ 竜 │ 45 │ 生物 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 王国 │ 王国 │ 38 │ 地点 │ ⏳ 待审核 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 公主 │ 姫 │ 34 │ 人物 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 勇者 │ 勇者 │ 29 │ 称号 │ ⚠️ 有冲突 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 冒险者公会 │ 冒険者ギルド │ 28 │ 组织 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ 炼金术 │ 錬金術 │ 22 │ 技能 │ ✓ 已确认 │ ✏️ 🗑️ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ ☐ ... │ ... │ ... │ ... │ ... │ ... ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 批量操作: [✓ 全选] [🗑️ 删除选中] [📤 导出选中] [✅ 确认选中] │
│ │
│ [+ 添加术语] [📥 导入CSV] [📤 导出CSV] [🔄 重新提取] [💾 保存并返回] │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
4.3 添加/编辑术语弹窗
┌─────────────────────────────────────────────┐
│ ✏️ 编辑术语 │
├─────────────────────────────────────────────┤
│ │
│ 原文: [主角 ] │
│ 译文: [主人公 ] │
│ │
│ 类别: [人物 ▼] │
│ ┌─────────────────────┐ │
│ │ 人物 │ │
│ │ 地点 │ │
│ │ 技能 │ │
│ │ 物品 │ │
│ │ 组织 │ │
│ │ 称号 │ │
│ │ 自定义... │ │
│ └─────────────────────┘ │
│ │
│ 备注: [__________ │
│ __________ ] │
│ │
│ ☐ 锁定翻译 (禁止AI自动修改) │
│ ☐ 应用到所有相关变体 (主角→主角的→主角等) │
│ │
├─────────────────────────────────────────────┤
│ [取消] [保存] │
└─────────────────────────────────────────────┘
4.4 术语冲突提示
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ⚠️ 发现术语冲突 │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 检测到以下术语存在多个翻译选项，请选择正确的翻译: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ 原文: "勇者" │ │
│ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 选项 │ 译文 │ 来源 │ 使用次数 │ 操作 │ │ │
│ │ ├─────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ ○ 选项1 │ 勇者 │ 术语表 │ 29次 │ │ │ │
│ │ │ ○ 选项2 │ ブレイブ │ AI建议 │ 8次 │ │ │ │
│ │ │ ○ 自定义 │ [______] │ - │ - │ │ │ │
│ │ └─────────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ☑ 将此选择应用到所有类似冲突 │
│ │
│ [跳过全部] [应用到选中] [全部应用] │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
附录: 交互状态说明
按钮状态规范
| 状态 |
示例 |
说明 |
| 默认 |
[开始翻译] |
可点击，正常状态 |
| 禁用 |
[开始翻译] |
不可点击，灰色显示 |
| 加载 |
[⏳ 处理中...] |
操作进行中 |
| 成功 |
[✓ 已完成] |
操作成功 |
| 错误 |
[✕ 失败] |
操作失败 |
进度条规范
| 进度 |
显示 |
颜色 |
| 0-30% |
███░░░░░░░ |
蓝色 |
| 31-70% |
███████░░░ |
蓝色 |
| 71-99% |
██████████░ |
绿色 |
| 100% |
████████████ |
绿色 |
图标说明
| 图标 |
含义 |
| ✓ |
已完成/已确认 |
| → |
进行中/当前项 |
| ⏸ |
暂停/待处理 |
| ⏹ |
停止 |
| ⚠️ |
警告/冲突 |
| ❌ |
错误/失败 |
| ℹ️ |
信息/提示 |
| ⚙️ |
设置 |
| 💾 |
保存 |
| 📁 |
文件/导出 |
| 📥 |
导入 |
| ✏️ |
编辑 |
| 🗑️ |
删除 |
文档结束
