针对阿拉伯语进行设计

♪ ♪

Mohamed Samir: 嗨 我是 Mohamed Samir Apple 设计团队的设计师 今天我将向你介绍一些 设计阿拉伯语 App 的最佳方案 本课程也有阿拉伯语版本 请随时查看 在开始之前 我想谈谈 为什么设计或优化面向阿拉伯用户的 App 或游戏很重要 如今大约有 6.6 亿人使用阿拉伯语 因此阿拉伯语成为了 世界上第三大书面语言 仅次于拉丁语和汉语 来自超过 22 个国家 许多城市和地区的人们 可能会看到并使用你所构建的东西 如果你想接触到其中一小部分用户 你不仅要考虑优化语言 还要考虑优化 UI 的方向性 因为阿拉伯语 是一种从右到左书写的语言 为了理解这一点 我们来看看这个例子 这是用阿拉伯语写的“阿拉伯沙漠” 正如你所看到的 它是从屏幕的右边往左边写的 不仅如此 如果版面中存在这个短语 那么整个版面应该从上到下 从右到左排布 来匹配语言的阅读行为和方向 这意味着标题 段落 栏目 甚至图像都应该从右到左排布 这种方向性行为不仅延伸到布局 还延伸到了 UI

与 Pages App 中的这个示例一样 导航栏的顺序和方向是从右到左的 图标也朝着相同的方向排布 如果你开始浏览该 App 那么你会发现菜单 控件 图形元素 甚至表格都被设计成 与语言的自然排布和行为相匹配 现在你可能会认为用阿拉伯语优化 你的 App 或游戏可能需要大量工作 但好消息是 如果你使用我们的本地框架 比如 SwiftUI 那么这方面的 很多问题已经被 Apple 解决了 这样你就可以专注于内容 和其他 UI 细节 这些细节可能是针对 你的 App 或游戏的 在今天的课程中 我将与你们分享一些 在做优化时应该注意的方面 先从你想要考虑的 UI 方向性和示例组件开始 然后转向阿拉伯语脚本的主要特点 和 Apple 为你提供的 阿拉伯语排版支持 以及图标如何成为增强 整体阿拉伯语体验的细节 最后是 介绍 Apple 支持的 阿拉伯语数字系统 我们先从 UI 方向性开始吧 这是 App Store 中的一个示例 这个排布从 Today 标签页中的故事卡开始 即故事页 然后以 App 的产品页结束 考虑布局方向性的最佳方法 是将其转换为线框 在阿拉伯语中 你需要切换 这些屏幕 UI 组件的位置 一些元素从右到左切换 而其他元素会从左到右切换 标题 按钮和导航栏 应更改顺序和位置 段落应始终向右对齐 轮播 和 可扫滑的元素 也应该从右向左排布 在更改 UI 组件的位置 本地化内容并保持图像不变之后 现在你有了一个从右到左的布局 改变布局方向只是你创建 优秀的从右到左行为之旅的开始 你应该记住 App 的整个排布现在是不同的结构 用户会以相反的顺序 考虑这些页面之间的导航 因此在心理上 他们会从右侧的 Today 标签页开始 然后浏览故事卡 最后在左侧的产品页结束 就像他们从右到左 浏览一本阿拉伯语书一样 正如我之前提到的 如果你使用我们的本地框架 这一切都会自动发生 现在我想与你分享一些其他示例 来说明更改 UI 方向性 可能会影响的区域和组件 我们来看看 天气 App 中的这个例子 你可以看到左边的是英文版面 而右边的是阿拉伯语版面

首先你会注意到的是 图片 视频 和背景等内容保持不变 在本例中 无论位置或语言如何 太阳总是从东方升起 你会希望避免翻转内容 以免影响整体体验

这里的第二个组件是 全天天气的变化 该组件的交互设计和动画都会反转 以匹配 UI 方向 我想在 天气 App 中 与大家分享的第三个组件是温标 阿拉伯语境中最低温度在右边 而最高温度在左边 因此作为刻度梯度和指示器 我们把它倒过来以匹配这种行为 就像之前说的 翻页的思维模式也是相反的 主页面在最右边 你可以导航到左边的辅助页面 因此分页点也应该从右向左流动 我们这里的第二个示例 来自 日历 App 其中日期 月份和年份的进度和推移 在阿拉伯语中使用时是从右到左的 这与阿拉伯世界 物理日历的进度相匹配 确保你的应用程序 与文化相关总是很重要的 在这个 日历 App 的示例中 你可能已经注意到 某些日期下面有红线 这些数字实际上是用来表示 伊斯兰每个农历月份的开始 我们为阿拉伯和伊斯兰世界的人们 提供了这些信息 关于方向性的最后一个示例 来自设置中的电池状态 其中切换键 分段控制器 设计和交互 都在阿拉伯布局中发生了镜像改变 此外 UI 方向性可能影响的 另一个地方是图表 尤其是包含时间成分的图表 如天 周 月或年 在英语 UI 的电池使用图表中 一周的天数从左到右排列 而在阿拉伯语中 更倾向于让天数从右到左排布 以匹配我们在前面示例中 提到的日历使用习惯 也就是说 较早时间在右边 较晚时间在左边 而其他图表通常取决于国家 所以在决定使用哪个方向的图表之前 你需要仔细检查 这就是 UI 方向性 现在我们来谈谈排版 但在我们深入讨论字体 和设计 App 时 需要考虑的字体调整之前 让我先简单介绍一下 阿拉伯语脚本及其主要特点 在阿拉伯语中 这四个字母 拼出了“阿拉伯语”这个词 但在写作中 它们实际上没有任何意义 直到它们被连接起来

