多语言网站设计小贴士：9个实用技巧

在这个联系越来越紧密的世界里，多语言网站变得越来越普遍。但要设计它们？这可比你想象的要复杂一点，尤其是当你开始考虑需要对网站进行哪些网页设计改动时。

基本操作很简单 — 使用 Weglot，你可以在不到 5 分钟内为你的网站添加不同语言。但接下来你需要考虑语言切换器要放在哪里，当用户从英语切换到从右到左（RTL）语言时，如何调整布局变化，以及使用符合文化习惯的颜色、图片和图标。

在这份指南里，我们会看看一些最重要的设计考量，帮你规划一个符合最佳实践的多语言网站。

1. 使用全局模板，保持品牌一致性

当有人访问你的多语言网站时，你会希望他们获得一致的用户体验，无论他们访问的是哪个语言版本的网站。这意味着，访问你英文网站的印度访客，应该看到和印地语版本一样的品牌和设计。

你无法阻止双语或多语访客看到你的多语言网站的不同版本，但你可以确保当他们从默认语言切换时，看到的是相同的品牌、布局和网页设计元素。

如果你使用像WordPress这样的内容管理系统，并搭配Weglot，那么创建一个统一的多语言网站就会非常简单。Weglot会无缝集成到你的网站构建器主题中，并自动翻译你的内容。它还会集成到你网站所有其他重要功能中，比如电商插件——这意味着你为多语言网站添加不同语言时，完全不需要使用不同的主题或设计。

举个例子，当你从澳大利亚这样的国家访问 Airbnb 主页时……

……然后切换到日语，设计和品牌在两种语言中都是一致的。

不仅拥有令人一眼就能认出的设计有助于强化品牌形象，还能为多语言网站的未来更新提供便利，避免因不同语言导致的用户界面或用户体验调整带来的困扰。

2. 让语言切换器非常容易找到

把你的语言切换下拉菜单放在首页和网站其他每个页面的显眼位置。你会发现多语言网站通常会将语言切换器放在页面的页眉或页脚。

无论你为多语言网站选择哪种方案，都要确保它非常容易找到。

另外，你还要确保语言切换选项清晰明了。最好用语言本身的名称来表示，比如用“Deutsch”而不是“German”，用“日本語”而不是“Japanese”。

比如，Asana 就用了一个下拉菜单，里面列出了所有可用的语言名称：

你希望你的多语言网站访客感到受欢迎，无论他们说什么语言。把你的语言切换器放在容易找到的地方，将有助于实现这一点。

3. 让访客选择他们喜欢的语言

你可能会觉得，让用户自己选择喜欢的语言是件理所当然的事，但很多多语言网站偏偏让选语言变得特别麻烦。它们不是让用户选语言，而是强制他们切换地区。

大品牌在这方面做得最差劲。你经常会发现，很多网站在你只想改默认语言的时候，却非要你切换多语言网站的地区（比如，从 www.adobe.com 切换到 www.adobe.com/us/）。

一个人会说印地语，不代表他想为了一个公司的多语言网站就切换到那个地区。如果他住在纽约，想在美国网站上购物，但又想用印地语阅读网站内容呢？别给他们从你的多语言网站购物设置障碍——帮助他们用自己喜欢的语言访问你的内容吧。

这是一个真正让访客选择他们喜欢语言的公司——Uber 在网站底部展示了它的语言切换选项：

当你点击“English”时，会弹出一个窗口，让你在英语和法语之间选择你喜欢的语言：

Uber 的语言切换设计很棒的一点是，它让访客可以选择自己喜欢的语言，而不会强制他们切换地区。

如果你想进一步提升访客的用户体验，可以考虑“记住”他们的默认语言，这样他们下次访问你的多语言网站时，网站就会自动以他们的母语加载。

自动检测语言

很多多语言网站会检测网页浏览器的母语，从而自动为用户设置主要语言。

尽管这确实能为用户节省一些时间，但通过语言检测来提供自动翻译并不是一门精确的科学。重要的是要考虑到那些可能会访问到你的多语言网站“错误”版本的用户。

