多语言网站设计的最佳用户体验技巧

粗略的线框用户界面.
目录

您知道吗?四分之三的网购者更喜欢购买使用母语信息的产品。(来源拥有一个多语言网站有很多好处,例如:

  • 提供个性化的用户体验。.
  • 通过本地化信息促进销售。.
  • 不受地域限制,触达更广泛的受众。.
  • 通过展现自己是全球公司来提升品牌形象。.
  • 转化率提升,跳出率降低。.

但是很多企业不知道如何正确创建多语言网站!

这就是为什么我们推荐您在设计多语言网站时牢记这18个实用用户体验技巧。.

多语言网站的18个用户体验技巧

在设计多语言网站时,必须考虑各种因素,以确保不同语言和文化背景下的用户体验流畅无缝。以下是18条最佳多语言网站用户体验技巧。

两个人使用各种设备和屏幕。左边的那个人看着图表,右边的那个人与笔记本电脑互动。.

规划和结构

在开始设计多语言网站之前,您需要计划并确定一些事情。.

1. 确定目标语言

要为您的多语言网站选择最佳语言,请首先分析您的受众位置和人口统计数据。查看您当前的网站流量和客户数据,看看哪些语言和位置最常见。. 

使用人口普查数据、市场报告和竞争对手分析研究目标市场中使用的语言。.

例如,根据美国人口普查局的数据,西班牙语是美国第二大使用语言。因此,如果您的目标受众是美国客户,那么除了英语版本之外,拥有一个西班牙语版本的网站就非常有意义了。

欢迎加入MapOfle社区。在线地图平台

从使用最广泛的语言开始,随着网站的发展逐步扩展。通过分析受众数据并使语言选择与业务目标保持一致,您可以选择最适合您多语言网站的语言。.

打破语言障碍
告别语言障碍,迎来无限增长!今天就试试我们的自动翻译服务吧。.

2. 使用清晰的URL结构

一个清晰的URL结构对于多语言网站至关重要。它改善了SEO,因为搜索引擎可以轻松索引和排名您网站的不同语言版本,从而提高本地搜索的可见性。. 

子目录结构是最常见和推荐的方法。每个语言在主域名下都有自己的子目录,例如www.example.com/en/代表英语,www.example.com/es/代表西班牙语,www.example.com/fr/代表法语。.

选择一个可以在整个网站上持续维护的结构。避免混合不同的结构。使用ISO 639-1语言代码(如“en”代表英语,“es”代表西班牙语)以确保清晰度和标准化。. 

使用规范标签向搜索引擎指示页面的首选版本,特别是在跨语言内容相似的情况下。在HTML中实施hreflang标签,帮助搜索引擎理解页面的语言和地区定位。.

3. 使用全局模板

当网站访客选择不同的语言时,他们不应该跳转到一个完全不同的网站。对所有翻译的网页使用相同的网站模板。.

以下是Canva的示例。当网站从英语翻译成西班牙语时,标题和段落之间的间距、按钮位置、菜单和图标、定价计划格式以及其他所有内容都保持不变。.

全局模板有助于保持品牌的一致性,并提供无缝的用户体验,无论用户切换到哪种语言。确保用户在从默认语言切换时看到相同的布局、设计元素、品牌和颜色。.

如果您正在使用内容管理系统(CMS),例如WordPress,与Linguise一起使用,创建品牌多语言网站是一件轻而易举的事。Linguise与您的网站主题深度集成,并自动翻译您的内容,无需额外的数据库请求或过多的服务器负载。这样,您的网站性能就不会受到影响。

如果您使用电子商务插件, Linguise在每次产品更新时自动更新主页和翻译页面。

在线语言学习平台,专注于武器词汇。.

4. 考虑文本扩展的间距

在设计多语言网站时,最关键的UX技巧之一是考虑文本扩展。 每种语言都有不同的写作风格和字长,这些都需要被考虑在内。.

看看Etsy的这个例子。 在左边,您可以看到日语的网站内容,在右边,您可以看到德语的相同内容。.

有些语言会占用更多空间,而有些语言会占用更少空间。 您的网站布局必须能够适应间距,以确保翻译内容保持可读性。.

这是不同语言中文本扩展或收缩的演示。 根据W3C,“view”这个词从英语到意大利语的扩展幅度达到了300%!

同时考虑行高和字符样式。有些语言的字符比其他语言高,有些脚本比其他脚本需要更多的间距。. 

例如,阿拉伯文字比拉丁文字需要更多的垂直行间距。.

5. 将内容与设计分离

将文本与多媒体元素分开,以便于更新和翻译。.

将文本内容放在HTML元素内,如

。使用CSS进行样式设置,以确保设计更改不会影响内容。将文本字符串存储在单独的语言文件中,如JSON、XML或PHP。

这样可以在不触及主代码库的情况下进行轻松的更新和翻译。使用像i18next这样的本地化库来动态管理JavaScript的翻译。.

保持设计和内容分离,布局在翻译后就不太可能被弄乱。.

6. 提供语言切换选项

为多语言网站提供清晰易用的语言切换选项至关重要。将切换器放在右上角以便于访问,并使用对比色和清晰的排版使其突出。为了清晰起见,以母语语言名称(例如,西班牙语的“Español”)显示语言名称。

下拉菜单可以有效地显示多个语言选项,而不会占用太多空间。使用旗帜可以提供视觉提示,但要谨慎,因为旗帜有时可能会产生误导。

例如,一个旗帜可能代表多个国家使用的一种语言。通常最好将旗帜与语言名称结合起来以提高清晰度。.

使用不同的颜色或粗体字清楚地显示所选语言。使用 AJAX 等技术,确保选择语言后立即更改内容,而无需刷新页面。使语言切换器对移动设备做出响应,并与本地使用者测试其可用性。

内容和翻译

以下是一些与内容和翻译相关的技巧,旨在提供更好的用户体验。.

7. 避免成语和俚语

一组活动的语言泡润与网络用语。各种形状和语言的颜色形状.

并非所有俚语都被普遍接受。事实上,一些俚语在某些国家被认为是可接受的,而在其他国家则被认为是极具冒犯性的。您应该始终使用清晰、直接的语言,以便跨文化翻译。

例如,这是一个流行的俄罗斯习语 - Хоть кол на голове теши。这个成语在俄语中的意思是“他是一个非常顽固的人”。

然而,这句成语的字面翻译是:“你可以用斧头在头上磨刀。” 😂

这是一个常见的英语单词在自动翻译时可能造成灾难性后果的另一个例子。英语单词Salsa在韩语中听起来像설사(seolsa),意为“腹泻”。.

这就是为什么我们建议避免使用仅与特定文化或人群相关的俚语或习语。相反,使用简单的语言,可以轻松翻译成其他语言。.

8. 使用符合文化背景的图片和图标

调整内容、图像、图标和其他多媒体,以反映当地的习俗和文化参考。.

例如,面向全球消费者的护肤品牌娇韵诗,在其欧洲网站版本中展示的都是白人女性。.

然而,在其网站的日文版中,他们展示的是日本女性,以便更好地与当地顾客建立联系。.

对于图标,尤其是语言切换器图标,使用看起来通用的地球图标。例如,在下面的图像中,第一个图标可能吸引南美和北美观众,但不吸引非洲和亚洲观众。.

第二个图标可能吸引非洲观众,但不吸引其他观众。.

为了避免混淆,请选择通用的地球图标——第三个图标。它不突出任何特定地区或国家,更适合多语言网站。.

9. 为多媒体提供字幕

对于多媒体内容,使用字幕文件进行视频翻译时不要更改视频。确保图像和多媒体元素具有描述性的替代文本,可以与视觉内容分开翻译。.

这里有一个例子,说明翻译如何帮助您接触更广泛的受众。我们是Project Happiness的忠实观众,这是一个由意大利旅行者Giuseppe经营的YouTube频道。.

创作者是意大利人。他用意大利语录制并配上英语旁白,但他的频道因提供多种字幕而受到全球观众的欢迎。.

准备好探索新市场了吗?试用我们的自动翻译服务,享受1个月无风险试用,无需信用卡!

10. 定期更新翻译

Linguise 允许您在前端使用用户友好的界面编辑已翻译的页面。您可以自行评估翻译结果,并在需要时进行更改。.

电子商务网站有很多频繁的变化——产品脱销、限时促销、产品信息变更等。.

但是,使用Linguise可以轻松更新翻译内容。其专用的翻译服务器和缓存系统加快了翻译过程,并向您的受众显示翻译后的页面。

11. 考虑从右到左的语言

大多数语言的书写方向是从左到右。然而,有些语言,例如阿拉伯语、希伯来语和波斯语,是从右到左书写的。. 

这是Instagram首页的英文版和阿拉伯文版的比较。如您所见,阿拉伯文版将所有内容从右到左翻转,包括图像、按钮、文本,甚至搜索栏。.

Linguise的翻译服务原生支持从右到左的语言,并且可以调整您的多语言网站的布局以适应这些语言。. 

以下是一些可用的从右到左的语言:

  • 阿拉伯语(ar)
  • 希伯来语 (he)
  • 波斯语(fa)
  • 普什图语(ps)
  • 乌尔都语 (ur)

如果您想包含这些语言,请使用可以适应这种重大变化的网站布局。.

SEO 和性能

我们强烈建议优化您的多语言网站以适应国际搜索引擎,从而最大限度地发挥其影响力。. 

针对每种目标语言进行关键词研究,使用 hreflang 标签进行语言和区域定位,并监控效果。.

12. 优化本地SEO

首先为每种语言和地区进行本地化的关键词研究。使用Google关键词规划师、SEMrush或Ahrefs等工具来查找目标受众正在搜索的相关关键词。. 

考虑地区方言和术语的变化。例如,墨西哥的西班牙语与欧洲的西班牙语不同,因此请相应地调整您的关键词。.

为每个语言版本的页面创建独特的标题标签,纳入本地化的关键词。保持简洁和相关,理想情况下少于60个字符。. 

例如,英文:“在线购买有机咖啡 | 最佳价格”和西班牙文:“Compra Café Orgánico en Línea | Mejores Precios。” 

为每个语言版本撰写引人注目的元描述,包括本地化的关键词和明确的行动号召,保持在160个字符以内。. 

例如,英文:“购买我们精选的有机咖啡,来自最好的农场。订单超过50美元免运费!”和西班牙语:“Compra nuestra selección de café orgánico, proveniente de las mejores fincas. ¡Envío gratis en pedidos superiores a $50!”

13. 使用 hreflang 标签

在HTML中使用hreflang属性告知搜索引擎关于页面的语言和地区定位。这有助于防止重复内容问题,并确保用户被引导到正确的语言版本。.

例子:
<link rel="alternate" href="https://www.example.com/zh-cn/" hreflang="zh-cn" />
<link rel="alternate" href="https://www.example.com/es/" hreflang="es" />

14. 监控跨语言的性能

使用Google Analytics和Google Search Console等工具监控每个语言版本的性能。分析流量来源、用户行为和关键词排名,以确定需要改进的领域。.

尝试不同的关键词、元标签和内容策略,看看哪些策略最能引起每种语言受众的共鸣。.

维护和支持

在维护和支持网站及客户方面,也需要考虑一些因素。.

15. 制定维护计划

为您的多语言网站制定全面的维护计划,确保所有语言版本保持一致、准确和最新。. 

结构良好的计划将帮助您有效地管理内容,处理用户反馈,并适应不断变化的市场条件。.

执行内容审计以评估所有语言现有内容的关联性和准确性。检查过时的信息、损坏的链接和不同语言版本之间的不一致性。.

定期测试语言切换器、导航和其他交互元素,以确保它们能够正常工作。.

16. 提供多语言客户支持

提供多种语言的客户支持可以提升用户体验,并建立与不同受众的信任。. 

雇用精通您所支持语言的客户服务代表。这可以包括全职员工或兼职承包商。.

要了解哪些语言应优先考虑,您可以分析网站流量和客户人口统计数据,或进行调查或反馈表单。利用结果了解现有客户的语言偏好。.

17. 反馈机制

创建简单、用户友好的反馈表单,允许用户报告翻译或可用性问题。确保这些表单可以从每个页面访问,最好在页脚或通过专门的支持部分。.

确保反馈表单提供所有支持的语言版本,使用户能够用他们喜欢的语言提供反馈。.

添加结构化问题,引导用户提供具体反馈。例如:

  • 评估翻译的准确性(1-5级)。.
  • 翻译过程中遇到了哪些问题?
  • 在您的语言环境中浏览网站有多容易?

对于那些不愿意填写反馈表单的人,在翻译内容上实施快速反馈按钮(例如,大拇指向上/大拇指向下)。这允许用户轻松指出翻译是否有帮助或准确。.

18. 使用预发布站点进行更新

在预发布环境中测试新内容和更新,以避免上线后出现问题。您可以使用 AI 网站构建工具,如ZipWP,在几秒钟内创建一个完整的网站。

该网站将包括所有必需的页面、相关图片、吸引人的网站文案,以及嵌入式 CMS 和 SEO 功能。.

准备好触达全球受众了吗?

这 18 个多语言网站 UX 技巧将帮助客户更好地浏览您的网站,并与他们偏好的语言内容互动。. 

良好的多语言 UX 设计可以显著提高用户参与度和转化率。然而,创建一个具有无缝体验的多语言网站需要时间和努力。. 

Linguise正好可以帮上忙!

Linguise 原生集成于40+个CMS,例如 WordPressShopifyWebflowSquarespace等。它支持80+种语言和10,000+个语言对,提供最佳的多语言网站体验。

所有翻译均经过SEO优化,价格实惠,仅为人工翻译服务成本的10%。.

你准备好与 Linguise一起走向全球了吗?

您可能也有兴趣阅读

不要错过!
订阅我们的新闻通讯

接收有关网站自动翻译、国际SEO等的新闻!

Invalid email address
试试看,每月仅需一次,您可以随时取消订阅。.

不要离开而不分享您的电子邮件!

我们无法保证您会赢得彩票,但我们可以承诺提供一些有关翻译的有趣信息新闻和偶尔的折扣。.

不要错过!
Invalid email address