3000字干货！6个技巧掌握多语言设计

前言

最近公司的移动端项目需要上线部分东南亚国家的业务，在参与多语言适配的过程中，我深刻感受到「国内设计思维」与「表音语言文本」的冲突。很多在中文环境中看似合理的设计，在切换其他语言环境后常常“面目全非”。

我们经常说多语言设计的“坑”很多，是因为我们需要在相同的信息框架和界面内，保证信息可以清晰明确地传递给不同语言环境、不同文化背景的用户，这要求我们的设计必须有足够的适应性和兼容性。

因此，如何做好多语言设计？如何预知问题并提前规避？对于设计师来说是一项重要挑战。本文从移动端着手，以图文的形式介绍多语言适配、设计过程中需要关注的要点和一些建议，希望可以帮助设计师规避从设计到落地过程中可能存在的“坑”，更好地与上下游进行协作。

更多多语言设计方法：

一、多语言常见问题

1. 文本长度

文本扩展导致的布局问题，是多语言设计中最常见的问题。大多数的表音语言，其文本平均比中文长 30%~50%。因此我们需要有足够灵活的布局和统一的设计规范，来处理文本扩展导致的布局问题。如下图，在中文环境中看起来很常规的入口设计，在翻译成其他语言后，就会暴露问题（文本与图片重叠）。

在中文环境中当文本内容超出容器宽度时，设计通常会使用以下三种处理方式，这三种方式对于其他语言同样适用：

1. 超出内容省略；
2. 通过交互弥补空间限制；
3. 允许有限/无限制地换行；

2. 文本语序

在设计环节，设计师会不断调整各个元素的排列方式来确定最优方案。在中文环境中我们经常会使用一种句式的结构，就是将 UI 组件包含在文本内容中组成完整句式。这种情况我们需要注意在切换其他语言环境时，文本的语序可能会发生变化，从而造成理解困难。最好是将文本与 UI 组件相互独立，例如考虑将 UI 组件放在文本的后面（下图）

3. 媒体元素

除了组件、文本以外，图片或视频等媒体元素也是多语言场景下不可忽视的一环。

通常研发仅仅抓取页面上的字段、文本提供给翻译团队，而图片或视频内容的中的文本，则常常会被忽略。

对于一些与品牌、产品相关的重要媒体元素，我们需要根据不同的语言环境对媒体元素内的文本进行相应的翻译；至于次要的媒体素材，或者是有大量图片的场景，比如功能介绍、帮助中心的图片、视频，考虑到翻译成本，建议只翻译中、英两种语言即可。

4. 标点、符号和格式

标点作为语言起承转合中不可或缺的一个元素，往往也容易被设计、研发所忽略。不同的语言环境对应着不同的标点符号样式，需要在多语言适配阶段额外关注。

以上图为例，不同的语言环境分别对应不同类型的标点符号。（泰语通常没有标点符号）在验收走查的过程中，我们需要留意不同语言环境中标点的使用。

通常研发将产品内的一段连续文本提交给翻译团队，得到的目标语言文本，连标点符号都是跟随目标语言，这种场景无需过多考虑。

但需要尽可能考虑到所有的翻译场景，例如：

上图中 “你好，用户名！”，其中问候语是前端预设的文案，而用户名则是读取[user id]的数据，不受翻译影响。所以虽然看上去是一句话，但实际上包含了两种类型的字段。研发可能仅仅只将问候语提取出来，提交给翻译团队，而忽略了标点符号，从而导致标点符号没能跟随语言环境而切换。要避免这种情况，建议提前与研发沟通，把标点符号也加进翻译文件内里面，标点交给翻译团队处理；

除了标点样式，常见的诸如金额符号、日期格式、通信前缀等也需要注意在不同语言环境中做对应的调整。

二、设计侧怎么做

1. 尽量预留更多的空间

根据产品战略布局，设计应前瞻性的考虑产品的拓展性和灵活性，因此需要提前考虑布局多语言后的展示效果，从而在设计的时候给出最合适的方案。

在中文环境的设计流程中，往往业务文案会结合实际设计再做调整，以便能达到最理想的排版和布局效果，但布局多种语言后，由于译文长度不可预知，往往需要通过换行来保证文本的完整性，而最直接的方法就是预留足够的空间(通常建议多预留一行文本高度)去适应译文。

以金刚区、宫格等重要的功能入口为例，若设计侧未预留空间（前端写死高度的场景下），内容超出容器宽度而省略，会造成文本缺失可读性变差。而多预留一行文本高度，可以保证绝大部分的文本完整展示。另外，在常规情况下应尽量确保单个单词不被拆开换行。

