Design for Arabic · صمّم بالعربي

Highlight

Apple 设计团队系统讲解了为阿拉伯语用户优化应用的方法论，涵盖 UI 方向性翻转、阿拉伯文字排版特性（连字、字重、光学尺寸）、图标镜像策略，以及西方阿拉伯数字与东方阿拉伯数字的选择，帮助开发者触达全球约 6.6 亿阿拉伯语书写用户。

核心内容

为什么需要关注阿拉伯语

阿拉伯语是全球第三大书写系统，约有 6.6 亿人使用，覆盖 22 个以上国家。如果你的应用想触达这部分用户，仅做语言翻译是不够的——还必须适配 UI 的方向性。

阿拉伯语从右到左（RTL）书写。这个特性不仅影响文字排列，还渗透到整个布局、导航逻辑和交互设计。

UI 方向性：从线框图开始

（02:58）

以 App Store 的 Today 标签为例：英文版中，用户从左侧的 Today 标签进入，浏览故事卡片，最终到达右侧的产品页。阿拉伯语版本中，整个流程反转：Today 标签在右侧，故事卡片从右向左滑动，产品页在左侧。

用户的思维模型也随之反转——就像在翻阅一本阿拉伯语书籍，从右页开始，向左页推进。

好消息是，使用 SwiftUI 等 Apple 原生框架时，大部分 RTL 适配自动完成。开发者只需关注少数特殊组件。

哪些元素翻转，哪些保持原样

（04:35）

需要翻转的元素：

• 标题、按钮、导航栏的顺序和位置
• 段落右对齐
• 轮播图和可滑动元素的交互方向
• 温度刻度（最低温在右侧，最高温在左侧）
• 分页指示器从右到左排列
• 日历中日期、月份、年份的进度方向
• 图表中的时间轴（早期在右，晚期在左）
• 开关、分段控制器等控件

保持不变的元素：

• 图片、视频、背景内容。太阳总是从东方升起，不应因为语言而翻转
• 时钟指针方向（匹配物理时钟）
• 放大镜图标的角度（反映右手使用习惯，全球通用）

阿拉伯文字的核心特征

（07:32）

阿拉伯文有两大特征直接影响 UI 设计：

连字特性：字母在词中的位置（开头、中间、结尾、独立）决定其字形。同一个字母可能有 4 种不同形态。这让阿拉伯字体文件比拉丁字体大得多。

垂直空间需求：阿拉伯文通常比拉丁文更紧凑，但略高——尤其是使用注音符号（vocalization marks）时。如果应用大量使用注音，需要增加垂直间距避免裁切。

SF Arabic 字体家族

（09:34）

Apple 提供专为阿拉伯语设计的 SF Arabic 字体：

• 字重齐全：从 Ultralight 到 Black，与 SF 拉丁字体家族保持一致
• 光学尺寸（Optical Size）：大字号用于标题，结构更现代；小字号用于正文，增加角度和对比度以提升可读性。系统自动根据字号选择合适形态
• SF Arabic Rounded（新）：WWDC 2022 新增，给应用更亲切、活泼的感觉

排版注意事项

（12:39）

大小写补偿：阿拉伯文没有大小写。当拉丁文使用大写时，视觉上比阿拉伯文更”重”。补偿方法是将阿拉伯文字号增大 10%。

字间距（Tracking）：阿拉伯文的连字特性让字间距处理变得复杂。如果使用的字体未优化字间距，建议设为 0 tracking。Apple 系统字体通过 Kashida（连字延伸）机制自动处理自然间距。

透明度处理：非优化字体在应用透明度时可能显示字母间的可见接缝。系统字体通过将透明度应用于整个单词来避免这个问题。

图标镜像策略

（14:25）

SF Symbols 中有超过 300 个阿拉伯语和 RTL 专用变体。系统 API 会自动显示正确的本地化版本。

需要镜像的图标：

• 带有文字方向含义的图标（如列表行对齐方向）
• 书写方向相关的图标（如钢笔角度）
• 扬声器方向（调整为 RTL 自然方向）
• 日历圆点进度方向

保持不变的图标：

• 放大镜（右手使用角度全球通用）
• 时钟指针（匹配物理时钟）
• 斜杠方向（保持 Apple 生态一致性）

在 SF Symbols App 中，选择符号后查看 Info 面板的 Localization 部分，可以看到阿拉伯语变体和其他非拉丁文字变体。

阿拉伯数字系统

（17:16）

我们日常使用的 0-9 数字其实叫”西方阿拉伯数字”（Western Arabic numerals），因为它们起源于阿拉伯世界。

