开发

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

仅仅是把一切都翻转吗

文章介绍了为阿拉伯文设计界面时需要注意的基本原则和注意事项。关键点包括:RTL布局的翻转原则、导航位置的调整、按钮顺序、表单布局、媒体播放的方向、图标的使用,以及字体、颜色和动画的适配。还提到了文化差异对设计的影响。

  1. #RTL布局
  2. #阿拉伯文
  3. #界面设计
  4. #媒体播放
  5. #图标设计
  6. #字体排版
  7. #文化差异

977

The image displays the website of the Al Arab Network, a platform for women to connect with their friends and family in the Middle East. The website features a white background with a purple gradient, and is divided into sections for news, events, and events. The news section has a woman smiling, while the events section has a list of events. The events section also has a "Contact Us" button. The website also has a "Contact Us" button for events. The Arabic text on the website is in Arabic, and the website is mobile-friendly.The image displays the website of the Al Arab Network, a platform for women to connect with their friends and family in the Middle East. The website features a white background with a purple gradient, and is divided into sections for news, events, and events. The news section has a woman smiling, while the events section has a list of events. The events section also has a "Contact Us" button. The website also has a "Contact Us" button for events. The Arabic text on the website is in Arabic, and the website is mobile-friendly.

题图:Kristina Spiridonova

上一篇文章介绍了阿拉伯字母的基本特点和各种书法风格,对这种文字有了基础的了解,本篇我将说明如何为阿拉伯文(其他所有RTL文字都适用,但阿拉伯文是使用者最多的RTL文字,本文对此不做区分)做界面设计,以及一些注意事项。

布局

RTL布局最根本的特点当然就是文字方向,文本方向的翻转也改变了视觉重心和动线,基于这个规则很多我们熟悉的设计都需要修改。

A website with a clean, modern design, featuring a red and white color scheme, a large photo gallery, and a search bar.A website with a clean, modern design, featuring a red and white color scheme, a large photo gallery, and a search bar.

拿YouTube为例,RTL界面里翻转了,但又没完全翻。那么什么情况下需要镜像什么时候不需要呢?

原则很简单:一个元素的位置只要跟文本开始或结束的位置有关,那么在RTL布局中就需要在另一边。下面用实际项目举例。

导航

导航的排布取决于视觉动线,在LTR界面,在左边一般是品牌logo,右边是头像、设置、登录/注销。在RTL界面,这些就需要翻过来。

Two Christmas-themed banners with Arabic text, one red and one white, with gold and green accents, set against a white background.Two Christmas-themed banners with Arabic text, one red and one white, with gold and green accents, set against a white background.

阿联酋航空把图片素材也用了 transform: scaleX(-1) 做了个水平180°翻转,其实图片素材要不要镜像取决于设计要求。

按钮顺序

在LTR布局中,主操作按钮一般在右边,符合从左到右的文字浏览顺序。相应的,在RTL布局中,按钮要在左边,即文本流末端的方向。

A website's homepage with a black and white color scheme, divided into three sections. The top section is labeled "Home", the middle section is labeled "About Us", and the bottom section is labeled "Contact Us". Each section has a button for "Sign Up", "Sign In", and "Contact Us". The website's name is "Barnes & Noble", and the website's address is "1000 10th Ave", New York, NY 10008".A website's homepage with a black and white color scheme, divided into three sections. The top section is labeled "Home", the middle section is labeled "About Us", and the bottom section is labeled "Contact Us". Each section has a button for "Sign Up", "Sign In", and "Contact Us". The website's name is "Barnes & Noble", and the website's address is "1000 10th Ave", New York, NY 10008".

需要注意的一点是,RTL国家的人并没有镜像成左撇子,所以尽管操作按钮一般来说应该放在文本末尾方向,但在移动端,按钮在左侧不容易点击。对于这种情况可以把主要操作按钮做成宽度100%的大按钮。

表单

checkbox、radio按钮在文本起始位置之前,所以在RTL中这些按钮需要在右边:阿拉伯文的起始位置之前。

清空输入按钮在文本的末端方向,所以它也需要移到左边。

