网站语言选择器：小技巧、好方法和例子

如果你有一个多语言网站，你肯定会想在网站上放一个语言选择器（有时也叫语言切换器）。这样你的访客就能看到你提供了哪些翻译版本，方便他们选择自己喜欢的语言。

语言选择器看起来就像这张截图一样：

不过，它的显示方式有很多种，比如你的语言选择器放在哪里（页眉、页脚等等），以及有没有显示国家国旗的图标。

好消息是，添加一个语言选择器并不一定很难。我们会讨论从零开始设计和开发你自己的语言选择器工具需要注意些什么。

另外，还有一个更简单的办法：那就是使用自带（且可自定义）语言选择器的翻译软件或插件（这对网站本地化也很有帮助哦）。

在这篇文章中，我们将探讨不同类型的语言切换器，一些让你的语言切换器保持高度可见和实用的最佳实践，以及一种在你的多语言网站上添加和设计语言选择器的简单方法。

想马上找到解决方案？试试Weglot的14天免费试用吧，几分钟就能让语言切换器在你的网站上运行起来！

添加你网站的语言选择器（小技巧和好方法）

如果你已经有一个多语言网站，并且只是想添加一个语言选择器，那么你可能已经有设计师做好的设计稿，可以交给开发人员去实现。这里有一些小技巧，可以帮助你提升整体用户体验：

让人一眼就能找到

当一个非英语母语的用户访问你的英文网站时，他们很可能会查看主要的导航区域（比如页眉、页脚），看看你的网站有没有他们熟悉的语言版本。

但如果他们没看到语言选项，就会觉得你的网站只有英文版，然后直接离开。这对你的业务可不好。

所以，最好的做法是了解你的访客会在哪里寻找语言选择器，然后把它放在那里，无论是放在顶部导航菜单旁边、页面底部、侧边栏，还是以弹窗形式出现。

考虑你计划提供多少种语言版本

比如，如果你只打算把网站翻译成一种其他语言，那么可能就不需要用下拉菜单。

不过，如果你计划翻译成三、四种甚至更多不同的语言，那么下拉菜单会看起来更整洁，用起来也更方便。

功能优先于形式

是的，你肯定希望语言选择器能和你的网站设计风格保持一致。但别忘了，设计的重点是实用性。

你不想让访客感到困惑，你希望他们能非常清楚地知道你的网站有其他语言版本。你还希望语言切换能尽可能轻松。

再次强调，如果你有一个多语言网站，并且不打算使用软件来管理翻译，那么自己设计和开发语言按钮是合理的。

但如果你正在使用翻译软件，那就不需要了。这是因为大多数网站翻译软件都会让你添加一个语言选择器。（我们建议使用翻译软件来翻译你的网站并保持翻译内容更新。）

想要一个像 Inbenta 那样时尚的语言切换器吗？在你的网站上免费试用 Weglot，探索设计你的语言选择器的各种可能性。

用语言的母语形式来显示

你可能在不知不觉中，把网站上的语言列表用你的母语形式显示了。如果你的网站是英文的，那可能意味着你在语言选择器里写的是 German、Chinese、Spanish 等等。

然而，这对你的受众来说是反直觉的。语言的母语名称可能和英文名称完全不同！

举个例子：我们的语言切换器列出了 Français（法语）、Deutsch（德语）、Español（西班牙语）、Italiano（意大利语）、日本語（日语）和 Nederlands（荷兰语）等选项。这样，母语使用者就能轻松找到他们偏好的网站语言。

使用国旗图标可能不是最好的选择

人们通常觉得国旗是语言很好的视觉代表，但事情没那么简单。

我们的意思是：在美国，英语是和美国国旗联系在一起的，而不是英国国旗。

巴西人会把葡萄牙语和巴西国旗联系起来，而不是葡萄牙国旗。西班牙的西班牙语使用者也是一样——他们会把自己的语言和西班牙国旗联系起来，而不是墨西哥国旗。

当然，你也可以使用国旗。从用户体验设计来看，它们确实很好看，因为它们更醒目，更容易找到，而且可能适合你的使用场景。但这取决于你的目标受众是谁，因为你可能会冒着疏远一部分受众的风险。

谨慎使用重定向

一种网站语言选择的方法是根据用户的位置（通过IP）或浏览器语言自动重定向他们。

后者是网站检测到用户的浏览器语言，然后立即将访客跳转到相应的语言版本。