访客可能身处西班牙，你的多语言网站会自动检测到并显示西班牙语，但他们可能是一个母语为英语、看不懂西班牙语的人。

所以，如果你要自动检测位置，也要提供一个语言切换器，这样访客就可以选择不同的语言。

Weglot提供根据访问者浏览器语言自动重定向的选项。通过14天免费试用，在你的网站上看看Weglot的效果吧。

国旗 vs 语言名称

国旗经常被用来表示语言，但你需要记住 一些情境问题：

• 国旗代表的是国家，而不是语言。
• 一个国家可以有不止一种官方语言。
• 一种语言可以在多个国家使用。
• 访客可能认不出某个国旗（因为图标太小），或者他们可能会被相似的国旗搞混。

归根结底，你希望提供的语言切换选项在任何语言下都易于理解。

4. 考虑文本扩展问题

当文本从一种语言翻译成另一种语言时，比如使用 Google 翻译，原文和译文的长度会不一样。这在设计布局时可能会带来挑战。

有些书面语言比其他语言更简洁。像日语和中文这样的语言，可能用一两个字符就能表达一段信息，而在其他语言中，你可能需要好几个词。

像西班牙语和英语这样的语言比较冗长，有时需要的空间会比其他语言多出30%以上。

W3C关于翻译中文字大小的指南，我们强烈建议你完整阅读，里面有很多很棒的建议。

W3C 强调了为什么机器翻译工具拥有自适应的用户界面元素（比如按钮、输入框和描述性文本）至关重要。

举个例子，当 Flickr 被翻译成不同语言时，设计师就不得不考虑照片下方显示浏览次数的文本。

下面这个表格展示了“view”这个词在不同语言中的长度对比，是相对于英文原文的比例哦：

从英文到意大利文，这可是300%的扩展啊！

这里要记住的是，文本的宽度通常会变长或变短，所以你的多语言网站一定要考虑到这一点。另外，源文本越短，翻译出来的文本可能就越长哦。如果你发现空间不够用，可以试试换一种不那么直译的翻译方式，或者根据新语言调整字体大小。

字符和行高也是一个需要考虑的问题。非拉丁文字的字符通常会比拉丁文字高很多，这很常见。像阿拉伯语这样的文字，行间距也需要比拉丁语言更大一些。

5. 考虑网页字体的兼容性和编码问题

W3C 建议你始终指定网页的编码。它推荐使用 UTF-8，这样可以确保特殊字符无论在哪种语言下都能正确显示。

下面教你如何在网页头部进行 UTF 声明：

你使用的任何网页字体都需要兼容你的WordPress 多语言网站支持的所有非英语语言，尤其是那些非拉丁语系的语言。这意味着你使用的字体必须包含所有需要的字符和字形。

有些字体可能支持拉丁文字，但不支持从右到左（RTL）或西里尔文字，所以在决定使用任何字体之前，请检查你需要的非英语语言是否都包含在内。

比如，Google Fonts 就允许你在下载字体包之前选择语言：

一种语言可能包含数百个字符，这会让字体文件变得非常大——这也是你在为多语言网站选择字体时需要记住的另一点。

6. 为从右到左的语言进行设计

为从右到左的语言设计页面可能会带来挑战。正如SteelKiwi 开发者 Robert Dodis 在 Smashing Magazine 上所写，为 RTL 设计意味着“翻转界面”。

比如，下面是 Facebook 从左到右的设计样式：

而下面是 Facebook 在阿拉伯语中从右到左的设计样式：

注意看，甚至连滚动条的位置都变了！

如果你同时为从左到右（LTR）和从右到左（RTL）的语言设计，那么你需要考虑把你的设计做成镜像。

我们强烈建议你阅读Robert在Smashing Magazine上的文章，里面详细介绍了如何为RTL（从右到左）语言进行设计。我们不想在这里重复造轮子，所以请去阅读他的教程吧。我们想向你展示Weglot如何支持RTL语言，并让你的多语言网站翻译过程变得轻松。

Weglot的翻译服务支持RTL语言，通过CSS规则，你可以调整多语言网站的布局来适应它们。以下是一些可用的RTL语言：

