石家庄网络公司透露如何做出国际视野的好网站

石家庄网络公司已经真正成为全球性的网站，这意味着您的客户现在可以将其产品销售给世界各地的数百万人。技术使向新市场扩展变得相对容易，并且其中一些正在以惊人的速度增长。这是一个很好的机会，不容错过。难怪我们将国际化确定为任何电子商务增长战略的基本趋势。

 

现在，全球约有一半的人口可能在线，但是只有大约25％的网络用户是说英语的人，因此您需要使客户的网站适应其他人的需求。转换网站或应用程序，或转换仅英语的旧代码库以支持多种语言，都带来了许多挑战。但这还不是全部：您还需要考虑文化差异，这是许多品牌无法做到的。 

 

在本文中，我们将讨论国际化（i18n）（一种设计应用或网站，使其无需进行工程更改即可适应各种语言和地区的过程）以及本地化（l10n）（一种适应应用程序或网站的过程）的过程。通过翻译文本并添加特定于语言环境的组件来针对特定地区或语言的国际化应用程序或网站。我们还将与设计师和开发人员交谈，以了解他们用于为国际用户创建数字产品的UX最佳实践和工具。 

 

通过Shopify合作伙伴计划发展您的业务

无论您是提供网页设计和开发服务，还是想为Shopify应用商店构建应用程序，Shopify合作伙伴计划都将使您成功。免费加入并获得收益共享机会，开发人员预览环境和教育资源。

 

在设计过程中国际化和本地化的重要性

正如Shopify专注于国际UX营销的Robyn Larsen所指出的那样，目标是建立一种体验，以支持世界各地的所有用户，并且当这种体验不符合特定的文化时，就可以对其进行定制。 

 

在SmashingConf Freiburg 2019上查阅她的演讲，了解为什么International is the New Mobile First。

 

对于Uber的产品设计师Femke van Schoonhoven而言，内容和本地化在设计过程中（包括原型设计和用户研究阶段）发挥着巨大作用。她的设计需要能够扩展并足够灵活，以支持被翻译成30多种语言。 

 

在2018年，她正在为巴西和墨西哥市场开发项目，并与另一位设计师一起用英语撰写内容。

 

她回忆说：“天真地，我们认为我们可以将最后的翻译留到最后，我们可以在测试的早晨对原型进行更新。” “我们创建了一个包含三列（英语，西班牙语和葡萄牙语）的电子表格，并开始在电子表格中逐字逐句地翻译内容。我们几乎不知道这是我们的第一个错误。” 

 

Femke知道，不考虑视觉效果而翻译内容是没有意义的。他们在体验的流程和层次结构的上下文中丢失了，这在用户测试期间导致了错误。

 

国际化：两种语言的付款确认

 

“在上面的示例中，我们正在确认用户是否要再次开始付款过程，” Femke解释说。“右侧是左侧屏幕的葡萄牙语翻译不佳，其含义完全不同。当我们在采访中迈出这一步时，用户就陷入了困惑。

 

Femke和她的设计合作伙伴意识到，他们完全忽略了对内容进行本地化的重要性。他们未能给予内容应有的重视，并低估了内容对无法完成目标的设计和用户的影响。

 

“他们没有给予内容应有的关注，并低估了它对无法完成目标的设计和用户的影响。”

“本地化不只是翻译，” Femke警告说。“您需要考虑消息的意图，设计的目标以及本地环境。我们忘了考虑转译，即如何在保持原始意图，样式，语气和上下文的同时，将消息从一种语言适应到另一种语言。”

 

您可能还会喜欢： 重新设计设计过程：今年如何更有效地工作。

 

为避免犯同样的错误，Femke建议在设计过程中本地化客户内容时始终考虑上下文和含义。仅仅等到结束或产品发布还不够。在用户研究过程中，正确本地化的内容至关重要，因为它有助于告知客户数字产品的设计。

 