A medical office website with a patient profile page, patient notes page, and a patient appointment page.A medical office website with a patient profile page, patient notes page, and a patient appointment page.

媒体播放

一个特例,音乐、视频的播放方向不需要翻转,RTL布局中进度条同样是从左到右。因为这个方向最初是来源于磁带的播放,而不是文字书写方向。

A mobile app for the United Arab Emirates is displaying a list of top destinations, including a vibrant coral reef, a man walking on a coral reef, and a man in a white shirt. The app also has a search bar and a map feature.A mobile app for the United Arab Emirates is displaying a list of top destinations, including a vibrant coral reef, a man walking on a coral reef, and a man in a white shirt. The app also has a search bar and a map feature.
A vibrant collection of vintage cassette tapes, each with a unique color and design, are neatly arranged on a bright yellow background, creating a visually appealing and nostalgic scene.A vibrant collection of vintage cassette tapes, each with a unique color and design, are neatly arranged on a bright yellow background, creating a visually appealing and nostalgic scene.

图标

图标是否要翻转,取决于图标与文字方向是否有关系。

前进/后退、列表、标点、对齐,与文本直接相关,因此需要翻转。

在我们的习惯中,如果要表示飞机向“前”飞,一般指的就是文字末尾方向:右侧。所以起飞图标是朝右飞的。相应的,RTL中这个图标要变成向左起飞。

Two black and white images of a number line with arrows pointing to the left and right.Two black and white images of a number line with arrows pointing to the left and right.

代表真实世界物体的图标不需要翻转,因为这些东西在阿拉伯国家也是同样的形态。我们大部分人用右手持放大镜和笔,他们也是。

A cartoon image of two buttons with a smiley face on them, and a question mark on the left button.A cartoon image of two buttons with a smiley face on them, and a question mark on the left button.

刷新、历史记录这类图标含义来自顺时针和逆时针。用顺时针方向代表时间上的正序,逆时针是倒序。在阿拉伯国家钟表指针的走向并不会反过来,所以此类图标不需要翻转。

A white background with black lines and symbols, including a green circle and a red dot, with a logo in the bottom right corner.A white background with black lines and symbols, including a green circle and a red dot, with a logo in the bottom right corner.

数字

当出现阿拉伯数字的时候,保持从左到右,不要镜像。

A white background with black text on a white background.A white background with black text on a white background.

字体

混排

如果中文中出现了阿拉伯文,或者阿拉伯文中引用了中文,应该怎么处理?

首先各文字保持自己原有的顺序,其次在句子中,谁是主体以谁的顺序为准。

A Chinese text on a white background with red dots, written in Chinese and English.A Chinese text on a white background with red dots, written in Chinese and English.

字号

一定要测试字体的实际效果。很可能常用的12px在某些字体时会难以分辨。

Arabic textArabic text

字间距

letter-spacing常用于标题,用于增加字母间距,跟其他文字保持视觉平衡。

但如上一篇文章说到的,阿拉伯字母在单词中不同位置的形态是不一样的,也就是说阿拉伯单词必须保持为一个整体,不能添加字间距。

A white background with a red circle and a green circle on a white backgroundA white background with a red circle and a green circle on a white background

颜色

用透明度来区分文本层级是个常用的方法,但不能用于阿拉伯字母。否则可能会导致下图中的情况。

Arabic textArabic text

下划线

由于阿拉伯字母本身的特点,在基线处有连绵不断的笔画,这时候增加下划线破坏了单词的辨识度,还常常影响到至关重要的点。

Arabic textArabic text

解决办法是text-decoration-skip-ink: skip;

还有一个办法是使用text-decoration: overline;

Arabic textArabic text

动画

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

文化差异

需要RTL布局的不止是阿拉伯文,用户也不一定是穆斯林。但实际的国际化适配中除了阿拉伯文以外的语言都不太会考虑,而阿拉伯文用户绝大多数的确是穆斯林。

这就涉及到文化差异了。我们习惯用小猪存钱罐表示储蓄,可能还会用酒杯代表娱乐,这些在部分伊斯兰国家就是禁忌。

不过这个层面的考虑最好还是由当地人来负责。

总结

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