阿拉伯语RTL设计浅谈

深圳/UI设计师/18天前/2236浏览
阿拉伯语RTL设计浅谈
一、RTL与LTR的区别
当我们谈到“Left to Right”(从左到右)和“Right to Left”(从右到左)语言时,我们实际上是在讨论两种主要的书写方向。两者的区别如下:
  • LTR(Left to Right):这种书写方式是最常见的,被广泛应用于包括英语、法语、德语、西班牙语等在内的许多语言。在这些语言中,文字从页面的左侧开始,向右延伸,视觉焦点是从左到右的;
  • RTL(Right to Left):在一些特定的地区和文化中占据主导地位。例如,阿拉伯语、希伯来语和波斯语等。在这种书写方式中,文字从页面的右侧开始,向左延伸,视觉焦点是从右向左的。
阿拉伯语RTL设计浅谈
Collect
二、RTL布局
在RTL布局中,文本是从右到左阅读的,这与我们常见的从左到右(LTR)布局截然不同。因此,在设计RTL布局时,必须充分考虑这种阅读顺序的差异,以确保用户能够轻松地阅读和理解内容。
阿拉伯语RTL设计浅谈
Collect
阿拉伯语网站
阿拉伯语网站
Collect
2.1 flex布局
FlextBox是基于文档的书写模式。作为div块在页面上的布局方式。
阿拉伯语RTL设计浅谈
Collect
2.2 网格布局
当方向是LTR时,侧边栏应该再左边,主内容区在右边。对于RTL模式,则需要镜像处理。当使用CSS网格时,镜像将根据页面的方向自动完成。
阿拉伯语RTL设计浅谈
Collect
三、设计原则
3.1 布局调整
阿拉伯语页面布局需与LTR语言相反,如导航菜单、按钮和表单元素等应从右至左排列。同时,要确保页面元素的对齐和间距在RTL环境下依然保持美观和易读。
3.2 文字处理
在展示阿拉伯语文本时,应使用适合该语言的字体,如Naskh、Thuluth等。此外,要正确处理阿拉伯语中的连写、断字和词形变化等特性,以确保文本的准确性和可读性。
3.3 图像和图标
在RTL环境中,图像和图标可能需要进行镜像翻转或重新设计,以适应从右到左的阅读习惯。
3.4 交互元素
阿拉伯语用户界面的交互元素,如按钮、滑块和下拉菜单等,也应遵循从右到左的布局原则。
四、文本
4.1 文本对齐
需要根据界面的方向来控制文本对齐的方式。例如:LTR方向下将文本与内容左对齐,则RTL方向下则需要位置镜像。
阿拉伯语RTL设计浅谈
Collect
4.2 中阿语言混合
在混合排版时,需要确保两种语言的文本在视觉上保持平衡,并遵循各自的书写规则。整体的对齐方式可以通过RTL/LTR控制,文本的阅读顺序由语言本身决定。
阿拉伯语RTL设计浅谈
Collect
4.3 列表效果
表格与段落的处理方式一致,与界面方向一致,阅读顺序由语言本身决定。
阿拉伯语RTL设计浅谈
Collect
4.4 文本省略
当文本需要省略时,需要根据阅读顺序,省略后方内容。省略方向不与界面方向保持一致。
阿拉伯语RTL设计浅谈
Collect
4.5 文本颜色透明度
阿拉伯语中的文字形状可以重叠,如果增加了透明度,某些字体的重叠区域会有明显的接缝,考虑到通用性所以不建议使用透明度。
阿拉伯语RTL设计浅谈
Collect
4.6 大写字母
阿拉伯语没有大写字母,在阿拉伯语中使用大写字母不会有任何效果。
阿拉伯语RTL设计浅谈
Collect
4.7 逗号分隔符
阿拉伯语中的逗号分隔符按照从右到左的顺序,需要做镜像处理。
阿拉伯语RTL设计浅谈
Collect
4.8 下划线
阿拉伯语的文字行高高于中文,增加下划线的话会导致字符中部分元素位于下划线下方,体验感较差,不建议使用。
阿拉伯语RTL设计浅谈
Collect
五、字体
5.1 字体选择
选择字体的时候必须要保证良好的可读性,一般不使用粗体,路径太粗会影响细节,而且字母的点非常小,不易识别。建议使用
Google Noto
字体,比浏览器默认字体显示更清晰。
阿拉伯语RTL设计浅谈
Collect
5.2 行高
阿拉伯语的文字高度高于中文,可能导致在与其他语言混合排版时出现对齐问题。如果按照文字本身的高度设置行高,则会出现内容被截断的现象,建议文字均使用1.5倍行高,以确保整体布局的美观和易读性。
阿拉伯语RTL设计浅谈
Collect
5.3 字间距
阿拉伯语是草书。一个单词中的大部分字符都是连接在一起的。因此,阿拉伯语中不应该使用字间距,它会将一个单词的字符撕开,打破了阿拉伯语单词的草书性质。
阿拉伯语RTL设计浅谈
Collect
5.4 字体面积
同样的文本内容,阿拉伯语占用的空间可能会更少,在一些需要强调的内容展示上,例如按钮、标题等地方需要对字号适当加大,用来弥补视觉差异。
阿拉伯语RTL设计浅谈
Collect
不同的RTL语言可以使用不同的数字系统。例如:希伯来语文本中使用西方阿拉伯数字,而阿拉伯语文本中可能同时使用西方和东方阿拉伯数字。西方和东方阿拉伯数字的使用因国家和地区而异,甚至在同一国家或地区内也是如此。
5.5 西方阿拉伯数字
西方阿拉伯数字由0,1,2,3,4,5,6,7,8,9共10个计数符号组成。采取位值法,高位在左,低位在右,从左往右书写。
阿拉伯语RTL设计浅谈
Collect
5.6 东方阿拉伯数字
用法与西方阿拉伯数字一致,写法上有所差异。千位分隔符用点分隔,小数点用逗号。
阿拉伯语RTL设计浅谈
Collect
5.7 数字区间需要镜像
RTL模式下数字本身及数字的顺序无需镜像,但是数字区间因为涉及到了阅读顺序,则出现把左右两方的内容位置对调。
阿拉伯语RTL设计浅谈
Collect
六、方向/进度控制
6.1 时间的推移需要镜像
人们倾向于将阅读的顺序作为前进的方向。因此进度或者方向指示勒的控件是需要镜像的,帮助用户按照固定的顺序访问内容。例如:在RTL语言中,后退按钮必须指向右侧,以便于与阅读顺序相匹配。同理,上一个、下一个等元素也需要左右镜像。
阿拉伯语RTL设计浅谈
Collect
6.2 媒体播放器不需要镜像
播放按钮和媒体进度指示器等媒体控件始终运行 LTR。这是因为媒体控制反映了盒式磁带播放器在盒式磁带中滚动磁带的方式。所以包含播放/暂停/停止按钮的元素永远不会翻转。
阿拉伯语RTL设计浅谈
Collect
七、图标
7.1 需镜像类型
7.1.1 与方向相关的图标
与方向相关的图标通常需要镜像处理。这是因为这些图标在RTL布局中的方向应该与文本的阅读方向一致。例如,箭头、音量等图标可能需要镜像以适应RTL布局。
阿拉伯语RTL设计浅谈
Collect
7.1.2 与现实形态相反
与现实形态相反的图标也需要进行镜像处理。由于两地的习惯差异,导致现实中元素形态也有所不同。例如:书本、浏览器页面等图标需要在RTL布局中镜像以符合当地的阅读习惯。
阿拉伯语RTL设计浅谈
Collect
7.2 无需镜像类型
7.2.1 反斜线
反斜线图标在RTL布局中通常不需要镜像,因为它们本身没有明确的方向性。如果除斜杠外的图标元素有方向性,则只有图标元素镜像,反斜杠不镜像。
阿拉伯语RTL设计浅谈
Collect
7.2.2 与现实形态一致
由于各地的某些元素物理形态一致,大家认知上比较统一,也不需要做镜像处理。
阿拉伯语RTL设计浅谈
Collect
7.2.3 镜像前后无区别
这类图标通常具有左右对称的特性,镜像前后并无区别,无需特殊处理。
阿拉伯语RTL设计浅谈
Collect
7.2.4 偏向右手操作
便于右手操作的图标,如搜索图标或杯子图标,在RTL布局中也不需要镜像,因为各地的大都习惯用右手操控,符合用户认知习惯。
阿拉伯语RTL设计浅谈
Collect
7.3 图标中涉及文本
图标中涉及到文本时,需要把文本转化为当地语言中的内容,易于理解。
阿拉伯语RTL设计浅谈
Collect
7.4 禁止镜像
7.4.1 logo
logo涉及到品牌形象,镜像后会导致侵权。
阿拉伯语RTL设计浅谈
Collect
7.4.2 通用样式
通用类图标,各地的用法习惯一致,无需镜像。
阿拉伯语RTL设计浅谈
Collect
7.5 禁止使用带猪的形象
在RTL模式下,禁止使用带猪的形象是出于文化敏感性的考虑。在伊斯兰教中,猪被视为不洁之物,因此在阿拉伯国家的RTL设计中使用猪的形象可能会引起冒犯或不适。
八、图片
8.1 图片顺序镜像
当图片的顺序有意义时,需要翻转他们的位置。例如,如果以特定顺序(如时间顺序、字母顺序或操作顺序)显示多个图片时,需要翻转他们的位置以保证RTL上下文中的顺序含义。
阿拉伯语RTL设计浅谈
Collect
8.2 禁止镜像图片本身
避免镜像图片本身,如照片、插图等。镜像图片可能会改变图片的含义,或造成侵权。如果图片的内容与阅读方向密切相关,请考虑创建新的图片,而不是镜像原始图片。
阿拉伯语RTL设计浅谈
Collect
九、日历
9.1 回历与公历
  • 阿拉伯回历主要在沙特阿拉伯使用。虽然他们在某种程度上仍然承认并遵循公历,但许多出版物和网站都使用回历。沙特航空等一些网站允许同时显示公历和回历。还有波斯历和希伯来历。将需要根据本地化对象进行特定的日历更改。
  • RTL 与 LTR 日历— 无论是回历还是公历,如果它是用英文书写的(带有“英文”数字),则日历显示 LTR。但是,如果它是阿拉伯语,则日历会翻转并显示为 RTL。有时日历会是阿拉伯语,但仍然使用“英语”数字。在那些情况下,日历仍然是 RTL。
