Design for Arabic
Design 进阶 20m

为阿拉伯语设计

Design for Arabic

2022年6月6日

在 Apple 官方观看视频

一句话判断

如果你的应用打算触达中东和北非市场，这场 Session 是阿拉伯语 RTL 适配的必修课——从布局翻转、字体排版到数字系统，Apple 原生框架已经帮你做了大部分工作，但细节层面的设计决策仍然需要你自己拿主意。

这场 Session 讲了什么

Apple 设计团队的 Mohamed Samir 系统地讲解了为阿拉伯语优化应用界面的方法论。核心前提是：阿拉伯语是仅次于拉丁语和中文的全球第三大书写系统，覆盖超过 6.6 亿使用者、22 个国家。阿拉伯语的书写方向是从右到左（RTL），这意味着不仅仅是文字镜像翻转，整个 UI 的布局逻辑、导航心智模型、甚至图标方向都需要重新审视。

Session 覆盖了四个主题：UI 方向性（directionality）、阿拉伯文字体排版特征、图标设计适配、以及数字系统选择。每个主题都配有 Apple 自家应用（App Store、Weather、Calendar、Pages）的实际案例对照。

值得深挖的点

布局翻转不等于简单镜像。RTL 适配的关键在于理解用户的导航心智模型发生了根本性变化。以 App Store 为例：用户从 Today tab（现在在最右侧）进入故事卡片，最终到达产品页（在最左侧）。这跟翻阅一本阿拉伯语书籍的体验完全一致——从右往左推进。Carousel、分页控件、温度刻度这些交互组件，都需要把交互方向和动画一起翻转。

内容不翻转，界面翻转。Weather 应用是个很好的例子：太阳从东方升起这个事实不会因为语言改变而翻转，背景图和视频内容保持原样。但温度刻度的最低值要放到右侧、最高值在左侧，因为阿拉伯用户从右向左阅读数据。

日历的文化适配。阿拉伯日历中，日期、月份、年份的流动方向是从右到左，这匹配了阿拉伯世界实体日历的使用习惯。Calendar 应用还在部分日期下方标注了伊斯兰农历每月的起始日（红色下划线），体现了文化敏感度。

阿拉伯文字体的工程复杂度。阿拉伯字母根据在单词中的位置（独立、词首、词中、词尾）会有不同的字形变化，这意味着阿拉伯字体库通常比拉丁字体大得多。同一组字母在连接书写时会产生大量组合变体，渲染引擎需要处理复杂的连字规则。

代码片段

SwiftUI 中 RTL 适配主要依赖系统自动处理，但开发者需要理解底层机制：

// SwiftUI 自动根据语言环境翻转布局方向
// 前提是你使用了 .leading/.trailing 而非 .left/.right
HStack {
    Text("标题")
        .frame(maxWidth: .infinity, alignment: .leading)
    Button("操作") {}
}
// 在阿拉伯语环境下，.leading 会自动映射到右侧

// 强制指定布局方向（仅在特殊场景下使用）
environment(\.layoutDirection, .rightToLeft)

最佳实践

  • 使用 .leading 和 .trailing 而不是 .left 和 .right，让 SwiftUI 自动处理 RTL 布局
  • 段落文本始终右对齐（在 RTL 环境下 .leading 就是右对齐）
  • 图标需要区分方向性：箭头、进度指示器这类有方向的图标要翻转；时钟、音符这类没有方向的图标保持原样
  • 图表的时间轴方向需要跟日历行为一致——阿拉伯语环境下从右到左表示时间推进
  • 切换控件（Toggle）、分段控制器（Segmented Control）的交互方向需要镜像
  • 避免用硬编码的左右坐标，改用语义化的布局约束

还有什么值得关注

  • 阿拉伯语支持两套数字系统：阿拉伯-印度数字（٠١٢٣٤٥٦٧٨٩）和标准阿拉伯数字（0123456789），Apple 允许用户在设置中选择偏好
  • 字体排印方面，Apple 为阿拉伯语提供了多种字重和样式，开发者需要关注阿拉伯文本的行高和字间距调整，因为阿拉伯字母的纵向伸展范围比拉丁字母大
  • 测试时建议同时检查沙特阿拉伯（阿拉伯语）和埃及（阿拉伯语）两个区域设置，因为不同地区的数字系统和日历习惯可能不同
WWDC 2022