Semi Design 组件国际化（i18n）设计思路和方案

背景：为什么 Semi 要做组件国际化（i18n）设计？

i18n 是单词国际化 internationalization 的缩写，除了首字母 i 和尾字母 n，单词中间还有 18 个字母，为便于易读和沟通，“国际化”在行业内会被叫做“i18n”，以下行文中也统一使用 i18n 进行描述：

Semi Design 之所以想要做 i18n 的能力优化，有以下三个方面的主要原因：

一是 Semi 的用户需求和呼声：

2025 年伊始，我们对于 Semi 的一部分用户（以开发和设计师为主）进行了小范围的、深入的访谈和调研。我们收到了一些呼声，即：在做组件的时候，对于组件国际化的设计有强烈诉求。

二是全球化浪潮已成为大趋势：

在全球化的浪潮下，越来越多的企业选择跨国经营，海外市场的拓展不仅是企业增长的战略需求，也是应对国内市场饱和、经济波动等风险的重要方式。面对这一趋势，企业必须积极调整战略，提升产品和服务的国际竞争力，以确保在全球市场中占据一席之地。

三是产品的用户体验水位升高：

在数字化产品的设计中，语言习惯与界面交互的适配是确保用户获得良好体验的关键因素。不同国家和地区的语言习惯存在显著差异，这些差异会影响用户与界面的交互方式和效率，而当下的用户对于产品的体验质量的要求也日益提升，作出全球通用、质量合格的产品也是大势所趋。

策略：我们如何做 i18n 的组件设计？

我们经过大量的资料调研，总结出与 i18n 产品用户体验设计相关的六个主要的影响因素，分别是：文化差异、语言特性、市场环境、用户习惯、政策法规、技术环境。举几个例子：

1️⃣ 语言特征

我们能看到不同语言文化字体的长度和高度都不尽相同，这就会对整个界面的排版布局造成一定的影响；而阿拉伯语、希伯来语等语言采用从右到左（RTL）排版，导致界面布局需做镜像调整：

2️⃣ 市场环境

市场因素也对产品设计起到关键的影响作用。我们以下图中的支付产品为例，在中国，激烈的市场竞争促使开发者不断添加新功能以吸引用户，通过功能叠加争夺用户时间，增加用户粘性；而在欧美，由于市场成熟度较高，产品更注重核心功能的深度开发和服务的专业性，单一产品提供单一功能：

3️⃣ 用户习惯

不同国家的用户对界面交互的模式和需求是不同的。我们以表单中常见的地址填写为例，日本是从大到小排列和填写顺序，先是省，然后再是市，最后才各家各户；而巴西是从小到大排列的顺序，显示街道，再是各家各户，然后是城市、地区：

不同于 l10n（本地化，localization）是针对每一个地区都去做的个性化的产品体验方案，对于 i18n，我们在做的其实是对所有的文化做的一个融合、包容的通用基础体验，是去避免因为当地一些文化、政策、市场等因素所带来的不可用的、不友好的体验对产品造成的影响，而不是单纯地针对某一个文化去做本地化的调整和个性化的方案：

成果：我们完成了哪些调整和输出？

我们就来看几个在做 i18n 设计时常会遇到的问题：

Q1. 文案被翻译翻译成其他语言后，内容特别长，该怎么办？

我们对 Semi 组件中可能涉及到这一问题的元素做了改动，如下图所示：

• 当元素的宽度和高度都不建议被扩展时，多余的文字会用省略的符号“…”去做代替，在做这个组件长度延伸或缩进的变化时，它都可以去自主协调和适配；

• 当元素的高度可以进行扩展时，我们建议使用折行的方式来进行展现，也即当这个组件的宽度缩短时，它的高度可以去做不停地延展：

• 当一些元素的内容它不建议被折叠时，我们也建议将文案内容全部展开显示。如下图所示的两个案例：一是侧边导航，具有一个强引导性功能，建议直接展示具体内容；二是数字，如果位数很多，也不建议用折叠的形式去做呈现：

与以上内容类似的组件使用规范和建议，我们都在 Semi 的官网上涉及到 i18n 场景的 24 个组件的设计规范中进行了更新和说明，便于大家在使用组件时进行参考：

另外，我们也针对不同国家和地区的文案排版布局、页面信息呈现方式等方面做了更加详细的介绍，大家可以通过阅读文档：i18n 文字设计规范 ，i18n 信息呈现规范 获取到相关的建议。

