本文将从布局、动作、字体、图标和数字这五个方面,来分享我们整理的信息和履历,以及有可能碰着的潜在问题及办理方案。

阿拉伯语,是天下上第三大书面措辞,仅次于英语和汉语,在中东大约有6亿多人在利用。
在“一带一起“的出海浪潮中,阿拉伯语本地化是绕不开的一个课题。

阿拉伯语是一种从右往左书写的措辞,在页面布局、元素摆放和当代汉字都存在着相称大的差异。
因此,在产品界面的阿拉伯语本地化事情中,并不但是将措辞大略地做翻译,而是须要考虑全体系统设计及体验,并符合当地的措辞和利用习气。

一、布局1. 什么是RTL

说RTL这个模式前,我们须要谈到它的另一个模式便是LTR,这两者的差异如下:

超周全阿拉伯语本地化RTL设计指南

LTR(Left to Right):从左到右,书写和阅读的方向是从左往右延伸的,在汉语阅读中,包括英语,我们都因此“F”办法进行扫描阅读,先左上角,然后水平移动,继而换行重复上一个动作。
RTL(Right to Left):刚好相反,便是阅读和利用习气都是从右向左的,阿拉伯语就属于这个情形,他们会先从界面的右上角开始,然后水平向左移动视线,再然后向下换行重复上一个动作。

我们来看一张阿拉伯Youtube网站的首页图,从中文到阿拉伯语界面上彷佛是做了一个镜像翻转,用户的全体勾引视线是翻转的“F”。
网站导航布局是从右往左,顶部的筛选控件排序也是从右往左,包括图片的标题描述等都是遵照从右向左。
这便是我们说的RTL模式。

个中有些元素,例如右上角logo、中英文笔墨,彷佛还是原来的样子,只是挪了一个位置,改了一下对齐办法,这个下方会详细阐明。

我们再来比拟一张iPhone景象,除阿拉伯文本从右侧开始外,中间的韶光指示器也作了方向改变,底部的翻页器也做了镜像改变,第一个主页面是在最右侧。

2. RTL原则

通过以上案例,基本就理解了阿拉伯语的一个大略原则。
阿拉伯语用户进入到一个网站,首先是从页面的右上角开始,扫描顶部,然后换行再从右侧开始扫描。

3. 实际运用处景

从LTR到RTL全体网站及运用程序,在页面构造及阅读习气上须要作出调度,以下通过一些常见的案例帮你熟习它们。

3.1. 导航

全体导航系统都会以相反的顺序展示,在LTR模式下,导航是从左到右排序的,而在RTL原则下,图标的排序方向则是相反的。

从导航进入到二级页面后,退却撤退/提高的箭头也都是须要被镜像的。

3.2. 阿语混排

在一些页面上,也会涉及到中英阿多措辞混排的情形,比如上述提到的Youtube网站,我们会创造,页面作了镜像,阿语采取了RTL的流向,而混插个中的中笔墨符和英文单词的阅读还是遵照LTR原则的。
不过对齐办法则统一是右对齐,以担保界面的同等性。

3.3. 进度条

进度条这类受韶光影响的组件,它也同样遵照RTL原则,受阅读方向的改变,以是进度条、加载动画等也是同样须要镜像的。
但把稳,表示进度、容量等的连续数字不须要镜像翻转,如图中的“40%”。

3.4. 图片排序

图片展示顺序上也是须要作镜像处理,由于它们一样平常以韶光、字母等有一些规律做的排序,遵照RTL原则,才能担保它们排序的意义。

3.5. 骨架屏

骨架屏,一种内容加载器,也是须要做RTL布局变动的,由于它的内容条是真实的阅读方向,在内容天生前会起到视觉勾引的浸染。

3.6. 图片海报

对付海报Banner这类,不可以直接翻转图片,但是须要做旁边排版上的调度。
个中图片上的行动按钮是一个随意马虎忽略的地方,当界面从LTR转变为RTL后,图片上的行动按钮在布局上也是须要随着作出调度。

3.7. 富文本编辑器

内容编辑文档,也须要将段落的输入调度成从右往左,个中编辑器的工具栏也须要作镜像改变。
把稳,撤销(上一步)、重做(下一步)按钮的位置,也是须要镜像的。