• 阿拉伯语 (ar)
• 希伯来语 (he)
• 波斯语 (fa)
• 乌尔都语 (ur)

使用Weglot为你的多语言网站添加RTL语言后，你可以通过对布局应用CSS规则来定制它的显示方式。在WordPress后台，前往Weglot > 语言按钮设计（可选），然后向下滚动到覆盖CSS。在文本区域中添加任何你想要的CSS规则——你可能想改变字体、大小、行高等等，来调整主要语言的样式以适应你的设计。

这就是你使用Weglot添加和设置RTL语言的所有步骤！你可以在文档中了解更多关于Weglot如何支持RTL语言的信息。

7. 使用符合文化习惯的图片和图标

图片、图标和其他图形是任何网页都不可或缺的元素。但视觉元素本身就是主观的，在不同的文化背景下可能会有不同的解读。

比如，Clarins 法国版主页上展示的是一位白人女性：

但当你访问这家公司的日本版主页时，它展示的是一位日本女性的图片：

视觉内容也可能会冒犯到一些人。对西方人来说很普通的图片，在其他国家可能就是禁忌。举个例子，在同性恋仍不合法、女性权利尚未完全被认可的国家，展示同性伴侣或性别平等的图片可能就不会被接受。

你还需要考虑一些小细节，比如图标，以及它们对访问你多语言网站的特定地区用户意味着什么。举个例子，一个地球图标对讲英语的澳大利亚用户来说，和对非洲用户来说，可能看起来会很不一样：

上面第三个图标表示地球，但没有突出显示某个特定国家或地区，这让它更适合用在多语言网站上。

你需要仔细检查图片和其他图形元素，考虑到不同地区和文化的敏感性。

避免使用带有嵌入文本的图片和其他图形。像Weglot这样的工具无法翻译嵌入文本，所以最好完全避免使用它们。

8. 使用符合当地文化的颜色

不同的文化对颜色的看法和解读在全球范围内差异很大。

比如，在西方文化中，红色象征着爱、活力、激情和危险。而在亚洲文化中，它是一种非常重要的颜色，象征着好运、繁荣、庆祝和长寿。相反，在一些非洲国家，红色却与死亡和侵略有关。

蓝色被认为是设计中最安全、全球接受度最高的颜色，因为它有很多积极的联想。它是一种平静的颜色，被认为是舒缓和宁静的，尽管它也与悲伤和抑郁有关。蓝色也是银行标志最常用的颜色，因为它代表着信任和权威。

在为你的多语言网站设计选择颜色时，一定要用谷歌搜索一下你打算使用的颜色所代表的含义。

9. 日期和其他格式

并非所有国家都使用相同的日期格式，即使是讲英语的国家也一样。比如，在英国和欧洲，日期通常是“日-月-年”的格式，而在美国则是“月-日-年”。

你可能还需要翻译计量单位，这有助于搜索引擎优化（SEO），具体取决于你的目标受众。尽管世界上90%的国家都使用公制，但美国、利比里亚和缅甸仍然使用英制计量单位。

为你的设计选择合适的WordPress翻译插件

WordPress翻译插件种类繁多，它们与你特定设计的工作方式也大相径庭。但有一个解决方案，能保证与你的多语言网站无缝集成，那就是Weglot。

你甚至可以使用 Weglot 的 Visual Editor 在网站前端和所有子域名上翻译你的内容，这样你就可以在网站设计和布局的实际环境中看到它的效果，类似于谷歌翻译。

使用 Weglot，你的语言切换器的设计和位置是 100% 可自定义的。默认按钮设计成适合任何网站，但你也可以通过自定义 CSS 来调整它的样式，使用你喜欢的任何格式。

更棒的是，Weglot支持本文中提出的设计原则，包括：

• 使用全球模板来保持品牌一致性
• 提供易于查找的语言切换选项
• 让访客选择他们喜欢的语言
• 自动UTF编码
• 支持从右到左书写的语言

我们来看看 Weglot 提供的一个最重要的设计相关功能：自定义你的语言切换器。

