针对阿拉伯语进行设计 · صمّم بالعربي

大家好 我是 Apple 设计部门的 Mohamed Samir 今天我们来谈谈数字产品设计 以及阿拉伯语的用户界面 包括电子设备的界面 如手机 电脑 手表以及其他产品 本次讲座为阿拉伯语 它也有更详细的英文版本 关于我们所知道的 理解语言的原则及其方向 在我们开始之前 我想说明一下 为什么用阿拉伯语设计很重要 有超过 6.6 亿人 使用阿拉伯字母书写 当然 这个数字还包括 阿拉伯语以外的其他语言 就像法语 德语 和意大利语都是用英语字母来写的 阿拉伯字母也被用来书写其他语言 如波斯语 乌尔都语和普什图语 以及亚洲和非洲国家的一些语言 但使用阿拉伯语设计的主要原因 不仅在于用户数量 而且还在于使用符合阿拉伯语特征和 组成部分的设计模板 来支持阿拉伯语内容 大多数数码产品都是在 不讲阿拉伯语的国家生产的 这使得从右到左书写的语言内容 有时不符合用户使用习惯 不像英文是从左到右书写的 为了理解这一点 我们来看看下方示例

从右到左的写作和阅读的理念 不仅仅体现在字母和单词 还延伸到包含语言的模板 这会影响我们的视线如何移动 和阅读内容页面 甚至影响到阅读图片和图画 不仅是文字 这也适用于用户界面 以及它包含的所有部分 元素的方向 模板 符号 使用的图标

控制按钮

菜单和图形的方向

表格和其他设计元素 它们都符合 语言是从右到左书写的理念 在 Apple 我们考虑了 所有这些部分 以节省开发者的时间 让他们专注于内容和一些 可能是特定于所用 App 的元素 今天就跟大家详细聊聊四个话题 在用阿拉伯文设计数字产品时 最好能注意到这些点 从阿拉伯语言对设计的影响开始 然后我们将讨论阿拉伯语字体 以及在数字界面中 使用的良好字体的特性

然后我们将讨论阿拉伯符号和图标 最后我们将讨论阿拉伯数字 和它们对界面的影响

让我们从用户界面开始

此示例来自 App Store

为了了解这个设计 如何翻译成阿拉伯语 让我们看一张简化图 显示设计中使用的基本元素 正如我们在开始时解释的那样 语言的书写方向会影响 设计中所有元素的阅读方向 包括标题 按钮和页面上图标 的排列方式

包括文本和段落的方向 以及最后影响的是 任何水平模板的顺序和方向

因此我们以适合阿拉伯语翻译内容的 方式安排设计元素 第二个示例来自天气 App 在这里 我们想强调的是 改变方向和设计元素的地方 这并不意味着 我们颠覆了设计的所有部分 尤其是照片 视频和视觉内容

在这里 例如 天气 App 中的动画背景图像 模拟太阳从东边升起和从西边落下 设计必须将界面元素的方向变化 与使用的图像分开 以免影响最终用户体验 其余项目 如一天中的温度 我们在阿拉伯文界面中 调换了时间的顺序

和温标 它不仅在开始和结束的方向上 有所不同 还有一些细节 如颜色的渐变从黄色到橙色 我们颠倒了它的方向

当然还有书页 指示页面顺序的点 也必须是从右到左 第三个示例是日历 不管数字如何 我们将在另一部分详细讨论 众所周知 日历中阿拉伯数字的顺序是从右到左 从上到下

而且我们总在尝试 使我们 App 的内容和想法 适合阿拉伯和伊斯兰文化文明 这里以日历 App 为例 使用的是伊斯兰教日历 每个月都用红色标记

最后一个示例是关于电池的设置 阿拉伯语图形的方向可以是从左到右 也可以从右到左

但我们更喜欢 如果横轴包含小时或天 或是任何用于表示时间的东西 则应从右到左 以匹配我们在前面示例中 谈到的日历方向

通常 每个国家 / 地区的 图表方向都不同 所以我们更愿意看一下 App 所在国家常用什么 并据此进行开发 这是关于语言方向 对用户界面影响的简化想法 我们再来谈谈阿拉伯语字体

众所周知 阿拉伯文字是一种草书 这是世界上大多数语言 如英语和其他语言 都没有的特征 这一特征 也是阿拉伯文字体丰富性的原因 每个字母图形 会根据单词的位置而变化

‎例如字母 “ع”

它在阿拉伯字体的设计中 有四种形式 取决于单词中每个字母的位置

是否是孤立的 在句子的开头 中间 或结尾

如果我们再加上非阿拉伯语国家 使用的所有形式的阿拉伯字母