尽管这很方便，但完全依赖自动重定向并不总是最好的主意。这是因为用户的地理位置不一定和他们使用的语言相符。

想象一下，一位中国游客在西班牙度一个月的假。如果他们一打开网站就直接跳转到西班牙语版本，肯定会一头雾水！

就算他们的浏览器语言设成了丹麦语，也不代表他们想把实体商品寄到丹麦的地址，对吧？

简单来说，最好还是问问用户的偏好，而不是自己瞎猜。用户应该能自由选择他们的地区、默认语言和货币。Airbnb 就是个很好的例子；他们不会默认你懂你所在国家的语言。只要点击那个地球图标，你就能选择你的语言、地区，然后在下一个选项卡里选择你的货币：

‍“

这并不是说跳转就一定不好；比如，一个在法国的法国用户不小心点进了网站的美国版本，这时候跳转就很合理。

不过，有些网站在自动语言选择方面做得就很棒。比如，Zara 就提供了留在英国网站或跳转到法国网站的选项：

这在很多搜索场景下都很有用，比如你想在你旅行的地方，在电商网站上查某个商品的库存或详细信息。

尽可能使用自动补全功能

在下拉菜单里加上自动补全功能总是个好主意，这样当你输入前几个字母时，网站就能帮你找到你想找的语言。

如果你提供的语言种类很多，用户需要滚动才能找到他们想要的语言，那么自动补全功能就特别有用。这样一来，他们只需几秒钟就能切换到自己选择的语言了。

设计你的网站语言选择器

设计网站语言选择器有很多种方法。很多人喜欢简单的按钮，而另一些人则喜欢加点品牌特色，让它看起来更酷（就像我们这样！）。

下拉菜单或选择菜单

这是展示你网站可用语言版本最常见的方式之一。

下拉菜单，或者说选择菜单，的特点就是选项会像扇形一样展开，把所有可用的语言设置都展示给你，让你选择。

它们通常也会有清晰的标记，比如地球图标、语言名称、国旗或者语言的缩写。

如果你想要一个快速又简单的语言选择器，这种方式最适合你，因为它的设计方式多种多样。它通常设计得非常显眼，所以你一般会在页面顶部看到它，就像这里展示的：

有些网站会选择一种不太寻常的方法，用一种类似“上拉”菜单的设计，就像 Green Gifts 网站上的这个语言选择器：

MINI 的网站展示了一个语言选择器，当你把鼠标悬停在上面时，它会在当前语言的左侧显示其他语言。和 Green Gifts 一样，它也用国家代码来表示每种语言：

而且它还用了特殊的代码来实现这种效果：

按钮

语言按钮是一种独特又快捷的方式，能表明你正在瞄准特定的市场。它们最适合你的网站只提供少量语言时使用，因为它们会占用相当多的空间。

Gardette Industries 的网站只有法语和英语版本，所以在这里放一个语言切换按钮很合理：

考虑到语言切换按钮和网站背景的对比度，这个按钮会更显眼，自然地吸引用户的注意力。

不过，你需要仔细考虑这些按钮放在哪里。它们不应该挡住重要内容，也不应该成为你网站上最吸引眼球的地方。目标是确保用户能用最少的点击次数，获得他们想要的东西（一个他们首选语言的翻译网站）。

文本链接

如果你喜欢低调的语言选择器，可以考虑使用文本链接。它们通常放在你网站页面的底部。另外，如果你的语言数量不多，不足以做成完整的下拉菜单或选择菜单，但又多到不适合单独做成按钮，那么文本链接就是个不错的折中方案。

这里有个很好的例子：在 W3C 的网站上，他们直接把日语和简体中文列为文本链接。

Facebook 结合使用了文本链接和选择菜单。他们把可用的语言放在页面的最底部——当你进入登录页面时，需要向下滚动才能看到：

如果你点击“+”按钮，你会看到一个包含多种语言的巨大选择菜单。

模态窗口

模态窗口是当你点击某个东西时弹出的一个小窗口。它们会遮住主页面，让主页面无法操作，但主页面在背景中仍然可见。这表示一旦你与模态窗口交互完毕，就会回到父窗口。

在设计你网站的语言选择器时，模态窗口可能是一个不错的选择，因为它们通常很吸引人，而且很时尚。根据你的设置方式，用户将更容易选择他们喜欢的地区和语言。

