本文将从布局、动作、字体、图标和数字这五个方面,来分享我们整理的信息和履历,以及有可能碰着的潜在问题及办理方案。
阿拉伯语,是天下上第三大书面措辞,仅次于英语和汉语,在中东大约有6亿多人在利用。在“一带一起“的出海浪潮中,阿拉伯语本地化是绕不开的一个课题。
阿拉伯语是一种从右往左书写的措辞,在页面布局、元素摆放和当代汉字都存在着相称大的差异。因此,在产品界面的阿拉伯语本地化事情中,并不但是将措辞大略地做翻译,而是须要考虑全体系统设计及体验,并符合当地的措辞和利用习气。
一、布局1. 什么是RTL
说RTL这个模式前,我们须要谈到它的另一个模式便是LTR,这两者的差异如下:
我们来看一张阿拉伯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协议
该文不雅观点仅代表作者本人,大家都是产品经理平台仅供应信息存储空间做事。