APP的多语言设计我们可以做点什么？

最近app上线的时候遇到很多多语言的问题，因为我们的app有七八种语言，而设计的时候是用英语设计的，所以遇到很多的问题，在网上找到下面这篇文章，里面有些内容可以参考。

前言：因为工作关系，我目前做的APP一般会适配两种（中英）或更多的语言。就以最常见的中英文切换来说，如果用中文作为设计稿语言，那么通常会遇到页面翻译成英文后，原来很短的一个中文词汇会变成长长的英文词组的情况，一定程度上影响视觉设计上的平衡和布局，我常常头疼要怎么修改设计排版。一年多的工作下来，积累了一些对于多语言设计的心得和体会。

 

一、尽量减少多列布局

 

很多时候我们都喜欢用多列的布局，多列布局在节省空间的同时又保持了画面平衡。但是在多语言的环境下，使用这种方式需要慎重。

二、根据不同语言调整字体的属性

 

在中英文的设计里，除了同一个词汇的文字的长度不一样之外，两种语言的字号、字体、和行距也不尽相同，这就需要单独制定两种语言的字体、字号、行距等规范了。

 

1、字体方面不多说，不同系统中英文使用对应的字体。iOS系统下，通常英文使用SF Pro UI 和 中文使用PingFang。

 

2、说到字号，尝试过用两种语言设计的朋友或许都知道，同一个字号下中文的方体字看上去要比英文的流线字要大一点点。 在开始解决这个字体大小的问题时，我曾经假想规定英文字体比中文字体要大一个字号，这样两个字体才能看上去一样大。但是经过尝试，发现如果把英文放大后，原本同一个内容下字节长度就比中文长了，现在又会变得更加长，占的空间再次扩大。

 

 

在苹果字体的状态下，中文字体和大一号的英文字体看上去一样大，但是如果遵循一样大的字体会造成英文版本内容看上去更多，反而使两个语言版本的视觉差距更大。

 

 

 

 

如果使用一致的字号，虽然英文字体看上去比中文小，但是整体画面会和中文版本更加相似。

 

因此在中英字号方面，我们还是选择一样的字号来维持整体的统一。

 

 

 

3、行距方面，也需要根据实际分别对中英文相同字号的行距作调整。

 

为了在不同语言下有一致的视觉体验，相同字号下，中英文的行距需要作相应调整。

 

4、以上说的只是在常用的iOS系统字体情况下，在其他字体例如在Material Design设计规范里面，原来Google已经在字体上“下手脚”，他们把同样字号的英文和中文字体做成看上去一样大小，行距也做了“封装”，这样就不存在需要考虑调整字号的问题了。

 

 

 

三、从语言翻译文本着手，中英尽量做到语句长度相差相近

 

1、用W字母规定每行的长度占的字符

 

JJYing曾经在他的博客分享过有关i18n和L10n的看法：

同样一个词在不同地区长度差别实在太大，用当时我们常用的一个宽度单位「W」（就是一个 Arial 字体下的 W 字母宽度）来粗略计算，从 2W 到 6W 不等，对于一个按钮来说这个长度的差别足以影响视觉设计上的平衡乃至布局了。

W作为26个英文字母中利用他说的一个方法，我们可以把W作为长度单位，来制定规则，比如当中英文词汇相差3W时，我们需要考虑更简短的翻译或者调整设计以适应两种语言了。W可以比作是一把尺子，帮助我们衡量是否需要因语言长度不同而调整版式。

 

 

2、利用谷歌翻译在Excel做翻译器

 

网上有非常多的教程教你自制多语言翻译器，例如我在YouTube随便找到的这个https://www.youtube.com/watch?v=r_MHvs7AORc

 

3、sketch里的谷歌翻译插件

 

Medium上的一位作者曾经介绍过方便切换语言的sketch插件（需要绑定信用卡后续收费），在sketch里选择你需要翻译的语言，点击插件翻译即可。可根据翻译即时调整你的设计。

 

 

 

四、具体页面的不同处理方式

 

1、用图标代替文字

 

有时候中文界面能妥妥的正常显示,而英文则会跳出内容框，我们可以考虑使用图标来代替文字，以适应内容区域较小的情况。

 

中文显示完整，而英文显示不完整的情况

 

 

将乘客标签用图标代替，解决了语言带来的问题

 

 

2、列表页面下，充分考虑到语言数据的多变性，找到最优的布局方案

 

 

建议：如果你和你的团队英文水平不错，而你们的产品英文用户占有量不是太低的情况下，还是用英文作为设计稿语言比较好。因为长文本语言更容易适配成短文本语言，在适配时遇到的问题也会减少一些。

如果该产品的中文用户还是占大部分，中文设计稿又更加适合团队合作的话，那使用中文作为设计稿语言时，就要更加需要考虑改变语言后的效果了，有时候是需要为了适应多语言而放弃原来在中文语言下优美的布局，在多语言中找到平衡。