一、背景

产品要在全球不同区域发布，就绕不开「国际化」和「本地化」两个概念，二者背后有不同的处理逻辑。

国际化（Internationalization），简称「i18n」，是指用一套产品方案，来面对不同地区的用户，意味着兼容，产品开发成本低。

本地化（localization），简称「l10n」，是指产品为特定地区进行特殊定制，匹配该区域的语言文字、当地文化与社会习惯等，针对性地进行本地运营。

在具体的产品中只有均衡二者才能更好服务全球不同文化背景的用户。

二、目的

世界是多元化的，不同地区之间存在诸多差异，诸如文化习俗、语言体系、社会习惯、政策法规，如果仅凭借对中文产品的接触习惯来做的国际化产品，中文看起来完美合理的设计，却不一定符合其他国家地区的用户使用习惯，给用户带来认知障碍，便很可能遭遇「水土不服」，惨淡收场。

本文对国际化和本地化设计中的多语言设计常遇到的问题进行归纳总结，遵循相关设计要点，有效提升产品和应用的全球化质量，保证信息可以清晰明确的传递给不同文化背景的用户。

三、语种差异

语言和文字的差异最直观地体现了全球多元文化，这里我们只探讨对界面设计造成比较大影响的差异，并探讨这些差异是如何对界面设计造成影响。

通过对不同语言文字进行归纳总结，我们发现文字主要有四个差异：

字符形态、信息密度、词汇分界、阅读顺序。

1.字符形态

字符是语句的基本构成单位，不同的文化发展背景下诞生出了形态各异的字符样式，而有部分语言会共用一套字符体系，比如英文、法文等都用的是拉丁字母。按照不同的文字形态基本可以分成以下四种类型：

拉丁字母，以英语、法语、德语为代表

西里尔字母，以俄语、乌克兰语为代表

方格字，以汉语、日语、韩语为代表

复杂图形字符，以泰语、阿拉伯语为代表

拉丁字母和西里尔字母都由希腊字母演变而来，二者同源，字符笔划相对简单，通常由直线或者规整弧线构成。

而像阿拉伯字母、泰文等字符，具有更多复杂组成和特殊曲度，这些会影响字体的选择，进而影响文本的可读性。

以汉字为代表的方格字是等宽字符，笔划也较多，整体视觉感受比其他类型的字符大。

在相同字体、同等字号下，由于笔画复杂的程度以及字符结构，不同语种的字符的视觉大小也不一样，并且某些字符会带有发音符号，这差异也会影响字符在行文排版时的负空间大小。

下图是同一字号下不同语言文字对比，不难发现方格类字符比其他类型的字符视觉感受要大，泰文相对拉丁字母来说也比较小。

2.信息密度

不同语言文字的信息密度是不一样的，换句话来说，同样含义的内容进行翻译后，得到的文本长度可能会有较大的差异。

如何通过设计兼容这些信息，正是做多语言设计最大的难点所在，而且这个差异带来的挑战在产品国际化的设计过程十分常见。

以下是在“发送邮件”的相同含义下，不同语言文字的文本长度对比，可以看到中文的文本长度比日文、英文、俄文、泰文要短，俄文的长度甚至几乎是中文的4倍。在更复杂的国际化产品中，这个差异可能会更明显。

3.词汇分界

语言还分为带有词汇分界和不带有词汇分界两种情况。带有词汇分界的语言有英语、俄语等，分界意味着他们的语句以单词为最小单位。而中文、泰语等语言是没有分界的，一个语句中除了标点符号分隔，字符都是相连的。

词汇分界影响着段落的布局排版，有词汇分界意味着，当文本需要换行时，需要避免从词汇中间截断换行，只能在词汇分界处换行，段落尾部无法对齐，影响美观程度，增加了阅读难度。

4.阅读顺序

阅读顺序分为 LTR (Left to Right)和 RTL (Right to Left)两种。

我们常见的绝大部分语言都是从左到右的阅读顺序，像是中文、英语、法语、德语、西班牙语等在内的许多语言。

还有一些语言上是从右到左的阅读顺序，例如，阿拉伯语、希伯来语等。不同的阅读顺序，决定了布局时信息对齐、元素排布、甚至图标图示，都可能存在不同的规则。

下图是分别是LTR语言和RTL语言下的iOS系统设置界面。

关于不同语言文字的差异点还有很多，以上的四点只是对界面适配设计影响最大的。下面的设计建议就是围绕如何解决文字差异化带来的适配问题。

四、设计建议

1.字体选择

