设计

阿拉伯文字的艺术、设计和开发：RTL布局的设计要点

仅仅是把一切都翻转吗

2022年12月27日
阿拉伯文字的艺术、设计和开发：RTL布局的设计要点
本文共有1617字，预计阅读时间8分钟
题图：Kristina Spiridonova
上一篇文章介绍了阿拉伯字母的基本特点和各种书法风格，对这种文字有了基础的了解，本篇我将说明如何为阿拉伯文（其他所有RTL文字都适用，但阿拉伯文是使用者最多的RTL文字，本文对此不做区分）做界面设计，以及一些注意事项。

布局

RTL布局最根本的特点当然就是文字方向，文本方向的翻转也改变了视觉重心和动线，基于这个规则很多我们熟悉的设计都需要修改。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/ui_e7adb5f3d6.jpeg
拿YouTube为例，RTL界面里翻转了，但又没完全翻。那么什么情况下需要镜像什么时候不需要呢？
原则很简单：一个元素的位置只要跟文本开始或结束的位置有关，那么在RTL布局中就需要在另一边。下面用实际项目举例。

导航

导航的排布取决于视觉动线，在LTR界面，在左边一般是品牌logo，右边是头像、设置、登录/注销。在RTL界面，这些就需要翻过来。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/emirates_f6d5f9576f.jpeg
阿联酋航空把图片素材也用了 transform: scaleX(-1) 做了个水平180°翻转，其实图片素材要不要镜像取决于设计要求。

按钮顺序

在LTR布局中，主操作按钮一般在右边，符合从左到右的文字浏览顺序。相应的，在RTL布局中，按钮要在左边，即文本流末端的方向。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/button_cee48e327e.jpeg
需要注意的一点是，RTL国家的人并没有镜像成左撇子，所以尽管操作按钮一般来说应该放在文本末尾方向，但在移动端，按钮在左侧不容易点击。对于这种情况可以把主要操作按钮做成宽度100%的大按钮。

表单

checkbox、radio按钮在文本起始位置之前，所以在RTL中这些按钮需要在右边：阿拉伯文的起始位置之前。
清空输入按钮在文本的末端方向，所以它也需要移到左边。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/form_27af54b019.jpeg

媒体播放

一个特例，音乐、视频的播放方向不需要翻转，RTL布局中进度条同样是从左到右。因为这个方向最初是来源于磁带的播放，而不是文字书写方向。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/media_7ee7b0c410.jpeg
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/cassette_245ed74730.jpeg
还有人记得这个东西吗？

图标

图标是否要翻转，取决于图标与文字方向是否有关系。
前进/后退、列表、标点、对齐，与文本直接相关，因此需要翻转。
在我们的习惯中，如果要表示飞机向“前”飞，一般指的就是文字末尾方向：右侧。所以起飞图标是朝右飞的。相应的，RTL中这个图标要变成向左起飞。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/icons_1_b611eebd8c.jpeg

代表真实世界物体的图标不需要翻转，因为这些东西在阿拉伯国家也是同样的形态。我们大部分人用右手持放大镜和笔，他们也是。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/no_mirror_e3864e944f.jpeg
刷新、历史记录这类图标含义来自顺时针和逆时针。用顺时针方向代表时间上的正序，逆时针是倒序。在阿拉伯国家钟表指针的走向并不会反过来，所以此类图标不需要翻转。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/no_mirror_2_295142b39c.jpeg

数字

当出现阿拉伯数字的时候，保持从左到右，不要镜像。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/with_number_e190b16a5d.jpeg

字体

混排

如果中文中出现了阿拉伯文，或者阿拉伯文中引用了中文，应该怎么处理？
首先各文字保持自己原有的顺序，其次在句子中，谁是主体以谁的顺序为准。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/multi_language_ffe7690709.jpeg

字号

一定要测试字体的实际效果。很可能常用的12px在某些字体时会难以分辨。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/font_size_19962c6732.jpeg

字间距

letter-spacing常用于标题，用于增加字母间距，跟其他文字保持视觉平衡。
但如上一篇文章说到的，阿拉伯字母在单词中不同位置的形态是不一样的，也就是说阿拉伯单词必须保持为一个整体，不能添加字间距。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/letter_spacing_81d56084cc.jpeg

颜色

用透明度来区分文本层级是个常用的方法，但不能用于阿拉伯字母。否则可能会导致下图中的情况。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/opacity_624629a382.jpeg

下划线

由于阿拉伯字母本身的特点，在基线处有连绵不断的笔画，这时候增加下划线破坏了单词的辨识度，还常常影响到至关重要的点。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/underline_aa1cbd0fbc.jpeg
解决办法是text-decoration-skip-ink: skip;。
还有一个办法是使用text-decoration: overline;。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/overline_7b11dd75db.jpeg

动画

返回的动效如果是从左往右，RTL下的动效就应该是从右往左。

文化差异

需要RTL布局的不止是阿拉伯文，用户也不一定是穆斯林。但实际的国际化适配中除了阿拉伯文以外的语言都不太会考虑，而阿拉伯文用户绝大多数的确是穆斯林。
这就涉及到文化差异了。我们习惯用小猪存钱罐表示储蓄，可能还会用酒杯代表娱乐，这些在部分伊斯兰国家就是禁忌。
不过这个层面的考虑最好还是由当地人来负责。

总结

在本篇文章中我们了解了一些为RTL语言设计界面的基本原则和注意事项。下一篇我将以一个虚构网站为例，介绍如何为HTML/CSS上进行适配。

评论