apple 是怎么为阿拉伯用户做设计的

产品在出海后,需要针对性地对不同国家进行本土化设计,以切合本土用户的使用习惯。本文以Apple为例,分析它是如何针对阿拉伯用户做本土化设计的,希望对你有帮助。

Apple 是怎么为阿拉伯用户做设计的?

全世界大概有 6.6 亿人使用阿拉伯语,阿拉伯语是世界第三大书面语言,仅次于拉丁文和中文。来自超过 22 个国家或地区的人们,可能会使用到你设计的产品。你不仅要考虑文本的翻译问题,还有其他许多问题。

接下来,我会分享在为阿拉伯用户做设计时,需要注意的几个方面。

一、UI 的方向性

下图是 App Store 里的界面,从左到右依次是 Today 标签中的故事卡片,然后是卡片详情页,最后是 App 的产品页。

考虑 UI 布局方向性的最佳方法,是转换为线框图。在阿语设计中,需要将这些 UI 组件的位置调换。

Apple 是怎么为阿拉伯用户做设计的?

标题、按钮和导航栏应更改顺序和位置;文本段落始终右对齐;轮播图和可滑动的元素也应该从右向左排布。最终得到了以下这张图的布局。

Apple 是怎么为阿拉伯用户做设计的?

不过,改变布局方向只是开始,阿拉伯用户会以相反的顺序考虑这些页面之间的切换。因为在他们认知习惯中,他们会从右侧的 Today 标签页开始使用 App,就像他们从右到左浏览一本阿拉伯语书籍一样。

Apple 是怎么为阿拉伯用户做设计的?

接下来举天气 App 的例子,下图左边是英文版天气,右边是阿语版天气。

Apple 是怎么为阿拉伯用户做设计的?

我们会发现背景图片都是放在同样的位置,没有做镜像处理,原因是不管在哪个国家,太阳都是从东方升起,符合自然规律,也符合用户认知。

Apple 是怎么为阿拉伯用户做设计的?

第二个是全天天气变化的组件,这个组件的元素布局和滑动动画都会反转。

Apple 是怎么为阿拉伯用户做设计的?

第三个是温度指示范围。在阿语中,最低温在右边,最高温在左边。

Apple 是怎么为阿拉伯用户做设计的?

第四个是翻页指示器。之前提到过,阿语用户的翻页思维模式也是反过来的,主页面在最右边,需要向左滑才能看到其他页面。因此,分页符号也应该从右向左滑动。

Apple 是怎么为阿拉伯用户做设计的?

二、字体排版

在讨论字体排版之前,先简单介绍阿语的主要特点。在阿拉伯语中,下图四个字母拼出了 “阿拉伯语” 这个词。但在写作中,组成这个词的单个字母实际上没有任何意义。

Apple 是怎么为阿拉伯用户做设计的?

举个例子,下图这个词由两部分组成,每个部分有两个字符。这是阿拉伯语字体的主要特点之一,即它的关联性,这也意味着每个字母可能对应很多字形。

Apple 是怎么为阿拉伯用户做设计的?

以本例中第一个字母 “Ain” 为例,它的字形会随着它在单词中的位置而变化,无论是在开头、中间,还是结尾,字形都各不相同。这也会导致阿拉伯语字体库比拉丁语字体库大得多。

Apple 是怎么为阿拉伯用户做设计的?

阿语字体的另一个特点是,在大多数情况下,它的单词比拉丁语更简洁。因为它的字母之间具有相互联系的特点,会给单词或短语带来更简洁的感觉。

Apple 是怎么为阿拉伯用户做设计的?

另外,阿语字体的行高也比拉丁字母高,特别是当其使用了点、发声标记和变音标记。发声标记用于强调某些字母或区分发音。如果你的 App 中阿语使用了大量的发声标记,需要确保 UI 布局有足够的垂直间距,避免文字被切割。

Apple 是怎么为阿拉伯用户做设计的?

Apple 提供了一种特殊的阿语字体 SF Arabic,这个字体经过精心的设计,考虑到了文字易读性和功能性。

Apple 是怎么为阿拉伯用户做设计的?

这个字体的设计也与 Latin SF 系列风格保持一致,这样在双语混排的情况下,也能做到排版自然。

Apple 是怎么为阿拉伯用户做设计的?

SF Arabic 也考虑到了可扩展性。它的字形会随着字号的大小而略有变化。

Apple 是怎么为阿拉伯用户做设计的?

将最大字号和最小字号字母重叠,会发现它们结构之间存在差异。

Apple 是怎么为阿拉伯用户做设计的?