首先选择一款合格的全球化字体

，确保该字体支持的语言数量要足够多，同时还要满足不同语言的字符可读性和可识别性。建议设计师可以选择系统提供的默认字体，因为无论是苹果、安卓还是微软，它们在全球化字体的优化上做得都比较完善、成熟，具体的字体使用可以查阅相关系统的设计开发文档。

谨慎使用斜体，其一是不能保证所有语言文字都支持斜体，其二是斜体有可能造成某些语言文字难于阅读。

字重选择需要克制，设计师常常使用不同字重文字塑造不同层级，但我们无法确保不同语言的文字都有对应的字重，以苹方为例，简体中文支持六款字重，从Ultralight到Semibold，其他语种的可能只有三款字重。如果使用的字重层级过多，在中文状态下，字体的层级分明，但切换成其他语言（字重少的），字体层级可能会丢失。

除网页超链接外，不建议界面文本使用下划线，因为某些语言字符下方添加会发音符号比如阿拉伯文、西城文，下划线会影响字体可读性。

2.字号和行高

前文提到在同等字号下，不同语言字符的视觉大小是不一样，比如汉字会比拉丁字母要大，所以字号和行高也要相应做调整。

对于本地化产品，可以只考虑本地语言字符的特性，针对性进行设计，比如国内的产品，只需针对中文做设计；对于国际化产品，遇到的场景较为复杂，需要适配的语言较多时，如果针对每种语言文字单独做设计的话，设计和开发的工作量会非常大，这时我们可以基于产品用户群体量级最大的语言文字为准来制定字号以及行高。

在多语言环境下，同一文本长度不确定，有可能是单行，有可能是双行，因此建议单行文本和多行文本统一行高，可以以字号+8为基础来设置行高，对于大段文字，可以适当增加行高保证阅读的舒适性，标题适当减小行保持紧凑性。

3.布局

谨慎使用横向布局，因为不同语言下的文本长度的不确定性，有可能导致某些语言下，文本空间不足而出现显示错乱、重要信息被省略以及换行导致信息对齐等问题，但也不是绝对的，布局方式的选择，需要视功能的实际场景确定。

横向布局的好处在于节约纵向空间，在信息不长或者横行空间较大的情况下仍可以使用。如果使用上下排列的方式，文本容纳的空间也将会更大，换行时的显示效果会相对更为可控，缺点是会占用过多的竖向空间。

4.空间预留

如果实际的功能场景更合适使用横向布局，或者遇到一些定宽组件，需要我们提前考虑文本的预留空间，保证尽可能信息的露出，避免用户无法理解内容，产生困惑。

中文是信息密度相对来说较高的语言文字，其他语言文本长度会大于中文场景的文本长度，因此不建议用中文的文本长度作为标准来预留文本空间。

建议以英文为基础进行设计，可以更直观地处理和判断信息的兼容性，同时预留35%的文本拓展空间，可以避免翻译成其他语言时文本空间不足。

5.文本内容溢出

即使我们使用竖向布局或者预留足够的文本空间尽量避免文本内容溢出，有时候也会因为设备适配（比如小屏适配）、某一语言下（俄文）文本依然超长等复杂问题，导致文本内容和预留的空间冲突，针对这种不可控的文本溢出的解决方式有四种：

精简文案；超出内容省略；通过交互弥补空间限制；允许有限/无限制地换行；

精简文案：和翻译协商是否能使用更精简的文案，这种情况一般适用于固定写死的文本，比较局限。

超出内容省略：这种情况适用于该文本的重要程度不高的情况，而且这些被省略的信息都可以在下一层级的页面得到完整的展示。

通过交互弥补：Web端可以通过鼠标悬停、表示省略说明的图标（比如更多或者问号）、或者滚动显示（比如公告栏）完整的信息。

允许换行：通过换行显示更多文本内容，要预留换行的空间。

使用哪种方案需要根据实际的情况决定，核心是在保证意图能清晰地传达的前提下，给用户提供更好的用户体验。

6.文字对齐

如前文所说，不同语言在书面上的最小单位不同，为了更好的兼容各种情况，建议多用左对齐。因为像英语这种按单词分界的语言，很难保证每行内容宽度一致，并且中文常用的两端对齐的效果也并不能适用。多语言场景段落的左对齐相比居中对齐，更能带给用户较好的阅读体验。

7.RTL语言设计

在RTL语言中，阅读顺序是从右到左的，这与我们常见的从左到右（LTR）布局截然不同。因此，在设计RTL语言时，必须充分考虑这种阅读顺序的差异，以确保用户能够轻松地阅读和理解内容。可以把RTL粗略得看作LTR的整体界面水平镜像，但也有例外。

