Design for Arabic

Highlight

Apple 说明了阿拉伯语界面不能只翻译文本：开发者还要处理从右到左的布局流、阿拉伯文字体排版、方向性图标，以及按地区变化的阿拉伯数字系统。

核心内容

一个应用准备进入阿拉伯语市场时，最容易做的事情是翻译字符串。这样还不够。

阿拉伯语从右到左书写。Mohamed Samir 在开场先给出规模：今天大约有 6.6 亿人使用阿拉伯文字，覆盖 22 个以上国家和地区。只翻译文字，会留下一个更大的问题：界面仍然按英语的阅读顺序组织。

这会影响用户进入页面的方式，也会影响用户理解控件的方式。标题、段落、栏目、导航栏、图标、表格、轮播、分页点、图表，都可能需要重新排列。Apple 的原生框架会处理大量基础方向性行为。设计师和开发者仍然要检查内容、图形、字体、符号和数字这些容易漏掉的细节。

这场 session 的价值在于，它把“支持阿拉伯语”拆成四个可检查的问题：界面方向、字体排版、图标方向、数字系统。

详细内容

1. 先把页面当成从右到左的线框

（02:55）Samir 用 App Store 的 Today 故事卡、故事页、产品页说明方向性。最好的办法是先把页面还原成 wireframe（线框图），再判断每个元素在阿拉伯语环境下应该移动到哪一侧。

标题、按钮、导航栏顺序会改变。段落要右对齐。轮播和可滑动元素从右向左流动。图片本身通常保留原方向，因为本地化的是界面流，不能把所有视觉内容做镜像。

检查这个页面时，可以把元素分成五类：

导航栏：顺序跟随从右到左的阅读方向，Pages 和 App Store 示例都采用这种处理。
标题：在阿拉伯语界面中换到右侧。
段落：文本始终右对齐。
轮播和滑动组件：交互方向和动画方向都要反转。
图片、视频、背景：Weather 示例里，太阳升起方向这类内容不应被翻转。

（04:35）Weather 应用展示了一个容易出错的边界：背景、图片、视频不翻转；“一天中的天气”轮播反转；温度刻度把低温放在右侧、高温放在左侧；分页点也从右到左推进。

2. 时间和图表要符合本地心智模型

（05:47）Calendar 示例说明，阿拉伯语环境中的日期、月份、年份从右向左推进，这也匹配阿拉伯世界实体日历的使用方式。Apple 还在日历中用红线标出伊斯兰阴历月份的开始日期。

（06:22）Settings 的电池状态页展示了另一个细节：Toggle（切换控件）、Segmented Control（分段控件）、设计和交互都在阿拉伯语布局中镜像。带时间维度的图表也要检查。电池用量图中，较早时间在右侧，较晚时间在左侧。

这类图表可以按三个问题检查：

起点在哪里：时间轴应从右侧开始，匹配阿拉伯语日历行为。
方向怎么推进：较早时间放在右侧，较晚时间放在左侧。
是否受国家习惯影响：Samir 特别提醒，其他图表方向依赖国家和场景，设计前要确认。

3. 阿拉伯文字体需要单独检查

（07:16）阿拉伯文字的核心特征是连接。一个字母会因为位置不同而改变字形：独立、词首、词中、词尾都可能不同。因此，阿拉伯字体库通常比拉丁字体大。

阿拉伯词语通常更紧凑，但会稍高一些。原因是它会使用点、元音标记和附加符号。如果应用大量使用 vocalization marks（元音标记），界面需要更多垂直间距，否则文字可能被裁切。

（09:28）Apple 提供 SF Arabic。它与拉丁 SF 字体族风格一致，适合双语环境，并提供从 Ultralight 到 Black 的字重。系统还会根据字号自动选择 optical size（视觉字号）：大字号偏标题风格，小字号优先保证正文可读性。

排版检查可以落到这些具体项：

检查项	处理方式
字体选择	优先使用 Apple 提供的 SF Arabic，适合系统应用和第三方应用使用。
垂直空间	大量元音标记会增加文字高度，需要避免裁切。
视觉字号	系统会按字号选择合适字形，大字号偏标题，小字号偏正文可读性。
字距	阿拉伯文连接依赖 Kashida（延展连接），未优化字体要避免错误字距。
透明度	透明度应作用于整个词或短语，避免字母连接处出现接缝。

（11:44）这一年 Apple 还引入了 SF Arabic Rounded，提供从 Ultralight 到 Black 的多个字重。Reminders 示例展示了它在标题和正文中的用法。想了解字体族扩展，可以继续看 “Meet the expanded San Francisco font family”。

4. 大写拉丁字母会改变双语排版比例

（12:34）阿拉伯语没有大小写。数字字体中的阿拉伯字形通常按小写拉丁字母的视觉体量设计。当界面中使用全大写拉丁字母时，拉丁文字会显得更大，阿拉伯文字会显得偏小。

Samir 给出的处理方法很具体：在这种场景里，可以把阿拉伯字号增加 10%。这个调整尤其能改善小字号里的可读性。

