从右向左（RTL）阅读的语言，例如阿拉伯语和希伯来语，其 UI 应该被镜像，以确保内容易于理解。

UI 镜像概述

从左到右（LTR）语言和从右到左（RTL）语言的最大区别是内容的显示方向：

LTR 语言从左到右显示内容
RTL 语言从右到左显示内容

RTL 内容还会影响一些图标和图片的显示方向，特别是那些用于描述一系列事件的图标和图片。

一般来说，对于 LTR 语言，时间流逝方向也是从左到右；对于 RTL 语言，时间流逝方向也是从右向左。

元素	LTR	RTL
文本	句子从左向右阅读。	句子从右向左阅读。
时间线	事件序列从左向右进行。	事件序列从右向左进行。
图像	从左向右的箭头表示向前运动：→	从右向左的箭头表示向前运动：←

对于 LTR 语言，从左到右描述时间的流逝；对于 RTL 语言，从右到左描述时间的流逝。

当 UI 从 LTR 更改为 RTL 时（反之亦然），通常称为镜像。RTL 布局是 LTR 布局的镜像，它会影响布局、文本和图像。

当 UI 从一个方向更改为另一个方向时，这些项目不会镜像：

数字
未翻译的文本（即使它是词组的一部分）

文本方向应始终和语言方向保持一致。例如，任何 LTR 语句（例如一个 URL）将继续以 LTR 的格式显示，即使 UI 的其余部分是 RTL 的。

当镜像一个 UI 时，这些元素会发生改变：

文本框图标显示在字段的另一侧
导航按钮以相反的顺序显示
表示方向的图标会被镜像，例如箭头
文本（如果它被翻译为 RTL 语言）右对齐

这些元素不会被镜像：

不表示方向的图标，例如相机
数字，例如时钟和电话号码
图标和图解

**RTL 下的文本编辑菜单**

1. 与双向性有关的图标被镜像，以反映一行文本的开始和结束位置

**LTR 屏幕**

在 LTR 屏幕中，“Item One” 选项对齐到了左侧，用户向左滑动可以看到更多的选项。

触摸目标高度：48dp
第一个选项前面距离屏幕边缘的间距：72dp
选项标签的底部内边距：20dp
选项标签的左右内边距：12dp

**RTL 屏幕**

在 RTL 屏幕中，“Item One” 选项对齐到了右侧，用户向右滑动可以看到更多选项。

触摸目标高度：48dp
第一个选项前面距离屏幕边缘的间距：72dp
选项标签的底部内边距：20dp
选项标签的左右内边距：12dp

**RTL 屏幕**
标题、图标和 UI 元素都从右向左显示

1. 后退按钮指向右边
2. 文本右对齐
3. 主按钮和副按钮被镜像，以匹配阅读方向
4. 复选框显示在文本右侧
5. 不表示方向的图标不发生更改
6. 单位的位置可能因语言而异
7. 进度条方向和内容的阅读方向相同

**LTR**

导航、弹出菜单和图标从左向右显示

图标和屏幕边缘的间距：16dp
标题和屏幕边缘的间距：72 dp
标题下方内边距：20dp
导航栏高度：56dp
弹出菜单内边距：16dp

**RTL**

RTL 布局中的导航、弹出菜单和切换侧边栏的图标

图标和屏幕边缘的间距：16dp
标题和屏幕边缘的间距：72 dp
标题下方内边距：20dp
导航栏高度：56dp
弹出菜单内边距：16dp

**LTR**

用于 LTR 布局的图标和文本的内边距和外边距。

LTR：
列表项高度：72dp
图标和屏幕左边缘的间距：16dp
列表项和屏幕左边缘的距离：72dp

**RTL**

当使用镜像布局时，图标和文本的内边距和外边距也会切换，以匹配 RTL 的布局。

列表项高度：72dp
图标和屏幕右边缘的间距：16dp
列表项和屏幕右边缘的距离：72dp

RTL 镜像指南

为了支持从右向左（RTL）的 UI，而把文本、布局和图标镜像时，很多和时间相关的东西都应该被描述为从右向左移动。例如，在 RTL 布局中，前进即为向左移动，后退即为向右移动。

有关 RTL 文本的详细开发指南，详见：

支持不同的语言和文化

使用 BidiFormatter 实现 RTL

有关 RTL 图标的详细开发指南，详见：

RTL Material Design 图标指南

查看如何镜像图标

RTL Sketch 插件

把现有的设计和资源文件翻转为 RTL 格式

何时需要镜像

对于镜像最重要的图标是前进和后退按钮。后退和前进导航按钮会调换顺序。

显示向前移动的图标应该被镜像。

在音量图标右侧有一个滑块时，应该被镜像。滑块的进度方向也要改为从右到左，且声波应该要从右边出现。

有时，水平和圆形方向的时间会同时隐含在图标中。例如，Google Docs 中的撤销和重做按钮同时具有水平方向和圆形方向。

在 LTR 中，它们在水平和圆形方向指向相同的时间方向。在 RTL 中，可以选择只显示水平方向，或只显示圆形方向。

图标内含有指代文本的图形时，在镜像时需要格外仔细。

文本在 RTL 中右对齐。如果在段落开头有缩进，或者在段落末尾有未完结的行，或者段落右端较为粗糙，则图标需要被镜像。

何时不需要镜像

虽然时间的线性流逝方向在 RTL 中需要被镜像，但时间的圆形方向不是。在 RTL 语言中，时钟仍然顺时针旋转。时钟图标、或具有顺时针箭头的旋转刷新或进度指示器不应被镜像。

有些图标指代的是在 RTL 世界中没有镜像的实体物体。

例如，全世界的键盘和媒体播放器看起来都是一样的，所以它们不应该被镜像。

有些图标可能看起来具有方向性，但实际上它们表示的是用右手握住该对象。

例如，搜索图标通常在右下侧会有手柄，因为大部分用户是右撇子，会用右手来握住放大镜。

在用右手书写的国家中，大部分用户也是右撇子，所以这些图标不应该被镜像。

大多数 RTL 国家没有反斜杠。在 RTL 语言环境的图像中需要保留反斜杠。

时间的流逝

在大多数情况下，一个随时间进行的动作需要被镜像。

要显示从右向左移动，走动的人物的图标应该向左。

“下一页”显示在左侧，“上一页”显示在右侧。

进度条的 0% 在右侧，100% 在左侧，并从右向左填充进度条。

日历中的日期从右向左显示。

不要镜像媒体播放按钮和媒体进度指示器，因为它们指的是播放的方向，而不是时间的方向。

错误示例

不要镜像媒体播放器或进度条。这些元素的方向代表的是磁带的方向，不是时间的方向。

本地化

图形中的文本

包含文本的图形通常需要本地化。

数字

数字、以及包含数字的图标，必须本地化为当地语言所使用的数字。例如，孟加拉语、马拉地语、尼泊尔语、和一些阿拉伯语地区，使用的是不同形式的数字。

镜像

有时，内容需要被镜像，即使 UI 没有被镜像。例如，当用户在一个 LTR 的文档中编辑一个 RTL 的段落时，那段 RTL 文本的工具栏按钮也应该是 RTL 的。

双向性