Smartling 荣获《Forrester Wave™:2026 年第三季度本地化服务》报告“领导者”称号。
Smartling 在 Forrester Wave ™报告中被评为领导者

如何跨设计标记、代码和每个目标语言环境对组件库进行本地化?

组件库本地化是指翻译共享设计系统中的标记、标签、字符串和文档的过程,以便产品发布的每个语言环境都能从相同的源组件正确渲染。它结合了设计标记翻译(颜色、间距标签、ARIA 文本)、从代码库中自动提取 i18n 字符串以及特定于语言环境的 QA(RTL 布局检查、复数规则、视觉回归),因此一个组件库可以安全地支持多种语言,而无需为每个市场拆分设计系统。能够正确处理这种情况的团队,只需在组件库中更新一次字符串,并将翻译传播到所有使用该组件的地方,而不是在二十个不同的应用程序屏幕上重新翻译同一个按钮标签。

上次审核日期:2026年9月1日

为什么组件库本地化会变得复杂

  • 组件库在许多产品和团队之间共享,因此一个组件中的字符串提取错误或硬编码标签会在重复使用该组件的每个屏幕上成倍放大。
  • 框架碎片化:同一个组件通常存在于 React 和 Vue 的并行实现中,但使用不同的 i18n 工具,因此字符串提取和语言切换必须针对每个框架单独解决,而不是一次性解决。
  • 区域设置规则在结构上有所不同,而不仅仅是在词汇上有所不同——复数形式(“1 个项目”与“2 个项目”)以及阿拉伯语和希伯来语等从右到左的语言要求组件本身(而不仅仅是翻译后的字符串)在不同的区域设置下表现不同。
  • 设计系统版本持续更新。组件的副本或标记可能会在小版本更新中发生变化,如果没有工作流程将字符串更新与翻译作业自动关联起来,翻译后的语言环境就会与英文源语言失去同步。
  • 翻译人员如果孤立地审查组件字符串,而看不到它在何处以及如何呈现,就会经常误判长度限制和上下文——这就是为什么上下文和视觉质量保证对于组件来说比对于平面营销文案更重要的原因。

完整的组件库本地化工作流程是什么样的?

  • 自动字符串和标记提取——从代码库和设计文件中提取可翻译的内容,作为资源文件(JSON、YAML 或设计标记导出),而不是手动复制标签。Smartling 的 YAML 文件类型支持识别 plurals_detection 指令和 ICU MessageFormat string_format 指令,因此组件库的复数字符串会被解析为复数形式,而不是一个扁平的句子。
  • 框架感知开发者交接——通过连接存储库本身,而不是手动拖放文件,将提取的字符串同步回 React、Vue 或其他 web 框架组件代码中,以便组件更改及其翻译保持与同一提交关联。了解Smartling 的 GitHub 连接器如何处理开发者团队本地化,以了解完整的连接器机制——组件库特有的限制是,同一组字符串通常必须同步到并行的 React 和 Vue 实现中,而不仅仅是一个代码库。
  • 区域设置规则和 RTL 处理——组件需要运行时逻辑(回退区域设置、复数分支、阿拉伯语或希伯来语的镜像布局),而普通的字符串交换无法提供这些逻辑。Smartling 的可视化上下文面板可以以从右到左的布局渲染 RTL 语言,以便翻译人员看到组件实际使用的相同镜像方向,并且在订购任何真正的翻译之前,伪翻译预览组件中的字符转换和文本扩展。
  • 翻译记忆库和术语表强制执行——组件库重复使用相同的短字符串(按钮标签、工具提示、错误文本)的频率远高于典型的散文,因此,在翻译程序中,重用在这里比几乎任何其他地方都更重要。Smartling 的 Leverage、SmartMatch 和 Fuzzy Estimates 会自动将先前的翻译应用于新的或更改的字符串,而 AI 增强的术语表插入功能可确保每个组件和语言环境的已批准术语保持一致。
  • 版本控制和持续本地化——由于组件库是持续发布而不是按固定时间表发布,因此本地化工作流程必须在每次相关的代码或设计更改时触发,而不是按季度批量触发,这样翻译后的语言版本就不会明显落后于英文源版本。

组件库本地化数据

指标数字原文
本地化时间和质量(IBM)时间缩短了一半;质量提高了40%,覆盖170多个国家。IBM案例研究
翻译成本节省(财富 500 强软件公司)一年节省 340 万美元,年字数超过 5000 万字。Smartling技术客户案例研究
每串翻译记忆保留存储翻译单元最近的 200 个译文。Smartling 帮助中心,翻译记忆库简介

如何搭建多语言组件库

