对于需要从右到左(RTL)阅读的语种(例如阿拉伯语和希伯来语),相应的 UI 也应该进行镜像处理,以保证内容能够易于理解。

UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand.


镜像布局

LTR 与 RTL 之间区别:

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

RTL 的内容还会影响某些图标和图像的显示方向,尤其是具有描述性功能的图标和图像。

通常来讲,LTR 的视线流向为从左至右,RTL 的视线流向为从右至左。

The main difference between left-to-right (LTR) and right-to-left (RTL) language scripts is the direction in which content is displayed:

  • LTR languages display content from left to right
  • RTL languages display content from right to left

RTL content also affects the direction in which some icons and images are displayed, particularly those depicting a sequence of events.

In general, the passage of time is depicted as left to right for LTR languages, and right to left for RTL languages.

Element LTR RTL
Text Sentences are read from left to right. Sentences are read from right to left.
Timeline An illustrated sequence of events progresses left to right. An illustrated sequence of events progresses right to left.
Imagery An arrow pointing left to right indicates forward motion: → An arrow pointing right to left indicates forward motion: ←

当用户界面从 LTR 改为 RTL(反之亦然)时,我们称之为镜像。RTL 布局是 LTR 布局的镜像。

UI 出现镜像时,以下元素不会被影响:

  • 数字
  • 未翻译的文字(即使是文本的一部分)

文本应该始终根据它所使用的语种保持一致的方向。任何 LTR 的单词,例如 URL,都将继续以 LTR 的格式显示,即使其它的部分是 RTL 的格式。

When a UI is changed from LTR to RTL (or vice-versa), it’s often called mirroring. An RTL layout is the mirror image of an LTR layout, and it affects layout, text, and graphics.

When a UI changes from one direction to another, these items are not mirrored:

  • Numbers
  • Untranslated text (even if it’s part of a phrase)

Text should always be in the correct direction for the language it’s in. For example, any LTR words, such as a URL, will continue to be shown in an LTR format, even if the rest of the UI is in RTL.
image.png
Do
Text and numbers should always be in the correct direction for the language.
文字和数字应始终与语言保持正确的方向。

Don’t
LTR text shouldn’t be displayed in reverse order.
LTR 格式的数字不会因为镜像而受到影响。

UI 出现镜像时,会发生以下变化:

  • 字段图标会显示在另一侧
  • 导航按钮以相反的顺序显示
  • 反映方向的图标(如箭头)镜像显示
  • RTL 格式的语言镜像显示

不受镜像影响的元素:

  • 无法传达方向的图标。例如,相机
  • 数字,例如时钟上的数字和电话号码
  • 图表

When a UI is mirrored, these changes occur:

  • Text fields icons are displayed on the opposite side of a field
  • Navigation buttons are displayed in reverse order
  • Icons that communicate direction, like arrows, are mirrored
  • Text (if it is translated to an RTL language) is aligned to the right

These items are not mirrored:

  • Icons that don’t communicate direction, such as a camera
  • Numbers, such as those on a clock and phone numbers
  • Charts and graphs

image.png
英语为 LTR 格式,转化成使用阿拉伯语的 UI 时,数字不需要镜像显示。

双向设计 - 图3
LTR 中的文本编辑工具栏。

双向设计 - 图4
RTL 中的文本编辑工具栏。

Text editing actions in RTL

与方向相关的图标被镜像,以反映一行文本的开始和结束。

  1. Icons related to bidirectionality are mirrored to reflect the start and end of a line of text

镜像组件

当文本、布局和图标以镜像显示来适应 RTL 格式时,与任务流相关的元素都应该是从右至左移动的。

例如,在 RTL 布局中,前进图标指向的是左侧,而后退图标指向的是右侧。

双向设计 - 图5
LTR screen

On an LTR screen, the tab for “Item One” is aligned to the left, and users swipe to the left to see more tabs.

Touch target height: 48dp
Screen edge margin before first tab: 72dp
Tab labels bottom padding: 20dp
Tab labels right and left padding: 12dp