我们以 Calvin Klein 的网站为例来看看：

网站的语言选择器是通过点击右上角“登录/注册”旁边的地球图标来触发的。一旦你点击它，就会出现选择你首选国家和语言的模态窗口。

另一个例子是雀巢（Nestlé）。在页面的右上角，它会告诉你当前正在浏览哪个网站版本。

当你点击它时，会弹出一个占据整个页面的模态窗口（不过很容易退出，上面有一个很大的“X”按钮）。

虽然模态窗口确实很显眼，但重要的是要注意，它们可能会打扰用户，就像弹出窗口一样。它们会打断用户的浏览体验，并要求用户立即关注。

当你需要向用户强调一些重要信息时，它们会很有用，比如隐私偏好、数据使用或警告等。

使用网站翻译软件来自定义你网站的语言选择器

无论你是在创建多语言网站，还是已经有一个网站在运行了，你都可以用Weglot来改进你翻译内容的方式，并管理你的整个翻译流程——而且还有一个额外的好处，就是你会得到一个容易个性化设置的语言切换器。

首先，关于Weglot的一些基本情况：

• 你可以轻松地把Weglot添加到任何CMS（比如WordPress、Squarespace、Wix、Shopify，以及任何自定义搭建的平台）。

• Weglot使用了领先的翻译服务提供商——从谷歌翻译到DeepL——来快速高效地翻译你网站上的所有内容。

• 你可以把你的内容翻译成110多种不同的语言。这包括阿拉伯语和希伯来语等从右到左书写的语言。

• 对于每种翻译，Weglot都会设置独特的网址。比如，weglot.com是我们的英文网站，而weglot.com/fr则是我们的法文网站。

• 你的网站所有翻译版本都会随着内容变化保持最新。 Weglot 会自动检测你原始网站上的任何内容变化，并相应地更新所有翻译版本。

• 你对你的翻译拥有完全的控制权，所以如果需要，你可以编辑它们。你还可以使用 Visual Editor 在网站上实时查看你的翻译，这样你就可以进行修改，让翻译内容更好地适应你网站的设计和布局。

喜欢看视频学习？ 这是一个快速视频，解释了 Weglot 的工作原理，以及它如何让你管理多语言网站时更轻松：

最重要的是，你可以用 Weglot 自定义你的语言选择器。 每个通过 Weglot 翻译的网站都会有一个语言选择器，这样你的访客就知道你提供了内容的不同语言版本。

这又把我们带回这里了：

但有了 Weglot，你不会只局限于一种设计。从你的仪表盘，你可以自定义你的语言切换器外观。

你可以选择是否要：

• 显示语言名称，或者只显示缩写/语言代码（比如英语用 EN，西班牙语用 ES，法语用 FR 等）。

• 显示国旗图标。

• 将语言选择器显示为下拉框。

你还可以选择使用哪种类型的国旗（比如亮面或哑光），还有一个地方可以添加额外的自定义 CSS（如果你想做进一步的修改，让语言选择器更符合你的品牌风格）。

使用 Weglot，你的语言选择器默认会在网站的右下角，但如果你愿意，可以更改它的位置（比如右上角、左下角等）。

这个过程会根据你用的网站平台有点不一样，不过这里有两个视频教程，可以让你了解一下：

如果你用的是WordPress，怎么调整语言切换器的位置：

如果你用的是Shopify，怎么调整语言切换器的位置：

如果你是通过代码将 Weglot 添加到网站的，你仍然可以按照这些说明更改语言选择器的位置。

快速回顾：怎么个性化设置你的网站语言切换器

在你的网站上放语言切换器，主要有两种方法：

1. 自己设计和开发一个。这其实不是什么大工程，不过只有当你目前没有用翻译软件来管理你的多语言网站时才需要这样做。在设计语言切换器的时候，要记住它应该做到：(1) 容易找到，(2) 清楚显示提供哪些语言，(3) 和你的网站设计风格一致。

2. 使用网站翻译软件。 任何好用的网站翻译软件都会提供可自定义的网站语言选择器功能。上面我们已经介绍了如何在使用 Weglot 翻译软件时自定义你的选择器，包括添加国旗、显示完整的语言名称，以及选择选择器在网站上的位置。

如果你准备好让 Weglot 帮你简化翻译项目，并更快地触达全球受众，那就立即开始你的 14 天免费试用吧，无任何承诺。