出海产品设计必备 ｜ RTL适配技巧
做好一款出海产品，了解RTL适配技巧是必不可少的～
一、背景
目前不同国家和地区针对阅读与书写的习惯有两种：
1）从左到右（Left-to-Right 以下简称LTR），如汉语、英语、韩语、日语；
2）从右到左（Right-to-Left 以下简称RTL），如阿拉伯语、波斯语、乌尔都语等。
作为面向全球化的产品应当正确适配LTR和 RTL 语言，以确保信息清晰准确的传递保证不同地区用户的使用体验。而上述说到的RTL适配是指将用户界面从 LTR 到 RTL 的适配过程（反之亦然）则称为镜像。
下面就来详细介绍如何做好RTL适配～
二、3大基础原则
首先了解一下RTL适配的三大原则，在实际进行适配的过程中基本上都是基于这三点展开的。
1. 文字从右往左阅读
LTR语言（中文/英文）的书写阅读从左到右，文本左对齐，标点符号在文字的右侧。
RTL语言（阿拉伯文）的书写阅读从右往左，文本右对齐，标点符号在文字的左侧。
2. 事件发展顺序从右到左进行
举例进度条，在 LTR 语言环境下从左往右进行，而在 RTL 语言环境下从右往左进行。
3. 左右箭头代表的前后含义相反
在 LTR 语言环境下，指向左侧的箭头（←）表示后退，指向右侧的箭头（→）表示前进。
在 RTL 语言环境下，指向左侧的箭头（←）表示前进，指向右侧的箭头（→）表示后退。
三、主要适配内容
在设计过程中，需要进行RTL适配的主要是4个方面的内容，分别是元素布局、操作交互、图标适配以及文案适配。
1. 元素布局
在 LTR 语言环境下，用户界面的布局需要整体进行镜像处理。例如，原本左对齐显示的文本，需要切换为右对齐显示，原本放置在界面左侧的按钮，需要调整放置于界面右侧。
媒体控件不需要进行镜像处，由于媒体的播放按钮和进度条是指正在播放的磁带方向，与现实生活中一致，因此媒体控件始终保持 LTR 布局即可。
2. 操作交互
针对操作交互需要重点关注的是滑动容器的适配，例如 Tab 的左右滑动切换。
在RTL情境下，选项从右往左排列，向右滑动Tab可以查看更多选项。在页面中向右边滑动可以切换至下一个选项，向左滑动可以切换至上一个选项。
在LTR情景则Tab排列顺序和滑动操作方向相反。
3. 图标适配
图标在界面设计中使用十分广泛，有6种情况的图标需要进行RTL适配。
3.1 需要镜像的图标
1. 表示前进和后退的图标
2. 表示特定运动方向的图标
例如在LTR情境下弹幕是从右往左飘，在RTL情境下就会变成从左往右飘。
3. 带有右侧滑块的音量图标
滑动提升音量的方向应与图标声波的方向一致。
4. 表示文本的图标需要镜像处理
RTL情境下，图标所表示的文本对齐方式为右对齐。
5. 包含文字或者符号的图标
需要将图标镜像处理，保证图标内的文本信息正常阅读。
6. 由用户界面内容衍生出来的图标
例如目录图标，是根据页面信息衍生出来的，应跟随页面布局镜像使其与衍生本体保持一致。
3.2 不需要镜像的图标
1. 不传递方向的图标
2. 用环形表示方向或进度的图标
环形流逝方向实质是对应时钟的旋转方向，时钟的方向统一沿顺时针方向转动所以不需要镜像。
3. 代表惯用手持物品的图标
例如搜索图标的手柄通常朝向右侧，因为大部分人会用右手来握住放大镜。而以 RTL 作为书写习惯的国家中也是如此，所以不需要镜像。
4. 包含斜杠（表示禁止）的图标
斜杠不存在方向性，因此无需镜像处理
4. 文本适配
1. 未翻译文本
在 RTL 语言环境中，任何未翻译的文本都应该继续以现用语言原有的书写方向展示。
例如用户名称通常不需要进行文本翻译，而当用户名称与头像进行左右排布的时候容易出现布局问题，则需要开发者对文本的对齐方式进行镜像处理。
2. 混排文本
当一段文本中同时包含两种不同阅读方向的文本时，文本的阅读习惯通常为交叉阅读，这种情况下系统会默认以首字符的书写方向作为文本的整体书写方向。
实际案例：
现有“小明关注了你”，阿拉伯语的正确翻译以及展示顺序为“بدأ في متابعتك小明”，其中“小明”为用户名称。
但是当用户名称非 RTL 语言时，按照系统默认的适配方案则无法正确的展示，会展示为“小明بدأ في متابعتك”。
对于这种情况，需要开发者在字符串前面加上一些不会显示的字符，强制将字符串变为 RTL 或者 LTR。
四、总结
对上述的分析进行总结，得出镜像适配的范围如下：
应用案例：
部分素材来源：设计部同事
参考文献：
https://material.io/design/usability/bidirectionality.html
https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left
