S1.07.4Text embedded in images设计

避免以图片承载文字

别名: 图片文字 · 栅格化文字 · baked-in text

概念解释

图片内嵌文字(text embedded in images)是把用户必须阅读的词句绘制进位图或不可分离的视觉资源,而不是让界面以真实文本呈现。它会把可翻译内容变成资产的一部分,使文案绕过字符串提取、字体与布局适配、辅助技术和搜索。面向多语言产品的默认做法应是图像与文本分层;“避免”并不等于界面不能同时使用图像和文字。

机制

本地化系统通常处理资源键和结构化文本,无法把像素中的字自动纳入翻译、术语检查或更新追踪。若为每种语言重做图片,语言、地区、主题、分辨率与状态会形成资产组合,某一版本很容易漏改。译文长度和阅读方向变化时,固化画布也不能像真实文本那样重排、换行或镜像。普通文本层和辅助技术无法可靠选择、复制、搜索、朗读或单独放大其中的句子;部分平台虽可用 OCR 或 Live Text 临时识别,但识别结果不能替代作者提供的可本地化、可访问文本。

边界

商标字样、历史文物照片、艺术字和真实场景中的招牌有时必须保留。图表标签即使要与几何位置关联,也应优先使用 SVG 文本、图表组件或可本地化标签层;只有真实性或生产约束确实使图文不可分离时,才维护地区资产。此时还要区分“视觉真实性所需的图中文字”和“完成任务所需的唯一说明”:后者仍需真实文本或等效描述。替代文本能传达图像目的,但不能恢复图片内长段文字的排版、自定义缩放、复制或逐项导航。

怎么落地

  • 设计资源时把背景、插画和标签分层,由界面文本组件承载标题、按钮、价格、风险说明和操作步骤。
  • 在内容与资产管线中同时扫描本地化资源和图片;OCR 可用于发现疑似漏抽取文字,但结果必须由人确认,并追溯可编辑源文件。
  • 无法移除文字时,为每个所需地区维护明确的资产变体、所有者和更新状态,同时提供等效真实文本或合适的替代描述。
  • 用长译文、RTL、文字放大、高对比主题和窄屏做本地化截图审查,并验证屏幕阅读器读序、搜索与复制等任务是否仍可完成。

延伸

  • 同组S1.07.1 避免习语、双关与文化梗 · S1.07.2 句子结构简单可显著降低歧义 · S1.07.3 术语在源语言内先保持一致
  • 相邻S1.01 文案膨胀与布局弹性 · S1.03.3 彩色表情与图片替代文本
  • 站内检索baked-in text · image localization · live text overlay

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/S1.07.4