这一切会使得阿拉伯电子字体的设计 耗时更长 并影响单字体库的大小 以及其中的字母和形状的数量

阿拉伯字体的另一个特点 除非通过比较 否则可能不清楚 就是单词和句子 往往比英文单词小 这是因为字母的曲线使图形更紧凑 如果我们考虑到 阿拉伯语在修辞上的特点 并用尽可能少的词来表达意思 制作阿拉伯语内容通常 比英语内容在界面上占用更小的空间 但这并没有考虑到字母的高度

尤其是添加了点 哈姆扎和变音符号 所有这些都使得阿拉伯字体 看起来比英文字体高 阿拉伯字体占用的空间 无论是水平还是垂直 可能会影响间距和模板放置 如果需要翻译任何英文 App 最好考虑 增加行与行之间的纵向间距 因为模板过小会造成 字尖之间的切割或干扰 在我们了解阿拉伯文的特点是草书 且它占用的空间 可能与其他语言不同后 我们来谈谈最近设计的 Apple 阿拉伯字体 该字体经过精心设计 独一无二 易于阅读和使用 SF 阿拉伯语字体的细节设计 与苹果的英语字体相匹配 这样两种语言就会协调的一起出现 字体由9种不同粗细的权重组成 我们可以在数字设备上的 所有 App 中看到权重的使用 例如 时钟 App

我们在标题中使用粗体字

在不同城市使用正常粗细 在小时数字中使用最细的字体 我们还可以看到许多其他 App 以不同的方式使用权重

如使用粗体 中号和普通字体的 Sehaty App

以及使用不同权重的天气 App

SF 阿拉伯字体经过精心设计 以适应不同屏幕尺寸 这意味着字体的字母形状 会随着字体大小的变化而自动改变 如果我们看一下标题中使用的字体 和小文本中的字体之间的区别 我们会发现 标题字体是一种风格化的字体 其边缘的轮廓更接近于方形 这是为了在标题中加以区分 并与英文字体保持一致

但是 当同样的字体变小时 其字母的画法也会发生变化 这样 就更容易阅读文本和段落了 这是通过在两侧增加角度

在字母之间增加间隔 以及 在总体上改变字体的粗细来实现的 以便更接近 我们眼中熟悉的阿拉伯书法笔画

正如我们所说 所有这些都是 在我们的电子设备中自动发生 这是 App Store 中 的一个页面示例

最方正的字体被用于标题 而角度更大的字体被用于文本

在这两者中 您可以看到阿拉伯语 和英语的字体是如何相互协调的 我希望这能让大家对设计数字字体时 需要考虑的因素有一个大致的了解 这些标准总是根据字体的用途 而有所不同 界面中使用的电子字体标准 与我们在印刷品中使用的不同 例如图形或墙壁 或任何其他设计模板 而今年 我们推出了一种新字体 那就是带有圆形边缘的字体 或者 为了简洁 我们称它为圆角字体 字体设计有不同的权重 这样我们在 Apple 设备上 使用阿拉伯字体时 就有了更多的多样性

这是提醒 App 中 使用圆形字体的示例 带有钝边的字体比普通字体 给人更流畅 更生动的印象

圆形字体和不同的权重 以及各种字母的绘制与各种字体大小 您都可以在 Apple 设备的 各种 App 上看到这些示例 如果您想了解更多 关于今年发布的字体 可以观看第二个讲座 “认识扩展的 San Francisco 字体系列” 目前只有英文版本

我们希望开始看到 各地的阿拉伯字体设计者 推出许多符合时代需求的阿拉伯字体 现在我们来谈谈在电子产品中 使用阿拉伯文书写的一些注意事项 首先 字母间距 阿拉伯字体是一种灵活的字体 它很容易在水平或垂直方向上延伸 但是一些阿拉伯字体的设计 不符合字母之间 间隔增大的概念 由于大多数数字阿拉伯文字体 所使用的程序 最初是为适应拉丁字母而开发的

这可能会使一些连接 出现在不正确的地方 或断开字母之间的连接

或空格出现在不适合的地方

如果您使用的阿拉伯字体 没有考虑距离的概念 最好确保字母之间的空格始终为零 最好是用于 开发阿拉伯文字体的字体和软件 考虑到距离 这已经 是阿拉伯文字体的一个审美部分 这就是我们正在尝试开发的字体

我们目前使用的字体中添加的空间 在字体界被称为“kashida”

这个空间是灵活的 因此它看起来 很自然 不会在单词中重复

