可用性 双向性

双向性

对于从右向左(RTL)阅读的语言(如阿拉伯语、希伯来语),其用户界面应镜像处理以确保内容易于理解。

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

从左向右(LTR)和从右向左(RTL)语言脚本的主要区别在于内容显示方向:

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

RTL 内容还会影响某些图标和图像的显示方向,尤其是描绘事件序列的图标和图像。

通常,时间的流逝在 LTR 语言中描绘为从左向右,在 RTL 语言中则为从右向左。

元素

LTR

RTL

文本

句子从左向右阅读。

句子从右向左阅读。

时间线

事件序列从左向右进行。

事件序列从右向左进行。

图像

从左向右的箭头表示向前运动:→

从右向左的箭头表示向前运动:←

时间的流逝在 LTR 语言中描绘为从左向右,在 RTL 语言中则为从右向左。

当界面从 LTR 更改为 RTL(或反之)时,通常称为镜像。RTL 布局是 LTR 布局的镜面映射,这种转换会影响到界面布局、文本排列和图形元素的方向。

当界面改变方向时,以下项目不会镜像:

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

文本方向应始终与其所属语言的方向一致。例如,任何 LTR 词汇(如 URL)将继续以 LTR 格式显示,即使界面的其余部分为 RTL。

Material Design:文本和数字方向正确

推荐做法

文本和数字应始终与其语言的方向一致。

Material Design:LTR 文本不应反向显示

不推荐做法

LTR 文本不应以相反顺序显示。

镜像界面时会发生以下变化:

  • 文本框图标显示在字段另一侧
  • 导航按钮以相反顺序显示
  • 传达方向的图标(如箭头)会被镜像
  • 文本(若翻译为 RTL 语言)将右对齐

以下项目不会被镜像:

  • 不传达方向的图标,如相机
  • 数字,如时钟和电话号码
  • 图表和图形
Material Design 中的 LTR 英文界面

LTR 的英文界面

Material Design 中的阿拉伯语 RTL 界面,数字以 LTR 显示

RTL 的阿拉伯语界面,其中数字仍以 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 中的 LTR 界面

LTR 界面

Material Design 中的 RTL 界面

RTL 界面
标题、图标和界面元素均从右向左显示

1. 后退按钮指向右侧
2. 文本右对齐
3. 主按钮和副按钮被镜像以匹配阅读方向
4. 复选框显示在文本右侧
5. 不传达方向的图标保持不变
6. 单位位置可能因语言而异
7. 进度条填充方向与内容阅读方向相同

Material Design 中的 LTR 界面

LTR

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

图标距屏幕边缘内边距:16dp
标题距屏幕边缘距离:72dp
标题下方内边距:20dp
导航栏高度:56dp
溢出菜单内边距:16dp

Material Design 中的 RTL 界面

RTL

RTL 布局中的导航、溢出菜单和图标切换至相反侧

图标距屏幕边缘内边距:16dp
标题距屏幕边缘距离:72dp
标题下方内边距:20dp
导航栏高度:56dp
溢出菜单内边距:16dp

Material Design 中的 LTR 界面

LTR

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

列表项高度:72dp
图标距左界面边缘外边距:16dp
列表项距左界面边缘距离:72dp

Material Design 中的 RTL 界面

RTL

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

列表项高度:72dp
图标距右界面边缘外边距:16dp
列表项距右界面边缘距离:72dp

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

为支持从右向左(RTL)界面而镜像文本、布局和图标时,许多与时间相关的内容应描绘为从右向左移动。例如,在 RTL 布局中,前进指向左,后退指向右。

有关 RTL 文本的详细开发指南,请参阅:

有关 RTL 图标的详细开发指南,请参阅:

何时需要镜像

在所有需要镜像的图标中,后退和前进按钮最为关键。后退和前进导航按钮的顺序会反转。

Material Design 中的 LTR 后退按钮

LTR 后退按钮

Material Design 中的 RTL 后退按钮

RTL 后退按钮

Material Design 中的 LTR 前进按钮

LTR 前进按钮

Material Design 中的 RTL 前进按钮

