6个技巧掌握多语言设计

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

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

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

一、多语言常见问题

1.  文本长度

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

a. 超出内容省略；

b. 通过交互弥补空间限制；

c. 允许有限/无限制地换行；

2.  文本语序

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

3.  媒体元素

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

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

4.  标点、符号和格式      

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

2.  更为灵活的布局方案

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

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

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

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

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

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

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

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

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

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

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

.

.

.

感谢阅读到最后，我们下期再见！

💙💚💙💚