国际化设计指南

超越翻译，创造更具包容性的产品体验

背景

让应用支持全球的各种语言是一项挑战。兼容不同的语言形态、语法、数据格式需从设计层面就开始考量。遗憾的是，我们很容易忽略使用其他语言或文字系统的用户，从而使得体验受损，甚至造成用户流失。

设计支持国际化UI的重要性主要体现在以下3个方面

• 提升用户体验（促进集团旗下国内外地区的文化融合、人才融合和技术融合。让不同文化和地区的员工都能获得舒适的办公体验，提高效率。）

• 提升吉利品牌全球影响力（克服语言障碍会让我们接触到更多的人，提升品牌的全球认知度。）

• 助力集团全球化布局（促进集团在“一带一路”倡议下互联互通，共同繁荣，实现公司全球化战略布局。）

名词简介

翻译 Translation(t9n)

是将源文本从一种语言转换为另一种语言以保持原始信息和含义的过程。

本地化 Localization (L10n)

而“本地化”意味着定制，需要根据不同地区特性，以使当地母语人士易于理解和舒适地使用。

国际化 Internationalization (i18n)

指的就是产品能够适应不同语言和文化的过程。例如（时间、日期和电话号码格式、货币、计量单位以及其他数据）。理想情况下，产品或服务在开发阶段就应该考虑到易于本地化，两者的共同实现，才能更好地拥抱不同文化背景的用户们。

全球化 Globalization (g11n)

指企业或其他组织发展国际影响力或开始在国际范围内开展业务的过程。

关于创建全球化产品，一个常见的误解是，我们只需要翻译就足以应付国际客户。然而，我们需要做更多的事情，因为翻译过程仅仅是把源语言的文字转换成目标语言的文字。全球化产品（包括网站、应用程序和在线服务）需要使其在目标市场被用户好用并接受。

业界普遍认为：“全球化是翻译、国际化和本地化的整合。”  为了开发易于使用的全球化产品，上述各个步骤都非常重要。 如果这三个步骤中的任何一个没有实施，特别是在针对多个地区进行营销的全球化产品时，都可能会出现问题。

国际化的差异包括：

• 语言（文字系统、文本长度变化、书写方向、声音）

• 文化（适当且具有代表性的图片和媒体素材）

• 货币

• 度量单位

• 日期和时间格式（地理位置）

• 法律法规

• 用户行为

国际化产品落地流程

当产品在设计早期原型阶段时，这是与本地化团队一起探索这些原型在不同语言和市场环境中的最佳时机。确定设计和代码适配方面的需求将有利于本地化进程的推进和发布成功的产品。

文本翻译

文本翻译是支持多语言的第一步，也是最为重要的一步。

通常，翻译工作主要都由专职的翻译人员来完成。但为了保证翻译质量，我们还需尽可能做到以下 4点：

• 分离文本代码

• 分离文本、图像

• 添加文本注释

• 创建翻译指南

一、分离文本、代码

将需要本地化的 UI 文本从代码中分离出来，以独立的资源文件方式存放，以备交付给本地化人员进行本地化处理。

二、分离图像、文本

设计切图时就应该考虑图文分离，不然我们需要为每个语言都提供一个独立的素材，不仅成本高，还会增加应内存资源。

三、添加文本注释

为UI 文本添加注释（comments）可以为翻译人员提供必要的信息，从而协助他们翻译出清晰且自然的译文。描述文本出现的位置与上下文的具体含义；如【设置】 他就可能代表一个页面的名称；也能表示一个按钮的名称；

四、创建翻译风格指南和术语表

86%的本地化创意广告在点击率和转化率上优于英文版，比后者高出22%。风格指南和术语表是提高翻译质量和本地化效果的重要工具。使用这些语言资产还可带来更多的好处；

包括：

• 参与度：使本地化内容更加贴近客户和潜在客户。特别是，术语表能确保您和您的客户使用的术语正确翻译为目标语言。这对于建立和维护贵品牌的声誉、建立信任和提高客户参与度是至关重要的。

• 时间：风格指南和术语表可减少关于如何处理特定术语或运用哪种文风更合适的长时间讨论。

• 质量：在各个市场上传递一致的信息。这些资产还能保证各个市场上的信息一致性。

• 成本：减少支出。风格指南和术语表为我们的营销和翻译团队提供标准的权威性参考，减少困惑和返工。

五、设计灵活简洁的信息

1. 避免使用专业术语、俚语或只在特定群体中流通的语言。 （作家有时会发现使用成语或俚语来创造一种对话和平易近人的语气很诱人。但重要的是要明白，口语表达可能难以或不可能翻译，从而降低全球理解力。）尽量使用清晰易懂的表达，让来自不同背景的人都能理解。