阿拉伯世界还使用另一种”东方阿拉伯数字”（Eastern Arabic numerals）：٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩

使用分布：

• 西方阿拉伯数字：摩洛哥、阿尔及利亚、突尼斯等西非阿拉伯国家
• 东方阿拉伯数字：部分黎凡特和海湾国家
• 两者混用：埃及、沙特阿拉伯等

系统会根据用户所在国家自动选择，用户也可以手动切换。应用中的数字应该同时支持两种形式，或根据目标市场验证使用哪种。

详细内容

使用 SwiftUI 自动适配 RTL

（02:18）

SwiftUI 的 RTL 适配大部分是自动的：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section("Settings") {
                    Toggle("Notifications", isOn: .constant(true))
                    NavigationLink("Account") { AccountView() }
                }
            }
            .navigationTitle("Today")
        }
    }
}

关键点：

• NavigationView 的导航栏按钮和标题在阿拉伯语环境下自动右对齐
• List 和 Form 的单元格布局自动镜像
• Toggle 的开关方向自动适配
• 文本方向由系统根据内容语言自动判断
• 开发者无需编写条件代码处理 RTL

处理混合文本方向

当界面同时包含阿拉伯语和拉丁语内容时，系统会根据每个文本片段的语言自动确定方向：

Text("Welcome to التطبيق")  // 系统会根据内容自动处理方向

关键点：

• Unicode 双向算法（Bidi Algorithm）自动处理混合方向文本
• 阿拉伯语中的拉丁语单词保持 LTR 方向
• 数字在阿拉伯语文本中通常保持 LTR 方向
• 使用 Unicode 方向控制字符（如 \u{202B} RTL Embedding）可以手动控制复杂场景

图标方向性判断

（15:01）

判断一个图标是否需要镜像，问自己两个问题：

1. 这个图标的方向是否暗示了阅读/书写方向？

   • 是 → 需要镜像（如列表行、文字排版图标）
   • 否 → 保持原样（如放大镜、时钟）

2. 这个图标的方向是否反映了物理世界的方向？

   • 是 → 保持原样（太阳升起方向、时钟指针）
   • 否 → 根据 UI 方向决定

SF Symbols 中已本地化的图标会自动显示正确版本。自定义图标需要手动提供 RTL 变体。

数字显示的本地化

（18:38）

使用 NumberFormatter 自动处理数字本地化：

let formatter = NumberFormatter()
formatter.locale = Locale.current  // 系统会根据用户设置自动选择数字形式
formatter.numberStyle = .decimal

let formatted = formatter.string(from: 1234)  // 可能输出 "١٢٣٤" 或 "1234"

关键点：

• Locale.current 自动反映用户的地区和数字偏好设置
• 计算器、日历、时钟等系统应用都遵循这个规则
• 硬编码数字字符串会绕过本地化，应该避免
• 对于特定市场，可以显式设置 locale 来验证数字形式

核心启发

• 为全球用户设计：阿拉伯语覆盖 6.6 亿用户，RTL 适配不只是翻译工作。使用 SwiftUI 原生框架可以大幅降低适配成本，让应用从第一天就具备全球化能力。入口：Xcode 项目设置 → Localizations → 添加 Arabic。

• 文化细节增强体验：日历应用显示伊斯兰农历月份起始标记，天气应用使用当地用户熟悉的温度刻度方向。这些细节让用户感到被尊重。入口：在 UI 设计中调研目标市场的文化习惯，参考 Apple 原生应用的阿拉伯语版本。

• 双语界面优化：中东市场常见阿拉伯语和英语混用场景。SF Arabic 与 SF 拉丁字体家族风格一致， bilingual 界面自然和谐。注意大写拉丁文旁边阿拉伯文字号增大 10% 的补偿。入口：使用系统字体 Font.system()，自动获得 SF Arabic。

• SF Symbols 本地化检查：在 SF Symbols App 中浏览你的应用使用的所有图标，检查 Localization 面板是否有阿拉伯语变体。没有变体的图标评估是否需要手动创建 RTL 版本。入口：SF Symbols App → 选择图标 → Info 面板 → Localization。

• 数字格式自动适配：金融或数据类应用确保所有数字显示通过 NumberFormatter 处理，不要硬编码数字字符串。这样系统会自动根据用户地区选择西方或东方阿拉伯数字。入口：将所有 Text("\(value)") 替换为使用 Formatter 的版本。

关联 Session

• Get it right (to left) — 从开发角度实现 RTL 适配的技术细节
• Build global apps: Localization by example — 通过实例学习应用本地化
• Meet the expanded San Francisco font family — SF Arabic 和 SF Arabic Rounded 字体介绍