在联系日益紧密的世界中，多语言网站变得越来越普遍。但设计它们呢？这比你想象的要复杂得多，尤其是当你考虑到需要对网站进行网页设计变更时。
基础知识很简单--使用Weglot，您可以在 5 分钟内为网站添加不同的语言。但随后您就必须考虑在哪里放置语言切换器，当用户从英语切换到 RTL 语言时如何适应布局的变化，以及如何使用符合文化习惯的颜色、图像和图标。
在本指南中，我们将介绍一些最重要的设计考虑因素，以帮助您规划一个最佳实践的多语言网站。
1.使用全球模板，打造统一品牌
当有人访问您的多语言网站时，无论他们访问的是哪种语言版本的网站，您都希望他们能获得一致的用户体验。这就意味着，访问英文网站的印度访客应该看到与印地语版本相同的品牌和设计。
你无法阻止双语或多语访客看到不同版本的多语言网站，但你可以确保他们在切换默认语言时看到相同的品牌、布局和网页设计元素。
如果您使用的是 WordPress 等内容管理系统，那么使用 Weglot 就可以轻松创建一个统一的多语言网站。Weglot 将与您的网站建设主题无缝集成，并自动翻译您的内容。此外，它还能与网站功能的其他重要部分（如电子商务插件）进行整合，这意味着您无需为多语言网站添加不同的语言而使用不同的主题或设计。
例如，当您从澳大利亚等国家访问 Airbnb 主页时...
......然后切换到日语，两种语言的设计和品牌是一致的。
拥有一个一眼就能识别的设计不仅有助于强化您的品牌形象，还有助于多语种网站今后的更新，并减少因语言不同而需要更改用户界面或用户体验时的麻烦。
2.让语言切换器非常容易找到
将语言切换下拉菜单放在主页和网站其他页面的显著位置。你会发现多语言网站都会在页眉或页脚设置语言切换器。
无论您决定在多语言网站上使用哪种方案，都要确保它非常容易找到。
您还需要确保您的语言切换选项清晰明了。最好用新语言的母语来称呼它。例如，用 "Deutsch "代替 "German"，用 "日本語 "代替 "Japanese"。
例如，Asana 使用一个下拉菜单，显示不同语言的名称：
无论访客使用哪种语言，您都要让他们对您的多语言网站感到宾至如归。在容易找到的地方放置语言切换器将有助于实现这一目标。
3.让游客选择自己喜欢的语言
你会觉得让用户选择自己喜欢的语言是一件很简单的事，但实际上，很多多语言网站都让用户很难选择语言。相反，它们迫使用户切换 地区。
大品牌是最严重的违规者。你经常会发现，当你只想更改默认语言时，许多网站会强迫你更改多语言网站的地区（如从www.adobe.com切换到www.adobe.com/us/）。
有人会说印地语并不意味着他们想在该地区访问公司的多语言网站。如果他们住在纽约，想从美国网站购买，但又想阅读印地语网站的内容，该怎么办？不要阻碍他们从您的多语言网站购买，帮助他们用自己喜欢的语言访问您的内容。
Uber 在页脚显示了语言切换选项：
点击 "英语 "后，会弹出一个模式，让您在英语和法语之间选择您喜欢的语言：
Uber 的语言切换设计最棒的地方在于，它允许访客选择自己喜欢的语言，而不会强迫他们切换地区。
如果您想进一步改善访客的用户体验，可以考虑 "记住 "他们的默认语言，这样他们下次访问您的多语言网站时，网站就会自动以他们的母语加载。
自动检测语言
许多多语言网站会检测网络浏览器的母语，自动为用户设置主要语言。
虽然这确实为用户节省了一些时间，但使用语言检测提供自动翻译并不是一门精确的科学。重要的是要记住，用户可能会登陆 "错误 "版本的多语言网站。
访客可能实际位于西班牙，您的多语言网站会自动检测并显示西班牙语，但他们可能是母语为英语但不懂西班牙语的人。
因此，如果要自动检测位置，还需要提供语言切换器，以便游客可以选择不同的语言。
Weglot 可根据访问者的浏览器语言自动重定向。通过 10 天免费试用，了解 Weglot 在您网站上的运行情况。
国旗与语言名称
旗帜通常用来表示一种语言，但您需要注意一些语境问题：
- 国旗代表的是国家，而不是语言。
- 一个国家可以有不止一种官方语言。
- 一种语言可以在多个国家使用。
- 访客可能无法识别旗帜（因为图标大小），也可能被类似的旗帜所混淆。
最终，您希望提供的语言切换选项在任何语言下都易于理解。
4.考虑文本扩展
当文本从一种语言翻译成另一种语言时，比如使用谷歌翻译，原文和译文的长度会有所不同。在设计布局时，这可能是一个挑战。
有些书面语言比其他语言更简洁。日语和中文等语言会使用一两个字符来表达一条信息，而其他语言则需要几个单词。
西班牙语和英语等语言字数较多，有时需要比其他语言多 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 语言进行设计，则需要考虑镜像设计。
我们强烈建议阅读罗伯特在 Smashing Magazine 上发表的文章，详细了解如何进行 RTL 设计。我们不想在这里重新发明轮子，所以请阅读他的教程。我们想向您展示 Weglot 如何支持 RTL 语言，并让您的多语言网站的翻译过程变得简单。
Weglot 的翻译服务支持 RTL 语言，通过 CSS 规则，您可以调整多语言网站的布局以适应这些语言。以下是一些可用的 RTL 语言：
- 阿拉伯语 (ar)
- 希伯来文
- 波斯语
- 乌尔都语 (ur)
使用 Weglot 为您的多语言网站添加 RTL 语言后，您可以通过在布局中应用 CSS 规则，自定义语言的显示方式。在 WordPress 管理器中，进入Weglot > 语言按钮设计（可选） ，然后向下滚动到覆盖 CSS。在文本区中添加任何您想要的 CSS 规则--您可能需要更改字体、大小、行高等，以便使主要语言的样式符合您的设计。
这就是您在 Weglot 中添加和样式化 RTL 语言所需要做的全部工作！有关 Weglot 如何支持 RTL 语言的更多信息，请参阅文档。
7.使用与文化相适应的图像和图标
图像、图标和其他图形是任何网页的基本要素。但是，视觉效果本身具有主观性，在不同的文化背景下会有不同的解释。
例如，娇韵诗的法文版主页上就有一位白种女性：
但是，当你访问该公司的日本主页时，上面却出现了一个日本女人的形象：
视觉效果也有可能冒犯他人。在西方受众看来天真无邪的图像，在另一个国家可能是禁忌。例如，在同性恋仍属非法、妇女权利尚未得到充分承认的国家，描述同性恋伴侣或性别平等的图像就不会被接受。
您还需要考虑图标等小元素，以及它们对于访问您的多语言网站的特定地区的用户来说意味着什么。例如，对于说英语的澳大利亚受众来说，地球仪图标对于非洲用户来说就会显得非常不同：
上面的第三个图标表示一个地球仪，但没有特定的国家或地区，因此更适合在多语言网站上使用。
您需要审查图像和其他图形元素，同时考虑到任何地区和文化敏感性。
避免使用嵌入文本的图像和其他图形。您无法使用 Weglot 等工具翻译内嵌文字，因此应尽量避免使用。
8.使用与文化相适应的颜色
例如，在西方文化中，红色象征爱情、活力、激情和危险。在亚洲文化中，红色是一种非常重要的颜色，象征着好运、繁荣、喜庆和长寿。相反，在一些非洲国家，红色则与死亡和侵略联系在一起。
蓝色被认为是最安全、最广为接受的设计色彩，因为它有许多积极的联想。尽管蓝色也与悲伤和抑郁有关，但它是一种令人平静的颜色，被认为是舒缓而平和的。蓝色也是银行徽标最常用的颜色，因为它代表着信任和权威。
在为您的多语言网站设计选择颜色时，请务必在谷歌上搜索 与您计划使用的任何颜色相关的象征意义。
9.日期和其他格式
并非每个国家都使用相同的日期格式，即使是英语国家。例如，在英国和欧洲，日期格式通常是日期-月-年，而在美国，日期格式则是月-日期-年。
您可能还需要翻译度量单位，这有助于搜索引擎优化，具体取决于您的目标受众。虽然世界上 90% 的国家都使用公制，但美国、利比里亚和缅甸仍在使用英制度量衡。
为您的设计选择合适的 WordPress 翻译插件
WordPress 翻译插件形形色色，如何与您的特定设计相匹配也千差万别。 Weglot 是一种能保证与您的多语言网站无缝集成的解决方案。
您甚至可以使用 Weglot 的可视化编辑器来翻译网站前端和跨子域的内容，这样您就可以看到内容在网站设计和布局中的效果，类似于谷歌翻译。
有了 Weglot，语言切换器的设计和位置都是 100% 可定制的。默认按钮的设计适合任何网站，但您也可以通过自定义 CSS 将其设置为您喜欢的任何格式。
此外，Weglot 还支持本文章中提出的设计原则，包括
- 使用全球模板，打造一致的品牌
- 提供易于查找的语言切换选项
- 让游客能够选择自己喜欢的语言
- 自动 UTF 编码
- 支持 RTL 语言
.avif)
让我们来看看 Weglot 提供的最重要的设计相关功能：自定义语言切换器。
使用 Weglot 定制网站语言切换选项
在 WordPress 多语言网站上安装Weglot 插件并进行设置后，系统会提示您输入 API 密钥、默认语言以及您希望将内容翻译成的语言（如 Google 翻译）。
如果您还没有 Weglot 账户，则需要创建一个账户来获取 API 密钥。
保存更改后，刷新新的多语言网站前端，就会在右下角看到一个新的语言切换器。点击后，它将展开显示可用语言，让您可以显示自己喜欢的翻译。
要开始进行基本定制，请转到Weglot > 语言按钮设计（可选）。在此页面中，您可以选择
- 是否使用下拉菜单
- 是否使用旗帜
- 旗帜类型
- 显示语言名称
- 只显示语言代码
在 "覆盖 CSS "部分，您可以应用 CSS 规则来设计语言切换器在多语言网站上的外观。例如，您可以
- 移除按钮上的箭头
- 更改背景颜色
- 添加滚动条
- 移除边框
- 添加衬垫
Weglot 在本文中提供了一些关于自定义语言按钮设计的示例。
向下滚动 Weglot 的配置界面时，您会看到关于如何定位语言切换器的说明：
- 在菜单中。 转到外观 -> 菜单，然后将Weglot Translate 自定义链接拖放到想要的位置。
- 作为小部件。转到外观 -> 小工具，然后将Weglot Translate 小工具拖放到您想要的位置。
- 使用简码使用 Weglot 简码 [ weglot_switcher]（不带空格）将语言切换器放置在您想要的位置。
- 在源代码中。 您可以在 HTML 页面源代码的任意位置添加以下代码：
为了向您展示如何在多语言网站（无论是WordPress、Shopify 还是其他任何类型的网站）上自定义语言切换器，您可以在下面看到Patyka如何在页面左上角显示语言切换器。
语言用其名称显示，当你点击开关并选择一种语言时，页面上的内容就会更新，翻译成你选择的语言。
案例研究：Maestrooo 正在使用 Weglot
Maestrooo成立于 2013 年，是一家位于法国的网站开发机构，其客户包括 From Future 和 Patyka。目前，Maestrooo 负责法国大部分的 Shopify Plus 客户。
Maestrooo 一直在寻找一个可靠的多语言网站解决方案，以满足客户的需求。在测试了许多解决方案并发现它们在搜索引擎优化或 hreflang 管理方面存在问题后，该团队发现了 Weglot。
Weglot 翻译 Maestrooo 客户网站的所有内容，无论是动态内容、其他应用程序生成的内容，甚至是结账流程，都不会影响其多语言网站的布局。
除了为客户设计定制网站，Maestrooo 还为 Shopify 的主题商店开发官方主题。其他多语言网站解决方案经常会破坏 Maestrooo 主题的格式，而 Weglot 提供的翻译解决方案则每次都能正常运行。
Maestrooo 每年帮助 8,000 至 12,000 名客户使用 Weglot 创建多语言网站。
通过本地化设计实现全面的文化优化
我们在这篇文章中探讨的每一条设计原则都将帮助您走上正确的道路，创建一个外观精美、用户体验愉悦的多语言网站。
为了用母语为网站访客和客户提供卓越的体验，除了多语言网站之外，您还应该确保其他方面的服务。考虑翻译营销材料和客户支持。
此外，还要考虑多语言网站的速度和性能。在一些网速不够快的国家，下载大型语言包会增加访问者访问内容的难度。
有了合适的多语言网站翻译插件和提供易用翻译选项的网站设计，您就可以用客户喜欢的语言为他们提供具有视觉吸引力的用户界面和用户体验。使用我们的10 天免费试用版免费试用 Weglot，或免费注册体验产品！