Large 字号常用于标题,text 字号通常用于正文中,因为字号较小,为了保证易读性,字体笔画末端常用斜切收尾。

Apple 是怎么为阿拉伯用户做设计的?

另外,阿语不区分大小写。当拉丁语和阿语混排时,大写的拉丁字母看起来会比阿语字号大很多,为了弥补这种视觉差异,可以将阿字体大小增加 10%。

Apple 是怎么为阿拉伯用户做设计的?

另一个需要考虑的是字母间距。下图是阿语在 0 间距情况下的正常样式,如果使用了10% 的字间距,但没有用正确的方法处理字间距,可能会导致阿语字母断开或显示不必要的空格。

Apple 是怎么为阿拉伯用户做设计的?Apple 是怎么为阿拉伯用户做设计的?

所以,如果你使用的阿语字体没有对字间距做优化,那最好使用默认的字间距或者使用系统自带的 SF Arabic 字体。当给 SF Arabic 字体增加字间距时,会给字母间增加额外的连接,而且这样也符合阿语书写规范。

Apple 是怎么为阿拉伯用户做设计的?

因为字间距增加,额外多出的字母连接在阿语中称为「Kashida」,不同的字间距,会有不同长度的 Kashida。

Apple 是怎么为阿拉伯用户做设计的?

最后要注意的是不透明度。当给字体添加不透明度后,会看到字母链接处有明显的接缝。这是因为这个阿语字体没有优化好。如果使用系统字体,就不会出现这个情况,不透明度会应用于整个单词或短语。

Apple 是怎么为阿拉伯用户做设计的?

三、图标

现在来谈谈图标,图标在 UI 中是很容易被忽略的元素之一。在阿语产品中,图标的设计也有很多特别需要注意的地方。我们以 App Store 底部导航栏的图标为例:

Apple 是怎么为阿拉伯用户做设计的?

上图分别是英语和阿语的界面,除了 “Today” 图标不同,其他图标都保持一致。 “Today” 图标里的两横线,表示文本的对齐方向。对于拉丁语用户来说,文本应该是左对齐;对于阿语用户来说,文本应该是右对齐,匹配文本自然的阅读方向。

Apple 是怎么为阿拉伯用户做设计的?

对于 “搜索” 图标而言,在拉丁语和阿语的语境下,图标方向都是保持一致。因为大多数人都是用右手拿东西,无论是哪个国家的人。

Apple 是怎么为阿拉伯用户做设计的?

下图还有一些其他图标例子,同样说明了在阿语语境下,图标设计的不同之处。

Apple 是怎么为阿拉伯用户做设计的?

除了图标的方向性之外,也要重点考虑图标的设计与本地文化之间的关系。下图这些图标来自 SF Symbols 库,包含了一个专门手绘的阿语签名图标和其他文本格式图标。

Apple 是怎么为阿拉伯用户做设计的?

使用本地化设计的图标,可以改善 App 整体体验,因为图标的样式与用户更加相关。特别是对于使用非拉丁语文字的国家或地区,我们需要更加注意,因为我们有时候会不自觉忘记不同的语言和文化的细微差别。

四、阿拉伯数字

现在我们来谈谈阿拉伯数字,下图中的数字是我们十分熟悉的阿拉伯数字。之所以叫阿拉伯数字,是因为它们是在阿拉伯世界中发明的,并取代了罗马数字。

Apple 是怎么为阿拉伯用户做设计的?

会发现现在的计算器都是从右到左进行运算的,与阿拉伯语文字的阅读顺序相同。在当今世界,这种数字被称为西方阿拉伯数字。

Apple 是怎么为阿拉伯用户做设计的?

这是为了与东方阿拉伯数字作区分。这两种数字都是在阿拉伯世界中发明的,用于不同的阿拉伯国家。西方阿拉伯数字主要在西非阿拉伯国家使用,比如摩洛哥、阿尔及利亚和突尼斯。而东方阿拉伯数字主要在一些地中海和海湾国家使用。但像埃及和沙特阿拉伯这样的国家,会使用这两种版本。如果你正在开发的 App 包含数字,最好包含上述两种版本的阿拉伯数字。

Apple 是怎么为阿拉伯用户做设计的?

五、结尾

本文引自 WWDC22 苹果设计师分享的关于如何针对阿语用户做设计,探讨了关于 UI 的方向、图标、排版、数字等设计注意事项,对于本地化设计和国际化设计很有启发作用。

原文链接:***/videos/play/wwdc2022/10034/

分享者:Mohamed Samir

译者:阿饼讲设计

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 1月 15日 下午3:10
下一篇 2023年 1月 15日 下午3:16

相关推荐