Salesforce 致力于为国际客户提供高质量的体验。
国际化是设计软件应用程序以适应各种语言和区域的过程，而无需进行软件工程上的更改。本地化是通过添加特定于区域设置的组件和翻译文本，为特定区域或语言调整国际化软件的过程。
为全球用户考虑
意识到颜色的文化意义
例如，红色与西方文化中的警告和危险有关，而在中国和日本等一些亚洲文化中，红色象征着运气和幸福。
避免使用国旗来表示语言
语言和国家是不同的概念。旗帜是代表国家或民族的符号，而语言则代表人与人之间的共同交流方法。例如, 29个国家讲西班牙语，西班牙只是其中之一；像加拿大这样的国家有超过一种官方语言。你认为枫叶旗代表哪种语言？在设计语言选择器时，尽管缺乏视觉吸引力，但仍使用纯文本。仅使用标志来表示国家/地区；而不适用于语言。
文本扩展设计
当英语文本被翻译成另一种语言时，翻译的文本可以延长三倍。在压缩的 ui 组件 (如按钮和选项卡) 周围保留空白，尽可能使 ui 组件可扩展；除非有充分的理由，否则不要将固定宽度或高度分配给 ui 组件。
对于较长的文本，换行是一个很好的解决方案。请注意潜在的垂直扩展，因为翻译的文本将需要更多的行。使用悬停文本进行截断可能是一种妥协，请注意，这会降低 ui 的效率。
使用标签文本和内联窗体彼此独立
引入本地化问题的另一个典型 ui 模式是使用内联窗体，如句子中间的输入字段或下拉列表。造成这个问题的原因是，大多数语言不遵循与英语相同的词序。由于这一事实，内联表单需要重新定位，以适应翻译文本中正确的句子结构。
From Date to Date
当 "从 date1 到 date2" 被翻译成其他语言 (例如日语) 时，单词顺序将更改为 “DATE1 から、DATE2 まで” (DATE1 From DATE2 To)，这将导致语法上不正确的翻译, 除非我们将内联表格改为日语特别，这将需要特定语言的 css, 这增加了复杂性。
由于重新定位每种语言的内联表单并不实用，并增加了 css 维护成本，因此我们建议避免在句子中间使用任何 ui 组件。如果有必要，请考虑使用冒号连接标签和 ui 组件，并尝试使标签成为完整的句子。在前面的示例中，我们可以使用 "开始: date1 结束: date2" 使标签更加独立。
使您的 css 本地化友好
避免 css 中的强制大写
大写可能是非常棘手的，即使在英语中也是如此。标题、标题和句子级别的大小写有不同的规则，这些规则不断变化。在大多数英语风格的指南中，除了文章和前置词外，标题或标题中的几乎每个单词都是大写的。下面是聊天流中的下拉列表示例，英语中的每一个单词都大写：
Example dropdown menu in English with capitalized words in options.
然而，在法语中，只有第一个词大写，这也适用于其他欧洲大陆语言 (西班牙语、意大利语) 和北欧语言 (丹麦语、芬兰语、挪威语)。事实上，在许多语言中，大写的使用比英语少。例如，一种语言的名称、日历月和组织名称以英语大写，但这些名称都不是以法语大写。
Example dropdown menu in French with only the first letter of each option capitalized.
由于这些差异，开发人员避免使用 css 来处理大小写是很重要的。将强制化留给翻译人员，因为他们是用自己的语言设置规则的专家。
以智能方式强制文本对齐
文本对齐是 css 中常见的样式，广泛用于按钮、菜单和选项卡等组件中的 ui 文本。与文本编辑器中的文本编辑器一样，您可以使用空间来居中文本，在 css 中，您可以通过向组件添加填充来居中文本。但是，使用 css 文本对齐属性是一种更简单、更便于本地化的方法。
Example dropdown menu in English with capitalized words in options.
Salesforce is committed to providing a high-quality experience to international customers.
“Internationalization is the process of designing a software application so that it can potentially be adapted to various languages and regions without engineering changes. Localization is the process of adapting internationalized software for a specific region or language by adding locale-specific components and translating text.”
Think About Global Users
Be Aware of the Cultural Significance of Colors
For example, the color red is associated with warning and danger in Western cultures, while it symbolizes luck and happiness in some Asian cultures, like China and Japan.
Avoid Using Flags to Represent Languages
Language and country are different concepts. Flags are symbols that represent countries or nations while languages represent a shared method of communication between people. For example, Spanish is spoken in 29 countries and Spain is only one of them. Countries like Canada have more than 1 official language. Which language do you think the maple flag represents?
When designing a language selector, use plain text despite its lack of visual appeal. Only use flags to represent countries, not languages.
Design for Text Expansion
When English text gets translated to another language, the translated text can be as much as three times longer. Leave blank space around condensed UI components, such as buttons and tabs.
Make UI components expandable whenever possible. Do not assign a fixed-width or height to your UI component unless you have a good reason.
For longer text, wrapping is a good solution. Be aware of the potential vertical expansion since translated text will take more lines.
Truncation with hover text can be a compromise. Be aware that this brings the risk of making the UI less effective.
Make Label Text and Inline Forms Independent from Each Other
Another typical UI pattern that introduces a localization issue is the use of inline forms such as input fields or dropdown lists in the middle of a sentence. This problem is caused by the fact that most languages do not follow the same word order as English. Due to this fact, the inline forms need to be repositioned to accommodate correct sentence structure in translated text.
When “From DATE1 To DATE2” is translated into other languages, for example Japanese, the word order will change to “DATE1 から、DATE2 まで” (DATE1 From DATE2 To), which will cause grammatically incorrect translation unless we reposition inline forms in Japanese specifically. This will require language-specific CSS, which increases complexity.
Since repositioning inline forms per language is not practical and adds CSS maintenance costs, we suggest avoiding any UI components in the middle of a sentence. If you have to, consider using a colon to connect the label and UI component and try to make the label a full sentence. In the previous example, we can use “Start: DATE1 End: DATE2” to make the label more independent.
Make Your CSS Localization-Friendly
Avoid Forced Capitalization in CSS
Capitalization can be very tricky, even in English. There are different rules for capitalization at the title, header, and sentence level. These rules keep changing. In most English style guides, almost every word in a title or heading is capitalized except for articles and prepositions. Here is an example of dropdown in Chatter Feed. Every word in English is capitalized:
In French, however, only the first word is capitalized. This also applies to other continental European languages (Spanish, Italian) and Nordic languages (Danish, Finnish, Norwegian). In fact, in many languages, capitalization is used less than in English. For example, a language’s name, calendar months and organization names are capitalized in English, but none of these are capitalized in French.
Due to these differences, it’s important that a developer avoids using CSS to handle capitalization. Leave capitalization up to the translators since they are the experts when it comes to styling rules in their own languages.
Enforce Text Alignment in a Smart Way
Text alignment is a common styling in CSS and is widely used for UI text in components such as buttons, menus and tabs. As in text editors where you can use space to center a text, in CSS you can center text by adding padding to a component. But a simpler and more localization-friendly way is using CSS text align property.
Here is an example of a case record from Milestone Tracker. The word “Done!” here is centered by adding a 40-pixel padding to the left and right as well as a width.
This looks perfect in English; however, when “Done!” gets translated into Portuguese, the text becomes longer and begins to overflow.
The hassle-free way to handle alignment is using the CSS text-align property, which is a better solution than moving text over using padding.
Text Length and Size Expansion Considerations
When UI text gets translated into another language, the text length often changes. For example, English is a very compact language, leading to longer translated text in most cases.
The general rule for text expansion is: “the shorter the English text, the longer the translated text is likely to be”. The following table shows the average text expansion rate for different English text lengths from IBM’s localization guidelines:
In addition to English text length, the target language also has an impact upon the amount of expansion. The following table shows the expansion factor for the English text “Share” into various languages:
In general, Asian languages are more space-friendly since they tend to be more compact than European languages. But there’s no “always”. CJK (Chinese, Japanese and Korean) languages have more complicated characters than Latin characters and their characters tend to be more square, thus taking more horizontal space. Japanese is especially problematic due to it’s use of Katakana for transliteration of foreign words. For example, “Follow” in English and Japanese both have 6 characters, but Japanese is 20% longer than English due to wider characters.
网友评论