2. 预估信息在翻译和本地化后可能会缩短或变长。有些语言翻译后可能会增加 30% 甚至翻倍，为了避免文本被截断或重叠，请在设计界面时保持信息简洁，同时也要确保其具有足够灵活性以适应不同语言的长度变化。

3. 在紧凑的 UI 组件（例如按钮和选项卡）周围预留出足够的空间，以容纳文本溢出。对于较长的文本，请设置组件的最大宽度，以便允许更长的段落进行换行。

读写方向

不同的语言通常使用不同的读写方向，其一般被分为以下2类：

LTR（左到右）语言？

全称为 (left-to-right languages.) 语言。如基于拉丁字母（如英语、法语等）、西里尔字母（如俄语、保加利亚语等）、方块字（汉语、日语）等语言。

RTL（右到左）语言？

全称为 (right-to-left languages) 语言。如如阿拉伯语、波斯语、乌尔都语、希伯来语、意第绪语、迪维西语等语言。阿拉伯语：一种主要在中东和北非使用的闪米特语。它是世界上第四大语言，估计有 4.22 亿人使用 26 个阿拉伯语国家。

BIDI （双向性）语言？

RTL语言有一个主要方向，文本从右到左展示。除此之外，它们也被称为双向语言，因为文本的某些部分，如数学表达式、数字日期和数字承载单位是从左到右展示的。

排版布局

在西方语言中，布局通常是左对齐的，文本和图像从左到右排列。在 RTL 语言中，布局是右对齐的，文本和图像从右到左排列。

镜向 UI 和内容

这可能会影响图标、徽标和导航栏等元素的定位。考虑对内容的整体设计和视觉层次结构的影响也很重要。例如，可能需要翻转图形，并且可能需要将菜单和导航栏移动到屏幕右侧。在翻译成阿拉伯语和希伯来语等语言时，UI 将发生的主要变化是元素将翻转以从右到左阅读。但是，并非所有 UI 元素都会在 UI 翻转时进行镜像。

布局

LRT与RLT UI 元素的顺序相同，但方向不同。如下图所示

文本方向

对 RTL 语言的内容进行本地化时，最重要的考虑因素之一是文本的内容对齐方式和方向。所有文本（包括标题、正文和按钮）都必须向右对齐。（未翻译的段落文本保持默认对齐方式）这可能看起来很简单，但它会对内容的设计产生重大影响。

文本长度

将内容翻译成不同语言时，译文的长度可能会有非常大的变化。为内容预留足够的空间非常必要。建议以英文为基础拓展30～100%

按钮

在移动设备上，为了方便用户用拇指舒适地操作，请 不要移动诸如“保存”这类关键按钮组。而是将它们 居中放置。

需要镜像的图标类型

1. 方向图标

2. 问号

3. 声音

4. 带有进度条的图标

1、方向图标

2、问号

3、声音和音频

4、带有滑块和进度条的图标

滑块和进度条是镜像的 - 进度从右到左显示。应镜像右侧带有滑块的音量图标。滑块应进行翻转，声波应从右侧出现。

不需要镜像的图标

1. 媒体播放按钮和媒体进度指示栏

2. 复选标记

3. 不指示移动或方向的物理图标

1、媒体播放按钮

在音乐、音频和视频播放器的上下文中，不应镜像媒体播放按钮和媒体进度指示器，因为它们指的是正在播放的磁带的方向，而不是时间的方向。

2、复选标记

消息文本被翻转，但复选标记图标保持不变。

3、指无需处理的图标类型

不指示移动或水平方向的图标。示例包括过滤器、带有斜杠的图标、映射物理实体的图标、右手操作的图标和链接。

最佳做法

在选择和设计图标时，请考虑选择跨语言和文化都能正常工作的符号，而不必创建新图标来适应每个本地化。

图像

为了让更多人群感受到尊重和理解，请遵循以下准则：

在设计中融入多元化的视觉元素和人物形象。（例如苹果emoji：👶🏻🧔‍♂️👨🏻‍🦱👩🏼‍🦰🧑🏽‍🦰👨🏾‍🦰👱🏿‍♀️） 通过遵循这些原则，我们可以创造更加包容、尊重和令人愉悦的体验。

图标和表情符号

尽管图标和表情符号广泛用于应用程序和网站，但并非所有视觉元素在不同文化中都以相同的方式解释。图标或表情符号可能在一种文化中产生积极影响，但在另一种文化中可能会令人反感。

为确保您使用的图标能够被受众理解，请咨询本地化专家（如果有），或可以担任目标文化或市场主题专家的人员，例如本地用户、市场内支持团队或翻译人员。

