本文将从布局、动作、字体、图标和数字这五个方面，来分享我们整理的信息和履历，以及有可能碰着的潜在问题及办理方案。
阿拉伯语，是天下上第三大书面措辞，仅次于英语和汉语，在中东大约有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协议
该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。