对齐方式：右对齐，包括文本、控件都是右对齐方式。

文字：LTR数字、不需翻译的外文，阅读顺序依旧是从左到右，但对齐方式需要按照RTL语言的右对齐方式。

图标：少部分图标不需要镜像，比如不传达方向的图标、logo、映射真实世界的图标、反斜线以及左右对称的。

8.图标

图形需要满足认知包容性，可以多去观察成熟的全球性产品，何时会使用到纯图标的场景，又使用了什么样的图标。基础图形如代表播放的三角形、代表喜欢的爱心型，都是比较具有大众共识的。

另外一些本身模拟了常见物品的图标，也不容易出错，如代表录制的摄像机、代表搜索的放大镜等。

同时需要注意，尽量不要在图标上直接应用文字，因为文字图标只在对应的语言下才有意义，适配其他语言时，就失去了其意义；也要避免出现货币、旗帜这些带有强烈国家/地区特征的符号。

9.视觉动线对齐

当页面中包含多类信息时，应保持同类信息的视觉动线是对齐的，以提高用户浏览信息的效率，比如卡片里，应保持标题和内容各自水平对齐。

当一个卡片模块中有多类信息并存时，需要关注重要信息的水平对齐，确保阅读动线的流畅，便于用户获取信息。

10.图文分离

如果项目没有多语言的需求，我们有时候会直接将图片连同文本一并切给开发，但在多语言环境下，如果还是将文本直接嵌入图片，我们则需要对图片中所有的文本翻译替换后导出，这不仅会增加开发成本，而且也会增加应用的大小。

对于图片中的文本内容进行单独处理，使图片和文本之间分离，文本用代码去实现，便于替换，这样就可以在不替换图片的情况下，通过代码替换字符串来满足多语言的需求。

11.地区标准

国际标准化组织已经尽可能的将标准进行统一，但由于各种复杂原因，不同地区之间也存在不同的标准，对于国际化的部分，建议采用基于国际标准显示，对于本地化的部分，需要充分尊重该区域的标准显示。

基于 ISO 标准显示：日期、数字、货币、语言、复数、性别、键盘布局、区域代码等。

五、组件设计

1.弹窗按钮

表意复杂的弹窗按钮，文案大概率会比较长，我们可以将弹窗按钮上下排版，谨慎使用左右排版，确保按钮文案有较多的空间展示。

2.标签TAB

标签式Tab比纯文字Tab更具可感知性和灵活性，在国内，对于多个平级内容组的切换控件，大家第一反应便是Tab选项卡。tab选项卡根据选项在容器中的排布方式，可以分为等分式及滚动式两种类型。

但这两种类型在多语言设计中都有一些局限性。如等分式的tab可能会出现某个选项文案过长而溢出的情况；而滚动式tab，通过间距分割不同选项，当文案过长或选项过多时，右侧边缘无法露出文字导致用户无法感知这里其实可以右滑查看更多选项。

因此，多语言设计中建议使用标签形式选项卡。首先这种形式对文案的长度没有什么限制，因此更灵活；同时标签形式是通过线框或者面分割每一个选项，选项之间排列更紧密，出现右滑滚动时选项更容易被用户感知。

3.按钮组合

竖排的按钮组合相比横排按钮，按钮内的文本拥有足够的宽度，能兼容更多信息，因此在多语言产品下的使用会更为广泛。

4.公告栏

在移动端的多语言产品中，通知栏组件一行容纳不下全部文案的情况非常常见。在文本超出通知栏宽度的情况下，需要灵活使用信息横向滚动、或是带操作的方式，允许用户进入下一级或配合气泡、弹窗，确保用户有办法能获知完整内容。

5.表单

常见的表单输入框，通常为了保证右侧输入区域的内容展示，会牺牲左侧字段标题的宽度，而导致左侧文本需要省略或折行，在多语言的情况下，会使得左侧的空间更加局促，以下是几个常见的解决方案。

标题和内容横向排版，标题超长则进行换行处理，节省纵向空间，缺点是标题和内容的文本空间比较局促。

将标题放置在输入提示词，比较简洁，但标题和内容只能同时存在一个，适用于表单项较少的情况，表单项较多的话会降低信息的易读性。

标题和内容竖向排版，可以保证无论是字段标题还是输入内容均可以在足够的宽度内完整展示，缺点是会牺牲纵向空间。

Powered by Froala Editor