计划文字扩展

Luke Murphy-Wearmouth是语言学习平台Memrise的设计经理，假设 UI中支持尽可能多的语言。设计师还应优雅，体贴地处理所有语言边缘案例。 

 

“文字的长度在不同的语言中可能会千差万别，”卢克解释说。“例如，像“立即开始学习！”之类的短语。是“ Empieza的aprender ahora！” 西班牙语和“现在开始学习！” 用普通话，因此我们必须确保页面中使用的所有模块（从按钮到页面部分）都具有足够的响应能力，并且可以容纳多行。” 

 

对于关键区域，例如标题或课程中的学习提示，团队使用一小段JavaScript来计算短语中的字符数，并放置不同的类（“小”，“中”和“大”）在短语上更改大小。如果您需要开箱即用的解决方案，Luke建议使用Jeremy Keith的非jQuery版本的FitText。

 

有时候，简单的策略并不适用。当团队最近重构Memrise的学习课程时，他们发现某些语言中的长单词存在问题。例如，在意大利语中，数字串在一起而没有空格，因此2,345个字母变成了milatrecentoquarantacinque。虽然很少会写出数字，但是如果您正在为一家德国餐厅设计一个移动网站并必须考虑Nahrungsmittelunverträglichkeiten（食物不耐症）怎么办？

 

在这种情况下，Luke建议使用断字法来解决问题，但这是最好的方法。 

 

他解释说：“不幸的是，CSS连字符没有考虑明显的连字符位置，这会使您的文本显得很笨拙。” 

 

目前，石家庄网络公司针对可能存在问题的语言的最佳策略是使用语言选择器将连字符设置为自动，如下所示：

 

css

span:lang(de) {

hyphens: auto;

}

然后使用­来容纳麻烦的单词，这会添加一个看不见的连字符，使浏览器可以根据需要中断单词。否则，它将呈现时不带连字符。 

 

伪本地化和伪翻译

当Shopify开始着手翻译产品（现已提供21种语言）时，他们在六个月内交付了前六种新语言。 

 

“在此过程中，我们看到了产品许多方面的设计突破，” Robyn回忆道。“我们观察到文本开始超出按钮边界框的出血，我们观察到网格开始进入排水沟，并且观察到导航对于非英语用户来说变得难以辨认。”

 

我们观察到文本开始超出按钮边界框的出血，观察到网格开始进入排水沟，并且观察到导航对于非英语用户来说变得难以辨认。

 

Robyn Larsen，Shopify

为了帮助对客户的设计进行压力测试并假定最坏的情况下进行文本扩展，Robyn建议使用一种称为伪本地化的技术（一种软件测试实践，使您可以通过复制语言来扩展文本）。另外，在您进入浏览器之前，请查看适用于Sketch的伪翻译插件，该插件非常适合测试设计在各种语言中的外观。

 

“作为最佳实践，请考虑使用德语进行压力测试，” Robyn建议。“它通常比英语长30％，或者使用中文，日语或韩语等基于字符的语言，这往往会破坏核心功能。” 

 

国际化伪本地化热插拔工具

Shopify的国际团队构建了一种语言热交换工具，使开发人员可以使用各种语言或伪翻译对浏览器中的UI进行压力测试。 

计划可维护性

Robyn建议在图像处理方面采用全球化方法，以确保可以轻松地维护客户的网站，扩展其规模，并且由于所有翻译工作而不会导致加载速度缓慢。 

 

“让我们举一个非常简单的例子，”罗宾解释。“对于我们导出到台式机，平板电脑和移动设备的每种视觉，我们还需要导出该图像以支持视网膜显示。相当于六个图像。将语言添加到混合中，这是多达42张图像以支持7种语言。这对网站的性能不利！” 

 

如果您使用的是没有文字的视觉图像，则只需处理六张图像，而不是可用于所有语言的42张图像。 

 

