多语言适配分享会演讲稿

前

寒暄：

今天的话主要是分享针对出海项目的多语言适配方案。

信息架构讲解：

将整个拆分为：为什么？是什么？怎么做？

中

为什么？

概念补充

在认识出海产品时，我们常常会听到“国际化”和“本地化”两个概念。在信息技术领域的官方定义下，对产品进行国际化(i18n)与本地化(L10n)处理的含义是，通过修改软件，使之能适应目标市场的语言、地区差异以及技术需要。

两者概念区别有些微妙，我们或许可以用更简单的说法来解释——“国际化”意味着兼容，即用一套产品方案，来面对不同地区的用户，这叫实现产品的“国际化”。而“本地化”意味着定制，需要根据不同地区特性，进行分别处理，这叫“本地化”处理。两者的共同实现，才能更好地服务拥有不同文化背景的用户们。

海外用户心浪

在设计在过程中，大多是从国内用户视角出发，从海外用户的视角切入，看看是否会有不同的发现。

从Quora（美国知乎）的诸多提问可以看出，正如很多国内用户疑惑为什么Google的网站那么简单，海外用户也同样纳闷中文界面为啥这么复杂，基于这些困惑，一些海外用户也尝试给出了他们的观点。如下图

转场：那为什么会有一个现象呢？可以从隐形差异和显性差异2个角度来进行剖析

产品理念不同

如上图对比可以看出，Google的整体界面都是围绕“搜索”这一核心功能来展开的，没有其他多余的信息，把搜索功能做到的简单直接。而百度则打造了一个聚合的平台，在这里它不仅是一个搜索工具，还可以满足网盘、理财、生活娱乐等多个维度的诉求。两者相比，Google是搜索这个特定的功能，而百度则是承载搜索和生活相关功能的平台。

产品理念的不同，导致两个都是从搜索功能切入的产品，在最终呈现上差异巨大。

教育方式不同

因为接受到的教育方式不同，导致思维习惯的差异。国内的用户在浏览信息时，会进入一种数据采集模式（Data Acquisition Mode），这种模式更容易接受和记忆繁多的信息数据，而西方人更擅长理解步骤加动手操作，在面对铺面而来的大量信息时遍难以招架。

这种差异让海外用户对于功能明确，内容聚焦的产品接受度更高，对于大而全的产品则不太适应。

信息内化

汉字传递的信息熵值（）---表示汉字出现冗余或者重复的概率比较高比英文更高，这个差异让从小以汉字为母语的人对压缩度高的信息有着快速内化的能力。

但是高信息密度的内容对西方用户来说很难适应，这也影响到界面的设计思路，简洁直接的内容更符合欧美用户的语言习惯。

补充概念：熵值：任何信息都存在冗余，冗余大小与信息中每个符号（数字、字母或单词）的出现概率或者说不确定性有关

讲完隐形的文化环境变化，那显性的文字有什么差异？

可以把显性原因拆分为4个部分：字符形态，内容长度，词汇分界，阅读顺序

体积感不同

汉字是在田字格中书写的文字，早期为竖向排列，这让汉字逐渐形成四周都有边距的方格子形态，体积感很强。

英文则是横向排列的，只需考虑左右边距，整体横向拓展，体积感知上会弱一些。

基于这个差异，排版时会感觉同等字号的英文比中文要小一些。

常见的字符体系

字符是语句的基本构成单位。不同的文化发展背景下诞生出了形态各异的字符样式。而部分语言会共用一套字符体系。常见的字符体系有如下几种类型。

字符形态观察

从图形的角度分析这些字符的形态，不难发现，像拉丁字母以及西里尔字母，字符笔划构成相对简单，且笔划多为平直线条或是规整的弧线。而像阿拉伯字母、泰文等字符，组成相对复杂，笔划线条特殊的曲度较多。

内容长度差异

在不同语言下，同样含义的内容进行翻译后，得到的文本长度可能会有较大的差异。如何通过设计兼容这些信息，正是做多语言产品最大的难点所在。

因此，在多语言设计阶段，非常建议基于英语进行设计(善用谷歌翻译)，以便于更直观地对信息兼容进行处理和判断。这里需要提醒的是，不建议大家用最习惯的中文进行占位，因为中文可以精炼文字，信息本身较短，很容易产生多语言适配的“盲区”。