阿拉伯语RTL设计浅谈
Collect
9.2 工作周
沙特的工作周从周日到周四,周五和周六为周末。因此,所有沙特日历都从星期日开始。这不一定是整个中东地区的情况,尽管从星期日开始日历在美国很普遍。
阿拉伯语RTL设计浅谈
Collect
9.3 节假日
各个国家的节假日均不相同,需要提供节假日具体日期自定义的功能。
阿拉伯语RTL设计浅谈
Collect
十、示例
10.1 音量
根据RTL布局的规则进行镜像处理。组件中的元素和指示符需要与文本的阅读方向保持一致。在音量组件中,音量滑块和音量指示符可能需要镜像以适应RTL布局。
阿拉伯语RTL设计浅谈
Collect
10.2 评分
颠倒显示的进度或者计数方向,禁止翻转数字本身。
阿拉伯语RTL设计浅谈
Collect
10.3 消息通知
✅图标为通用样式,无需镜像,整体布局改为从右到左。
阿拉伯语RTL设计浅谈
Collect
10.4 骨架屏
作为内容加载容器,引导用户视觉焦点,也需要根据界面方向做相应的布局调整。
阿拉伯语RTL设计浅谈
Collect
10.5 富文本编辑器
需要将工具栏的操作全部做镜像处理,同时内容段落的输入也改为从右至左。
阿拉伯语RTL设计浅谈
Collect
10.6 进度条
进度条同样遵循RTL原则,受阅读方向的改变,所以整体的方向需要改变,但是标识的刻度数字本身无需镜像。
阿拉伯语RTL设计浅谈
Collect
10.7 时间轴
左右布局翻转,内容区域的文字改为右对齐,按照RTL原则,浏览顺序为从右至左。时间段顺序也改为从右至左。
阿拉伯语RTL设计浅谈
Collect
十一、自动化工具
11.1 Bi-App-Sass
  • Anas Nakawa的Bi-App-Sass允许编写一次样式表,然后将其编译为两个不同的样式表,一个用于LTR,另一个用于RTL。
  • 工具地址:https://github.com/anasnakawa/bi-app-sass