为了更好地理解这一点 我和你分享一下 我将如何使用 iOS 键盘在完整的 阿拉伯语句子中书写这个单词

正如你所看到的 连接并不意味着 一个给定单词中的所有字母 都会被连接起来 所以这个词由两部分组成 每个部分有两个字符 这是阿拉伯语脚本的主要特点之一 即它的关联性 这也意味着每个字母 和每对字母可能对应很多字形 我们以本例中的 第一个字母 Ain 为例 它的形式会根据 它在单词中的位置而变化 无论是孤立的 在单词的开头 中间 还是结尾 值得注意的是 这通常会使阿拉伯语字体库 比拉丁语字体库大得多

阿拉伯语脚本的另一个特点是 在大多数情况下 它的单词比拉丁语更简洁 因为它具有相互联系的性质 往往给单词和短语带来更简洁的感觉 但是它也稍微高了一点 尤其是使用了点 发声和变音标记 发声标记用于强调某些字母 或区分发音不同 但在书写中完全相同的单词 如果你的 App 会大量使用发声标记 请确保 UI 中有更多的垂直间距 以避免剪切 现在我们了解了 阿拉伯语和拉丁语之间的主要区别 我们来谈谈当你使用我们的系统 API 时 Apple 将为你提供的字体 Apple 提供了一种独特的 阿拉伯语字体 该字体经过精心设计 并考虑到了易读性和功能性 它的设计也与 Latin SF 系列风格保持一致 使其在双语环境中让人感到自然 与拉丁语类似 SF Arabic 也为你提供了 App 中可能需要的各种粗细的字体 从 Ultralight 到 Black 在我们的本地应用程序中 你可以在许多地方 看到不同粗细字体的使用情况 时钟 app 就是一个很好的例子 标题使用 Bold 不同城市使用 Regular 时钟数字使用 Light 你可以探索 我们生态系统中更多的 App 以了解如何使用不同粗细的字体

就像 健康 app 一样 在标题和正文中使用 Bold Medium 和 Regular 还有 天气 app 在数字 和正文中使用了多种粗细的字体 SF Arabic 也考虑到了可扩展性 这意味着它的形状 会随着字号的大小而略有变化 这就是我们所说的视觉大小 你可以在此处看到 最大字号尺寸和最小字号尺寸之间的 结构差异 Large 通常用于标题和主题 它的设计与 SF 系列 其他作品的当代怪诞感相匹配 另一方面 在段落和正文中 使用较小的字号 是为了优先考虑易读性和功能性 而不是风格 这是通过增加末端的角度 宽度和整体字体结构的对比来实现的 值得注意的是 系统会处理好这一点 它会根据字号的大小 自动选择正确的形状 下面是 App Store 编辑表中的一个示例 我们在标题中使用 Display 在段落中使用文本 在这两种语言中 你都可以看到阿拉伯语和英语字体 在这种双语环境中是如何无缝工作的

SF Arabic 可伸缩字体 在我们的生态系统中的使用很广泛 但你也可以在 你的 App 或游戏中使用它 今年 我们将 SF Arabic 圆角字体 引入 SF 系列 包括从 Ultralight 到 Black 的 各种程度的粗细

这是 Reminders app 中的 一个示例 我们在标题和正文中使用 SF Arabic 圆角字体 正如你所看到的 圆角字体可以让你的 App 看起来更实用 更活跃或更柔和 具体取决于背景

圆角字体的使用 多种粗细 以及 SF Arabic 的可扩展性都可以 在我们所有的本地 App 中看到 我们迫不及待地想让你 使用它们为阿拉伯用户创造最佳体验 如果你想详细了解 今年发布的包括 SF Arabic 圆角字体在内的所有新字体 请务必观看今年的课程 “认识扩展的旧金山字体系列” 现在让我们讨论一下 使用阿拉伯语字体时的 字体样式注意事项 阿拉伯语是不区分大小写的脚本 数字阿拉伯字体通常被设计成 与小写拉丁文相匹配 但当使用大写字母时 它会让拉丁语更有分量 而且与拉丁语相比 它会让阿拉伯语感觉更小 为了弥补 UI 中视觉大小的差异 你可以将阿拉伯字体的大小增加 10% 这种细微的差异也有助于提高易读性 尤其是在较小的字号中 使用大写字母时 另一个需要考虑的是字母间距 由于阿拉伯文是相互连接的 一些阿拉伯语字体 没有完全优化以正确处理间距 这可能会导致显示错误的链接 字母断开 或显示不必要的空格 如果你使用的阿拉伯字体 对字母间距没有完全优化 请务必使用 0 跟踪 或者简单地使用我们的系统字体 来添加正确的字母链接 这种联系在阿拉伯语中 被称为 Kashida 系统添加不同长度的 Kashida 以便在阿拉伯语中有更多 构成整体所必需的自然间距 最后要注意的是透明度 有时你可以看到字母之间 有明显的连接 如果字体或系统 没有完全优化为阿拉伯语 就会出现这种情况 庆幸的是 如果你使用我们的系统字体 就不必担心这一点了 不透明度应用于整个单词或短语 可以克服任何潜在的失真情况 在排版部分 我讨论了 阿拉伯语脚本的主要特点 我们在生态系统中 使用的阿拉伯语脚本 以及对某些阿拉伯字体 处理的一些考虑 现在我们来谈谈图标 图标是很容易忽略的 UI 元素之一 但它们通常是用户流的入口点 或特定操作的触发点 这就使拥有正确的图标 对于获得无缝体验显得至关重要 对于阿拉伯语 我们致力于 为客户选择最相关的符号 我们以 App Store 选项卡栏图标为例 一些符号已被调整 而其他符号 在阿拉伯语 UI 中保持不变 为了理解我们为什么做出这样的选择 我们来看看其中的一些示例

