开发
阿拉伯文字的艺术、设计和开发:RTL布局的设计要点
仅仅是把一切都翻转吗
文章介绍了为阿拉伯文设计界面时需要注意的基本原则和注意事项。关键点包括:RTL布局的翻转原则、导航位置的调整、按钮顺序、表单布局、媒体播放的方向、图标的使用,以及字体、颜色和动画的适配。还提到了文化差异对设计的影响。
- #RTL布局
- #阿拉伯文
- #界面设计
- #媒体播放
- #图标设计
- #字体排版
- #文化差异
977
上一篇文章介绍了阿拉伯字母的基本特点和各种书法风格,对这种文字有了基础的了解,本篇我将说明如何为阿拉伯文(其他所有RTL文字都适用,但阿拉伯文是使用者最多的RTL文字,本文对此不做区分)做界面设计,以及一些注意事项。
布局
RTL布局最根本的特点当然就是文字方向,文本方向的翻转也改变了视觉重心和动线,基于这个规则很多我们熟悉的设计都需要修改。
拿YouTube为例,RTL界面里翻转了,但又没完全翻。那么什么情况下需要镜像什么时候不需要呢?
原则很简单:一个元素的位置只要跟文本开始或结束的位置有关,那么在RTL布局中就需要在另一边。下面用实际项目举例。
导航
导航的排布取决于视觉动线,在LTR界面,在左边一般是品牌logo,右边是头像、设置、登录/注销。在RTL界面,这些就需要翻过来。
阿联酋航空把图片素材也用了 transform: scaleX(-1)
做了个水平180°翻转,其实图片素材要不要镜像取决于设计要求。
按钮顺序
在LTR布局中,主操作按钮一般在右边,符合从左到右的文字浏览顺序。相应的,在RTL布局中,按钮要在左边,即文本流末端的方向。
需要注意的一点是,RTL国家的人并没有镜像成左撇子,所以尽管操作按钮一般来说应该放在文本末尾方向,但在移动端,按钮在左侧不容易点击。对于这种情况可以把主要操作按钮做成宽度100%的大按钮。
表单
checkbox、radio按钮在文本起始位置之前,所以在RTL中这些按钮需要在右边:阿拉伯文的起始位置之前。
清空输入按钮在文本的末端方向,所以它也需要移到左边。
媒体播放
一个特例,音乐、视频的播放方向不需要翻转,RTL布局中进度条同样是从左到右。因为这个方向最初是来源于磁带的播放,而不是文字书写方向。
图标
图标是否要翻转,取决于图标与文字方向是否有关系。
前进/后退、列表、标点、对齐,与文本直接相关,因此需要翻转。
在我们的习惯中,如果要表示飞机向“前”飞,一般指的就是文字末尾方向:右侧。所以起飞图标是朝右飞的。相应的,RTL中这个图标要变成向左起飞。
代表真实世界物体的图标不需要翻转,因为这些东西在阿拉伯国家也是同样的形态。我们大部分人用右手持放大镜和笔,他们也是。
刷新、历史记录这类图标含义来自顺时针和逆时针。用顺时针方向代表时间上的正序,逆时针是倒序。在阿拉伯国家钟表指针的走向并不会反过来,所以此类图标不需要翻转。
数字
当出现阿拉伯数字的时候,保持从左到右,不要镜像。
字体
混排
如果中文中出现了阿拉伯文,或者阿拉伯文中引用了中文,应该怎么处理?
首先各文字保持自己原有的顺序,其次在句子中,谁是主体以谁的顺序为准。
字号
一定要测试字体的实际效果。很可能常用的12px在某些字体时会难以分辨。
字间距
letter-spacing
常用于标题,用于增加字母间距,跟其他文字保持视觉平衡。
但如上一篇文章说到的,阿拉伯字母在单词中不同位置的形态是不一样的,也就是说阿拉伯单词必须保持为一个整体,不能添加字间距。
颜色
用透明度来区分文本层级是个常用的方法,但不能用于阿拉伯字母。否则可能会导致下图中的情况。
下划线
由于阿拉伯字母本身的特点,在基线处有连绵不断的笔画,这时候增加下划线破坏了单词的辨识度,还常常影响到至关重要的点。
解决办法是text-decoration-skip-ink: skip;
。
还有一个办法是使用text-decoration: overline;
。
动画
返回的动效如果是从左往右,RTL下的动效就应该是从右往左。
文化差异
需要RTL布局的不止是阿拉伯文,用户也不一定是穆斯林。但实际的国际化适配中除了阿拉伯文以外的语言都不太会考虑,而阿拉伯文用户绝大多数的确是穆斯林。
这就涉及到文化差异了。我们习惯用小猪存钱罐表示储蓄,可能还会用酒杯代表娱乐,这些在部分伊斯兰国家就是禁忌。
不过这个层面的考虑最好还是由当地人来负责。
总结
在本篇文章中我们了解了一些为RTL语言设计界面的基本原则和注意事项。下一篇我将以一个虚构网站为例,介绍如何为HTML/CSS上进行适配。