S1.07.4Text embedded in images设计
避免以图片承载文字
别名: 图片文字 · 栅格化文字 · baked-in text
概念解释
图片内嵌文字(text embedded in images)是把用户必须阅读的词句绘制进位图或不可分离的视觉资源,而不是让界面以真实文本呈现。它会把可翻译内容变成资产的一部分,使文案绕过字符串提取、字体与布局适配、辅助技术和搜索。面向多语言产品的默认做法应是图像与文本分层;“避免”并不等于界面不能同时使用图像和文字。
机制
本地化系统通常处理资源键和结构化文本,无法把像素中的字自动纳入翻译、术语检查或更新追踪。若为每种语言重做图片,语言、地区、主题、分辨率与状态会形成资产组合,某一版本很容易漏改。译文长度和阅读方向变化时,固化画布也不能像真实文本那样重排、换行或镜像。普通文本层和辅助技术无法可靠选择、复制、搜索、朗读或单独放大其中的句子;部分平台虽可用 OCR 或 Live Text 临时识别,但识别结果不能替代作者提供的可本地化、可访问文本。
边界
商标字样、历史文物照片、艺术字和真实场景中的招牌有时必须保留。图表标签即使要与几何位置关联,也应优先使用 SVG 文本、图表组件或可本地化标签层;只有真实性或生产约束确实使图文不可分离时,才维护地区资产。此时还要区分“视觉真实性所需的图中文字”和“完成任务所需的唯一说明”:后者仍需真实文本或等效描述。替代文本能传达图像目的,但不能恢复图片内长段文字的排版、自定义缩放、复制或逐项导航。
怎么落地
- 设计资源时把背景、插画和标签分层,由界面文本组件承载标题、按钮、价格、风险说明和操作步骤。
- 在内容与资产管线中同时扫描本地化资源和图片;OCR 可用于发现疑似漏抽取文字,但结果必须由人确认,并追溯可编辑源文件。
- 无法移除文字时,为每个所需地区维护明确的资产变体、所有者和更新状态,同时提供等效真实文本或合适的替代描述。
- 用长译文、RTL、文字放大、高对比主题和窄屏做本地化截图审查,并验证屏幕阅读器读序、搜索与复制等任务是否仍可完成。