例如 Today 标签页符号表示文本方向 对于阿拉伯语用户来说 将行向右对齐 以匹配该语言的自然阅读方向更合适 而放大镜的方向意味着 右手使用的角度 世界上大多数用户都会有这种行为 不管他们在哪里 所以我们决定保持 它在阿拉伯语 UI 中的状态

这里还有其他 App 的一些例子 展示了方向性如何影响 阿拉伯语 UI 中处理符号的方式 比如从右向左书写 同时保持笔的角度 或者改变说话人的方向 使其在 UI 中感觉更自然 同时保持斜线方向 这在整个 Apple 生态系统中是一致的 或者改变表示月份进度的 日历点的方向 同时保持时钟指针 与系统中的物理时钟表示相匹配 除了方向性之外 拥有更多与当地相关的符号 是我们随着时间的推移 而不断加强的另一个层面 以确保我们在国际市场上的卓越表现 这里有几个来自 SF 符号库的 阿拉伯语特定符号的例子 包括一个专门绘制的阿拉伯语签名符号 和其他文本格式符号 所有这些 与 300 多个阿拉伯语符号 以及从右到左的符号都可以 在 SF Symbols app 中找到 在这个 App 中 你可以轻松地选择一个符号 并检查信息面板中的本地化部分 以查看阿拉伯语本地变体 和其他非拉丁语脚本 如果你使用我们的系统 API 所有从右到左和本地符号 应该会自动出现在你的 App 中 正如我们所见 使用正确的符号 可以改变整个 App 体验 因为它变得与用户更加相关 特别是对于 使用非拉丁语脚本的国家和地区 我们更加需要注意 因为有时我们会忘记 不同的语言和文化的细微差别 我真的希望看到你在为阿拉伯客户 创建最相关的图标方面做出的贡献 现在我们来谈谈阿拉伯数字 这种我们都很熟悉 并在世界上大多数国家使用的数字 被称为阿拉伯数字 这是因为它们是在 阿拉伯世界发明的 它们在那时取代了罗马数字

你可以注意到 直到今天 所有的数学计算都是从右到左进行的 与阿拉伯语的阅读行为相匹配 比如这个例子 求和过程从个位开始 然后是十位 然后是百位 在当今世界 这种数字形式被称为西方阿拉伯数字 这是为了与另一种阿拉伯数字形式 即东方数字形成对比 这两种形式都是在阿拉伯世界发明的 目前用于不同的阿拉伯国家 西方阿拉伯数字在西非阿拉伯国家 如摩洛哥 阿尔及利亚和突尼斯使用 而东方数字则在一些 地中海和海湾国家使用 像埃及或沙特阿拉伯这样的国家 使用两种版本

根据用户的国家 这两个系统之间的选择会自动进行 也可以由用户的选择触发 你可以在我们的生态系统里 所有使用数字的 App 中 看到这一选择的反映 包括 计算器 app 和 日历 app 以及在两种数字形式下 设计的精美字体表盘 还有许多其他的表盘 你可以在我们的表盘图库中查看 如果你正在开发的 App 包含数字 要确保两种形式都计算在内 或者检查你的目标国家 以验证哪种形式更合适 最后 如果你想获得更多 关于从右向左语言的设计指导 请参考我们在 Human Interface Guidelines 中的 从右向左指南 今天我谈到了阿拉伯语设计 包括语言对 UI 方向性的影响 在排版部分 我介绍了阿拉伯语脚本 字体 和一些阿拉伯语 UI 类型注意事项 我还谈到了图标 以及它如何改变你的 App 体验 两种形式的阿拉伯数字 以及从右到左的指导原则

如果你想从发展的角度更深入地了解 如何正确处理所有这些问题 你还可以查看今年的课程 “正确处理（向左）” 我希望所有这些都能为你提供指导 并为你指出正确的工具 让你开始设计或优化 App 以便在阿拉伯世界使用 我迫不及待地想要使用你们将要 开发的所有了不起的阿拉伯语 App