打开网易新闻 查看精彩图片

RTL 是“从右到左”的缩写,指的是脚本从页面右侧向左书写的语言。RTL 语言包括:

  • 乌都语
  • 希伯来语
  • 波斯语
  • 阿拉伯语

主流网页设计实践主要迎合LTR语言。因此,如果您正在设计具有 RTL 语言内容的网站,您需要使用 RTL 网页设计——换句话说,有助于为 RTL 语言内容提供愉快观看体验的网页设计实践。

例如,您可能需要镜像标题、按钮和其他页面元素,以便从右到左显示它们。“镜像”可能涉及:

  • 从右到左而不是从左到右对齐文本。
  • 水平翻转元素,例如将向前箭头显示为“←”,而不是传统的 LTR 外观“→”。

拥有 RTL 网站有什么好处?

当您拥有一个 RTL 网站时, 您迎合了用 RTL 语言交流的网站访问者的需求。这是全球网站访问者的一小部分,而且随着时间的推移只会增加。

以阿拉伯联合酋长国 (UAE) 为例,Statista调查的在线平台商家报告称,2020年的电子商务活动平均增长了26%。由于阿拉伯语是阿联酋的官方语言和 RTL 语言,如果您着眼于阿联酋市场的一部分,您将希望以 RTL 格式显示您的网站。

然后,通过在设计您的网站时考虑到 RTL 支持,您可以:

  • 增加客户对您的品牌的好感:每个人都可以向RTL语言用户提供他们的产品和服务,但不是每个人都能像他们一样吸引这样的观众。通过将 RTL 设计整合到您的网站中,并翻译和本地化您的网站内容,您可以帮助 RTL 语言用户了解您的产品及其优势。随着时间的推移,他们可能会越来越信任您的品牌,并将您视为值得光顾的知名品牌。
  • 体验更多转化:当您的 RTL 语言目标受众能够理解您的销售内容、喜欢和信任您的品牌并在您的 RTL 网站上拥有流畅的用户体验时,他们更有可能购买您的产品和服务。
  • 提高您的搜索引擎排名:搜索引擎努力提供最能满足搜索者需求的内容。他们可能会认为一个内容以 RTL 语言呈现的网站比另一个内容使用 LTR 语言的网站与 RTL 语言用户更相关,因此将包含 RTL 内容的网站排名更高。

更好的 RTL 网页设计的 7 个技巧

要进行 RTLWeb 开发和设计, 您需要了解一些专家提示以使其正确。好吧,我们将在这里分享的不是一个或两个,而是七个!

1. 了解镜像以及何时需要使用它

如前所述,镜像是将 LTR 网站转换为 RTL 格式的一个重要方面。它涉及获取页面元素,例如单词,标题,图标和按钮,并水平翻转它们以从右到左阅读。

要镜像的元素包括:

  • 指向特定方向或显示移动的图标,例如后退按钮或箭头、图表和图形。
  • 导航按钮Logo通常显示在LTR网站的左上角。出于 RTL 网页设计目的,它们需要移动到右上角。(但是,Logo本身不应水平翻转)。
  • 表单标题,通常显示在表单域的左上角,需要与右上角对齐。
  • 日历列,用于在最右侧显示一周的第一天,在最左侧显示一周的最后一天。
  • 表列。

也就是说,并非所有 LTR 语言元素都必须镜像到 RTL。不需要镜像的元素示例包括:

  • 没有特定方向的图标,例如“下载”按钮或垃圾桶图标。
  • 带有外语文本的图标,例如罗马字母和标点符号(应改为本地化)。
  • 视频和音频播放器控件。
  • 以标准国际日期格式“YYYY-MM-DD”表示的日期。
  • 有意包含在 RTL 文本中的 LTR 语言单词,例如“Google”或“Kleenex”。
  • 数字(及其数字的顺序)。

2. 考虑 RTL 网页设计的文化方面