“可以在Slack.com上找到生产中可维护性的一个很好的例子，” Robyn指出。“他们的团队创建了一个HTML / CSS框架，该框架可以复制其产品，从而可以轻松地交换翻译和图像。在Shopify，它启发了我们在Dotcom属性上的多个页面上实现UI插图，使我们能够在显示本地相关内容的同时显示管理员的简化版本。” 

 

国际化：文化上独立的形象

创建文化上独立的图像（例如在Shopify的电子邮件营销页上使用这些英语，德语和日语版本）可确保可维护性并节省时间和精力。

计划文化差异

使产品适应用户的文化差异也很重要，这不仅仅是将客户的网站或应用翻译成另一种语言而已。 

 

“当今，大多数现代网站设计都具有简洁明了的外观，并带有很多负面空间，” Robyn解释说。“但是，在日本，网站上有很多密集文本。这并不是因为日本站点随意地本地化，这种外观实际上是日本消费者所喜欢的，他们更喜欢在首页上看到所有内容！”

 

例如，在加拿大，Shopify能够使用较少的传统图像来传达多样性主题，而这种方法在日本仍然行不通，因为日本的文化仍然非常传统，并且对更自由的图像很敏感。

 

国际化：西方与亚洲文化偏好

西方文化偏向于更简单的外观，而亚洲国家/地区的网站往往很繁忙，此处以星巴克的.com和.co.jp版本为例。 

与说英语作为第二语言的人一起组织您创建的内容

当跨文化设计的作者，插画家Senongo Akpem在内容长或用户界面复杂的页面上工作时，他发现保持视线以英语为第二语言的用户非常有用。 

 

Senongo解释说：“即使您能说流利的英语，在屏幕上阅读也会使人迷失方向，而在阅读印刷品时却没有视觉提示。” “一种策略是在页面顶部为人们提供内容细分。您的读者可以扫描此列表以获取上下文，并快速进入所需的部分。对于更长的报告或学术内容，这些可能是链接到不同章节的一句话关键摘要。”

 

一种策略是在页面顶部为人们提供内容细分。您的读者可以扫描此列表以获取上下文，并快速进入所需的部分。

 

Senongo Akpem

作为第二种国际化策略，Senongo建议在与客户合作时提供清晰的用户入门信息。这包括为UI的组织原理和功能提供透明，图解的视图，这可以帮助可能不太了解英语的人准确地了解他们所要学习的内容。

 

国际化：英国护理人员津贴信息网站

由英国政府数字服务局（Government Digital Service）创建的英国信息网站gov.uk ，在护理津贴的页面顶部显示了一个目录。 

让客户的用户选择自己的语言环境

伊莱Schütze拉米雷斯，在一个网络工程师Monzo，国际化时所使用的语言环境来区分网站版本。语言环境是语言和地区的组合。例如，en-US是美式英语，en-GB而是英式英语（“ en”是英语的语言代码）。但是，当您对客户的应用或网站进行本地化时，如何确定将显示其客户的用户的语言环境呢？ 

 

Eli解释说：“您可以通过几种方法来猜测用户的首选语言环境。” “例如，使用他们的IP地址推断他们的位置，但是这种方法仅在某些时候是正确的。您永远无法真正知道您的用户是本地人，正在旅行，已移民还是什至只是在学习一种新语言！” 

 

您可能还会喜欢： 石家庄网络公司 如何构建多语言Shopify应用程序。

 

Eli建议让客户的用户选择自己的语言环境。使语言环境切换器易于在您的站点上找到，并记住下次的选择。避免仅将语言表示为标志，并确保用该语言写出语言名称，以便用户可以轻松识别。

 

选择合适的国际化图书馆

Taulia的UI工程师Robin Dykema建议，在为客户设置好翻译后，i18n库可以根据用户的语言环境帮助提取正确的文本。 

 