用 Weglot 自定义你网站的语言切换选项

在你的 WordPress 多语言网站上安装并设置好 Weglot 插件后，系统会提示你输入 API 密钥、默认语言，以及你想把内容翻译成哪种语言，就像谷歌翻译一样简单。

如果你还没有 Weglot 账号，需要先创建一个才能获取 API 密钥哦。

保存更改后，刷新你的新多语言网站页面，你就会在右下角看到一个新的语言切换器。点击它，它会展开显示所有可用语言，让你选择你喜欢的翻译版本。

要开始进行一些基本调整，请前往 Weglot > 语言按钮设计（可选）。在这个界面，你可以选择：

• 是否使用下拉菜单
• 是否使用国旗图标
• 国旗图标的类型
• 显示语言名称
• 只显示语言代码

这个Override CSS（覆盖CSS）部分是你可以应用CSS规则的地方，用来调整你的语言切换器在多语言网站上的样式。比如，你可以：

• 移除按钮上的箭头
• 更改背景颜色
• 添加滚动条
• 移除边框
• 添加内边距

Weglot 在这篇文章中提供了一些关于 自定义语言按钮设计 的例子。

当你向下滚动Weglot的配置屏幕时，你会找到关于如何放置语言切换器的说明：

• 在菜单中。前往 外观 -> 菜单，然后把 Weglot Translate 自定义链接拖放到你想要的位置。
• 作为小工具。前往 外观 -> 小工具，然后把 Weglot Translate 小工具拖放到你想要的位置。
• 使用短代码。 使用Weglot短代码 [ weglot_switcher ]（不含空格），将你的语言切换器放置在你想要的位置。
• 在源代码中。你可以在HTML页面的源代码中，你想放的任何位置添加以下代码：

<div id=”weglot_here”></div>

为了向你展示语言切换器如何在多语言网站上进行自定义（无论是WordPress、Shopify还是其他任何类型的网站），你可以在下面看到Patyka是如何将语言切换器显示在页面左上角的。

语言会以它们的名字显示出来，当你点击切换并选择一种语言时，页面内容就会更新，翻译成你选择的语言。

案例分享：Maestrooo 正在使用 Weglot

Maestrooo成立于2013年，是一家法国的网页开发公司，客户包括From Future和Patyka。现在，Maestrooo负责法国大部分Shopify Plus客户的业务。

Maestrooo 当时正在寻找一个稳定可靠的多语言网站解决方案，希望能轻松适应客户需求。在测试了许多解决方案，并发现它们在 SEO 或 hreflang 管理方面存在问题后，团队最终发现了 Weglot。

Weglot 能够翻译 Maestrooo 客户网站上的所有内容，无论是动态内容、其他应用生成的内容，甚至是结账流程，而且完全不会影响他们多语言网站的布局。

除了为客户设计定制网站，Maestrooo 还为 Shopify 主题商店开发官方主题。当其他多语言网站解决方案经常会破坏 Maestrooo 主题的格式时，Weglot 却能提供一个每次都能正常工作的翻译解决方案。

Maestrooo 每年帮助 8,000 到 12,000 名客户开始使用 Shopify，并使用 Weglot 来搭建他们的多语言网站。

通过本地化设计实现全面的文化优化

这篇文章里我们探讨的每个设计原则，都能帮你打造出一个既美观又提供愉悦用户体验的多语言网站。

为了让你的网站访问者和客户能用他们的母语获得出色的体验，除了多语言网站本身，你还需要考虑更多。比如，把你的营销材料和客户支持也翻译成多语言。

另外，也要考虑你的多语言网站的速度和性能。在一些没有高速网络的国家，下载大型语言包会让访问者更难访问你的内容。

有了合适的网站多语言翻译插件，再加上提供易于使用翻译选项的网站设计，你就能用客户喜欢的语言，通过美观易用的界面（UI）和良好的用户体验（UX）来帮助他们。现在就来免费试用 Weglot 吧，我们提供 14 天免费试用，无任何承诺，或者你也可以免费参加 产品导览，无需注册！