• 双向性
    • UI 镜像概览
    • 从右到左(RTL)镜像指南
      • 何时镜像
      • 何时不要镜像
    • 其他本地化考虑
      • 图形中的文本
      • 数字

    双向性

    一个良好设计的应用可以很容易本地化,只要使用例如英语从左到右读写的语言脚本,或者双向语言脚本。

    在双向脚本中,文本从右到左写和读,除了数字和来自 LTR 语言的词汇,例如非本地化的名称,是从左到右写的。双向脚本包括 Arabic,Hebrew 和 Persian。

    双向性不仅影响文本布局和 UI 元素,还影响图标图表。本节提供关于如何在设计中考虑双向性的基本高级信息。

    UI 镜像概览

    从右到左(RTL)镜像指南

    其他本地化考虑

    UI 镜像概览

    从左到右(LTR) 界面和从右到左(RTL)界面的主要区别在于时间的流逝如何计算。使用从左到右(LTR)脚本的语言从左到右描绘时间,使用从右到左(RTL)脚本的语言从右到左描绘时间。

    双向性 - 图1

    镜像指把 UI 由从左到右(LTR)切换成从右到左(RTL)(反之亦然),影响应用布局和图形元素两者。注意,文本字符串、数字和来自从左到右(LTR)脚本的嵌入词汇不会被镜像;他们仍然是从左到右(LTR)。(文本字符串内容永远不会被镜像;在语言中总是正确的方向。)

    从右到左(RTL)布局是从左到右(LTR)布局的镜像。

    主要布局变化:

    • 图标在文本框的右边。
    • 导航按钮是反向顺序。
    • 指示方向的图标,例如扬声器图标,被镜像。
    • 不指示方向的图标,例如照相机和复选标记,不会被镜像。
    • 文本被镜像,但是时间和电话号码不会。从右到左(RTL)脚本中数字从左到右(LTR)显示。

    双向性 - 图2

    使用从左到右(LTR)UI 的例子

    双向性 - 图3

    Hebrew 中使用从右到左(RTL)的例子。数字从左到右(LTR)显示。

    从右到左(RTL)镜像指南

    镜像文本、布局以及图标图表时,遵循这些指南,支持从右到左的 UI。

    从右到左(RTL)界面的指导准则是时间从右到左。前进指向左,后退指向右。

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

    何时镜像

    后退和前进导航按钮被翻转。

    双向性 - 图4

    从左到右(LTR)后退按钮

    双向性 - 图5
    从右到左(RTL)后退按钮

    双向性 - 图6
    从左到右(LTR)前进按钮

    双向性 - 图7
    从右到左(RTL)前进按钮

    一个指示前进动作的图标应该被镜像。

    双向性 - 图8
    一个从左到右(LTR)的自行车前进指向右边。

    双向性 - 图9
    一个从右到左(RTL)自行车前进指向左边。

    其他东西更加微小。例如,一个代表设置的图标使用一个斜线穿过图标来表明不可用状态。在一个从左到右(LTR)界面中,斜线从左上到右下。在一个从右到左的界面中,斜线从右上到左下。

    双向性 - 图10
    一个从左到右(LTR)飞行模式的离线状态。

    双向性 - 图11
    一个从右到左(RTL)飞机模式的离线状态。

    图片中,斜线被镜像。飞机本身直指向上。不需要特别对待。

    右边有一个滑块的音量图标应该被镜像。滑块应该从右到左(RTL)进行,声波应该从右边出现。

    双向性 - 图12
    带有滑块的从左到右(LTR)音量

    双向性 - 图13
    带有扬声器图标和滑块的从从右到左的音量被镜像

    人形图标,头部和脸部应该被特别镜像,尤其是如果他们显得靠近文本。这是人形如何正向面向文本,而不是反向背对文本。

    这有时可能是非常细微的,处理一个带角度的或者轻微扭转的人脸,或者一组人脸。

    双向性 - 图14
    从左到右(LTR)群组图标

    双向性 - 图15
    从右到左(RTL)群组图标

    有时,时间的水平和环形方向都在图标中有指示。例如,谷歌文档中的重做和取消重做按钮既有水平方向又有圆形方向。

    在从左到右(LTR)设计中,时间的圆形和水平表示都指向同一个方向。在从右到左(RTL)设计中,选择是否要显示圆形或者水平方向。

    双向性 - 图16

    谷歌文档中的从左到右(LTR)重做(redo)和撤销重做(undo)按钮。

    含有文本代表的图标需要特别的镜像。

    在从右到左(RTL)设计中,文本是居右对齐的。如果段落的开头有缩进,段落结尾有未完成的行或者右边不对齐,这些情况图标都需要被镜像。

    双向性 - 图17

    从左到右(LTR)聊天图标

    双向性 - 图18

    从右到左(RTL)聊天图标

    何时不要镜像

    当时间的线性表示在从右到左(RTL)中被镜像,圆形的方向不需要被镜像。从右到左(RTL)语言中时钟仍然是顺时针旋转的。一个带有顺时针指向箭头的钟表图标、圆形刷新以及进度指示不需要被镜像。

    双向性 - 图19

    显示时间前进的刷新按钮;方向是顺时针的。图标不被镜像。

    双向性 - 图20

    历史图标指向时间的反方向;方式是逆时针的。图标不被镜像。

    一些代表实体物体的图标在从右到左的设计中不被镜像。

    例如,物理键盘在现实时间中到处一样,所以不被镜像。

    双向性 - 图21

    键盘图标

    双向性 - 图22

    耳机图标

    看起来带有方向,但是事实上代表用右手握住一个实体的特定图标。

    例如,搜索图标典型的是把手柄放在右侧底部,因为大部分用户是右撇子。

    从右到左(RTL)世界中的大部分也是右撇子,所以这样的图标不应该被镜像。

    双向性 - 图23

    搜索图标

    双向性 - 图24

    咖啡杯图标

    媒体回放按钮以及进度指示不被镜像。这些元素的从左到右(LTR)方向代表磁带的方向,不是时间的方向。

    双向性 - 图25

    既然媒体回放按钮以及进度指示反应磁带的方向,他们不被镜像。

    双向性 - 图26

    多媒体的回放控制永远是从左到右(LTR)的。

    双向性 - 图27

    不要镜像多媒体回放按钮或者进度条。这些元素的方向代表磁带的方向,不是时间的方向。

    其他本地化考虑

    图形中的文本

    由于图形元素中的文本总是需要本地化,最好用不使用文本的方式传达理念。

    数字

    数字也是文本。包含数字的图标也需要为使用不同数字的语言进行本地化。例如,Bengali,Marathi,Nepali,以及大部分阿拉伯土著使用不同形式的数字。使用包含这些数字的图标将会需要根据他们的形状进行重绘。

    即使在从左到右(LTR)环境中也有可能需要镜像。例如,如果某人正在谷歌文档中编辑一段从右到左(RTL)的段落,缩进以及列表按钮也需要是从右到左(RTL)的,即使主要的 UI 方向是从左到右(LTR)。