处理阿拉伯语 UI 的正确姿势

镜像布局

阿拉伯语，或者说所有从右到左书写的语言，例如乌尔都语，希伯来语等，对比中英文等从左到右的文字系统大致原则是：

最简单粗略的理解就是可以理解为互相镜像。

对比风行阿拉伯语区的音乐软件 anghami 的阿语和英语界面，我们能清晰地观察到这一点：

• 图标，文字说明和前进按钮的排布在阿语和英语里互为镜像。

• <在阿语界面里，表示前进。但在英语界面里面是>。

• 阿语界面顶部的>代表返回上一级菜单，但在英语界面里面是<。

但，只有镜像这一个原则么？并不是，还有非常多的例外：

拟物化设计例外

比如查询按钮，也就是放大镜：

在两个语言界面上都是从右往左持有的，因为这是拟物化设计，模仿的是人手持放大镜的动作。而世界上绝大部分人都是右撇子，所以在任何语言情景下都模仿的是右手拿着，并不用镜像。

下面的扳手图标也是同一个原则：

同时，虽然时间的线性表示在 RTL 中是镜像的，但时间的圆形方向则不是。对于 RTL 语言，时钟仍顺时针旋转。不应镜像时钟图标或带有顺时针箭头的圆形刷新或进度指示器。

以雷达找歌这个功能为例子，模仿雷达扫描的图标就是一个顺时针转动的动作，所以英，阿界面上都是同一个朝向。

另外，音乐播放控制按钮也不需要镜像，因为这些是拟物设计模仿 CD 机和磁带机等物理音乐播放次序的，而全世界的 CD 机和磁带机都是这么排布的按钮。

而音乐播放的时间轴其实不是时间发生的时间轴，而是磁带播放的先后顺序，所以也是从左到右。

但时间序列原则还是在发挥作用：

看到了音频播放轴的处理后，那你可能要问那如何处理音量控制界面呢？

答案是还是需要做镜像处理：

下面的设计才是符合 RTL 语言的音量控制，声波从右边往左边发出，左边才是前进的方向，而控制音量的小滑块是从左到右去限制。

同样的道理，在 APP 存储管理上，是先安装了 APP，再产生了 data，这代表时间序列发生的过程，所以这根横轴需要镜像。

外来语例外

还有什么例外呢？

外来语：比如阿拉伯数字

我们说的阿拉伯数字其实是印度人发明的，天然是从左往右书写，所以任何需要阿拉伯数字的地方，虽然框体处理上需要镜像，但数字并不需要镜像。

同样的原则，如果是界面上插入了外语的从左到右语言也不需要镜像，比如 anghami 是这样显示我的名字的：

因为我用的是拉丁字母书写自己名字，所以无论英文还是阿语界面也不需要镜像。

斜杠表示删除也不需要镜像，因为斜杠表删除来源于拉丁文里面的 virgula 符号，属于外来符号。

翻译风格

阿拉伯语非常特殊，虽然每个阿语国家都声称自己的官方语言是标准阿拉伯语（MSA），但在实际的日常生活，几乎没有人日常使用 MSA，而是使用各种方言。MSA 只存在于新闻，外交，法律，宗教等非常正式的场合。

所以选择你的翻译风格很重要，取决于你的产品类型，受众等因素。如果做的是一款商用办公软件，MSA 会是一个不错的选择。而我如果需要做一款在整个阿拉伯世界通用的娱乐产品，我可能会选择埃及方言等在娱乐行业常用的方言。我如果只是针对某个特定地区做特化的本地生活服务产品，自然是用本地方言。

字符大小

字符大小这个点很容易被忽略，大多数阿拉伯字母都是一起书写的，许多字母都有点（比如ب、ت、ج、ث、ي），并且在某些情况下，变音符号（元音的小符号）写在字母上方。这一切都意味着，为了让最终用户阅读舒适，需要比英语中同一单词使用的字体更大的字体，anghami 的界面里，阿语字体明显大于英文字体：

本文编写过程中大量参考了 Google material design 2 的设计规范，可点击「阅读原文」跳转。之所以不参考 material design 3 的设计规范，是因为 MD3 文档已经简化到了只告诉你怎么调取控件，而不告诉你背后的核心逻辑，某种意义上是一种退步。