Q2. 在做 RTL 的设计时，有哪些注意事项？

不同的国家与地区有不同的阅读顺序习惯，在产品设计中，主流的阅读顺序分为如下两种：

• 从左到右（Left-to-Right）：这种阅读顺序是最常见的，如中文、英语、法语、德语、西班牙语等。

• 从右到左（Right-to-Left）：这种阅读顺序主要用于阿拉伯语、希伯来语和波斯语等。

由于阅读顺序习惯的影响，RTL 语言的界面设计与 LTR 语言的界面设计存在显著差异。我们来看几个例子：

1️⃣ 页面核心视觉区域位置变化

我们在去做排版的时候，因为需要从右到左去阅读的内容，因此关键的核心内容可以放在页面的右上方，确保信息按照逻辑顺序排列，以符合用户的阅读习惯：

2️⃣ 专有名词的写法顺序变化

一些专有名词也需要跟 RTL 这种阅读的方式一样去变换写法的顺序。比如日期的写法、一些 tag 的展示方式等等：

3️⃣ 图片/ icon 元素方向变化

还有一些图片或者 icon 是由方向性的元素组成的，也需要做一些调整。比如下图中的购物车 icon 就是有方向性的，因此在 RTL 的场景中需要更改方向；而茶杯 icon 是没有方向性的，所以就不需要做更改：

我们也针对以上内容，对于 Semi 的 icon 库里所有带有方向性的元素都进行了方向的调整或翻转，大家可以直接将 Semi i18n icon 库加载到自己在做设计的稿子里直接调用 icon 来进行应用。当然我们也对 RTL 场景下的 icon 和图片的排版和使用规则做了一些规范指导，供大家在设计时参考：i18n RTL 设计规范。

Q3. 在做 i18n 的视觉设计时，有哪些注意事项？

当我们去做 i18n 的视觉元素设计时，也有一些文化禁忌和设计规范是我们需要去了解的。比如以下两个例子：

1️⃣ 图案的认知和禁忌

如下图中的这三个动物：

• 猫头鹰：在阿拉伯地区，它可能代表一些不好的运气，因此在欢庆、大促等场景中就要避免使用；
• 猪：在穆斯林地区，它会被认为是不洁净的，因此在餐厅、食物相关的设计中要避免使用；
• 狗：在泰国，它被认为是一个不吉祥、不吉利的，因此在祝福等场景中就要避免使用：
  

2️⃣ 人物的多样和包容

如下图中这两组人物图片的设计，第二图片中的人物会更加符合我们 i18n 的设计场景，因为图中的人种和性别的选择更加丰富：

我们在做设计的过程中还有很多类似的注意事项，我们也总结出了相关的经验文档，来帮助大家去更好地去完成 i18n 的图形设计和视觉化呈现，你可以阅读：i18n 图形设计规范。

Q4. 在做完 i18n 的设计稿后，如何与开发交接？

当我们在 i18n 的设计需求中与开发对接的时候，可以分两种情况：

1️⃣ 已经有了英文 / 中文的一个设计稿的版本

这种情况下，理论上你直接把这个英文/中文的版本交给开发，让他去使用 Semi 的组件在代码层面做语言变体就可以了。对于 SEMI 组件来说，开发那边也已经成功地接入了所有的 i18n Token 和规范了：https://semi.design/zh-CN/other/locale

2️⃣ 你是在做一个新的设计稿，需要用日语或者韩语来做

这种情况下，你可以通过加载Semi Design 新增加的 i18n 的 Text Token，这个 Token 支持日文、韩文、阿拉伯文、西班牙文、泰文这五种常见的语言文字的应用，字体样式、行高、字间距等数值都是已经设定好的，可以为你的设计提供最大通用性。

另外，我们也建议：

不论你是把设计稿交给了开发之前，还是开发的页面已经上线后，你去做设计走查，我们都建议你去检查以下内容：i18n 信息呈现规范 ，对所有的设计细节进行校验。

如果你还对 i18n 设计有任何的问题，或者有组件设计上的一些需求和建议，也可以随时联系我们，期待你的宝贵建议。

感谢 @邵颖 @邢旭东 @程诺 @王欣悦 @刘聪 对本项目在设计研究上的支持，以及@张玉梅 @林艳 在开发上的支持。