如果设计想要预知信息翻译后的长度，以便制定布局策略，可以用google文档自带的翻译函数 fx=GOOGLETRANSLATE(文本，“源语言”，“目标语言”) ，以及字符统计函数 fx=LEN(文本) ，快速实现多种语言的批量翻译和字符数计算，为设计提供初步参考。

词汇分界

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

阅读顺序差异

阅读顺序分为LTR (Left to Right)和RTL (Right to Left)两种。我们常见的绝大部分语言都是从左到右的阅读顺序，而使用特殊右至左顺序的，则以阿拉伯语为代表。不同的阅读顺序，决定了布局时信息对齐、元素排布、甚至图标图示，都可能存在不同的规则。

是什么？

根据对于不同语言差异的认识，我们可以将多语言设计的核心原则总结为可读性与包容性两大原则。可读性包含(1)字符可读性 (2)内容可读性；包容性包含(1)布局包容性 (2)认知包容性。

慎用特殊字体

部分产品因为品牌调性或美术风格的需要，会引用带有特殊风格个性的字体。而我们发现，市面上大部分风格化字体都是基于拉丁字母设计的。而那些形态特殊的字符，可能会比较难找到同种风格的风格化字体。即便有，它们的可读性受字体影响的风险会更高，因此检验字符可读性尤为必要。

所以当产品覆盖的语言类型特别多时，如果要一一对应特殊语言去找风格化字体，无论是设计成本、或是页面加载成本都会特别高。这种情况下，可以适当考虑放弃部分语言的风格化字体效果，转用基础字体，优先保证字符的可读性。

内容的可读性

内容可读性，指页面容纳信息时，是否给用户传递出了足够多的内容，让用户能达到最基本的信息理解，而不是靠猜。因此我们要针对多语言内容的长度特性，留有一定信息空间——尤其是信息使用了缩略处理时，需谨慎地确认露出的部分是否足以被用户理解。

布局包容性

布局包容性，即需要设计在元素、组件、模块等设计中，要进行弹性的设计考量，通过合理的布局设置，更好地兼容极多或极少内容的情况。

布局的包容性对于平台型产品尤为重要。如果是一次性产出的、纯展示型产品，细致地根据实际内容检查调整适配效果并不需要太大功夫。但如果是需要长期维护、内容持续变更的平台型产品，一个高度包容性的布局，才能帮助产品用有限的成本达成较好的落地效果。

字体的选择

字体的选择同样会影响布局包容性。当你选择了一个默认字符尺寸太超乎寻常的字体（过扁、过宽）时，在产品存在多语言多字体的情况下，会发现即便是同样的文本参数，单个字符宽度却相差很大。这会使得文本展示空间变得更不可控，导致适配风险增大。

认知的包容性

认知包容性，是指设计时需要考虑到不同文化背景下用户，对于某些元素、符号的认知是否相通。例如，当产品出现需要单独使用图标来指代信息的情况时，需尽量保证选用的图标具有全球性的大众共识，并且不能产生歧义。当然，若非极端情况（如文字信息实在是兼容不下），大部分场景下还是建议尽量将图标配合文字使用，帮助不同语言、不同互联网认知水平的用户更好地理解并使用产品。

怎么做？

接下来，我们将从基础样式、通用布局、组件使用和图标设计四个维度，介绍多语言设计时需要关注的问题要点，以及相关的处理建议。

统一字阶

在同样的文字参数下，不同语言字符的体积视觉感受确实会略有不同。但遇到体量较为复杂庞大的产品，建议使用同一套字阶应对，尽可能降低设计成本和维护成本。可以基于本平台用户群体量级最大的语言为准来制定。

统一行高

为了让文本能更弹性的适应场景需要，建议文字默认带有行高，不按区分单行/多行情况，也便于字体样式的统一管理。

预留文本空间

普遍情况下，多语言场景下文本长度会大于中文场景的文本长度，因此需要考虑预留更多文本空间，以保证信息露出的有效性。过小的露出空间（如只能露出一个单词）会让用户无法理解内容，产生困惑。

选择排列方式

在多语言设计中，排列方式的选择，需要视功能的实际场景确定。

两类信息在同一水平下横排，就必然会需要分割有限的宽度空间，这种情况下如果文本超长需要换行时，信息可能会显得略微杂乱；但它的好处在于节约纵向空间，在信息不长或者横行空间较大的情况下仍可以使用。

如果使用上下排列的方式，文本容纳的空间也将会更大，换行时的显示效果会相对更为可控。