双向设计 - 图6
RTL screen

On an RTL screen, the tab for “Item One” is aligned to the right, and users swipe to the right to see more tabs.

Touch target height: 48dp
Screen edge margin before first tab: 72dp
Tab labels bottom padding: 20dp
Tab labels right and left padding: 12dp

双向设计 - 图7
LTR screen

双向设计 - 图8
RTL screen
Title, icons, and UI elements are displayed flowing from right to left

  1. Back button points to the right
    2. Text is right-aligned
    3. Primary and secondary buttons are mirrored to match reading direction
    4. Checkbox appears to the right of text
    5. Icons that do not communicate direction are not changed
    6. Placement of units may vary across languages
    7. Progress bars fill in the same direction as content is read

双向设计 - 图9
LTR
Navigation, overflow menu, and icons displayed left-to-right

Icon padding from screen edge: 16dp
Title distance from screen edge: 72dp
Padding below title: 20dp
Navigation bar height: 56dp
Overflow menu padding: 16dp

双向设计 - 图10
RTL
Navigation, overflow menu, and icons switch sides in the RTL layout

Icon padding from screen edge: 16dp
Title distance from screen edge: 72dp
Padding below title: 20dp
Navigation bar height: 56dp
Overflow menu padding: 16dp

双向设计 - 图11
LTR
Padding and margin around icons and text for LTR

List item height: 72dp
Icon margin from left screen edge: 16dp
List item distance from left screen edge: 72dp

双向设计 - 图12
RTL
When mirroring the layout, padding and margin around icons and text also switch placement to match RTL layouts.

List item height: 72dp
Icon margin from right screen edge: 16dp
List item distance from right screen edge: 72dp


镜像组件

When text, layout, and iconography are mirrored to support right-to-left (RTL) UIs, anything that relates to time should be depicted as moving from right to left. For example, in a RTL layout, forward points to the left, and backwards points to the right.

何时镜像

镜像显示时,最重要的图标是后退和前进按钮。

image.png

左:LTR 的后退按钮

右:RTL的后退按钮

image.png
左:LTR 的前进按钮
右:RTL 的前进按钮

显示向前运动的图标也应该镜像显示。
image.png
左:在 LTR 格式的 UI 中,向右的自行车通常传达前进的感觉。
右:在 RTL 格式的 UI 中,指向左侧的自行车类似地传达前进的感觉。

大多数 RTL 国家的斜线不需要镜像显示(特殊情况下,可能需要)。

image.png
Do
LTR 与 RTL 中的斜线都表示当前元素的状态为关闭状态。
The LTR slash can indicate an off state for both LTR and RTL languages

Don’t
一般来说,RTL 中的斜线不需要镜像显示。
An RTL off state doesn’t need an RTL slash

image.png
音量控制组件需要镜像显示。滑块前进代表音量增加。

左:LTR 中的音量控制组件。 右:RTL 中的音量控制组件。

有时,水平和圆形时间方向都包含在图标中。

圆形的图标中同样具有方向。

例如,Google 文档中的重做与撤销按钮:

  • 在 LTR 中,“重做”表示时间向前,“撤销”表示时间向后。
  • 在 RTL 中,方向相反。

Sometimes, both the horizontal and circular direction of time are implied in an icon. For example, the redo and undo buttons in Google Docs have both a horizontal direction and a circular direction.

In LTR, these point to the same direction in both circular and horizontal representations of time. In RTL, choose whether to show circular or horizontal direction.
image.png
Google 文档 工具栏中的 LTR 格式的重做和撤消按钮

包含文本样例的图标同样需要镜像显示(文本在 RTL 中右对齐)。

Icons that contain representations of text need careful mirroring.

Text is right-aligned in RTL. If there is a paragraph indent at the beginning of a paragraph, an unfinished line at the end of the paragraph, or a ragged right side, the icons need to be mirrored.
image.png
左:LTR 中的聊天图标;
右:RTL 中的聊天图标。


何时不镜像

