多语言适配指南

国际化与本地化

「国际化」强调设计的通用性，而「本地化」则强调对特色文化的适配性。多语言适配是国际化设计中相当重要的一部分内容，事实上，Material Design和iOS Design都不乏对多语言适配规范的讲解，而本篇内容则更多的是结合实际应用，阐述设计落地过程中的8个指导观点。

语言的分类

不同语言的字符有着不同的形态与宽高，要想实现界面国际化的通用效果，需要对不同的语言进行进行归类统一。 Material Design为了便于国际化，根据语言的不同特性将其分为了三大类：类英文（English-like）高文本（Tall）密集文本（Dense）

预留更多的空间

不同于中文版应用，不同的语言会因为字符长度或语言表意的问题在书写的长度上有很大的差异，如在设计界面时使用中式的布局直接应用本地化语言，那么限定的字符空间则很难承载更多的有效内容。

语言翻译的工作往往基于产品或设计的诉求。尽管已经掌握了上述的基础理论知识，但界面设计师的工作要比多语言翻译更加前置，设计师经常需要在回收到翻译结果之前对字符的展示空间进行预判。

为此，借助Google Spreadsheet，使用Google Translate函数创建了一键批量翻译多国语言的在线工具，同时利用条件格式规则对字符数量设定预警提示，从而给出科学合理的适配方案。

恰到好处的翻译

语言的长短，决定着相关的语意是否能完整的呈现在有限的UI界面中，因此我们追求语料的翻译简短而又恰到好处。我们十分乐于就此展开探讨，寻找替代机翻的过程极具挑战性但又充满了乐趣。

全显与省略

为了保留完整的语意，我们始终会遇到一些无法控制字符长度的翻译。此时就需要设计师来衡量如何做到全显与省略：

全显：对于套餐描述中如涉及价格、续费等关键信息的字段，我们要求必须全部暴露给用户，以免因省略引起歧义。
省略：对于需要固定UI框架，保证视觉美感的位置，可以在保留关键语意的固定空间内酌情省略
省略承接：如果有字段省略，应满足用户可以有位置查看完整的信息，做好省略承接。
走马灯：当然，并非所有的位置都适合使用二级页来承接省略的内容。这种情况下可以考虑使用走马灯。值得注意的是，因为走马灯的动态效果会干扰用户浏览关键信息，因此务必谨慎考虑是否适合当前业务场景后再使用。

选用的匹配的适配方式

因为字形带来的差异，在不同的位置也区分不同的适配方式：

固定尺寸：对于影响全局UI样式的组件，在创建适当的固定高度后，文字在该区域内垂直居中对齐，高度不会因为文字的高度发生变化。
固定间距：对于非固定尺寸的组件，选定合适的间距后，选择对应的拓展方向，高度会因为内容的实际填充情况发生变化，我们称之为固定间距的适配。
缩小字号：对于大小绝对固定的组件，因展示内容的空间有限，可制定相应的字号展示规则，直至完全兼容线上的极端情况。
最小宽度与最大宽度：以Button为例，需要设定一个最小宽度，保证按钮的可点击性，但为避免多语言长度差异可能带来的爆框问题，同时也需要设定一个最大宽度。
最小范围与最大范围：设定一个最小范围，来保证大部分页面适配时，不会有较大的页面波动，但当最小范围难以容纳动态内容时，可以结合固定间距的适配方式进行动态拉伸。在应用过程中可以根据实际情况考虑是否设定最大范围。
保证一侧优先展示：以图示中为例，如遇左右都有信息元素的位置，可能发生宽度对冲的情况。此时需根据实际情况，限定一侧的最大宽度，同时设定两元素之间的间距后，令另一侧根据实际情况进行自适应的内容拉伸。

RTL镜像布局

RTL是常规界面的镜像布局。对于阿拉伯语和希伯来语而言，需要按照从右向左的顺序对页面进行翻转处理，它同时包含文本对齐、界面图标、特殊控件和图像的处理等。

如果有需要可参照Apple Human Interface Guidelines以及Google的Bidirectionality中的RTL指南： https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left https://material.io/design/usability/bidirectionality.html#mirroring-layout

字体的选择

在国际化的界面设计当中，一般使用各个系统的默认字体，以确保人们可以在各种环境和条件下轻松的辨认。

iOS：Apple提供了两个字体系列，分别为San Francisco（SF）和New York（NY）。官网描述称这些字体提供了控制和灵活性，能在界面上使用多种不同的语言以最佳方式显示文本。如需设计阿拉伯语界面，在Apple提供的官方下载通道中下载SF Arabic进行调用即可。 https://developer.apple.com/fonts/

Android：Roboto是Android的默认系统字体，对于Android 和Web产品，应首选Roboto字体。https://fonts.google.com/specimen/Roboto#standard-styles

Noto：Noto支持1000多种语言和150多种书写系统，一款为世界语言所设计的字体。在本地化适配的过程当中，如遇Roboto不能兼容的字体，可以考虑使用Noto字体。 https://fonts.google.com/noto

语言之外

事实上，国际化设计当中除了多语言适配，还有更多涉及本地化规范的内容。举个例子，早在中学时就提到：中文中的「2022年10月1日」，英文则展示为October 1, 2022（英式）或者1 October , 2022（英式）。

为此我们通过ISO制定和发布的国际标准探寻其他语言下的展示形式以及更多诸如此类的书写规范。如日期则可统一表示为年、月、日，并用连字符分割：2022-10-01。 Apple TV@2x.png https://www.iso.org/about-us.html 此外，对于包容性写作、计量单位以及国际化的通用规范（包含国家、货币、日期和时间、小数点、计量单位等），还可以参照Apple Style Guide 给出的指导建议。 https://support.apple.com/zh-cn/guide/applestyleguide/welcome/web

参考文献：

Material Design：https://material.io/

Roboto：https://fonts.google.com/specimen/Roboto#standard-styles

Noto：https://fonts.google.com/noto

Apple Deisgn：https://developer.apple.com/design/

Human Interface Guidelines：https://developer.apple.com/design/human-interface-guidelines/guidelines/overview

Fonts for Apple platforms：https://developer.apple.com/fonts/

ISO：https://www.iso.org/about-us.html

顾巍.为全球设计，国际化与本地化探索：快速入门：https://zhuanlan.zhihu.com/p/29759116

顾巍.为全球设计，国际化与本地化探索：国际化设计：https://zhuanlan.zhihu.com/p/29780850

顾巍.为全球设计，国际化与本地化探索：本地化设计：https://zhuanlan.zhihu.com/p/31025276

喜欢作者