判断方式很直接：如果同一个界面里有全大写拉丁文字，就以当前拉丁字号为参照，检查阿拉伯文字是否显小。需要补偿时，把阿拉伯字号增加 10%。如果没有全大写拉丁文字，不要机械放大。

5. 图标要区分“方向含义”和“物理含义”

（14:22）Iconography（图标）经常是用户进入流程或触发操作的入口。阿拉伯语界面里，图标不能简单全部翻转。

App Store 的 Today 标签图标表示文本方向，所以它在阿拉伯语界面中把线条右对齐。放大镜图标保留原方向，因为它暗示多数用户右手使用的角度，不依赖语言方向。

Apple 还展示了更多例子：书写方向可以从右到左，但笔的角度保持自然；扬声器方向可以改变，但斜杠方向保持 Apple 生态一致；日历点的方向可改变，时钟指针保持物理时钟表现。

图标可以按含义来判断，而不是按语言统一翻转：

图标类型	阿拉伯语界面处理
表达文字方向的符号	适配从右到左，例如 Today 图标的线条右对齐。
放大镜	保留原方向，因为它来自右手使用习惯。
日历进度点	跟随阿拉伯语日历方向。
时钟指针	保持物理时钟表现。
扬声器形状	可以改变方向，让它在界面中更自然。
斜杠	保持 Apple 生态内的一致性。

（16:14）SF Symbols 提供 300 多个阿拉伯语和从右到左符号。设计师可以在 SF Symbols app 的信息面板里查看 localization（本地化）区域，确认阿拉伯语变体和其他非拉丁文字变体。使用系统 API 时，这些从右到左和本地符号会自动出现在应用里。

6. 阿拉伯数字有西部和东部两套常见形式

（17:13）我们日常熟悉的 0-9 被称为 Western Arabic numerals（西部阿拉伯数字）。另一套是 Eastern Arabic numerals（东部阿拉伯数字）。两者都源自阿拉伯世界，今天在不同阿拉伯国家使用。

西部形式常见于摩洛哥、阿尔及利亚、突尼斯等西非阿拉伯国家。东部形式用于部分黎凡特和海湾国家。埃及、沙特阿拉伯等国家会同时使用两种形式。

（18:24）系统会根据用户国家自动选择数字形式，也可以由用户选择触发。Calculator、Calendar、Apple Watch 的 Typograph 表盘都体现了这种选择。

落地时要确认三件事：系统会根据用户国家或用户选择决定数字形式；应用要同时能容纳西部和东部阿拉伯数字；如果应用有明确目标国家，要确认当地更适合哪种数字形式。

核心启发

1. 做一个 RTL 界面检查清单

做什么：给应用关键页面建立 Arabic layout audit，逐项检查导航栏、段落、轮播、分页点、图表、切换控件。
为什么值得做：session 明确指出，原生框架会处理大量基础工作，但内容和组件级细节仍然需要人工判断。
怎么开始：从首页、详情页、设置页各选一个代表页面，用“是否随阅读方向移动”“是否应保持原图”两列记录结果。

2. 给天气、健康、金融类图表加方向性测试

做什么：检查带时间轴的图表在阿拉伯语界面里是否从右向左推进。
为什么值得做：Weather、电池用量图和 Calendar 都说明，时间心智模型会随阿拉伯语和当地日历行为改变。
怎么开始：找出所有按天、周、月、年展示的数据视图，确认较早时间是否在右侧，较晚时间是否在左侧。

3. 建一个图标本地化决策表

做什么：把应用内图标分成三类：表达文字方向、表达物理对象、表达生态一致性。
为什么值得做：Today 图标、放大镜、扬声器、日历点、时钟指针的处理方式不同，不能统一镜像。
怎么开始：用 SF Symbols app 查看 localization 信息面板，优先替换已有阿拉伯语或 RTL 变体的符号。

4. 为双语界面做字体比例回归

做什么：检查包含大写拉丁字母和阿拉伯语的标签、按钮、卡片标题。
为什么值得做：session 给出具体建议：大写拉丁字母会让阿拉伯文字显小，必要时可把阿拉伯字号增加 10%。
怎么开始：从按钮、Tab 标题、短标签开始截图对比，重点看小字号和全大写英文缩写。

5. 按目标国家验证数字形式

做什么：为价格、日期、统计、计算器、表盘类界面检查西部和东部阿拉伯数字显示。
为什么值得做：阿拉伯世界内部使用习惯不同，系统会按国家或用户偏好选择数字形式。
怎么开始：列出所有数字密集页面，用目标国家的区域设置检查布局宽度、对齐和可读性。

关联 Session

Get it right (to left) — 从开发角度处理右到左语言的本地化行为。
Build global apps: Localization by example — 用实例讲应用国际化和本地化流程。
Design for Arabic · صمّم بالعربي — 本场设计指导的阿拉伯语版本。
Meet the expanded San Francisco font family — 了解 SF 字体家族扩展，包括 SF Arabic Rounded。