RTL 前进按钮

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

Material Design:面向右侧的自行车象征进展

在 LTR 界面中,面向右侧的自行车通常传达向前移动感。

Material Design 中面向左侧自行车的 RTL 界面

在 RTL 界面中,指向左侧的自行车同样传达向前移动感。

右侧带有滑块的音量图标应被镜像。滑块应从右向左推进,声波应从右侧出现。

Material Design 中的 LTR 音量滑块

带滑块的 LTR 音量

Material Design:镜像后的 RTL 音量滑块(含扬声器图标)

镜像后的 RTL 音量(含扬声器图标和滑块)

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

在 LTR 中,它们在线性和圆形时间表示中指向相同方向。在 RTL 中,可选择显示圆形或水平方向。

Material Design 中 Google Docs 的 LTR 重做和撤销按钮

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

包含文本表示的图标需谨慎镜像。

RTL 中文本右对齐。若段落开头有缩进、段落末尾有未完成行或右侧参差不齐,则图标需镜像。

Material Design 中的 LTR 聊天图标

LTR 聊天图标

Material Design 中的 RTL 聊天图标

RTL 聊天图标

何时不需镜像

虽然时间的线性表示在 RTL 中需镜像,但时间的圆形方向并非如此。时钟在 RTL 语言中仍顺时针旋转。时钟图标或带有顺时针箭头的圆形刷新或进度指示器不应镜像。

Material Design 中的顺时针刷新图标

刷新图标显示时间向前移动;方向为顺时针。图标未镜像。

Material Design 中的逆时针历史图标

历史图标指向过去时间;方向为逆时针。图标未镜像。

有些图标指代在从右向左世界中不镜像的物理对象。

例如,实体键盘和媒体播放器在世界各地看起来都一样,因此不应镜像。

Material Design 键盘图标

键盘图标

Material Design 耳机图标

耳机图标

某些图标看似具有方向性,但实际上表示用右手持握物体。

例如,搜索图标通常在右下侧有手柄,因为大多数用户是右撇子。

RTL 书写国家的大多数用户也是右撇子,因此此类图标不应镜像。

Material Design 搜索图标

搜索图标

Material Design 本地咖啡图标

本地咖啡图标

大多数 RTL 国家不镜像斜线。对于 RTL 区域设置,保留带斜线的图像原样。

Material Design 中表示关闭状态的 LTR 斜线

推荐做法

LTR 斜线可表示 LTR 和 RTL 语言的关闭状态。

Material Design:RTL 关闭状态无需 RTL 斜线

不推荐做法

RTL 关闭状态不需要 RTL 斜线。

时间的流逝

大多数情况下,随时间进行的操作应镜像。

为显示从右向左移动,行走人物的图标应面朝左。

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

进度条右侧显示 0%,左侧显示 100%,并从右向左填充。

日历中的日期从右向左出现。

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

Material Design 中的媒体播放控件不镜像

由于媒体播放按钮和进度指示器反映媒体播放方向,因此它们不会镜像。

Material Design 中用于播放的媒体控件始终为 LTR

推荐做法

播放的媒体控件始终为 LTR。

Material Design:勿镜像媒体播放元素

不推荐做法

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

本地化 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

图形中的文本

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

数字

数字及包含数字的图标必须针对使用不同数字形式的语言进行本地化。例如,孟加拉语、马拉地语、尼泊尔语以及某些阿拉伯语区域使用不同形式的数字。

Material Design 中 LTR 包含数字的图标

LTR 中包含数字的图标

Material Design 中的阿拉伯语 RTL 图标

阿拉伯语中的 RTL 图标

镜像

有时内容可能需要镜像,即使界面本身未镜像。例如,当用户在 LTR 文档中编辑 RTL 段落时,RTL 文本的工具栏按钮应为 RTL。

Material Design:LTR 界面上下文中的 RTL 按钮

在 LTR 文档内的此 RTL 段落中,缩进和列表的按钮应为 RTL,即使主界面方向仍为 LTR。

1. 段落右对齐
2. 图标翻转
3. 希伯来文文本方向为 RTL