翻译模块

交互原型 + PRD v1.2 Figma 设计稿 ↗

1文档说明

Scope · 适用范围与依据

需求名称
聊天消息翻译
覆盖场景
个人聊天 / 群聊
设计来源
Figma「翻译」Section(54:21126)
需求来源
《翻译功能需求说明》
涉及模块
会话页 · 长按菜单 · 半屏弹窗 · 顶部翻译栏 · 我的-语言
不在本次范围
非文本消息翻译、语音转写翻译
i
交互与视觉以设计稿为准,规则与边界以《翻译功能需求说明》为准。两者差异见 §12 待确认问题。
◆
本文档所有带 ▸ 的按钮名称都可以点,点击后会跳到「交互原型」中对应的页面;也可以用原型里的「▶ 自动演示」一键跑完整流程。

2背景与目标

Why · 要解决什么问题

2.1 背景

用户在跨语言社交与工作沟通中常在聊天里收到非母语文本消息,当前需跳出聊天去第三方工具翻译,链路长、上下文丢失、无法连续阅读。

2.2 目标

  • 按需翻译:单条消息一键翻译,不打断会话流。
  • 连续阅读:开启连续翻译后可视区域自动翻译并随滚动增量翻译。
  • 可控可退:随时切换目标语言、在原文/译文间切换、或隐藏翻译栏而不中断翻译。

2.3 设计原则

  • 不阻塞:翻译加载不得阻塞聊天滚动与其他操作,交互体验对齐 Telegram。
  • 以原文为准:任何译文都必须由消息原文生成,禁止译文二次翻译。
  • 能省则省:同一消息 + 同一目标语言的译文缓存复用,避免重复请求。

3名词定义

Glossary · 统一术语

术语定义
普通文本消息用户发送的纯文本消息,是本功能唯一支持翻译的消息类型。
单条消息翻译长按某条消息 → 点击「翻译」→ 半屏弹窗展示原文与译文。
翻译全部聊天记录连续翻译模式,自动翻译聊天界面可视区域内的普通文本消息并随滚动增量翻译。
顶部固定翻译栏连续翻译开启后位于导航栏下方的常驻控制条,用于切换展示态/目标语言/隐藏。
原文态 / 译文态气泡显示原文(栏文案「翻译为 XX」)/ 气泡显示译文(栏文案「显示原文」)。
可视区域当前聊天列表在屏幕内可见的消息范围,是自动翻译的触发范围。
译文缓存以「消息 ID + 内容版本 + 目标语言」为键的缓存。

4功能范围与总览

Scope · 能力矩阵与主流程

4.1 能力矩阵

能力个人聊天群聊入口
单条消息翻译支持支持长按消息 →「翻译」
翻译全部聊天记录支持支持弹窗内「翻译全部聊天记录」
可视区域自动翻译支持支持连续翻译开启后自动
切换目标语言支持支持弹窗「到 XX ⌄」/ 翻译栏「⋯」
隐藏翻译栏支持支持翻译栏「⋯ → 隐藏」
全局开关与语言偏好支持我的 › 语言
非文本消息翻译不支持见 §6.8

4.2 主流程

  1. 长按普通文本消息 → 操作菜单点击 翻译
  2. 拉起 半屏弹窗,展示原文 + 译文
  3. 分支 A:点击 翻译全部聊天记录 → 弹窗收起 → 顶部固定翻译栏出现 → 可视区域自动翻译
  4. 分支 B:点击 到 XX ⌄ 切换目标语言 → 基于原文重新翻译

5设计稿总览

Screens · 点击任一截图可在原型中直接打开对应页面

6.1功能入口

入口 · 长按操作菜单

菜单结构

  1. 表情快捷栏(现有能力)
  2. 操作项:回复 · 拷贝 · 翻译 · 转发
  3. 分隔线
  4. 操作项:选择

触发与响应

  • 长按普通文本消息气泡 → 弹出操作菜单,锚定在被长按气泡附近。
  • 点击 翻译 → 菜单关闭 → 拉起 半屏弹窗并发起翻译请求。
  • 「翻译」固定在第 3 项,位于「拷贝」与「转发」之间。
◆
显示条件(需同时满足):① 消息类型 = 普通文本消息;② 设置项 显示"翻译"按钮 = 开启;③ 消息语言 ∉ 无需翻译所选语言。

6.2单条消息翻译(半屏弹窗)

Half-sheet · 结构、状态与交互

6.2.1 结构规格

弹窗自底部升起,375×812 基准下高度 505pt(约 62% 屏高),顶部圆角。分 6 个区块:

#区域元素说明
1标题栏(固定)关闭按钮「×」· 居中标题「翻译」毛玻璃背景;内容滚动时保持固定
2原文区「从 {源语言}」+ 原文 + 「更多 / 折叠」默认收起,最多 1 行,超出以「更多」展开
3分隔线1px 细线与内容左对齐
4译文区「到 {目标语言} ⌄」+ 译文标签可点击切换目标语言(§6.3)
5操作区「拷贝译文」 「翻译全部聊天记录」行 = 图标 + 文案 + 右箭头,行间有分隔线
6底部(固定)主按钮「关闭」品牌紫填充 + 白字,圆角胶囊

6.2.2 状态与交互

  • 默认态:弹窗打开即展示「从 {源语言}」与原文首行,译文异步加载。
  • 原文展开:点击「更多」→ 原文展开为全文,链接文案变为「折叠」;点击「折叠」恢复。
  • 超长译文:译文按实际内容撑开,高度不限。
  • 内容滚动:内容超出时仅中间区域滚动,标题栏与底部「关闭」按钮固定。

6.2.3 交互规则

操作行为备注
点击「更多」/「折叠」切换原文展开 / 收起默认收起原文
点击「到 XX ⌄」展开目标语言下拉面板见 §6.3
点击「拷贝译文」译文写入剪贴板,Toast「已拷贝」仅拷贝译文
点击「翻译全部聊天记录」弹窗收起 → 顶部出现翻译栏 → 翻译可视区域见 §6.4
点击「关闭」/「×」/ 蒙层 / 下滑关闭弹窗不改变已有译文状态
加载中关闭弹窗取消请求或后台完成并写入缓存建议写入缓存

6.2.4 译文加载状态

状态原文区译文区允许的操作
加载中立即可见,可展开/收起骨架占位滚动、关闭、切换语言、点击遮罩均不被阻塞
成功正常展示译文全部可用
失败保留原文失败文案 + 「重试」可重试、可关闭
离线保留原文「当前网络不佳,请稍后重试」恢复网络后可重试
!
翻译过程不得阻塞聊天页面滚动及其他正常操作,交互体验参考 Telegram。加载态应尽量轻量,避免大面积遮罩。

6.3切换目标语言(弹窗内)

Language picker · 下拉面板

点击 到 {目标语言} ⌄ → 在其下方展开下拉面板。

面板结构

  1. 搜索行:放大镜 + 占位文案「搜索」
  2. 语言列表:单选(Radio),选中项右侧显示 ✓
  3. 首屏预置:中文、English

交互规则

  • 支持按中文名 / 英文名 / 语言代码模糊匹配,大小写不敏感;无结果显示空态。
  • 选中语言 → 面板收起 → 标签更新 → 译文按新目标语言重新翻译。
  • 点击面板外区域或再次点击标签 → 收起,不改变当前语言。
◆
核心约束:切换目标语言时必须始终基于消息原文生成译文,不得把已翻译出的译文当作原文二次翻译(避免语义漂移与误差累积)。

6.4翻译全部聊天记录(连续翻译)

Continuous translation · 可视区域增量翻译

触发链路

  1. 弹窗内点击 翻译全部聊天记录。
  2. 半屏弹窗收起,回到聊天界面。
  3. 聊天界面顶部显示 固定翻译栏。
  4. 立即翻译当前可视区域内的普通文本消息。
规则说明
翻译范围个人聊天与群聊均只翻译当前聊天界面的可视区域;不预翻译不可见的历史消息。
滚动增量用户滑动时新进入可视区域的普通文本消息自动翻译。
缓存复用已翻译过的消息复用已有译文,不重复请求。
消息筛选仅处理「普通文本消息」;其他类型直接跳过,不占位、不显示加载。
请求合并同一批入屏消息合并为批量请求,避免逐条串行请求造成抖动。
离开页面退出聊天页后停止当前页面的可视区域翻译任务;再次进入时恢复翻译。
消息被编辑原译文失效,按编辑后的新文本重新翻译。

连续翻译开启后,原文态气泡显示原文、栏文案「翻译为 {目标语言}」;译文态气泡显示译文、栏文案「显示原文」。切换仅改变展示内容,不触发重新翻译。

6.5顶部固定翻译栏

Translation bar · 状态机与菜单

属性值
位置导航栏下方,距导航栏 15pt;左右边距 15pt
尺寸 / 圆角345 × 32pt / 16pt(胶囊)
背景半透明毛玻璃(浅色 / 深色模式自适应)
结构左侧翻译图标 · 居中状态文案(可点击)· 右侧「⋯」圆形按钮