3.8. 韶光线图表

以韶光为维度图表在横轴上,也是须要从右往左来作出调度,都是阅读的起始韶光在最右侧,结束韶光在左侧,个中日历组件也是遵照同样的原则。

3.9. 界面对齐

排版布局中,RTL须要保持同等的右对齐办法,比如表格、表单、图表等,就像我们浏览日常网站一样,同等的阅读起始线,能给用户舒适的阅读体验。

4. 如何镜像翻转

这个地方,网站开拓工程师不须要重新code网站,只要已设计好的网站或者运用程序,做一个措辞镜像动作就可以。

不过仍旧须要把稳,镜像后的文本措辞,可能会涌现布局错乱溢出等情形发生,还须要作二次的细微调度。

感兴趣的同学,可以在自己的网站全局CSS属性加入direction=rtl,即可得到当前网站的一个镜像,然后再把措辞翻译一下。

二、 动作

上述谈到,RTL原则界面的书写和阅读顺序都是从右往左,界面会存在一些动画、鼠标点击及手势动作,它们同样也须要遵照RTL的原则。

1. 手势滑动方向

在RTL模式下,手势会调度成从左往右滑动,隐蔽的操作按钮会落在视线的结束位置,也便是该内容区域的左侧位置。

2. 跑马灯方向

由于面积有限,跑马灯是一个很好节省空间的组件。
在RTL原则下,由于人的阅读方向是从右侧开始的,以是隐蔽的笔墨须要左侧露出,其滚动方向便是从左往右的。

3. 轮播方向

上述举 iPhone 景象例子有提到,翻页器也是做了镜像改变,在RTL模式下,轮播图的第一张是显示在最右侧,以是轮播图的滑动方向也是镜像,从左到右轮动的。

三、字体1. 汉字的差异

一样平常情形下,阿拉伯字体比汉字高度小一点,在水平方向上会更宽一点,字体上也会更大略一点,以是占用屏幕空间多一点。

在一些普通的文本中,我们可以直接沿用原来字号的大小。
但是一些按钮、标题、标签等须要强调的展示上,为了担保全体视觉的平衡,可以将字体轻微增大2磅,由于直接翻译后的阿拉伯语在视觉上会显得稍小,轻微增大能够有效填补带来的视觉差异。

2. 英语的差异

阿拉伯语和英语不一样,它没有大小写的观点。
比如一些导航、标题利用上,全部的英文大写,在视觉上会比较阿拉伯语重很多。
要填补这种视觉大小的差异,可以将阿拉伯语放大10。
这个地方尤其须要把稳,较小的字号全部英文大写直接翻译会更为明显,像是导航名称上CRM、CDP这类通用的产品名尤其把稳。

3. 不要放大字间距

阿拉伯语字词之间是相互连接起来的,不要随意增加它们的间距,否则会把一些字母断开,从而带来一些措辞上的歧义。

四、图标

图标是界面信息中非常主要的组成部分,它是作为一些操作勾引或信息传达的视觉触发点,设计上也仍须要遵照RTL原则。

1. 带有方向的图标须要镜像

大略来说,图标在信息传达上就含有旁边的指向须要作镜像处理的,翻转后的图标和文本阅读方向上更为匹配,常见的有汽车、飞机等交通类工具图标。

指向性箭头图标须要镜像。
这类比较大略,它在原来LTR界面就有方向性,在RTL布局中,受全体界面阅读的方向改变,也是须要作翻转的。

带文本阅读方向的图标,这类是比较随意马虎忽略的,由于图标内采取的条形是真实的阅读方向,比如阅读文本、树构造等图标。

2. 仿照现实的普通图标无需镜像

这类图标紧张是仿照现实物体的,它不受阅读方向这个成分影响,比如一些生活用品图标,阿拉伯语人和我们看到的是一样的,不过也有一些图标会引起误解,下面着重解释。

2.1. 右手图标

无论文本方向如何改变,阿拉伯人也是习惯用右手,常见的有钢笔、放大镜、杯子等。

2.2. 字符图标

