多语言网站设计的最佳 UX 技巧

一个粗略的线框用户界面。.
Table of Contents

您知道吗?每4个在线买家中就有3个更愿意购买使用母语提供信息的产品?(来源)。 拥有多语言网站有其自身的好处,例如:

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

但许多企业并不知道如何以正确的方式创建多语言网站!

因此,在设计多语言网站时,我们建议您牢记以下18条实用的用户体验技巧。.

多语言网站的 18 条用户体验建议

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

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

规划与结构

在开始设计多语言网站之前,你需要规划并确定几件事。.

1. 确定目标语言

要为您的多语言网站选择最合适的语言,请先分析受众所在的位置和人口统计特征。查看您当前的网站流量和客户数据,了解哪些语言和地区最为常见。. 

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

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

欢迎来到 MapOfle 社区。在线地图平台

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

Break Language Barriers
告别语言障碍,迎接无限增长!今天就试试我们的自动翻译服务。.

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 深度集成您网站的主题,自动翻译您的内容,无需额外的数据库请求或过多的服务器负载。这样,您网站的性能不会受到影响。

如果您使用像 WooCommerce 这样的 电商插件 , Linguise 会在每次产品更新时自动更新主页面和翻译页面。

用于武器词汇的在线语言学习平台。.

4. 考虑文本扩展的间距

设计多语言网站时,最重要的用户体验技巧之一是要考虑文本扩展。每种语言都有不同的写作风格和词长,这些都需要纳入考量。.

看看这个 Etsy 的例子。左侧是日语版的网站内容,右侧是同一内容的德语版。.

有些语言会占用更多空间,而有些则占用较少。您的网站布局必须能够调整间距,以确保翻译后的内容仍然清晰易读。.

以下是一个演示,展示文本在不同语言中如何扩展或收缩。根据 W3C,单词“view”从英语到意大利语有 300% 的扩展!

还要考虑行高和字符样式。有些语言的字符比其他语言更高,而有些文字系统比其他文字系统需要更多间距。. 

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

5. 将内容与设计分开

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

将文本内容保留在 HTML 元素内 ,例如 

这样无需改动主代码库即可轻松更新和翻译。使用 i18next 等 JavaScript 本地化库来动态管理翻译。.

将设计与内容分离,这样翻译后布局就不太容易混乱。.

6. 提供语言切换选项

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

下拉菜单可以高效地展示多种语言选项,而不会占用过多空间。 使用国旗图标可以提供视觉提示,但要谨慎,因为国旗有时可能会造成误导。 

例如,一面国旗可能代表多个国家使用的同一种语言。为了清晰起见,通常最好将国旗与语言名称结合使用。.

使用不同的颜色或粗体字清晰地显示所选语言。使用 AJAX 等技术,确保选择语言后立即更改内容而无需刷新页面。  使语言切换器适配移动设备,并与母语人士一起测试其可用性。

内容与翻译

以下是一些与内容和翻译相关的建议,可帮助您提升用户体验。.

7. 避免使用习语和俚语

一组充满活力的网络俚语对话气泡。各种色彩缤纷的形状和文字。.

并非所有俚语都能被普遍接受。事实上,有些俚语在某些国家被认为可以接受,在其他国家却极具冒犯性。你应始终使用清晰直白、能跨文化良好翻译的语言。

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

然而,这个习语的直译结果是:“你可以在这个头顶上用斧头磨锋利。”😂

再举一个例子,说明一个常见的英语单词如果在审核中自动翻译可能会造成灾难性后果。英语单词Salsa在韩语中听起来像설사(seolsa),意思是“腹泻”。.

因此,我们建议避免使用仅与特定文化或人群相关的俚语或习语。相反,应使用易于翻译成其他语言的简单语言。.

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

调整内容、图片、图标和其他多媒体素材,以体现当地习俗和文化元素。.

例如,面向全球受众的护肤品牌娇韵诗(Clarins)在其欧洲网站版本中展示白人女性。.

