多语言网站时应密切关注的一个重要元素，因为用户在想要切换语言时经常会访问语言切换器。
有效的语言切换按钮可以为网站带来多种好处，从提高网络优化到增加销售额。
在本文中，我们将讨论设计语言选择器的最佳实践。 让我们在下面的文章中进一步讨论它。
什么是语言选择器？
语言选择器是一种用户界面元素或功能，允许用户选择他们希望与网站、应用程序或任何数字平台交互的语言。 它常见于网站、软件应用程序和其他数字界面中，以适应使用不同语言的用户。
语言选择器通常显示可用语言的列表，用户可以从该列表中选择他所选择的语言。 选择后，界面内容（包括文本、标签，有时还包括图像）将以所选语言显示。 这对于为全球受众或多样化用户群提供服务的网站和应用程序尤其重要。
语言选择器可以让更广泛的受众（无论他们的语言技能水平如何）访问数字内容，从而有助于改善用户体验。 它们是本地化工作的关键组成部分，使开发人员和设计师能够使他们的产品适应不同的语言和文化背景。
为什么需要定制您的语言切换器？
在多语言网站上自定义语言切换器有几个重要的好处。
- 品牌一致性和视觉风格：通过自定义语言切换器，您可以确保所使用语言的外观和风格与您网站的品牌和视觉风格一致。 您可以自定义语言切换按钮或菜单以适应网站的整体设计，从而创造一致的用户体验。
- 更好地控制显示语言：有时，您可能希望限制语言切换器中显示的某些语言。 例如，您的网站可能有多种语言的有限版本，并且您只想在语言切换器中显示这些语言。 通过自定义语言切换器，您可以选择显示哪些语言，从而更好地控制可用内容。
- 优化的用户体验：通过自定义语言切换器，您可以创建优化的用户体验。 例如，您可以调整语言切换器的布局或位置，以便用户轻松查找。 您还可以添加通知或语言切换说明等功能，帮助用户了解如何轻松使用该功能。
- 满足不同的用户需求：每个用户都有不同的语言偏好。 通过自定义语言切换，可以满足不同语言背景用户的需求。 这可能包括本地用户、国际访客或更习惯使用不同语言的用户。
- 提高销售转化率：适当的语言切换器定制还可以带来提高销售转化率的好处。 因为有效的语言切换器可以让用户在与您的网站交互时感到舒适。 CSA Research 数据显示，72.4% 的消费者表示，他们更有可能购买以母语提供信息的产品。 所以你的销售水平不可能也会提高。
不同类型的语言选择器
每个网站所有者肯定会仔细考虑他们的语言选择器是什么样的，每个网站当然会有不同的偏好。 对于那些正在寻找可用的语言选择器类型的人，这里有一些。
语言按钮
这是常用的语言切换器类型之一。 语言按钮通常是指示正在显示的语言的图标或文本，例如，“EN”代表英语或代表特定语言的国旗。 当用户单击语言按钮时，他们将被重定向到相应语言的网站版本。
对于语言按钮，建议显示有限数量的语言，以避免显示混乱。 一般来说，拥有4到5种以上的语言才能营造出忙碌的视觉效果。 将按钮放置在可见位置非常重要，以便用户可以轻松找到它。 我们将在本文的下一节中进一步讨论这些方面。
语言按钮可能适合针对特定市场或在某些地点为国际社区提供服务的企业。 使用世界卫生组织网站上的语言按钮的示例如下。
文字链接
文本链接是一种语言切换器，它使用语言名称形式的文本作为链接。 例如，您可以显示“英语”、“法语”或“西班牙语”等文本链接，将用户带到所选语言的网站版本。 此文本链接通常放置在列表或下拉菜单中，以便用户更轻松地选择所需的语言。
大公司Facebook使用一种链接语言选择器，除了列出的语言之外，您还可以按（+）图标查找更多语言。
之后，页面将立即翻译成之前选择的语言。
选择菜单
选择菜单是一种语言切换器，它使用下拉菜单或打开菜单来选择语言。 当用户单击选项菜单时，他们将看到可用语言的列表，并可以选择所需的语言。 选项菜单可以包含国家图标或标志作为语言指示符，以及文本中的语言名称。
选择菜单与语言按钮有很大不同，这种类型比单纯的按钮更复杂。 就像下面这个来自保时捷网站的例子。
他们提供了一个语言选择网站，用户可以直接写下他们的语言或目的地国家/地区。
下拉与列表与弹出窗口：哪个最有效？
为您的语言选择器选择正确的交互模型对于提供无缝和直观的用户体验至关重要。每种方法（无论是下拉列表，内联列表还是弹出窗口）都会根据网站的布局，支持的语言数量和用户行为提供不同的优势。以下是用于语言选择的三个主要交互模型的比较，专注于UX，可访问性和实现上下文。
类型 | Strenghts | 限制 | 最好的用例 |
落下 | 紧凑，干净，可扩展，有多种语言 | 需要互动（单击/点击），所有用户可能并不明显 | 具有空间约束的多语言网站 |
文本列表 | 可见无互动，更快地访问关键语言 | 可以混乱的UI，对于多种语言而言不可扩展 | 具有2-4个主要语言选项的网站 |
弹出窗口 | 可以包括一个搜索字段，灵活的UI设计 | 可能会破坏用户流，需要清晰的关闭按钮和可访问性 | 具有10多种语言的全球网站 |
语言选择器最佳实践和技巧
设计有效的语言选择器涉及在所有设备上提供无缝体验，并确保各种背景用户的可访问性。对于越来越多的全球受众，您的语言切换器应具有直观的，易于访问和响应能力，以确保用户可以以其首选的语言进行舒适的互动。
以下是您可以申请的最佳实践，以确保您的语言选择器清晰，方便且可访问所有用户。
优先考虑响应设计
大多数用户可以从移动设备访问网站，因此您的语言选择器应响应且移动设备友好。确保易于点击按钮或菜单，不涵盖重要内容，并且在较小的屏幕上保持可见。
例如，语言选择器网站看起来像这样。
然后，从移动端看时，语言选择器仍然可以轻松访问并且不会移动或消失。
使用下拉菜单或可扩展的菜单来保持布局整洁，并确保触摸目标具有足够的间距以进行舒适的互动。这可以帮助用户轻松地选择他们的首选语言，而不会因狭窄或难以单击的元素造成挫败感。
界面中周到的位置
将语言选择器放在高度可见的，预期的区域，例如标头的右上角或底部页脚。这些是直观的位置，用户通常在这里寻找语言选项。
避免将选择器隐藏在模棱两可的图标或次级菜单中。保持其位置在所有页面上保持一致，以便在任何时候都可以轻松地切换语言的用户。
使用可访问性属性（ARIA）
为了确保残疾用户可以访问您的语言选择器，请使用ARIA（可访问的Internet应用程序）属性，例如ARIA-LABEL，ARIA-HASPOPUP和ARIA扩展。这些有助于辅助技术，例如屏幕读者了解元素的作用和功能。
实施可访问性符合WCAG标准，并确保您的网站包含在内，并且可以由更广泛的受众使用。包容性设计使每个人都受益，而不仅仅是有特定需求的用户。
使用清晰可识别的语言标签
使用其本机标签显示每个语言选项，例如“Español”，而不是“西班牙语”或“ Deutsch”而不是“德语”。这使用户可以快速识别他们的首选语言，即使他们不了解当前的网站语言。
本地标签更具包容性，并减少认知负担，尤其是对于国际用户而言。除非您的听众知道它们，否则避免使用模糊的缩写或语言代码。
避免过多的选择过多
立即显示太多语言选项会使界面混乱并混淆用户。首先仅显示最相关或常用的语言，然后将其余的放在下拉菜单或“更多语言”部分中。
这可以使接口保持清洁并提高可用性，尤其是在移动设备上。使用网站流量分析来确定应优先或隐藏哪些语言。
使用适当的图标和视觉提示（不依赖标志）
视觉提示如Globe图标（🌐），向下箭头（Active State）突出显示，可帮助用户了解元素可单击。但是，避免使用国旗代表语言，因为可以在多个国家使用一种语言。
国旗也可能具有文化或政治意义。如果使用视觉效果，请将它们与文本标签配对以确保清晰度，并在设计中保持图标一致和文化中性。
与网站设计和品牌保持一致
您的语言选择器应在视觉上与您的网站的整体风格保持一致。无论是使用按钮，文本链接还是图标，都可以确保版式，颜色和悬停状态与您的品牌相匹配。这可以改善信任并增强用户体验。
如果您要构建自定义选择器，请在不同的浏览器和设备上对其进行测试，以确保其按预期工作。一致的设计和可靠的功能有助于无缝的多语言用户旅程。
通过 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插件
成功添加网站后，打开WordPress仪表板并安装Linguise插件，通过插件 > 新增 > Linguise > 安装 > 激活来执行此操作。
如果插件已安装，请转到 Linguise 仪表板并复制 API 密钥。
然后打开 Linguise 插件并将您从 Linguise 仪表板获取的 API 代码粘贴到以下列中。
第 4 步：设置主显示屏
中的Linguise进行操作。
在初始设置期间，我们将对主显示屏进行调整，考虑到不同的组件。
第一个考虑因素是语言列表显示格式的配置，它提供了三种选项可供选择：并排、下拉或弹出。 左侧有每种格式的预览显示。
第一种格式（如下所示）是并排布局。
下面的格式采用下拉样式，如下图所示。
最后，我们将弹出格式作为最终选项。
接下来，我们继续下一步，其中涉及配置语言切换器的位置。 您可以灵活地选择各种位置选项，因此选择一个容易被访问者注意到的位置非常重要。
最后，您需要决定显示语言选项的组合首选项。 您可以在标志 + 语言名称、标志 + 简称或仅显示标志等选项之间进行选择。 此决定将取决于您的具体设计偏好和目标受众的偏好。
第5步：设置标志设计
之后，在主显示部分下方，您将看到专门针对旗帜的设计配置。 下面提供的图像演示了一些可用的设置选项。
- 语言名称显示：您可以选择根据国家/地区或语言本身显示语言名称。 例如，您可以选择显示“德语”或“德语”。
- 英语标志类型：此选项适用于处理具有多种变体的语言，例如“美国英语”或“英国英语”。 对于西班牙语、台语、德语和葡萄牙语等语言也可以做出类似的选择。
- 旗帜样式：此设置使您能够定义旗帜图标的形状，无论是圆形还是方形（矩形）。
第6步：设置标志的颜色和大小
一旦旗帜设计完成，下一步就是调整颜色、尺寸和各种其他元素。 在下面的界面中，您会发现许多可自定义的设置，包括：
- 标志边框半径：这允许您在使用矩形标志时个性化边框半径（以像素为单位）。
- 语言名称颜色：您可以选择语言名称的默认文本颜色。
- 弹出语言颜色：此设置确定弹出或下拉区域中语言标题的颜色。
- 旗帜尺寸：您可以根据自己的喜好修改旗帜的尺寸。
- 语言名称悬停颜色：此设置控制将鼠标悬停在语言名称上时的文本颜色。
- 弹出语言悬停颜色：同样，此设置确定将鼠标悬停在弹出窗口或下拉菜单中的语言标题上时的文本颜色。
第7步：设置标志box-shadow
在最后阶段，您有机会自定义标志的阴影设置。 初始设置允许您为网站上显示的每个标志指定阴影，而后续设置涉及将鼠标悬停在语言标志上时的阴影效果。
请记住单击“保存”按钮以保留您为语言切换器所做的自定义设置。 这可确保您选择的阴影效果配置得到实施并保存以供将来使用。
完成所有配置后，以下是使用位于右上角的弹出窗口并使用缩写的语言选择器显示的示例。 这只是一个示例，您可以根据您的意愿并根据网站的需求自定义其余部分。
