ux-wireframes.md 39 KB
序灵 Matrix 助手 - UX 低保真线框图
本文档描述序灵 Matrix 助手的关键界面线框图布局。
技术路线说明
本产品采用本地 GPU 翻译架构：
- 翻译引擎: facebook/m2m100_418M + CTranslate2 (已量化)
- 硬件要求: CUDA 兼容 GPU (RTX 3050/3060 或更高)
- API 位置: 平台 API 仅用于指纹查重、上传、扣费，不用于翻译
因此设置界面中不包含翻译 API 配置。
1. 主窗口布局 (Main Window)
用途：应用主界面，展示所有已导入的作品
┌─────────────────────────────────────────────────────────────────────────────┐
│ 文件 编辑 设置 帮助 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌────────────────────────────────────────────┐ │
│ │ 作品列表 │ │ 作品详情 │ │
│ ├─────────────────────────┤ ├────────────────────────────────────────────┤ │
│ │ ┌─────────────────────┐ │ │ │ │
│ │ │ 三体 │ │ │ 作品名称: 三体 │ │
│ │ │ 刘慈欣 │ │ │ 作者: 刘慈欣 │ │
│ │ │ 30章 | 翻译中... │ │ │ 总章节数: 30 │ │
│ │ └─────────────────────┘ │ │ 总字数: 300,000 │ │
│ │ │ │ 翻译状态: 进行中 │ │
│ │ ┌─────────────────────┐ │ │ 目标语言: English │ │
│ │ │ 球状闪电 │ │ │ │ │
│ │ │ 刘慈欣 │ │ │ ┌──────────────────────────────────────┐ │ │
│ │ │ 18章 | 已完成 │ │ │ │ 翻译进度 │ │ │
│ │ └─────────────────────┘ │ │ │ ████████████░░░░░░░░ 60% │ │ │
│ │ │ │ └──────────────────────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │ │ │
│ │ │ [+] 导入新作品 │ │ │ 章节状态: │ │
│ └─────────────────────────┘ │ │ ✓ 第1-18章 已完成 │ │
│ │ │ → 第19章 翻译中... │ │
│ │ │ ○ 第20-30章 等待中 │ │
│ │ │ │ │
│ │ │ [ 打开工作台 ] [ 重新翻译 ] │ │
│ │ └────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
布局说明：
- 左侧作品列表（占宽度 30%）：卡片式列表，显示作品封面/标题、作者、章节数和状态
- 右侧详情面板（占宽度 70%）：显示选中作品的完整信息和操作按钮
- 顶部菜单栏：全局操作入口
2. 导入文件界面 (Import File Dialog)
用途：导入新的待翻译作品文件
┌─────────────────────────────────────────────────────────────────────────────┐
│ 导入作品 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌────────────────┐ │ │
│ │ │ │ │ │
│ │ │ 📁 │ 点击或拖拽文件到此处 │ │
│ │ │ 选择文件 │ 支持 .epub, .txt, .docx 格式 │ │
│ │ │ │ │ │
│ │ └────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 文件预览 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 文件名: 三体第一部.epub │ │
│ │ 文件大小: 2.4 MB │ │
│ │ 检测到章节数: 30 章 │ │
│ │ 总字数: 约 300,000 字 │ │
│ │ 编码: UTF-8 │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 翻译设置 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 目标语言: [ English ▼ ] │ │
│ │ 翻译模型: [ Claude Sonnet 4 ▼ ] │ │
│ │ 输出目录: [ ~/Documents/Translated/... ] [ 浏览... ] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ [ 取消 ] [ 导入并开始翻译 ] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
布局说明：
- 居中对话框，固定宽度约 600px
- 拖拽区域突出显示
- 文件预览区域在确认文件后显示
- 底部翻译设置可折叠展开
3. 翻译进度界面 (Translation Progress)
用途：实时显示翻译进度和状态
┌─────────────────────────────────────────────────────────────────────────────┐
│ 三体 - 翻译进度 [ × ] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 整体进度 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ ████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 45% │ │
│ │ │ │
│ │ 已完成: 13/30 章节 | 已处理: 156,789/300,000 字 │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ 当前阶段 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ✓ 指纹提取 已完成 (30/30) │ │
│ │ ✓ 文本清洗 已完成 (30/30) │ │
│ │ ✓ 术语提取 已完成 (30/30) │ │
│ │ → 翻译处理 进行中... (13/30) │ │
│ │ └─ 当前: 第13章 - 三体、红岸之一 │ │
│ │ ○ 文件上传 等待中 │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ 章节状态 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 第1章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 已完成 │ │
│ │ 第2章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 已完成 │ │
│ │ 第3章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 已完成 │ │
│ │ ... │ │
│ │ 第12章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 已完成 │ │
│ │ 第13章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ → 翻译中 67% │ │
│ │ 第14章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ○ 等待中 │ │
│ │ 第15章 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ○ 等待中 │ │
│ │ ... │ │
│ │ │ │
│ │ [ 查看完整章节列表 ] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ [ 暂停 ] [ 打开工作台 ] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
布局说明：
- 顶部显示整体进度条和统计数据
- 中间显示处理阶段流程图
- 底部显示章节状态列表（可滚动）
- 右上角关闭按钮（最小化而非真正关闭）
4. 工作台界面 (Workbench)
用途：处理失败的翻译任务，支持重试和手动编辑
┌─────────────────────────────────────────────────────────────────────────────┐
│ 三体 - 工作台 [ 返回 ] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────┐ ┌──────────────────────────────┐ │
│ │ 问题章节列表 │ │ 章节编辑器 │ │
│ ├───────────────────────────────────────┤ ├──────────────────────────────┤ │
│ │ │ │ │ │
│ │ 筛选: [ 全部 ▼ ] [ 仅失败 ] │ │ 第13章 - 三体、红岸之一 │ │
│ │ │ │ ───────────────────────── │ │
│ │ ┌─────────────────────────────────┐ │ │ │ │
│ │ │ 第13章 │ │ │ 原文 │ │
│ │ │ 状态: ❌ API错误 │ │ │ ┌────────────────────────┐ │ │
│ │ │ 重试: 2次 │ │ │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │ │ 中国科学院某研究所... │ │ │
│ │ │ │ │ │ │ │
│ │ ┌─────────────────────────────────┐ │ │ │ │ │ │
│ │ │ 第27章 │ │ │ │ │ │ │
│ │ │ 状态: ❌ 超时 │ │ │ └────────────────────────┘ │ │
│ │ │ 重试: 1次 │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │ 译文 │ │
│ │ │ │ ┌────────────────────────┐ │ │
│ │ ┌─────────────────────────────────┐ │ │ │ │ │ │
│ │ │ 第28章 │ │ │ │ Institute of Chinese... │ │ │
│ │ │ 状态: ⚠️ 术语冲突 │ │ │ │ │ │ │
│ │ │ 重试: 0次 │ │ │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │ └────────────────────────┘ │ │
│ │ │ │ │ │
│ │ │ │ ┌────────────────────────┐ │ │
│ │ 批量操作: │ │ │ 修改后的译文 │ │ │
│ │ [ 全部重试 ] [ 导出失败列表 ] │ │ │ ┌────────────────────┐ │ │ │
│ │ │ │ │ │ │ │ │ │
│ └───────────────────────────────────────┘ │ │ │ │ │ │ │
│ │ │ └────────────────────┘ │ │ │
│ │ └────────────────────────┘ │ │
│ │ │ │
│ │ 错误信息: │ │
│ │ ┌────────────────────────┐ │ │
│ │ │ APIError: Rate limit │ │ │
│ │ │ exceeded. Retry after │ │ │
│ │ │ 30 seconds. │ │ │
│ │ └────────────────────────┘ │ │
│ │ │ │
│ │ [ 重新翻译 ] [ 保存修改 ] │ │
│ └──────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
布局说明：
- 左侧列表（占宽度 35%）：显示有问题的章节，支持筛选
- 右侧编辑器（占宽度 65%）：显示原文、译文、错误信息和操作按钮
- 支持对比查看原文和译文
- 可以手动编辑译文并保存
5. 设置界面 (Settings)
用途：配置应用参数和翻译引擎设置
┌─────────────────────────────────────────────────────────────────────────────┐
│ 设置 [ 保存 ] [×]│
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 通用设置 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 界面语言: [ 简体中文 ▼ ] │ │
│ │ 主题: [ 系统默认 ▼ ] [ 浅色 ] [ 深色 ] │ │
│ │ 默认输出目录: [ ~/Documents/Matrix翻译/ ] [ 浏览... ] │ │
│ │ 自动保存: [✓] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ GPU 设置 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ CUDA 设备: [ 自动检测 ▼ ] [ GPU 0 ] [ GPU 1 ] │ │
│ │ Batch Size: [ 32 ] (根据显存自动调整) │ │
│ │ 当前设备: ✓ NVIDIA GeForce RTX 3060 (12GB) │ │
│ │ ⚠ 检测到兼容 GPU，本地翻译已启用 │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 翻译模型设置 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 模型: facebook/m2m100_418M (已量化) │ │
│ │ 模型路径: [ ~/.cache/matrix/models/ ] [ 浏览... ] │ │
│ │ 量化选项: [ int8 ▼ ] [ fp16 ] [ int8 ] │ │
│ │ 目标语言: [ English ▼ ] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 高级设置 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 缓存目录: [ ~/.cache/matrix/ ] [ 浏览... ] │ │
│ │ 日志级别: [ INFO ▼ ] [ DEBUG ] [ WARNING ] [ ERROR ] │ │
│ │ 代理设置: [ http://proxy.example.com:8080 ] │ │
│ │ (代理仅用于指纹查重和上传，不影响本地翻译) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 术语库 │ │
│ │ ──────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 自定义术语库: [ ~/Documents/terminology.json ] [ 浏览... ] │ │
│ │ [ 编辑术语库 ] [ 从文件导入 ] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ [ 重置默认 ] [ 保存并关闭 ] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
布局说明：
- 分组显示不同类别的设置
- GPU 设置支持多设备选择和自动检测
- 翻译模型使用本地 m2m100 模型，无需 API 配置
- 代理设置仅用于平台 API 调用（指纹查重/上传），不影响本地翻译
- 所有设置即时生效或需要点击保存按钮
6. 辅助界面
6.1 术语库编辑器
┌─────────────────────────────────────────────────────────────────────────────┐
│ 术语库编辑器 - 三体 [ 保存 ] [×] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 搜索: [ 搜素术语... ] [ 添加新术语 ] │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ 原文 │ 译文 (English) │ 上下文 │ 操作 │ │
│ │ ────────────┼─────────────────────┼─────────────┼─────────────────── │ │
│ │ 三体 │ Three-Body │ 书名/专有 │ [ 编辑 ] [ 删除 ] │ │
│ │ 红岸基地 │ Red Coast Base │ 地名 │ [ 编辑 ] [ 删除 ] │ │
│ │ 叶文洁 │ Ye Wenjie │ 人名 │ [ 编辑 ] [ 删除 ] │ │
│ │ 汪淼 │ Wang Miao │ 人名 │ [ 编辑 ] [ 删除 ] │ │
│ │ 史强 │ Shi Qiang / Da Shi│ 人名/昵称 │ [ 编辑 ] [ 删除 ] │ │
│ │ ETO │ ETO │ 组织名 │ [ 编辑 ] [ 删除 ] │ │
│ │ 古筝行动 │ Operation Guzheng │ 行动代号 │ [ 编辑 ] [ 删除 ] │ │
│ │ ... │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ [ 从文件导入 ] [ 导出术语库 ] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
6.2 日志查看器
┌─────────────────────────────────────────────────────────────────────────────┐
│ 系统日志 [ 清空 ] [ 导出 ] [×] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 级别: [ 全部 ▼ ] [ INFO ] [ WARNING ] [ ERROR ] │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 2026-03-13 14:32:15 [INFO ] 开始翻译: 第13章 │ │
│ │ 2026-03-13 14:32:18 [INFO ] 指纹提取完成: 5,234 字 │ │
│ │ 2026-03-13 14:32:20 [INFO ] 术语匹配: 3 个术语命中 │ │
│ │ 2026-03-13 14:32:25 [INFO ] 调用 Claude API 开始翻译... │ │
│ │ 2026-03-13 14:33:10 [WARNING ] API 响应较慢: 45秒 │ │
│ │ 2026-03-13 14:33:15 [INFO ] 翻译完成: 4,987 字 │ │
│ │ 2026-03-13 14:33:16 [INFO ] 质量检查通过 │ │
│ │ 2026-03-13 14:33:17 [INFO ] 第13章翻译完成 │ │
│ │ 2026-03-13 14:33:18 [INFO ] 开始翻译: 第14章 │ │
│ │ 2026-03-13 14:33:21 [ERROR ] API 错误: Rate limit exceeded │ │
│ │ 2026-03-13 14:33:22 [INFO ] 等待30秒后重试... │ │
│ │ ... │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
设计规范
颜色方案
| 元素 | 颜色 | 说明 |
|---|---|---|
| 主色 | #6366f1 (Indigo) | 品牌色、主要按钮 |
| 成功 | #22c55e (Green) | 完成状态 |
| 警告 | #f59e0b (Amber) | 进行中、注意 |
| 错误 | #ef4444 (Red) | 失败状态 |
| 中性 | #6b7280 (Gray) | 次要文本 |
| 背景 | #ffffff | 主背景 |
| 面板 | #f9fafb | 次级背景 |
字体规范
| 元素 | 字号 | 字重 |
|---|---|---|
| 标题 H1 | 24px | Bold |
| 标题 H2 | 20px | Semibold |
| 标题 H3 | 16px | Semibold |
| 正文 | 14px | Regular |
| 辅助文本 | 12px | Regular |
间距规范
| 名称 | 数值 |
|---|---|
| xs | 4px |
| sm | 8px |
| md | 16px |
| lg | 24px |
| xl | 32px |
交互说明
1. 主窗口
- 点击作品卡片：在右侧显示详情
- 双击作品卡片：打开工作台
- 拖拽文件到左侧区域：触发导入对话框
2. 导入界面
- 支持拖拽文件到对话框
- 文件选择后自动解析章节数
- 点击"导入并开始翻译"后自动关闭并显示进度
3. 进度界面
- 可最小化到系统托架
- 点击暂停按钮：暂停当前翻译
- 点击工作台按钮：打开工作台界面
4. 工作台
- 选择左侧章节：右侧显示对应编辑器
- 支持批量选择和操作
- 修改译文后可保存或重新翻译
5. 设置界面
- 修改即时预览（部分设置）
- GPU 设备自动检测并显示可用设备
- 模型路径支持浏览选择本地模型文件
- 重置按钮：恢复默认设置
文档版本: 1.0 创建日期: 2026-03-13