为了使包含表情符号的文本符合当地语境，您可能需要调整表情符号在界面中的位置、添加解释性文本，或者将图标或表情符号换成更适合目标地区的符号。

确保语图像具有包容性

想象一下，当你浏览GEELY人力平台时，所有看到图片上的人看起来都和你完全不同。这些图片既不相关也不包容，让你没有归属感。在这种情况下，我们就无法与用户建立内心的联系，从而拉远了与用户的距离。

代表性很重要。当你评估选择时图像时，看到和你相似的人很重要。那个banner上快乐的人能与你产生共鸣吗？这个问题可能决定了这个banner的点击率，从长远来看，也决定了这个活动的成败。

文化禁忌

我们传达情感的图像在全球并不一致。一些国家的风俗习惯可能不会被他文化的人接受。因此，在某些情况下，我们必须改变我们整体的本地化体验方法。

例如在中东地区，我们许多西方国家接受的视觉效果在中东国家可能无法产生共鸣。在美国表达爱的方式时接吻的情侣；但对于中东，我们必须找到其他方式来描绘这个一般概念。为了尊重当地风俗和信仰，我们发现“关爱”这个想法可能比“诱惑”更能引起共鸣，并且它可能通过一张手部温柔接触的照片更好地为这个市场传达信息。

无国界图像

在全球范围内进行交流，有些事情会更容易传达。爱意不一定总是能用一个吻来表达，但在某些情况下，我们可以找到一些图像来传达一种感觉，而这种感觉并不局限于文化、种族或地域。我们可以努力去寻找那些“没有局限”的图像。

例如，以夏季需要传达新鲜感和喜悦感。与其展示人们在海滩上的场景，不如展示一个物体 - 在这种情况下，我们可以用一杯柑橘饮料来代表新鲜和快乐，因为它没有强烈的文化地域关联。因此，它可以在全球范围内更广泛地使用。

颜色

颜色选择可以直接影响个人的品牌认知，虽然有些颜色在许多文化中以相对一致的方式被解释，但其他颜色在不同文化中传达了各种各样的象征意义。（白俄罗斯人认为黄色是不吉利的颜色）

数据格式（备忘录）

1. 国际上对数据格式有不同的约定，包括地址、电话号码、姓名、日历、度量、货币、付款方式等；

2. 还好我们的老祖宗统一了度量衡，不然我们现在要适配的格式会更多；

3. UI 中的数据格式应以用户期望的形式显示；

一、单位制

不同的国家和地区可能有不同的单位制。例如，在美国用的英尺（feet）到法国需转换为米（meter）。

世界上较为通用的单位制有以下3种：

• 国际单位制（SI）长度（米）、质量（千克）、时间（秒）、电流（安培）、热力学温度（开尔文）、物质的量（摩尔）和发光强度（坎德拉）适用于绝大部分国家和地区（包括中国）。

• 英制（Imperial Units）主要用于英国民间、利比里亚、缅甸。

• 美式英制 普遍用于美国。

二、数字

不同的国家和地区可能有不同的数字类型、书写格式。格式应遵循用户在其操作系统设置中选择的本地格式。

例如：

1. 在阿拉伯语中，小数分隔符是逗号「，」而不是英语中的句点「.」

2. 为了更容易阅读位数较大的数字，人们常常会为数字进行分组。在欧洲，通常为三位数一组，但在中国、日本、韩国，则为四位数一组。

三、货币

在阿拉伯语中，货币符号通常写在数字的右边。这与英语和其他一些西方语言（例如法语、西班牙语）相反，在这些语言中，货币符号通常写在数字的左边。例如，阿拉伯语中100里亚尔写为١٠٠﷼

我们可以使用国际通用ISO 4217货币代码来解决货币符号相同的问题。例如，将一百元的人民币写为「CNY 100」，将一百元的日元写为「JPY 100」。

四、百分比

通用百分号（%）似乎在所有区域设置中都是统一的，但事实并非如此。不同的区域设置对百分号使用不同的符号。与货币符号一样，百分号可以位于其关联数字的左侧或右侧，具体取决于区域设置。

五、日期和时间

在 RTL 语言中，日期和时间应从右到左显示，而不是从左到右显示。除了日期的对齐方式外，日期还应根据用户的本地设置（在其操作系统设置中指示）进行格式化。本地化软件中适当的格式化代码可以实现这一点。

• YYYY-MM-DD: 这是一种国际标准的日期格式。例如：2024-05-24。

• DD-MM-YYYY: 这是一种欧洲常见的日期格式。例如：24-05-2024。

• MM/DD/YYYY: 这是一种美国常见的日期格式。例如：05/24/2024。

• DD.MM.YYYY: 这是一种俄罗斯常见的日期格式。例如：24.05.2024。