准确的 RTL 网页设计不仅仅是翻转图标和文本。首先,西方文化中存在的某些概念并不能很好地转化为使用RTL语言的社会文化。如果您的网站文本或图形包含此类概念或图像,请尝试用更符合文化的替代方案替换它们。

例如,如果您要以阿拉伯语提供您的网站,而阿拉伯语主要在穆斯林占多数的国家/地区使用,显示存钱罐的图像可能看起来不合适。那是因为猪在伊斯兰教中被视为不洁的动物。因此,例如,与其显示存钱罐的图像来传达将钱存放在容器中的想法,不如用一罐硬币中更具文化中立的图像替换图像。

此外,请记住,阿拉伯语在所有阿拉伯国家/地区的书写或显示方式都不一样。数字就是一个很好的例子:一些国家使用西方阿拉伯数字(这是西方世界通常使用的0到9数字)。同时,其他人使用东方阿拉伯数字。因此,当您设计 RTL 网站时,请务必本地化您的内容以匹配特定目标国家/地区的文化,而不仅仅是根据一般的 RTL 语言!

3. 使用适当的字体

并非所有字体都与 RTL 语言兼容,如果它们无法呈现某个 RTL 语言字符,则可能会显示称为“豆腐”的垂直白色矩形。为防止这种情况,请使用旨在支持多种语言(包括 RTL 语言)的多语言字体。Google Noto就是这样一种常用的多语言字体。

或者,将您的网站设置为以不同的字体显示语言。您可以以一种字体显示英语内容,而以另一种专门迎合该书写系统的字体显示 RTL 语言内容。

另外,请注意,其他语言可能不会像英语那样将文本加粗或斜体化。他们也不能使用缩写。因此,在为 RTL 内容选择合适的字体后,请检查您的内容是否显示和格式正确。您还应该测试 RTL 网站文本的可读性,并根据需要调整字体大小和行高。

4. 实现 hreflang 标签

Hreflang 标签是 HTML 代码片段,用于告诉搜索引擎应向具有特定语言和区域设置的用户显示网页的哪个语言版本。如果您的网页针对不同的地理受众群体拥有不同的语言版本,则需要在您的网站上实施它们。

例如,如果您有一个网页,其中包含来自美国的英语使用者的 URL “http://www.example.com/us/”,则该页面应包含以下 hreflang 标记:

如果您有同一网页的阿拉伯语版本,其中 URL 为来自埃及的阿拉伯语使用者的 URL “http://www.example.com/ar/”,则该页面应包含以下 hreflang 标签:

5. 检查您的链接格式!

对于阿拉伯语脚本在某些字母下方的点,为超链接添加下划线(就像您通常对英语超链接所做的那样)会降低这些点的可见性。这反过来又会影响文本的可读性,因此您需要以不同的方式区分超链接和常规文本。

例如,编写自定义级联样式表 (CSS) 规则,以在超链接文本下显示半透明的框阴影。您还可以使用 CSS 让浏览器跳过阿拉伯字母的下划线,这些字母在其中心部分下方包含点。

6. 考虑自动化网站翻译流程

当您将 LTR 网站转换为 RTL 格式时,您可能还必须翻译您的 (LTR) 网站内容。虽然手动翻译此类内容是一种选择,但这可能会非常耗时。

7. 在网站上线之前彻底测试您的网站

与任何其他网站修改一样, 在公开访问之前对您的 RTL 网站进行彻底测试.您可以:

  • 让母语人士和本地化专家审查您的 RTL 网站内容的可读性和语法准确性。
  • 检查您的网站在 Chrome、Firefox和其他流行的网站浏览器上的呈现方式。
  • 在桌面和移动设备(包括 iOS 和 Android 设备)上测试网站的可访问性。

如果您的测试抛出任何问题,请在使您的 RTL 网站上线之前修复它们!

欢迎阅读我的更多文章:

外贸SOHO创业者福音,免费好用的小飞获客谷歌插件分享