什么是语言选择器？
语言选择器是一种用户界面元素或功能，允许用户选择他们希望与网站、应用程序或任何数字平台交互的语言。它通常出现在网站、软件应用程序和其他数字界面上，以适应说不同语言的用户。.
语言选择器通常显示可用语言列表，用户可以从列表中选择所需的语言。选择后，包括文本、标签，有时甚至图像在内的界面内容将以所选语言显示。这对于服务全球受众或多元化用户群的网站和应用程序尤为重要。.
语言选择器通过使数字内容可供更广泛的受众访问，无论其语言技能水平如何，从而有助于提供更好的用户体验。它们是本地化工作的关键组成部分，使开发人员和设计人员能够使他们的产品适应不同的语言和文化环境。.
为什么需要自定义语言切换器？
在多语言网站上自定义语言切换器具有多个重要好处。.
- 品牌一致性和视觉风格： 通过自定义语言切换器，您可以确保所用语言的外观和风格与您网站的品牌和视觉风格保持一致。您可以自定义语言切换按钮或菜单，以适应您网站的整体设计，从而在用户体验中创造一致性。
- 对显示语言的更大控制权：有时，您可能希望限制语言切换器中显示的某些语言。例如，您可能拥有多个语言的有限版本的网站，并且您只想在语言切换器中显示这些语言。通过自定义语言切换器，您可以选择显示哪些语言，从而使您对可用内容拥有更多控制权。
- 优化用户体验：通过自定义语言切换器，您可以创建优化的用户体验。例如，您可以调整语言切换器的布局或位置，使其易于用户查找。您还可以添加诸如通知或语言切换说明等功能，帮助用户轻松了解如何使用该功能。
- 满足不同用户的需求：每个用户都有不同的语言偏好。通过自定义语言切换，您可以满足来自不同语言背景用户的需求。这可能包括本地用户、国际访客或更喜欢使用不同语言的用户。
- 提高销售转化率：适当的语言切换器定制也可以带来提高销售转化率的好处。因为有效的语言切换器可以在用户与您的网站互动时提供舒适感。根据CSA研究的数据，72.4%的消费者表示，如果产品信息以自己的语言呈现，他们更有可能购买。因此，您的销售水平也将不可避免地提高。
不同类型的语言选择器
每个网站所有者都会仔细考虑他们的语言选择器是什么样的，每个网站当然会有不同的偏好。对于那些正在寻找可以使用的语言选择器类型的人，这里有一些。.
语言按钮
这是常用的语言切换类型之一。语言按钮通常是一个图标或文本，指示当前显示的语言，例如，“EN”代表英语或某个国家的国旗代表特定的语言。当用户点击语言按钮时，他们将被重定向到相应语言的网站版本。.
对于语言按钮，建议显示有限数量的语言，以避免显示混乱。通常情况下，拥有超过4到5种语言可能会产生繁忙的视觉效果。重要的是将按钮放在一个显眼的位置，以便用户轻松找到它。我们将在本文的下一节中进一步讨论这些方面。.
语言按钮可能适用于针对特定市场或为特定地区国际社区提供服务的企业。下面是WHO网站上使用语言按钮的示例。.
文本链接
文本链接是一种语言切换器，它使用语言名称形式的文本作为链接。例如，您可以显示诸如“中文”，“法语”或“西班牙语”等文本链接，将用户带到所选语言的网站版本。此文本链接通常放置在列表或下拉菜单中，以使用户更轻松地选择所需的语言。.
大公司Facebook使用了一种链接语言选择器，除列出的语言外，您还可以按（+）图标查找更多语言。.
之后，页面将立即被翻译成之前选择的语言。.
选择菜单
选择菜单是一种语言切换器，它使用下拉菜单或打开菜单来选择语言。当用户点击选项菜单时，他们将看到可用语言列表，并可以选择所需的语言。选项菜单可以包含国家图标或旗帜作为语言指示器，以及文本中的语言名称。.
选择菜单与语言按钮有很大不同，这种类型比简单的按钮更复杂。就像下面的例子，来自保时捷的网站。.
它们提供了一个语言选择器网站，用户可以直接写下他们的语言或目标国家。.
下拉菜单 vs. 列表 vs. 弹出窗口：哪一个效果最好？
为您的语言选择器选择正确的交互模型对于提供无缝和直观的用户体验至关重要。每种方法——无论是下拉菜单、内联列表还是弹出窗口——根据您的网站布局、支持的语言数量和用户行为提供不同的优势。以下是三种主要的语言选择交互模型的比较，重点关注用户体验、访问性和实施上下文。.
类型 | 优势 | 局限性 | 最佳用例 |
下拉菜单 | 紧凑、干净、可扩展，支持多种语言 | 需要交互（点击/轻触），可能对一些用户不明显 | 具有空间限制的多语言网站 |
文本列表 | 无需交互即可显示，关键语言可更快访问 | 可能会使界面混乱，不适合多种语言的扩展 | 拥有2-4个主要语言选项的网站 |
弹出窗口 | 可包含搜索字段，灵活的UI设计 | 可能会打断用户操作，需要清晰的关闭按钮和无障碍访问 | 拥有10多种语言的全球站点 |
语言选择器最佳实践和技巧
设计有效的语言选择器需要跨所有设备提供无缝体验，并确保具有不同背景的用户具有可访问性。随着全球受众的不断增加，您的语言切换器应该是直观的、可访问的和响应式的，以确保用户能够在其首选语言中舒适地交互。.
以下是您可以应用的最佳实践，以确保您的语言选择器对所有用户都清晰、方便和可访问。.
优先考虑响应式设计
大多数用户通过移动设备访问网站，因此您的语言选择器应该是响应式的，并且对移动设备友好。确保按钮或菜单易于点击，不会遮挡重要内容，并且在较小的屏幕上保持可见。.
例如，语言选择器网站看起来像这样。.
然后，从移动端看，语言选择器仍然可以轻松访问，不会移动或消失。.
使用下拉菜单或可展开菜单保持布局整洁，并确保触摸目标有足够的间距以实现舒适的交互。这有助于用户轻松选择其首选语言，而不会因元素过于拥挤或难以点击而感到沮丧。.
界面中的体贴布局
将语言选择器放在高度可见、预期的区域，如标题的右上角或底部的页脚。这些是用户通常寻找语言选项的直观位置。.
避免将选择器隐藏在模糊的图标或次要菜单中。保持其在所有页面上的位置一致，以便频繁切换语言的用户可以随时轻松找到它。.
使用无障碍属性（ARIA）
为了确保您的语言选择器对残障用户是可访问的，请使用ARIA（无障碍富互联网应用）属性，如aria-label、aria-haspopup和aria-expanded。这些属性帮助诸如屏幕阅读器之类的辅助技术理解元素的作用和功能。.
实施无障碍设计符合WCAG标准，确保您的网站对更广泛的受众是包容和可用的。包容性设计使每个人受益，不仅仅是具有特定需求的用户。.
使用清晰可识别的语言标签
使用本地标签显示每个语言选项，例如，使用“Español”而不是“Spanish”，或使用“Deutsch”而不是“German”。这样可以让用户快速识别出他们偏好的语言，即使他们不理解当前网站的语言。.
本地标签更具包容性，并减少认知负担，特别是对于国际用户。避免使用晦涩的缩写或语言代码，除非您的受众了解它们。.
避免选项过多而导致过载
同时显示过多的语言选项会使界面混乱并让用户感到困惑。只显示最相关或最常用的语言，并将其他的放在下拉菜单或“更多语言”部分下。.
这使界面保持干净，并改善了可用性，尤其是在移动设备上。使用网站流量分析来决定哪些语言应被优先考虑或隐藏。.
使用适当的图标和视觉提示（不依赖于旗帜）
视觉提示，如地球图标（🌐）、向下箭头（▾）或活动状态高亮，帮助用户理解某个元素是可点击的。但是，避免使用国家旗帜来表示语言，因为一种语言可以在多个国家使用。.
标志也可能带有文化或政治含义。如果您使用视觉元素，请将其与文本标签配对以确保清晰，并在您的设计中保持图标的一致性和文化中立性。.
与网站设计和品牌保持一致
您的语言选择器应在视觉上与您网站的整体风格保持一致。无论使用按钮、文本链接还是图标，请确保字体、颜色和悬停状态与您的品牌相匹配。这可以提高信任度并增强用户体验。.
如果您正在构建自定义选择器，请在不同浏览器和设备上进行测试，以确保其按预期工作。 一致的设计和可靠的功能性有助于实现无缝的多语言用户体验。.
通过 Linguise 在7个步骤中设置语言选择器
至此，您已经了解了语言选择器的最佳实践。使用网站翻译服务后，即可完成此翻译。但是，并非所有翻译服务都提供灵活的语言选择器设置。.
但您不必担心，因为 Linguise 与众不同。 Linguise 是一项自动翻译服务，提供语言切换器的用户自定义。 使用 Linguise 时，您将获得的一些好处包括。.
- Linguise可以被使用并集成到超过40个CMS中（WordPress，Joomla，Drupal等）。
- 添加语言到网站的语言切换器后，各种语言的翻译将在几秒钟内自动完成。.
- 有超过80多种可用语言可以添加到语言选择器。
- Linguise 将根据翻译目标语言自动准备一个唯一的URL。例如，URL linguise.com/de/ 用于被翻译成德语的页面。
- 当页面上有语言变体时，它将自动创建规范URL，以帮助避免搜索引擎中的重复内容。.
- 您可以灵活地根据网站需求设置语言切换器，从图标、颜色到语言名称。
- 您可以查看每个语言的访客页面浏览统计数据，适用于添加到语言选择器的每个语言。.
在本教程中，我们将以 WordPress 为例，说明所使用的CMS。.
步骤1：注册 Linguise 免费账户
步骤2：将域名添加到您的多语言网站
第二步是 Linguise 到 Linguise 控制台。您需要填写几项内容，从以下开始。
- 账户
- 网址
- 平台
- 语言
- 翻译语言
- 翻译网址
步骤3：安装插件 Linguise
成功添加网站后，然后打开WordPress仪表板并安装Linguise插件，通过插件>添加新> Linguise >安装>激活来完成此操作。
如果插件已经安装，请前往 Linguise 仪表盘并复制API密钥。.
然后打开 Linguise 插件并将从 Linguise 仪表板获得的API代码粘贴到以下列中。.
步骤4：设置主显示
若要配置语言切换器或显示语言标志，请通过Linguise仪表板中的设置 > 语言标志显示菜单进行操作。
在初始设置期间，我们将根据不同的组件对主显示进行调整。.
一个初始考虑是语言列表显示格式的配置，它提供了三个选项可供选择：并排、下拉菜单或弹出窗口。在左侧，有每个格式的预览显示。.
第一种格式，如下所示，是并排布局。.
以下格式采用下拉样式，如下图所示。.
最后，我们有弹出窗口格式作为最终选项。.
接下来，我们进入下一步，涉及配置语言切换器的位置。您可以灵活地从各种位置选项中进行选择，因此选择一个对访客来说显眼的位置非常重要。.
最后，您需要决定显示语言选项的组合偏好。您可以在诸如旗帜+语言名称、旗帜+简称或仅显示旗帜等选项之间进行选择。这个决定将取决于您的具体设计偏好和目标受众的偏好。.
步骤 5：设置旗帜设计
之后，在主显示部分下方，您将看到专门针对旗帜的设计配置。下面的图像展示了一些可用的设置选项。.
- 语言名称显示: 您可以选择根据国家或语言本身显示语言名称。例如，您可以选择显示“德语”或“Deutsch。”
- 英语旗帜类型：此选项适用于处理具有多种变体的语言时，例如“美国英语”或“英国英语”。类似的选择也可以用于西班牙语、台湾话、德语和葡萄牙语等语言。
- 标志样式：此设置使您能够定义标志图标的形状，无论是圆形还是方形（矩形）。
步骤6：设置旗帜的颜色和大小
一旦设置好旗帜设计，下一步就需要调整颜色、大小和其他各种元素。在以下界面中，您将找到许多可自定义的设置，包括：
- 旗帜边框半径：这允许您在使用矩形旗帜时以像素为单位自定义边框半径。
- 语言名称颜色： 您可以选择语言名称的默认文本颜色。
- 弹出语言颜色：此设置决定弹出窗口或下拉区域中语言标题的颜色。
- 标志大小：您可以根据自己的喜好修改标志的大小。
- 语言名称悬停颜色： 此设置控制鼠标悬停在语言名称上时的文本颜色。
- 弹出语言悬停颜色： 同样，此设置决定了在弹出窗口或下拉菜单中悬停在语言标题上时的文本颜色。
第7步：设置标志框阴影
在最后阶段，您有机会自定义标志的阴影设置。初始设置允许您为网站上显示的每个标志指定阴影，而后续设置与悬停在语言标志上的阴影效果有关。.
请记得点击保存按钮以保存您为语言切换器所做的自定义设置。这确保了您所选择的阴影效果配置被实施并保存以供将来使用。
完成所有配置后，这里是一个语言选择器显示的示例，使用弹出窗口，位于右上角，并使用首字母。这只是一个示例，您可以根据网站的需求自定义其余部分。.