此外，还有一些其他较少使用的日期格式，例如：

• MMM DD, YYYY: 这是一种简化的日期格式，由三位字母的月份缩写、两位数字日和四位数字年组成，各部分之间用逗号和空格分隔。例如：May 24, 2024。

• DD MMMM YYYY: 这是一种更正式的日期格式，由两位数字日、完整的月份名称和四位数字年组成，各部分之间用空格分隔。例如：24th May 2024。

时间格式也存在差异。一些国家的人们习惯使用 12 小时制，并标注上午/下午 (am/pm)。而另一些国家则采用 24 小时制。因此，根据当前的区域设置正确地本地化日期和时间非常重要。

六、电话号码

不同的国家和地区可能有不同的电话号码格式，例如：此外，电话号码里可能还会包含国家代码（如英国的国家代码是「+44J）、地区分号 （如上海的地区分号是「O21」）。

• 在法国，电话号码以2个数字为1组，如「01 23 45 67 89」。

• 在英国，电话号码会被分为 3组，如「01234 567 789」。

七、邮政编码

不同的国家和地区可能有不同的邮政编码格式，例如：

• 中国的邮政编码由6 个数字组成。

• 美国的邮编由 5个数字组成。

• 英国的邮编由字母、数字混合而成。

八、地址

不同的国家和地区可能有不同的地址格式，例如：

• 在中国、日本，地址的格式通常为宏观到微观。

• 在美国，地址的格式通常为微观到宏观。

语法

对于 UI 中的文本，符合诸如单复数、阴阳性等语法规则是至关重要的。对于静态文本，可以由专业的翻译人员来维护；而对于动态生成的文本，则需要从代码层面来进行「语法自适应」。

语法自适应主要需处理以下3 点：

一、标点符号

不同的语言可能有不同的标点符号规则，例如：

1、样式不同

2、位置不同

3、某些语言很少使用标点符号

二、大小写

不同的语言可能有不同的大小写规则，例如：

1、某些语言会使用大小写区分含义

2、某些语言没有大小写的概念

（如汉语、泰语、阿拉伯语等）

三、其他

• iOS、macOS、Android 平台均在代码层面提供了语法自适应的解决方案。例如：

• 在 Apple 的平台中，我们可以使用 NSInflectionRule 来自动处理英语复数、时态变化。

• 在 Android 中，我们可以使用 Grammatical Inflection APl。

一些关于群体的认知偏差

从众效应

人们有一种社会认同的需求，他们希望被接受，希望与大多数人保持一致。我们在设计中可以营造出一种群体选择的效果来吸引更多的用户，通过展示使用人数和购买信息来体现出该产品的的热门，让正在犹豫的用户「随大流」。

群内偏差

一种偏爱群体内成员而不是群体外成员的模式。人们倾向于对自己所属的群体（称为“内群”）给予更积极的评价和更好的待遇，而对其他群体（称为“外群”）持有负面的评价和待遇。

群体认同

一个社会团体的共同归属感

跨种族效应

更容易识别属于自己种族群体或接触过的种族群体的面孔的倾向。

参考文献

• Spotify 团队的图像本地化经验：https://spotify.design/article/designing-for-belonging-why-image-localization-matters#

• Unicode 通用区域设置数据存储库 （CLDR）：https://github.com/unicode-org/cldr/tree/main

• Windows 应用程序的国际化：https://learn.microsoft.com/en-us/windows/win32/intl/international-support

• Adobe 国际化设计：https://spectrum.adobe.com/page/international-design/

• Pinterest 的国际化设计： https://gestalt.pinterest.systems/foundations/international_design/about_international_design

• 安卓不同的语言和文化设计：https://developer.android.com/training/basics/supporting-devices/languages?hl=zh-cn

• 安卓开发本地化：https://developer.android.com/studio/write/translations-editor

• 苹果开发本地化：https://help.apple.com/xcode/mac/current/#/deve2bc11fab

• 苹果国际化本地化文档：https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/Introduction/Introduction.html#//apple_ref/doc/uid/10000171i-CH1-SW1

• W3C国际化：https://www.w3.org/International/i18n-drafts/nav/about#what

• Unicode 双向算法基础知识：https://www.w3.org/International/articles/inline-bidi-markup/uba-basics

• 世界各地的个人姓名：https://www.w3.org/International/questions/qa-personal-names

• KDE 中文翻译指南：https://kde-china.org/tutorial.html

• 腾讯设计支持全球语言的UI指南：https://mp.weixin.qq.com/s/JrN4fDDC2eKsJWbSpgs0HA

• Material Design有效本地化的原则和技术 https://material.io/blog/localization-principles-techniques