2. 更为灵活的布局方案

因为移动端硬件的特性，通常页面的横向空间较为限制，而纵向空间因为交互习惯（上下滑动）的关系，可以向下延展。故在设计时，可以尽量发挥纵向空间的优势进行设计。

例如上图常见的表单输入框，通常为了保证右侧输入区域的内容展示，会牺牲左侧字段标题的宽度，而导致左侧文本需要省略或折行。布局多语言后，会使得左侧的空间更加局促。如果换个思路选择上下结构的样式，可以保证无论是字段标题还是输入参数均可以在足够的宽度内完整展示，且高度上与常规输入框换行后相差无几。

我们在设计结果页时，通常会习惯性的使用左右平分的按钮组合来展示相关操作，但这一定程度上限制了按钮的宽度，在切换其他语言环境后，文本可能会接近或超出按钮的临界宽度。但如果根据业务优先级将按钮调整为上下布局的话， 则单个按钮内的文本拥有足够的宽度，保证其文本的完整展示。

3. 适当降低区域内信息密度

不能苛求在一行内展示更多的信息，因为这样只会带来更弱的适应性。在中文环境中，我们通常希望在有限的区域内承载更多的信息，以保证信息的传递效率，但这种效率，在多语言场景下很可能会踩坑。如果无法完全保证译文在区域内正常展示，可以尝试换行或收起的形式来降低信息密度。

在单行内如果包含数量、金额等长度不确定的数据类型时，我们应该在设计初始阶段(即便是中文环境)就应该保证数据类型的显示不会与其他元素产生冲突，而不是在切换语言、走查后着急忙慌地去进行调整。

4. 图文尽量分离

如果项目没有多语言的需求，我们往往会直接将图片连同文本一并切给研发进行配置。而布局多语言后，如果还是将文本直接嵌入图片中进行切图，我们则需要对项目内所有图片、所有的文本进行替换并导出，这一方面会增加应用的大小，另一方面也容易产生遗漏。

所以我们建议最好能够实现图片和文本的分离，即文本用代码去实现，便于替换。这样就可以在不替换图片的情况下，通过代码替换字符串来满足多语言的需求。

除了文本外，在图片和图标素材的设计上也尽量不要展示货币符号，使用常规通用的元素进行设计，例如金币等...

5. 使用适应性更高的组件

很多常见的组件通常更适合在中文环境中使用，因为中文可以通过精练的语言来表达复杂的功能释义，而这些组件往往不适合长文本的展示，所以我们需要考虑在业务实现的前提下，使用适应性更高的组件。

例如常见的气泡菜单，作为一个轻量化的组件，在文本较长的语言环境下，可能会造成组件的宽度过长而影响视觉效果。换一种思路，考虑到该组件是为了展开操作选项以供用户选择，则也可以通过上拉菜单实现相同的功能，并且可以完美适配文本过长的场景。

6. 通过交互弥补空间限制

上文说到，当内容超出容器时常见的三种处理方式，其中的一种是通过交互来弥补空间上的限制。并不是所有的内容都适合换行展示，有时候多文本、多 Tab 在换行后呈现的效果会给用户带来较大的视觉压力也会使页面丢失平衡，基于此类场景，我们更希望通过包括滑动、折叠等常见的交互，来保证视觉上的平衡。

以通知栏为例，通常通知栏内承载着告知用户的重要信息和提醒，在切换其他语言环境后，可能会触发多行展示，一方面信息过多可读性不佳，另一方面由于其组件本身悬停在页面上的特性，占用单屏过多的高度，使得屏幕的使用率不高。因此我们考虑使用动态的通知栏，通过自动循环，横向滚动的形式单行展示信息，以此解决阅读体验和空间限制。

最后

当我们使用相同的信息架构和界面去承载不同的语言时，实际上是一个把不同语言环境、不同文化背景的用户之间的共性提炼出来的过程。在这个过程中涉及的细节很多，十分考验设计师是否具备前瞻性和灵活的布局处理能力，这些能力都需要在不断的试炼中学习、总结。

当然不仅仅是设计，在整个研发流程中，如果能够让项目团队都重视多语言适配这件事情以及提前发现问题，更有利于提高整体的界面观感和完整度，减少修复问题的成本，打磨出更友好的多语言产品。

欢迎关注作者微信公众号：「Gtech UED」