设计

阿拉伯文字的艺术、设计和开发: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上进行适配。

评论