然而,在其网站的日语版本上,他们会展示日本女性,以更好地与当地客户建立联系。.

对于图标,尤其是语言切换器图标,请使用看起来具有普遍性的地球图标。例如,在下图中,第一个图标可能吸引南美和北美受众,但不会吸引非洲和亚洲受众。.

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

为避免这种混淆,请使用能吸引所有人的通用地球图标——第三个。它不会突出特定地区或国家,更适合多语言网站。.

9. 为多媒体提供字幕

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

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

这位创作者是意大利人。他用意大利语录制,并为视频配上英语配音,但由于他提供了丰富多样的字幕,他的频道在全球范围内都有人观看。.

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

10. 定期更新翻译

Linguise 让您可以通过用户友好的界面在前端编辑已翻译的页面。您可以自行评估翻译内容,并在需要时进行修改。.

电商网站经常发生大量变化——产品缺货、限时促销、产品信息变更等等。.

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

11. 考虑从右到左的语言

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

以下是 Instagram 主页英文版和阿拉伯语版的对比。如您所见,阿拉伯语版将一切从右到左翻转了,包括图片、按钮、文字,甚至搜索栏。.

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

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

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

如果您想包含这些语言,请使用能够适应此类重大变更的网站布局。.

SEO 与性能

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

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

12. 针对本地 SEO 进行优化

首先针对每种语言和地区进行本地化关键词研究。使用 Google Keyword Planner、SEMrush 或 Ahrefs 等工具,找到目标受众正在搜索的相关关键词。. 

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

为页面的每个语言版本创建独特的标题标签,并融入本地化关键词。保持简洁且相关,最好控制在 60 个字符以内。. 

例如,英语为:“Buy Organic Coffee Online | Best Prices”,西班牙语为:“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/en/” hreflang=”en” />
<link rel=”alternate” href=”https://www.example.com/es/” hreflang=”es” />

14. 监控各语言的表现

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

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

维护和支持

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

15. 制定维护计划

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

结构完善的计划将帮助您有效管理内容、回应用户反馈,并适应不断变化的市场环境。.

执行内容审核,以评估所有语言现有内容的相关性和准确性。检查过时信息、失效链接以及各语言版本之间的不一致之处。.

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

16. 提供多语言客户支持

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

聘请能流利使用您所支持语言的客户服务代表。这可以包括全职员工或兼职承包商。.

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

17. 反馈机制

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

确保反馈表单在所有支持的语言中均可使用,让用户能够以其偏好的语言提供反馈。.

包含引导用户提供具体反馈的结构化问题。例如:

  • 请评价翻译的准确度(1-5 分)。.
  • 您在翻译中遇到了哪些问题?
  • 用您的语言浏览该网站的便捷程度如何?

对于不想填写反馈表单的用户,可在翻译内容上添加快速反馈按钮(例如点赞/点踩)。这样用户就能轻松表明翻译是否有帮助或是否准确。.

18. 使用暂存站点进行更新

在正式上线之前,先在暂存环境中测试新内容和更新,以避免造成中断。你可以使用像 ZipWP 这样的 AI 网站构建器,在几秒钟内创建一个完整的网站。 

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

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

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

良好的多语言用户体验设计可以显著提升用户参与度和转化潜力。然而,打造一个体验流畅的多语言网站需要投入时间和精力。. 

这正是 Linguise 可以帮到您的地方!

Linguise 原生集成 40 多种 CMS,例如 WordPress、 Shopify、 Webflow、 Squarespace 等。它支持 80 多种语言和 10,000 多种语言对,以提供最佳的多语言网站体验。

所有翻译都经过 SEO 优化且价格实惠,费用仅为人工翻译服务的 10%。.

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

您可能还感兴趣阅读

别错过!
订阅我们的新闻简报

获取有关网站自动翻译、国际SEO等的最新资讯!

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

别走,留下您的邮箱!

我们无法保证您会中彩票,但我们可以承诺提供一些关于翻译的有趣资讯以及偶尔的折扣。.

别错过!
Invalid email address