第二件事 类似于字母之间的空格 以透明形式显示 有时会显示字母之间的连接 影响字体的美观 有时在小型设备上阅读 这也来自我们解决过的问题 这样透明度就会出现在整个单词 或句子上 而不会出现连接 我们需要考虑的最后一件事情 是大写和小写 特别是当我们翻译一款 英文原版 App 时 这对于有两种书写方式的 英文字体来说是一个优势 它有时用于区分同一界面中的短语 当使用大写字母时 它使英文字体 看起来比它的基本字母大 在阿拉伯语中 最好将字体大小 增加约 10% 以弥补尺寸上的差异

特别是当字体很小的时候

比如 App Store 中 的这个例子

我们简要地介绍了 阿拉伯文书写的特点 深入研究了 Apple 的 数字产品字体 以及关于电子设备界面上 出现的阿拉伯字体的考虑

现在我们来谈谈符号 由于符号和图标很小 它们是大多数应用和游戏中 很容易被忽视的东西 因为图标经常被用作 App 中 新的体验或旅程的入口 关注它可以提高 App 的 质量和效率

如果我们看看 App Store 中使用的图标 并比较了英文和阿拉伯文的设计

我们会发现使用的第一个图标 表示书写方向 在阿拉伯语设计中 字体的方向被改变以适应语言的方向 相反 放大镜的倾斜角度 是受大多数人使用右手的启发 这与语言的方向无关 以下是来自其他 App 中的一些示例

就像这个符号 它表示书写的方向 同时握笔的倾斜角度 也适合右手使用

或者改变扬声器的方向 以适应接口的动态参数 同时保持系统图标中 固定直线的倾斜角度 最后 日历图标 它表示日期方向 我们在第一部分 从右到左解释过这一点 在保持恒定的顺时针方向的同时 无论使用何种语言

这 5 个例子与界面设计中 语言方向的符号化有关 但对于图标 特别是那些用于 数据和文本输入的图标 还有更深的层次

这些都是我们决定 改变 Apple 设备 以适应阿拉伯语使用的一些例子 ‎无论是使用字母“ض”和“ع” 而不是拉丁字母 还是以符合阿拉伯字母方向 和形状的方式绘制签名

今天 有超过 300 个符号 专用于阿拉伯语 无论是通过简单的调整方向 或绘制包含阿拉伯字母的新符号 都可以在 SF Symbols App 上找到 您可以在其中看到阿拉伯语 和其他语言的替代版本 这是第一次在电子界面中 用非拉丁字母绘制符号 在符号和图标中 我们看到了对小细节的重视程度 可以提高 App 的使用质量 这是因为它符合用户的语言和想法 现在我们来谈谈阿拉伯数字

当今世界上常见的数字 我们大多数人认为是来自英语

实际上它是源于阿拉伯 数字是在伊斯兰世界发明的 并在很久之前取代了拉丁数字 迄今为止 西方国家的大多数计算 比如加法和减法 都是从右到左进行的 正如阿拉伯语的方向一样

比如这个例子 把这些个位相加 然后是十位 然后是百位

今天的阿拉伯数字 以其东方和西方的形式 在阿拉伯世界的不同国家使用 无论是在马格里布国家使用 目前世界上普遍的阿拉伯数字的形式 或使用东方数字公式的 黎凡特和海湾国家的一些国家 像埃及和沙特阿拉伯这样的国家 根据地区和个人偏好 使用任何一种类型

在设置中 数字的选择是根据国家自动完成的 还有一个选项可以 更改阿拉伯语用户可用的数字 此选项的效果出现在 所有使用数字的 App 中 如 计算器 App 日历 App

或者一些表盘上的数字 同时设计了两种格式 还有很多您可以在表盘上看到的 其他的界面 如果您正在开发的 App 使用数字 最好设计为同时使用这两种类型 或者确保适用于 App 使用的国家或地区的类型

如果您想了解 有关界面设计的更多详细信息 其中包含从右到左的语言 如阿拉伯语 您可以查看界面设计指南 目前只有英文版

今天 我们讨论了阿拉伯语的数字设计

以及它对内容和界面方向的影响 在字体方面 我们谈到了阿拉伯文字的一些特点

和 Apple 中的阿拉伯字体 数字产品中字体的一些注意事项

我们讨论了符号和图标是 如何提高产品或 App 的质量的

关于各种阿拉伯数字及其用途

最后 设计指南相关内容 本次讲座是 Apple 开发者大会的第一个非英语讲座 这源于 我们对丰富阿拉伯语设计的兴趣 而且我希望这将成为我们阿拉伯世界 改进和发展 App 的种子 希望很快我就能用上 各位开发者正研究的产品和 App 谢谢