# 如何进行多语言界面的设计？
Internationalization，简称 i18n ，是指产品不依赖于特定区域，能够在不同国家和市场正常运行，服务于不同文化和使用不同语言的用户。国际化的设计需要明确、普适、通用、有强兼容性。常见错误如软件乱码、界面错位、数据结构不支持等等。产品的国际化需要考虑以下4个方面：语言文字、用户界面、地区标准、文化差异。
进行多语言界面设计时，首先需要认知不同语言长度、高度、词语构成方式、通用格式（如：日期、时间、货币表示等）才能了解各种设计局限及应对方式，实现设计方案兼容多语言的目标。
## 长度及高度差异
为了便于国际化场景分类，Google 在其[字体设计](https://material.io/archive/guidelines/style/typography.html#typography-language-categorization)中将所有语言字母系统分为三个类型：**英语及类英语文字、密集文字和高文字**。
详细分类请参考：[语言类型](https://material.io/archive/guidelines/style/typography.html#)
- **英语及类英语文字**：以拉丁字母（包含西里尔字母）为主要字母系统的语言，如：德语、法语、西班牙语、葡萄牙语、意大利语、俄语等。
- **密集文字**：简体繁体中文、日语、韩语，这类文字因其文字简短，信息密度高而得名。
- **高文字**：泰语、印地语、越南语、阿拉伯语等，在同等字号下，通常会比类英语文字更高。
**长度差异** : 以下图英语文案为基准长度，中文和韩语会比英语短30%~40%，而德语、法语、俄语文案则会长 20%~50% （仅针对本条文案长度，不代表所有情况）
因此在设计时，应避免仅按照单一语言预留文案空间长度，**需提前考虑多语言场景，优化布局或预留可扩展的文案空间**。
 | 
---|---
**建议**：
提前预留多语言文案空间，尽量在一行内完整显示单词** | **避免**：
仅按中文设计稿预留文案长度，且研发未正确设置省略换行，导致英语文案出现单词从中间错误断开折行**
[IBM globalization](https://www.ibm.com/docs/en/i/7.4?topic=interfaces-text-translation-design) 网站提供了参考规范，标注了以英语作为设计稿输出标准时，基于不同文字数量所需要的对应的额外空间。在设计时可参考表格中的数值预留足够文案空间。（数值仅供参考，请以实际设计稿布局及真实文案翻译情况为准）
**英语字母数量** | **预留额外空间**
---|---
10 字母以内 | 100%-200% （额外预留10-20字母）
11-20 | 80%-100%
21-30 | 60-80%
31-50 | 40-60%
51-70 | 31-40%
70 字母以上 | 30%
举例说明：
 | 
---|---
**正确**：
提前预留多语言文案空间，在布局允许范围内，预留充足的文案可扩展空间 | **避免**：
仅按照固定文案预留文案长度，导致多语言文案扩展空间受限，出现错误折行或截断问题
另外，在进行多语言场景测试时，可利用翻译插件将设计稿文案翻译为德语、法语或俄语，以判断设计布局及预留文案空间在极端情况下的兼容情况。
**高度差异：** 类英语文字只占据部分字体框高度，而密集文字及高文字通常会占据整个字体框空间。因此，在同等字号下，中文泰语等文字会比英文显示更高。
为了达到行距统一的视觉效果，同时避免高文字出现间距过近、上下截断等情况，泰语、越南语、印地语等高文字行高设置需要大于同等字号的英文行高。
## 词语边界与折行差异
除了理解不同语言长度及高度差异，认识到预留文案可扩展空间的必要性，还需要对不同语言的词汇边界、断句规则有所了解，以便在进行折行布局时，按照不同语言特点正确处理。
- 类英语文字中，以单词为基本语义单元，以空格划分词语边界。
- 中文使用单独字符作为基本语义单元，无需空格划分词语边界。
- 日语中，不使用空格分隔，但在折行时也需要按照固定的语法规范进行，例如不在日语拗音前换行，通常将外来语音译词作为整体单元显示，不出现音译词间折行等情况。如遇此类日语需折行情况，建议优先咨询日语文案同学，手动设置换行点，保证折行正确。
- 韩语词中也会利用隔写法，用空格分隔独立的语法单元以避免歧义。
- 泰语单词间虽然没有明显空格划分，但作为表音文字，不同断句方式会产生完全不同的含义，在需要断句时一般会在词语边界处断开，以确保表意准确。
**折行规则**
当横向布局空间有限，文字需折行完整显示时，多语言存在不同的折行规则：
日语在折行时，对于部分外来语音译词，需要注意尽量在完整语法语意单元或词语边界处折行，同时需遵守各自语言的折行和标点符号使用规则。不可用于句首及句尾的符号，在界面文案折行时，需根据标点符号位置规范，进行合理调整。
英语及类英文语言折行需要按照完整单词为单位，一行剩余空间展示不全时，行尾单词整体转移到下一行显示。而一般不会在单词中间断开。
设计时，需要在设计稿中使用正确的西文折行方式，目前 figma 等设计软件均支持类英文语言按照单词空格自动折行，无需额外设置。
在多语言界面中出现折行显示时，应与研发沟通确认：优先设置为 按照单词折行方式，以便正确显示西文文案。