11.2 RTLCSS
  • Mohammad Younes的RTLCSS是一个将LTR样式表转换为RTL的框架。
  • 这个工具的不同之处在于它只在CSS文件的构建版本上运行。例如,如果你有一个包含50多个Sass组件的项目,RTLCSS将很方便地解析编译的CSS文件并创建它的RTL版本。
  • 工具地址:https://rtlcss.com/
主流文档参考
CoreUi:https://coreui.io/docs/getting-started/rtl/
WIKI:https://en.wikipedia.org/wiki/Right-to-left_script
人人都是产品经理:https://www.woshipm.com/ucd/5634859.html
MUI的文档说明:https://mui.com/material-ui/guides/right-to-left/
AntD:https://ant.design/components/config-provider-cn?direction=rtl
SalesforceRTL语音支持文档地址:https://help.salesforce.com/s/articleView?id=sf.faq_getstart_rtl.htm&type=5
Android文档:https://www.mdui.org/design/usability/bidirectionality.html#bidirectionality-localization
Apple文档:https://developer.apple.com/cn/design/human-interface-guidelines/right-to-left
总结
  • 阿拉伯语言界面可以实现,尤其是使用Flex技术的layout布局,对RTL非常友好;
  • 需要从底层开始做增量修改,涉及css样式匹配、字体匹配、控件匹配、UI特性匹配;
  • 需要遍历整个系统,需要考虑从右到左翻转的每个内容,工作量很大,非常乏味且非常容易混乱;
  • 需要css样式表重写、动态类支持、需要开发RTL插件,需要全部重新测试;
  • 可以尝试做工具插件批量抽取。
阿拉伯语人群大约有 4.4 亿人,另有 1亿人讲波斯语,而 900 万讲希伯来语。这加起来大约有 5.5 亿人。阿拉伯语RTL本地化设计是一项复杂而重要的任务。通过了解阿拉伯语书写习惯、遵循设计原则以及进行充分的测试与优化,我们可以为阿拉伯语用户提供更好的产品和服务体验。随着全球阿拉伯语用户群体的不断扩大,重视阿拉伯语RTL本地化设计将成为企业和开发者不可或缺的一部分。
122
Report
|
121
Share
相关推荐
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
体验Apple Vision Pro后的一点思考
Homepage recommendation
文章内容含视频
年度B端设计作品集
Recommanded by editor
内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
品牌制造社
品牌制造社
品牌制造社
品牌制造社
精选收藏夹
作品收藏夹
小家电
小家电
小家电
小家电
精选收藏夹
作品收藏夹
茶包装
茶包装
茶包装
茶包装
精选收藏夹
作品收藏夹
IP形象设计
IP形象设计
IP形象设计
IP形象设计
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
大家都在看
Log in