ConveyThis 的多语言网站设计技巧

ConveyThis 的多语言网站设计技巧:通过实用的设计策略增强用户体验和全球影响力。
传达这个演示
传达这个演示
多语言设计技巧

现在,许多网站都提供多种语言选项,以便来自世界各地的访问者可以轻松浏览。互联网使市场成为一种全球体验,因此通过拥有一个网站,您就向每个拥有互联网连接的人打开了您的业务之门。但是,如果他们听不懂该语言,他们就不会留下来。多语言网站很容易。

幸运的是,将您的网站变成多语言的过程相当简单。 ConveyThis 可以在几分钟内创建您网站的翻译版本,然后您可以自定义您的语言切换器的外观和位置,进行一些布局更改以适应更冗长或从右到左的语言,并在原始语言出现的情况下更改颜色和图像不适合目标文化。

这个过程不是完全自动化的,你需要事先做一些研究。本指南解释了网站设计的某些方面,以帮助您轻松进入多语言网站和出色设计的世界。

一致的品牌

无论他们访问的语言版本如何,用户体验都需要保持一致。所有版本的外观和感觉应该非常相似,由于语言或文化差异,可能需要一些差异,但如果您在语言之间切换,您应该不会觉得自己被重定向到一个完全不同的站点。

因此,布局和您企业的特定品牌风格等设计元素在所有语言中都应保持相同。