汉字、英笔墨符图标不须要镜像,和上述布局中提到的一样,涉及中文、英笔墨符时,阿拉伯用户的阅读行为和我们是同等性的,不过这类图标,可以根据须要作本地化处理。

2.3. 媒体播放图标

这类图标一样平常指视频、音频的播放,包括进度条都不须要镜像的,由于这里的进度及指向性代表播放和进度的方向,而不是阅读方向。

2.4. 圆形的时钟

阿拉伯人和我们看到的也是一样的,都是顺时钟方向旋转的。

3. 反斜线无需镜像

表示禁止的反斜线不须要翻转,由于这是社谈判定俗成的规定,它表示禁止含义。
常见的有静音、禁飞等图标。
但是把稳斜线下喇叭这类有方向感的图标,还是建议进行镜像。

4. 把稳带猪形象的图标

其余须要把稳带猪形象的存钱罐图标,不适用于阿拉伯社会,在穆斯林里,猪是不洁的动物,以是须要避免这类宗教的问题。

五、数字

数字之以是被称为阿拉伯数字,是由于当代社会的数字是经由阿拉伯天下传播推广的。
直到本日,数学的打算都是从右向左进行的,我们从小学习的 “个位、十位、百位、千万…”,它也是一种从右向左的阅读顺序。

1. 连续的数字无需镜像

在RTL界面原则中,数字遵照的是和LTR同样的阅读原则。
如果连续的数字还须要传达意义,则不应该翻转。
例如年份2023仍旧会写成2023,系统内的编号、编码等,由于有详细指代,也是不能翻转的。
但是请把稳,表达年份的开始和结束,连续的年份数字不变,但阅读方向上须要调度RTL思维模式。

区号、电话号码视为连续数字,数字顺序均无需镜像翻转,且区号控件和电话号码控件的排列顺序,也该当保持从左到右的阅读顺序。

2. 分离的数字须要镜像处理

这类数字其在信息传达上实在和文本是一样的,须要遵照RTL原则,例如步骤条,评分等控件,这种带有数字的控件须要作出调度,以匹配全体方向的阅读体验。

六、用户测试

按照RTL原则界面调度完毕后,我们仍须要真实的用户,来测试系统的体验。
由于不管我们如何设计,想得再全面,设计者也不是真正的用户,对付当地的文化也是缺少理解的,以是须要进行可用性测试来闭环全体体验,在这个过程中,我们须要把稳一些测试的把稳事变。

1. 确保同性测试会议场景

确保每次的测试会议,测试者和主持人性别是相同的。
这是由于在沙特社会,人们比较看重性别隔离,例如在学校、公共交通工具上,女性在这些场合穿着守旧,乃至不能和男性坐在一起。
如果主持人是异性时,参与者都会表现出更加守旧的行为。
以是空想的情形下,女性主持人主持,测试参与者也是女性,男性主持人也是一样。

2. 建议选择5个测试样本数量

由于这个数量的测试样例,至少能够创造系统中80%以上的问题,有兴趣的同学可以去查看《用户体验度量》这本书有详细先容,当然样本更多会更好,只不过它的边际收益会逐渐降落。

总结

以上便是阿拉伯语界面设计所要遵守的RTL原则,遵守这些准则可以帮助大家避免一些缺点,并给本地用户带来更好的利用体验。
此外在本土化的设计过程当中,须要有保持一种宽容友好的态度,而不是一种傲慢,由于我们所供应的产品和做事,是理应要尊重当地人文和风尚习气的。

参考文献

《Apple Design》Right to left | Apple Developer Documentation

《Apple Design for Arabic》Design for Arabic – WWDC22 – Videos – Apple Developer

《Material Design》https://m2.material.io/design/usability/bidirectionality.html

《Right-to-Left Development: Tips and Tricks》Right-to-Left Development: Tips and Tricks

专栏作家

小高杂谈,大家都是产品经理专栏作家。
10年+专注在To B产品设计,善于SaaS产品从0到1、1到N产品方案及体验设计,关注电商零售、供应链及新领域AI探索。

本文原创发布于大家都是产品经理,未经容许,禁止转载

题图来自 Unsplash,基于CC0协议

该文不雅观点仅代表作者本人,大家都是产品经理平台仅供应信息存储空间做事。