导航 整导航系统都会以相反的顺序展示
这是B端产品比较重要的一点,B端产品是服务于一主体查看详情 > 其中有些元素,例如右上角logo、中英文文字,好像还是原来的样子,只是挪了一位置,改了一下对齐方式,这下方会详细解释。 我们再来对比一张iPhone天气,除阿拉伯文本从右侧开始外,中间的时间指示器也作了方向改变,底部的翻页器也做了镜像改变,第一主页面是在最右侧。 RTL原则 通过以上案例,基本就了解了阿拉伯语的一简单原则。阿拉伯语用户进入到一网站,首先是从页面的右上角开始,扫描顶部,然后换行再从右侧开始扫描。 实际应用场景 从LTR到RTL整网站及应用程序,在页面结构及阅读习惯上需要作出调整,以下通过一些常见的案例帮你熟悉它们。在LTR模式下,导航是从左到右排序的,而在RTL原则下,图标的排 购买特殊营销数据 序方向则是相反的。 从导航进入到二级页面后,后退/前进的箭头也都是需要被镜像的。 阿语混排 在一些页面上,也会涉及到中英阿多语言混排的情况,比如上述提到的Youtube网站,我们会发现,页面作了镜像,阿语采用了RTL的流向,而混插其中的中文字符和英文单词的阅读还是遵循LTR原则的。不过对齐方式则统一是右对齐,以保证界面的一致性。 进度条 进度条这类受时间影响的组件,它也同样遵循RTL原则,受阅读方向的改变,所以进度条、加载动画等也是同样需要镜像的。但注意,表示进度、容量等的连续数字不需要镜像翻转,如图中的。 图片排序 图片展示顺序上也是需要作镜像处理,因为它们一般以时间、字母等有一些规律做的排序,遵循RTL原则,才能保证它们排序的意义。
https://lh7-us.googleusercontent.com/uXQDNzmXBxNpE-z9ooc7aQZlYRoDhHQmuRZcih1tEXdKwy3xg9G31-GUbVunInOOYrcvWikRrk7Tuph1osdM2eLhkKElm3YduFNxsgab9IDinO5ZHHVy3Sh4DTnyQniOgAILNjP8FON5KbhIJCZOSp8
骨架屏 骨架屏,一种内容加载器,也是需要做RTL布局更改的,因为它的内容条是真实的阅读方向,在内容生成前会起到视觉引导的作用。 图片海报 对于海报Banner这类,不可以直接翻转图片,但是需要做左右排版上的调整。其中图片上的行动按钮是一容易忽视的地方,当界面从LTR转变为RTL后,图片上的行动按钮在布局上也是需要跟着作出调整。 富文本编辑器 内容编辑文档,也需要将段落的输入调整成从右往左,其中编辑器的工具栏也需要作镜像改变。注意,撤销(上一步)、重做(下一步)按钮的位置,也是需要镜像的。 时间线图表 以时间为维度图表在横轴上,也是需要从右往左来作出调整,都是阅读的起始时间在最右侧,结束时间在左侧,其中日历组件也是遵循同样的原则。 界面对齐 排版布局中,RTL需要保持一致的右对齐方式,比如表格、表单、图表等,就像我们浏览日常网站一样,一致的阅读起始线,能给用户舒适的阅读体验。
頁:
[1]