这是超级容易做到WordPress与ConveyThis,它完美地识别文本,无论你选择的主题(即使它是定制的!

这将帮助您拥有一个适用于所有语言的具有相同主题的全局模板,从而获得相同的用户体验。

以Airbnb的主页为例,我们来看看澳洲版:

多语言

这是日文版:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

毫无疑问,这是同一个网站。背景是一样的,搜索功能也是一样。拥有统一的设计有助于您的品牌标识,并在添加新语言或更新时节省时间和精力。

清晰的语言切换器

为语言切换器选择一个显眼的位置,例如您网站的四个角中的任何一个,并将其放置在每个页面上,而不仅仅是主页。它必须很容易找到,没有人愿意寻找隐藏的按钮。

强烈建议语言名称使用他们自己的语言。例如,“Español”而不是“Spanish”会产生奇迹。 Asana 这样做,他们的网站有一个下拉框,其中包含可用的语言选项。

无题3

这样,它可以帮助访客感到宾至如归。如果您的网站已翻译,则语言列表应反映这一点。在英文网站上阅读“德文、法文、日文”并不能让人们更容易导航,而且给人的印象是英文版是最重要的。

“语言”胜于“地区”

许多国际大品牌会让您切换区域,以便能够以您的语言阅读网站。这是一个糟糕的想法,它会让访问者更难浏览。这些网站假设您正在使用该语言的地区浏览,因此您获得的是您的语言的文本,但您可能无法获得您感兴趣的地区的内容。

下图摘自Adobe网站:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

语言不应与其所在地区密不可分。以纽约、伦敦和巴黎等国际大都市为例。也许居住在英国的比利时人想从英国网站购买商品,但使用法语浏览。他们必须在使用他们的语言从比利时网站购买或从使用英语的英国网站购买之间做出选择,而他们两者都不想做。因此,您不小心造成了障碍。我们来看一个可以单独指定语言和地区的网站,Uber 网站。

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

这是优秀的设计。在这种情况下,语言切换选项已放置在左侧的页脚中,而不是下拉框,因为有很多选项,您有一个模式。语言名称也以其自己的语言引用。

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

作为奖励,您可以“记住”用户选择的语言,这样从第一次访问开始他们就不必再切换了。

自动检测位置

此功能非常有用,因此您的访问者不会使用错误的语言进行访问。并为用户节省时间,这样他们就不必寻找语言切换器。它是这样工作的:网站识别浏览器使用的语言或它们的位置。

但要小心,以防用户是游客并且不熟悉当地语言,因为他们需要语言按钮才能进行切换,因此,该工具并不总是准确的。

设计多语言网站时,不要在自动检测语言和语言切换器之间进行选择,后者是强制性的,而前者是可选的。

标志不适合替代语言名称

有 21 个西班牙语国家和 18 个英语国家,而在中国,有 8 种主要方言,因此国旗并不能很好地替代语言名称。此外,标志可能不是有用的指示器,因为它们可能会使不认识它们的人感到困惑。

灵活使用文本空间

这可能是一个挑战,但不可否认的是,翻译不会与原文占用相同的空间,有些可能更短,有些可能更长,有些甚至可能需要更多的垂直空间!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASP V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

汉字包含很多信息,因此不需要太多空间,而意大利语和希腊语则较为冗长,并且需要两倍的行数。一个好的经验法则是假设某些翻译可能需要30%以上的额外空间,因此可以灵活使用布局并为文本分配足够的空间。原始网站中的紧缩空间可能根本没有足够的翻译空间,英语是一种特别紧凑的语言,如果您发现需要缩写英文以使内容适合,您肯定会在遇到麻烦时时间翻译。

除了为文本提供伸展空间外,拥有自适应 UI 元素也是一个好主意,这样按钮和输入字段也可以变大,您还可以减小字体大小,但不要太多。

Flickr 网站是多语言的,我们来看看原来的“views”按钮:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

它看起来棒极了,一切都很棒,但是“views”在其他语言中是一个更长的词,需要更多的空间。

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

在意大利语中,它需要三倍的空间!

许多非拉丁文字,例如阿拉伯语,需要更高的高度才能使翻译适合。所以总而言之,您的网站布局应该足够灵活以适应不同的语言要求,这样在切换时就不会丢失原始的精美外观。

网络字体兼容性和网站编码

根据W3C,强烈建议您使用允许特殊字符的UTF-8对网页进行编码

很简单,UTF声明看起来像这样

fbnRHXPyY2OPijzOvFkH0y 柯

还要确保字体与不同的语言兼容,否则文本可能看起来难以辨认。基本上,在确定任何字体之前,请检查其与所需所有脚本的兼容性。如果要进入俄罗斯市场,请检查是否支持西里尔文字。

下图取自 Google Fonts,如您所见,您可以选择下载您需要的任何脚本版本。字符数较多的语言需要较大的字体文件,因此在选择和混合字体时要考虑到这一点。

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

关于从右到左的语言

随着中东市场的发展,您可以考虑创建一个吸引该地区访问者的网站版本,这意味着调整布局以使其与他们的语言兼容。大多数中东语言的一个特点是它们是从右向左阅读的!这是一个巨大的挑战,解决方案从镜像界面开始。

这是 Facebook 为从左到右的语言设计的,比如英语。

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

这是从右到左语言的翻转设计,例如阿拉伯语。

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

仔细看,设计中的所有位置都已镜像。

请查阅Robert Dodis的有关从右到左语言设计的文章,以获取有关如何执行此操作的更多信息。

一些从右到左的语言是阿拉伯语,希伯来语,波斯语和乌尔都语ConveyThis和英语,但请毫不费力地调整您的网站,以适应他们的语言要求,并确保一个伟大的用户体验。最棒的是,您可以自定义每种语言的外观,并更改字体类型或大小,如有必要,编辑行高。

选择合适的图标和图像

视觉效果具有非常浓厚的文化成分,是正确网站设计的关键要素。每种文化都赋予不同的图像和图标以意义,有些解释是积极的,有些则完全相反。有些图像反映了一种文化的理想体验,但在不同的背景下会让用户感到疏远。

这是一个图像示例,因为它在文化上不合适而必须被替换。请注意,并非所有图像都会冒犯他人,当您希望人们对您的产品感到好奇和感兴趣时,它可能只会产生冷漠。

这是 Clarin 的法语主页,其中有一位白人女性。这是韩国版,一位韩国女性担任品牌大使。

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvoOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

可能冒犯的视觉效果是某些文化似乎无辜的视觉效果,但是在另一种文化的眼中,它们展现的是非法或禁忌的行为,例如,同性恋或女性赋权的描绘。

这也适用于图标,而在美国,带有两个香槟杯敬酒的图标代表庆祝,在沙特阿拉伯,饮酒是违法的,因此必须将图标替换为符合文化的图标。

TsA5aPbhznm2N vv qL
(图片来源:偷猕猴桃)

因此,需要进行研究以确保您选择的图标适合目标市场。如果您不确定,可以随时谨慎行事。

例如,这三个以地球为主题的图标,第一个是为澳大利亚观众设计的;第二个,针对非洲观众;最后一个适合更多的全球观众,因为没有特别的区域。

CX90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3ow R6X3bRxeHdjJ

最后但同样重要的是,ConveyThis 可以翻译任何文本,只要它没有嵌入图像中。该软件将无法识别上面写的内容,因此它会保留原始语言,因此请避免嵌入文本。

颜色选择

正如上一节所述,不同文化对图像的解释不同,同样的事情也发生在颜色上。它们的含义是主观的。

例如,在某些文化中,白色是纯真的颜色,但其他人不同意,它是死亡的颜色。红色也是如此,在亚洲文化中,它用于庆祝活动,但对于一些非洲国家而言,它没有如此积极的含义,因为它与暴力有关。

然而,蓝色似乎是所有颜色中最安全的,通常与平静、和平等积极意义联系在一起。许多银行在其徽标中使用蓝色,因为它也可以表示信任和安全。

本文显示了世界各地颜色含义上的差异,这对于开始研究哪种语言最适合您的多语言站点非常有用。

格式调整

考虑在写日期时避免只使用数字,因为有很多不同的写法,在美国,官方格式是 mm/dd/yyyy 如果你只能看到数字,一些来自其他国家的用户使用不同的系统(例如dd/mm/yyyy) 可能会混淆。因此,您的选择是:确保翻译版本的日期格式经过调整或用字母写下月份,以便 ConveyThis 始终写出正确的日期。

此外,虽然在美国使用英制,但大多数国家/地区使用公制,因此您需要决定是否适合您的站点进行度量转换。

最好的 WordPress 翻译插件

将翻译插件添加到您的 WordPress 网站时有很多选择,但并非所有选项都以相同的方式工作,结果会有所不同。使用 ConveyThis,无论您的网站设计如何,都可以保证完美集成。

ConveyThis 是网站翻译的最佳选择,提供 92 种语言。这是一个可靠的 WordPress 插件,可让您快速拥有网站的可靠多语言版本。它可以理解站点的布局,检测所有文本并进行翻译。 ConveyThis 还包括用于文本自定义的直观编辑器。

ConveyThis 包括一个通用的语言切换器按钮,默认情况下适用于任何站点,但您也可以根据需要对其进行编辑。我们也遵循本文所述的设计原则:

  • 在网站的所有语言版本上使用一致的品牌。
  • 清晰的语言切换器和选择首选语言的选项。
  • 网站自动使用 UTF-8 编码。
  • 从右到左语言的正确接口

ConveyThis:值得信赖的多语言网站解决方案

人们普遍认为,网站翻译是一个复杂的过程。但是没有必要推迟,因为你不想处理头痛。一点也不令人生畏!使用ConveyThis,它将成为直接转换。它是无缝和快速的。

快速安装后,您的所有内容现在都可以在不影响格式的情况下进行翻译,其中包括由其他应用程序和结帐流程生成的内容。 ConveyThis 是一个简单的多语言网站翻译工具,不会像其他人那样弄乱您的代码。

还可以订购您网站的专业翻译!它们将帮助您将多语言网站完全转变为一种多文化网站,从而大大改善客户体验。请记住,如果您翻译网站,则还必须以新客户的语言提供客户支持。考虑投资于内容本地化和改编,以确保为访问者带来出色的用户体验。

评论(4)

  1. 谷歌翻译网站的视线结束!• ConveyThis
    2019年12月8日 回复

    […]瑞典语中与计算机有关的文本。像这样的元素帮助设计团队为客户访问平台制定了一条途径,以提供轻松的翻译体验并避免像以前一样下降滚动索引[…]

  2. 所有语言平台的全球搜索引擎优化ConveyThis
    2019年12月10日 回复

    […]围绕多语言平台和客户群的想法被提出,下面是对语言的文本成分的研究[…]

  3. 将您的WooCommerce多语种 + ConveyThis
    2020年3月19日 回复

    [...]并得到一个语言ConveyThis从团队看一看,并编辑它,所以你可以确保的措辞和语气是适合你的商店价值和[...]

  4. 如何自定义WooCommerce?• ConveyThis
    三月23日2020年 回复

    […]视觉总是充满文化含义,并且不同的受众对商店应如何展示其[…]抱有不同的期望

发表评论

您的电子邮件地址不会被公开。 Required fields are marked*