当图标与文本内容组合出现时，同样也需要考虑合适的排列方式。竖排更强调图标，可以应用在强调状态的场景下，如结果页；而横排时图标与文本同级，图标做辅助的说明作用，更适用于轻提示、列表等场景。

但值得注意的是，在多个图标及文字并存的场景下，多语言设计布局会更常用横排的方式来兼容信息，例如快捷操作，或是一些入口场景。横排更能保证文字说明的露出效率，以及提升样式布局的规整度，并且也更方便内容条目的拓展。

段落空间

当页面的横行分割较多时，单个段落宽度就会变得较小。此时在某些语言场景下容易出现单个单词换行，甚至宽度都容纳不下一个极长的单词情况。

因此，在多语言场景下，需要保证段落有一定的宽度容纳信息。移动端小屏幕建议谨慎使用一行三个的布局方式。

加大有限宽度

排版时也可以通过改变排列方式加大段落宽度，只是这样会导致同样高度下可展示的卡片数量变少，信息密度降低，因此需要根据实际情况取舍；如果实在改变不了段落宽度，还可以通过缩小字号或字间距，变相加大宽度，尽可能容纳多一些信息。

左对齐

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

关键信息对齐

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

下对齐

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

假设是上对齐的会造成悬空效果

其实这里有个情况，就是阿拉比语。

阿语规则

阿拉伯语界面需要根据一定的规则来满足这个地区用户从右至左阅读的需求，但其中也存在一些并不需要用RTL做处理的信息。设计阶段如果想要快速产出RTL界面，也可以应用设计软件中一些现有的插件资源来实现。协作中也可以将阿语规则与开发同学优先对齐，由开发实现后，最后再进行细节的检查。

均等横竖排列

竖排的按钮组合相比横排按钮，能兼容更多信息，因此在多语言产品下的使用会更为广泛。

非均等排列

非均等场景的按钮组合，需要限制图标下文字长度；如果为可能分界的语言，建议使用单个单词，否则建议更换成其他按钮组合样式。

通知栏组件

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

选项卡组件

当选项卡选项大于等于三个时，建议使用等间距的选项设计，而不是均分宽度的选项设计，以避免文案溢出，同时显示信息更均匀紧凑。

大众标识

图形需要满足认知包容性原则，可以多去观察成熟的全球性产品，何时会使用到纯图标的场景，又使用了什么样的图标。基础图形如代表播放的三角形、代表喜欢的爱心型，都是比较具有大众共识的。另外一些本身模拟了常见物品的图标，也不容易出错，如代表录制的摄像机、代表收藏的标签等。

指代元素

在图标设计中，可能会使用到一些特定的信息作为装饰，如文字或者是符号。如果这些符号带有特定区域，如美元的货币符号、或是赞的汉字，在全球性多地区的产品图标中必须谨慎使用。建议用更通用的元素代替，避免产生歧义。

不需要镜像的元素

RTL场景中，并非所有图标都需要镜像。例如暗示真实物体时，图标可以保持一致。需要镜像的常为带有方向含义的图标。

需要镜像的元素

RTL场景中，并非所有图标都需要镜像。例如暗示真实物体时，图标可以保持一致。需要镜像的常为带有方向含义的图标。

有个比较特殊的场景值得说明：在内容播放场景中，播放按钮以及进度指示反应的是播放的方向，因此保持从左至右即可；而音量值的大小控制，是需要镜像的。

设定适配规则

在设计方案交付到开发时，需要预先明确一些规则与开发同学对齐。

例如在非通栏的容器中，需要向开发同学示意信息的极限宽度和内边距，并且明确超出该范围的情况下，应直接省略、滚动显示、还是换行处理。

如省略处理，需要检查省略号前展示的内容是否可被用户理解；

如滚动显示处理，需要评估是否会过于吸引视线，打扰到用户；

如换行处理，需要进一步明确极限行数，保证容器高度可控。

设计稿示意思

在交付设计稿前，设计师应有意识地在设计稿中尽可能展示极限情况，再配合沟通，更能提升双方协作效率。

走查适配效果

在走查还原效果时，建议多运用代码走查，在html结构中增加文本或是增加模块，检验开发同学是否有进行响应适配情况的处理，处理效果是否符合预期。

字体声明

着重检查font-family的规则，是否符合不同语言下的效果预期。其中需要注意，如果需要特别声明中文字体，务必把英文基础字体最前置，以防中文字体包中的字母样式覆盖英语场景。

检查字体显示

另外也需要检查你选择的网页系统字体，在不同语言下实际应用中的效果是否符合预期。