尽管在 RTL 中,一些跟时间流向有关的元素需要进行镜像显示,但是有一些跟时间流向有关的元素却不需要,比如“刷新”和“历史记录”图标。
image.png

左:“刷新”图标 显示时间流向向前移动,方向是顺时针方向。 该图标无需镜像显示。 The refresh icon shows time moving forward; the direction is clockwise. The icon is not mirrored.

右:“历史记录”图标 显示时间流向向后移动,方向是逆时针方向。 该图标无需镜像显示。 The history icon points backwards in time; the direction is counterclockwise. The icon is not mirrored.

Some icons refer to physical objects that are not mirrored in a right-to-left UI.

For example, physical keyboards look the same everywhere, so they should not be mirrored.

镜像前后样式不变的元素无需镜像显示。
image.png

左:键盘图标; 右:耳机图标

某些图标的方向与时间流向无关,例如搜索图标一般是一个右手握住的放大镜,但是左右利手是与语种无关的,因此无需镜像。

Certain icons might seem directional but they actually represent holding an object with one’s right hand.

For example, the search icon typically has its handle at the bottom right side, because the majority of users are right-handed.

The majority of users in RTL-writing countries are also right-handed, so such icons should not be mirrored
image.png

左:搜索; 右:咖啡。


时间流向

任何描述时间流向的失误都需要在样式上反映出来。媒体播放按钮与播放进度指示器,都是描述磁带正在播放时的方向,而不是时间的流向,因此无需镜像显示。

Anything depicting the passage of time should be mirrored.

Do not mirror media playback buttons and the media progress indicator as they refer to the direction of tape being played, not the direction of time.
image.png
媒体播放按钮与播放进度指示器不需要镜像显示。
Since media playback buttons and the progress indicator reflect the direction of the tape, they are not mirrored.

image.png
Do
媒体播放按钮与播放进度指示器不需要镜像显示,始终采用 LTR 格式。
Media controls for playback are always LTR.

image.png
Don’t
媒体播放按钮与播放进度指示器不需要镜像显示,不可以采用 RTL 格式。
Do not mirror media playback or progress bars. The direction of these elements represents the direction of the tape, not the direction of time.


本地化

图形文字

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

Graphics that include text usually require localization.

数字

数字(包括包含数字的图标)必须针对使用不同数字的语言进行本地化。

例如,孟加拉语,马拉地语,尼泊尔语和一些讲阿拉伯语的语言环境使用不同形式的数字。

Numbers, including icons containing numbers, must be localized for languages that use different numerals. For example, Bengali, Marathi, Nepali, and some Arabic-speaking locales use different forms of numbers.

image.png
针对阿拉伯语本地化。


镜像

即使 UI 没有采用镜像显示,部分文本的语种需要采用 RTL 格式时(反之亦然),仍然需要镜像显示。

例如,当用户在 LTR 文档中编辑 RTL 格式的段落时,RTL 文本的工具栏按钮应位于 RTL 中。

Sometimes content may need to be mirrored, even if the UI is not mirrored. For example, when a user edits an RTL paragraph inside a LTR document, the toolbar buttons for the RTL text should be in RTL.
image.png

在 LTR 文档中的编辑 RTL 段落时,即使 UI 采用 LTR 格式,选中 RTL 格式的文本段落时,缩进和列表按钮也应该是 RTL 格式的。

  • 段落右对齐
  • 图标镜像显示
  • 希伯来语文字方向为 RTL

In this RTL paragraph inside a LTR document, the buttons for indenting and lists should be RTL even though the primary UI direction is LTR.

  1. Paragraph aligned right
    2. Icons flipped
    3. Hebrew text direction is RTL

支持

在 LTR 文档中的编辑 RTL 段落时,即使 UI 采用 LTR 格式,选中 RTL 格式的文本段落时,缩进和列表按钮也应该是 RTL 格式的。

Implementation support for bidirectionality for each platform is indicated below.

Platform Status
Android Available
iOS Available
Web Available
Flutter Available