点击栏文案可在 原文态 与 译文态 之间切换;点击「⋯」打开菜单。

菜单项原文态译文态行为
选择其他语言✔✔展开语言单选列表(含「← 返回」)
状态切换项「翻译为中文」「显示原文」等价于点击翻译栏文案
隐藏✔✔立即隐藏翻译栏,不停止自动翻译

切换目标语言后,当前界面消息立即按新目标语言重新翻译。

6.6隐藏翻译栏

Hide bar · 隐藏与恢复

◆
点击「隐藏」后,聊天界面顶部的固定翻译栏立即隐藏(见 隐藏后状态)。
!
关键点:隐藏翻译栏后不会停止自动翻译,仍然正常运行。用户滑动时新入屏的可视区域消息继续被翻译,只是没有可见的翻译栏控件。

恢复路径

  1. 用户再次长按单条消息并点击 翻译;
  2. 翻译结果半屏弹窗再次出现;
  3. 由该弹窗可再次开启连续翻译,顶部翻译栏重新显示。
?
待确认:隐藏状态的作用域 —— 仅当前会话内临时隐藏,还是持久化到该会话/全局设置?退出聊天再进入是否恢复显示翻译栏?

6.7设置项(我的 › 语言)

Settings · 翻译消息与界面语言

分组条目控件行为
翻译消息显示"翻译"按钮Switch(默认开)控制长按菜单中是否展示「翻译」入口
无需翻译值 + 箭头选择不需要翻译的语言
说明文案:无需翻译:不要为该语言显示"翻译"按钮。
界面语言Chinese / 中文单选 ✓切换 App 界面语言
English / English单选 ✓切换 App 界面语言

「无需翻译」二级页

  • 标题「无需翻译」,左侧返回按钮(见 无需翻译页)。
  • 单选列表,主标题为英文名(Chinese),副标题为本地名(中文)。
  • 语义:该语言的消息不确定显示「翻译」入口。
?
待确认:「无需翻译」的判定依据 —— 依据消息的实际语言识别结果,还是依据系统/界面语言?建议按消息语言识别结果判定。

6.8消息类型限制

Constraints · 哪些消息可以翻译

◆
翻译功能仅支持「普通文本消息」。以下类型不显示翻译入口:图片消息、语音消息、撤回消息、系统通知、纯表情消息。
消息类型可翻译长按菜单连续翻译
普通文本消息支持展示「翻译」入屏即翻译
图片消息不支持隐藏「翻译」跳过
语音消息不支持隐藏「翻译」跳过
撤回消息不支持隐藏「翻译」跳过;已翻译译文同步移除
系统通知不支持无长按菜单跳过
纯表情消息不支持隐藏「翻译」跳过
其他富媒体不支持隐藏「翻译」跳过

7异常与边界场景

Edge cases · 需求说明逐条落地

#场景预期行为
1网络断开保留原文,并提示「当前网络不佳,请稍后重试」
2翻译过程中离开聊天页面退出后停止当前页面的可视区域翻译任务;再次进入时恢复翻译
3消息被编辑原译文失效,根据编辑后的新文本重新翻译
4切换目标语言当前界面消息翻译为新目标语言;不得将已翻译的译文再次当作原文翻译
5翻译加载状态显示加载但不阻塞滚动及其他操作,交互体验参考 Telegram
6消息被撤回 / 删除对应译文同步移除
7同一消息重复进入可视区域命中缓存直接展示,不重复请求
8目标语言 = 消息原文语言建议不展示译文,避免无意义请求 待确认
9快速连续切换目标语言以最后一次选择为准;丢弃过期响应
10超长文本译文弹窗内容区独立滚动,标题栏与底部按钮固定
11翻译服务超时按失败态处理,提供「重试」
12翻译栏隐藏后又触发滚动继续自动翻译,不中断调度
13深色模式 / 大字体翻译栏、弹窗、菜单需适配,文本不截断溢出

8文案规范

Copy deck · 可直接用于 i18n