她承认：“在处理性别和多元化规则时，决定显示哪种文字会变得非常棘手，性别和多元化规则会因语言而异。” “使用图书馆可以最大程度地减少这种痛苦，并有助于传递动态文本。”

 

有几个优秀的国际化框架和库可供选择。对于较小的应用程序，Robin建议使用轻量级的库（例如Polyglot），该库可以提供足够的功能以进行正确的本地化。对于更大，更复杂的应用程序，像i18next这样的成熟的国际化框架可能更合适，并提供其他国际化支持，例如检测浏览器语言和缓存翻译功能。其他流行的库包括Format，Lingui和Globalize。

 

国际化：国际化图书馆

国际化库i18next与流行的前端框架（例如React，Angular和Vue）以及Node.js，PHP，iOS，Android等集成在一起。 

格式化日期，时间和数字

即使本地化的应用程序只会使用英语，本地化时格式化日期，时间和数字也是必不可少的。 

 

罗宾指出：“美国的日期格式与欧洲的日期格式不同。” “例如，像'2/3/2020'这样的日期将根据用户的原籍国做出不同的解释。不同的国家/地区也喜欢使用不同的时钟（24小时和12小时），因此计算时区可能非常困难。数字的格式也将因地区而异。例如，在美国，您将格式123456.78设置为123,456.78，而在西班牙，相同的数字格式将设置为123.456,78。” 

 

一些国际化库可能已经具有日期和数字格式设置功能。对于那些没有的人，Robin建议使用本机浏览器API intl —一种用于简单格式设置的轻量级选项。对于更复杂的格式，较重的库（例如Moment或Moment Timezone）可能更有用。替代品包括世昕，日期FNS和Day.js。

 

确保您为客户的项目创建的在线表单包含所有内容 

如果您的名字包含特殊字符，变音符号或变音符号，或者用与英语字母不同的脚本书写，那么您会熟悉一些人在在线填写表格时遇到的问题。 

 

正如Eli所指出的那样，开发人员臭名昭著地对人们的名字做出了许多假设。从历史上讲，在为全球受众群体服务时，字符编码一直是头疼的问题，这无济于事。过去，计算机很难识别字母以外的字符，但幸运的是，情况已不再如此。

 

“请确保您的网站使用Unicode编码，即UTF-8确保您的网站支持所有脚本，字母，特殊字符，以及重要的是emoji表情，” Eli建议。“一旦有了这些，就可以让您的表单（尤其是用户输入姓名的表单）接受的不仅是AZ字符，还可以创建一个包含所有内容的用户体验。如果您要提供诸如银行或教育等基本服务，这将变得至关重要。”

 

国际化：Jet2无效名称问题

英国休闲航空公司Jet2（左）将EliSchützeRamírez的名字称为“无效”，甚至不接受撇号，这可能是灾难性的，尤其是对于爱尔兰人的名字。另一方面，EasyJet（右）则采用了更为全球化的方法。名称没有问题。

考虑与语言相关的CSS和CSS逻辑属性

当提到国际化时，CSS可能并不是想到的第一件事，但是设计师和开发人员Chen Hui Jing指出，由于CSS的目的是在网络上呈现内容，因此它实际上起着重要的作用。 ，尤其是对于多语言网站。

 

您可能还会喜欢： 使用HTML和CSS拥抱本地化和多语言内容。

 

她建议特别注意:lang()伪类和CSS逻辑属性。

 

该:lang()伪类

该:lang()伪类选择识别即使语言元素之外声明的内容的语言。

 

例如，一行带有两种语言的标记，如下所示：

 

html

We use italics to emphasize words in English, 但是中文则是用着重号.

…可以使用以下样式：

 

css

em:lang(zh) {

font-style: normal;

text-emphasis: dot;

}

如果您的浏览器支持text-emphasisCSS属性，则应该能够看到在内的每个汉字上添加了强调标记（传统上用于强调东亚文字的印刷符号）。Chrome需要-webkit-前缀。