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