建议 Key位置文案备注
translate.entry长按操作菜单项翻译固定第 3 项
translate.sheet.title弹窗标题翻译居中
translate.sheet.source原文语言标签从 {源语言}示例:从 英语
translate.sheet.target译文语言标签到 {目标语言}右侧带下拉图标
translate.sheet.expand展开原文更多原文收起时
translate.sheet.collapse收起原文折叠原文展开时
translate.sheet.copy操作行拷贝译文Toast:已拷贝
translate.sheet.translateAll操作行翻译全部聊天记录开启连续翻译
translate.sheet.close弹窗底部主按钮关闭品牌紫填充
translate.search.placeholder语言面板搜索框搜索—
translate.bar.toTarget翻译栏 · 原文态翻译为中文需动态化为「翻译为{目标语言}」
translate.bar.showOriginal翻译栏 · 译文态显示原文点击切回原文
translate.bar.menu.lang翻译栏菜单选择其他语言—
translate.bar.menu.hide翻译栏菜单隐藏需求说明称「隐藏此翻译栏」,见 §12
translate.lang.back语言面板顶部返回二级面板返回上级
translate.toast.copied拷贝成功已拷贝—
translate.error.network网络异常当前网络不佳,请稍后重试需求说明指定文案
translate.error.retry翻译失败重试建议文案
settings.section.translate设置分组标题翻译消息—
settings.translate.showEntry设置项显示“翻译”按钮Switch
settings.translate.none设置项无需翻译进入二级页
settings.translate.noneHint设置项说明无需翻译:不要为该语言显示“翻译”按钮。—
settings.section.interfaceLanguage设置分组标题界面语言—

9设计规范

Tokens · 从设计稿采样(375 × 812 基准)

9.1 颜色

品牌紫 / Primary#6047FF
翻译栏文案色#5541F5
卡片 / 气泡白#FFFFFF
页面底色#F2F1F5
正文主色#222222
次级文本#8F8E8F
开关开启#35C759
分隔线#E9E9EE
i
色值由设计稿截图采样得出,仅用于开发对照;最终请以 Figma Color Variables 命名为准。

9.2 关键尺寸

元素尺寸说明
半屏弹窗(默认)375 × 505pt(约 62% 屏高)顶部圆角,含底部安全区
半屏弹窗(原文展开 / 超长)高度自适应,最高接近满屏内容超高时内部滚动
弹窗内容左右内边距16pt语言标签与正文对齐
弹窗底部按钮345 × 48pt左右 15pt 边距,固定
顶部翻译栏345 × 32pt,圆角 16pt距导航栏 15pt
翻译栏内图标16 × 16pt左侧翻译图标、「⋯」按钮
操作行(拷贝译文等)高 28pt,图标 28 × 28pt文案距图标 43pt
语言菜单面板宽约 166pt,行高 40pt圆角 14pt
弹窗内语言下拉宽约 200pt含搜索行

10埋点建议

Analytics · 用于验证功能价值与效果

事件名触发时机关键参数
translate_entry_show长按菜单渲染完成chat_type、message_type、source_lang
translate_click点击「翻译」chat_type、message_id、source_lang、target_lang
translate_sheet_show半屏弹窗展示source_lang、target_lang
translate_result译文返回result、duration_ms、cache_hit
translate_expand_original点击「更多」/「折叠」action(expand/collapse)
translate_copy点击「拷贝译文」target_lang
translate_switch_lang切换目标语言from_lang、to_lang、entry(sheet/bar)
translate_all_click点击「翻译全部聊天记录」chat_type、visible_message_count
translate_viewport_batch可视区域批量翻译message_count、cache_hit_count、duration_ms
translate_bar_toggle点击翻译栏文案from_state、to_state
translate_bar_hide点击「隐藏」state
translate_setting_change设置页变更key、value

11非功能需求

Non-functional · 性能 / 体验 / 合规

11.1 性能

指标目标
单条翻译首字返回P95 < 1.5s(正常网络)
可视区域批量翻译P95 < 2.5s(一屏)
缓存命中率重复滑动场景 > 80%
并发请求同一会话并发上限 1 批,多余入队
滚动流畅度翻译过程中不掉帧;译文高度变化时保持锚点稳定
内存译文缓存设上限并做 LRU 淘汰,退出会话可释放

11.2 体验与无障碍

  • 支持深色模式、动态字体(Dynamic Type)、VoiceOver / TalkBack 朗读标签。
  • 加载态与成功态切换时避免布局跳动;译文高度变化平滑过渡。
  • 所有可点击区域最小 44 × 44pt(含「⋯」按钮与操作行)。

11.3 安全与合规

  • 明确消息文本是否上传服务端翻译,及是否落库、保留时长、是否用于模型训练。
  • 隐私政策与端内提示需同步更新;建议对翻译请求脱敏或明示告知。
  • 翻译结果需与原文一一对应,不得篡改原消息内容。

12待确认问题

Open questions · 评审时逐条定稿

