双向性

UI 镜像概述

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

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

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

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

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

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

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

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

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

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

Material Design 中的文本和数字方向一致 — 正确示例
文本和数字将始终和语言的方向保持一致。

Material Design 中的 LTR 文本顺序保持不变 — 错误示例
LTR 文本不应以相反的顺序显示。

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

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

这些元素不会被镜像：

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

Material Design 中的 LTR 英文 UI 图示 — LTR 的英文 UI

Material Design 中的阿拉伯语 RTL UI 布局 — RTL 的阿拉伯语 UI，其中数字仍然以 LTR 显示。

Material Design 文本编辑菜单在 LTR 模式下的展示 — **LTR 模式下的文本编辑菜单**

Material Design 的 RTL 文本编辑菜单 — **RTL 下的文本编辑菜单**
1. 与双向性有关的图标被镜像，以反映一行文本的开始和结束位置

Material Design 中的 LTR 屏幕 — **LTR 屏幕**
在 LTR 屏幕中，“Item One” 选项对齐到了左侧，用户向左滑动可以看到更多的选项。
触摸目标高度：48dp
第一个选项前面距离屏幕边缘的间距：72dp
选项标签的底部内边距：20dp
选项标签的左右内边距：12dp

Material Design 中的 RTL 屏幕设计 — **RTL 屏幕**
在 RTL 屏幕中，“Item One” 选项对齐到了右侧，用户向右滑动可以看到更多选项。
触摸目标高度：48dp
第一个选项前面距离屏幕边缘的间距：72dp
选项标签的底部内边距：20dp
选项标签的左右内边距：12dp

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

RTL 镜像指南

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

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

支持不同的语言和文化

使用 BidiFormatter 实现 RTL

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

RTL Material Design 图标指南

查看如何镜像图标

RTL Sketch 插件

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

何时需要镜像

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

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

Material Design 中，面向右侧的自行车象征向前移动 — 在 LTR 的 UI 中，面向右侧的自行车通常表示向前移动。

Material Design 中向左骑行的自行车图标表示前进 — 在 RTL 的 UI 中，一辆面向左侧的自行车同样表示了向前移动。

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

Material Design 中的 RTL 带扬声器图标和音量滑块 — 镜像后，RTL 的带扬声器图标和滑块的音量

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

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

Material Design 中的 Google Docs 撤销和重做按钮 — Google Docs 的工具栏中 LTR 的撤销和重做按钮

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

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

何时不需要镜像

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

Material Design 中的顺时针刷新图标 — 刷新图标显示时间向前移动；方向是顺时针的，图标未被镜像。

Material Design 中的历史图标表示逆时针倒退时间 — 历史图标表示倒退时间；方向是逆时针的，图标未被镜像。

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

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

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

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

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

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

Material Design 中的关闭状态由左向右斜线表示 — 正确示例
在 LTR 和 RTL 语言中，从左向右的斜线都表示关闭状态

Material Design 中的关闭状态不使用 RTL 斜线 — 错误示例
RTL 语言中的关闭状态不用 RTL 的斜线。

时间的流逝

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

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

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

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

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

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

Material Design 中的媒体播放按钮和进度指示器不镜像 — 由于媒体播放按钮和进度指示器反映的是播放的方向，因此它们不会被镜像。

Material Design 媒体播放器控件始终为 LTR — 正确示例
媒体播放器的控件始终为 LTR。

Material Design 中的媒体播放器和进度条方向说明 — 错误示例
不要镜像媒体播放器或进度条。这些元素的方向代表的是磁带的方向，不是时间的方向。

本地化

图形中的文本

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

数字

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

Material Design 中的阿拉伯语 RTL 图标 — 阿拉伯语中 RTL 的图标

镜像

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

Material Design 中的 RTL 段落和列表按钮设置 — 此 LTR 文档中的 RTL 段落。缩进和列表的按钮应该是 RTL 的，即使主界面方向仍然是 LTR。
1. 段落右对齐
2. 图标翻转
3. 希伯来文的文本方向是 RTL

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

UI 镜像概述 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

RTL 镜像指南 Expand and collapse content An arrow that points down when collapsed and points up when expanded.