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

相关推荐

  • 看图猜成语500个图片 图案 解答

    ♞♔♛♕♜[撒花]哇!!来啦来啦! 下面有六张图片,大家猜一猜是什么成语,放心哦!答案在最最最最最下面哦!不过先不看哈!!不能偷看哈!要自己想一想答案先[狗头] 在玩的过程中大家都…

    2023年 4月 20日
  • oppo手机信号栏显示hd是什么意思

    手机信号栏是否有变化,是我们每个手机用户都会留意的一件事,那么当我们发现信号栏中出现”HD”标签,是什么情况你呢?这说明偶们估计在使用OPPO手机时打开了某…

    2023年 7月 5日
  • 「免翻墙」抖音国际版,看不完的国外小哥哥小姐姐

    Tony晚上总喜欢刷会儿抖音再睡觉,但是国内的小姐姐已经审美疲劳了,无论是长相还是BGM。 “我们一起学猫叫” “我对着自己开了一枪” “子弹在我胸口上了膛” 到近期“夜里做了美丽…

    2023年 11月 20日
  • 苹果自带扫描仪文稿怎么用(iPhone扫描成pdf电子版怎么弄)

    用iphone手机的快看过来! 你们用iphone手机用了多久了?你们知道iphone手机里有一个神奇的扫描仪功能吗? 今天就给大家讲一讲,iphone手机中有一个神奇的小功能,那…

    2023年 1月 14日
  • 苹果手机怎么隔空投送到电视

    苹果手机的隔空投送功能允许您将内容(如视频、照片、音乐等)从一个苹果设备发送到另一个苹果设备,而无需使用任何电缆或数据线。 要隔空投送视频,请按照以下步骤操作: 1. 确保您的两个…

    2023年 5月 26日
  • 手机转账突然受限

    “我手机银行转账超过1000元就被限制了,这什么情况?”在杭州工作的小陈这两天碰到一件闹心的事,因为手机银行转账被限额,他不得不跑到银行线下网点排队提额,前后花了2个多小时,这“锅…

    数码教程 2023年 9月 27日
  • 我这有几个微信隐藏功能要告诉你吗英文

    大家会不会时常觉得自己在微信上有很多群聊,聊天的人特别多,但自己又是那种只要看到信息就会忍不住想要回的人,没关系,我教你这几个办法,就能解决这个问题。 首先第一招,我们可以将不重要…

    2024年 1月 1日
  • 快手游戏推广平台怎么赚钱,快手如何游戏推广

    文 | 手游那点事 | 冻鱼、子安 快手,或许是国内争议最大的APP之一。但与此同时,基于其庞大的用户基数,它也是潜力最大的游戏推广平台。 从GIF动图到短视频,巨头“快手”的前世…

    2023年 9月 28日
  • miui系统怎么用悬浮球单手操作

    对于习惯在屏幕上进行各种操作的同学而言,MIUI的悬浮球是一个十分实用的功能。你可以不用离开屏幕,就能使用三个功能键的功能。尤其对于使用小米MIX和小米Max系列的用户而言,由于屏…

    数码教程 2023年 5月 7日
  • 新手如何绘画数字油画我来告诉你

    DIY数字油画,又名数字彩绘和编码油画,是通过特殊工艺将画作加工成线条和数字符号,绘制者自己动手在标有号码的填色区内填上相应标有号码的颜料,就可以自由发挥完成的手绘产品。它汇集休闲…

    2023年 4月 8日