#问题设计稿 / 需求说明的差异建议Owner
Q1翻译栏菜单第 3 项文案设计稿「隐藏」vs 需求说明「隐藏此翻译栏」统一为设计稿的「隐藏」,或按需求说明补全文案设计 / 产品
Q2「翻译全部聊天记录」控件形态需求说明称「弹窗底部按钮」;设计稿为列表行,底部按钮是「关闭」以设计稿为准:列表行 + 「关闭」按钮产品
Q3翻译栏文案是否需要动态化均写作「翻译为中文」,但支持切换目标语言改为「翻译为{目标语言}」动态文案设计 / 产品
Q4「显示"翻译"按钮」的语义边界—明确:仅控制长按菜单中「翻译」入口的显隐产品
Q5「无需翻译」的判定依据—按消息语言识别结果判定,而非界面语言产品 / 客户端
Q6隐藏翻译栏的状态作用域需求未说明退出会话后是否恢复建议会话内临时隐藏,重新进入会话默认显示产品
Q7目标语言 = 原文语言时的表现—不展示译文 / 展示原文并给出轻提示设计 / 产品
Q8译文态下是否继续自动翻译新入屏消息需求未明确建议继续(用户已在连续阅读模式)产品
Q9富文本 / @ 提及 / 链接卡片是否可翻译需求仅列「普通文本消息」纯文本 + @ 提及可翻译,其余不支持产品
Q10译文缓存的生命周期与清除策略—会话级缓存 + LRU,退出会话可释放客户端
Q11译文来源标识—是否需在译文旁展示「机器翻译」标识(合规建议需要)产品 / 法务
Q12界面语言列表范围设计稿仅示例 Chinese / English需与 App 现有语言清单对齐产品

13验收清单

Acceptance checklist · 提测与验收对照

13.1 入口

  • 长按普通文本消息,「翻译」出现在第 3 项(回复 / 拷贝 / 翻译 / 转发)
  • 图片、语音、撤回、系统通知、纯表情消息不显示「翻译」入口
  • 关闭「显示"翻译"按钮」后,长按菜单不再出现「翻译」
  • 消息语言属于「无需翻译」列表时,不出现「翻译」入口

13.2 单条消息翻译

  • 点击「翻译」后弹窗从底部升起,标题为「翻译」,左上角有关闭按钮
  • 原文区默认收起为 1 行并显示「更多」
  • 点击「更多」→ 原文展开且文案变为「折叠」;点击「折叠」→ 恢复收起
  • 译文区展示译文,「到 {目标语言}」标签可点击
  • 点击「拷贝译文」→ 剪贴板内容为译文,Toast 提示「已拷贝」
  • 内容超高时标题栏与底部「关闭」按钮固定,中间内容可滚动
  • 加载中不阻塞滚动、关闭等操作
  • 网络异常时保留原文并提示「当前网络不佳,请稍后重试」

13.3 目标语言切换

  • 点击「到 XX ⌄」弹出下拉面板,含搜索框与语言单选列表
  • 搜索可按语言名模糊匹配,无结果有空态
  • 选择语言后标签更新且译文重新生成
  • 新译文基于原文生成,未出现译文二次翻译
  • 快速连续切换语言时,最终展示与最后一次选择一致

13.4 翻译全部聊天记录

  • 点击「翻译全部聊天记录」→ 弹窗收起并返回聊天界面
  • 聊天界面顶部出现固定翻译栏
  • 当前可视区域的普通文本消息被翻译
  • 滑出新消息进入可视区域时自动翻译
  • 已翻译消息再次入屏时命中缓存,无重复请求
  • 退出会话停止翻译任务,再次进入恢复翻译
  • 消息被编辑后译文失效并重新翻译

13.5 翻译栏

  • 原文态文案为「翻译为{目标语言}」,气泡显示原文
  • 点击文案 → 切换为译文态,文案变「显示原文」,气泡显示译文
  • 译文态点击文案 → 切回原文态
  • 「⋯」菜单在原文态为「选择其他语言 / 翻译为XX / 隐藏」
  • 「⋯」菜单在译文态为「选择其他语言 / 显示原文 / 隐藏」
  • 「选择其他语言」就地展开为带「返回」的语言列表,切换后按新语言重新翻译
  • 点击「隐藏」→ 翻译栏立即消失,但自动翻译仍继续运行
  • 隐藏后再次长按消息 → 点击「翻译」→ 可重新开启连续翻译并恢复翻译栏

13.6 设置页

  • 我的 › 语言 页面含「翻译消息」与「界面语言」两个分组
  • 「显示"翻译"按钮」Switch 可切换并即时生效
  • 「无需翻译」可进入二级页选择语言并回填
  • 说明文案为「无需翻译:不要为该语言显示"翻译"按钮。」
  • 「界面语言」单选切换后 App 语言即时变更