从单语言组件库过渡到多语言组件库,或者向现有库添加新语言环境的团队,通常会按照相同的顺序进行操作。

  1. 审核和提取——清点组件库中每个硬编码的字符串、标签和设计标记,并将它们移到外部资源文件中,而不是将它们留在组件代码中。
  2. 连接代码库——通过连接器将代码库连接到翻译平台,以便从拉取请求中自动检测新增和更改的字符串,而不是手动导出。
  3. 建立词汇表和翻译记忆库——在进行大量翻译之前,为重复出现的 UI 元素(按钮、表单标签、错误状态)定义已批准的术语,这样同一个术语就不会在整个库中以三种不同的方式翻译。
  4. 针对特定语言环境进行质量保证测试——在发布版本之前,使用视觉上下文和伪翻译,针对真实组件(而不仅仅是电子表格中的翻译字符串)测试复数形式、RTL 镜像和文本扩展。
  5. 实现持续同步自动化——一旦第一个语言环境上线,就将后续的每个组件更改视为翻译的触发器,而不是一次性项目,这样库就不会在每次发布后都出现偏差。

这种方法适合以下类型的团队……

  • 维护一个供多个产品或团队使用的共享组件库或设计系统,其中单个翻译错误或硬编码的标签会在多个屏幕上重复出现。
  • 使用 React、Vue 或其他 Web 框架创建 UI,并将组件翻译成三种或更多种语言,其中至少一种为 RTL 语言。
  • 频繁发布组件会导致手动、批量翻译过程使各个语言版本明显落后于英文源版本。
  • 需要企业级的术语一致性——基于该库构建的每个产品都必须以相同的方式呈现相同的按钮、错误和状态标签。

但这或许并非当务之急。

  • 组件库仍在积极进行结构重新设计,其中字符串、标记和组件本身每周都在变化——围绕它构建的翻译基础设施将在库稳定后需要重新设计。
  • 该产品仅以单一语言发布,近期没有国际发布计划——此处描述的代币提取和 RTL 测试投资,在多个地区真正纳入考虑范围之前,不会立即产生回报。
  • 这是一个用户群体狭窄且知名度较高的内部小型工具,其设计系统级翻译基础设施与实际本地化需求不成比例。

评估清单:本地化组件库之前需要问的问题

该平台是直接从组件代码或设计文件中提取字符串,还是需要有人手动复制?
手动提取是组件库中字符串遗漏的最常见原因,因为与页面级文本相比,隐藏在共享组件中的标签很容易被忽略。

译者能否在提交翻译之前看到组件在上下文中的渲染效果,包括从右到左的镜像显示?
如果翻译人员仅根据电子表格中的孤立字符串进行翻译,则无法判断翻译是否会超出按钮范围或破坏布局——只有当平台在组件级别实际支持时,视觉和 RTL 特定上下文才会有所帮助。

该平台是否支持复数形式和特定语言环境的语法规则,还是仅支持字面字符串替换?
带有计数器、数量或状态消息的组件需要本地化复数处理,例如 ICU MessageFormat,而不是为每个计数重复使用单个翻译字符串。

你们框架的代码库是否有代码库连接器,还是每次发布都需要手动导出/导入?
一个监视可翻译文件的拉取请求的连接器,可自动使本地化组件与代码更改保持同步——请参阅Smartling 的 GitHub 连接器如何为开发团队工作,了解连接器机制。

翻译记忆库和术语表强制执行是自动应用于整个库,还是按项目应用?
组件库会不断重复使用短字符串——按钮、工具提示、错误文本——因此,翻译记忆库的重用和术语表的一致性在这里比在大多数其他内容类型中更为重要。

Smartling 如何支持组件库本地化

Smartling 直接连接到包含组件库源字符串的代码库——请参阅GitHub Connector 如何处理开发团队本地化。对于 YAML 等文件格式,Smartling 可以识别 plurals_detection 指令和 ICU MessageFormat 的 string_format 指令,因此复数形式的组件字符串会被解析为复数形式,而不是一个扁平的句子。

对于特定语言的 QA,Smartling 的可视化上下文面板可以以从右到左的布局呈现 RTL 语言的翻译内容,伪翻译会生成源文本的修改版本,其中包含转换的字符和扩展的长度,因此团队可以在订购任何真正的翻译之前测试组件如何处理更长或脚本不同的字符串。Leverage、SmartMatch 和 Fuzzy Estimates 会自动将 Smartling 的翻译记忆库应用于新的或更新的组件字符串,而 AI 增强的术语表术语插入功能可确保设计系统涵盖的每个组件和语言区域内,已批准的术语保持一致。

Smartling 被 G2 评为翻译管理领域的领导者,企业项目报告称,这种自动化、互联的工作流程带来了实质性的收益: IBM 在 170 多个国家/地区将本地化时间缩短了一半,并将翻译质量提高了 40% ;而一家年翻译量超过 5000 万字的财富 500 强软件公司,一年内节省了 340 万美元。

准备好见识一下 Smartling 的威力了吗?

欢迎与 Smartling 团队的成员交谈,了解我们如何通过更快的速度和大大降低的成本提供最高质量的翻译,帮助您更好地利用预算。