Apple是怎么为阿拉伯用户做设计的?
产品在出海后,需要针对性地对不同国家进行本土化设计,以切合本土用户的使用习惯。本文以Apple为例,分析它是如何针对阿拉伯用户做本土化设计的,希望对你有帮助。
全世界大概有 6.6 亿人使用阿拉伯语,阿拉伯语是世界第三大书面语言,仅次于拉丁文和中文。来自超过 22 个国家或地区的人们,可能会使用到你设计的产品。你不仅要考虑文本的翻译问题,还有其他许多问题。
接下来,我会分享在为阿拉伯用户做设计时,需要注意的几个方面。
一、UI 的方向性
下图是 App Store 里的界面,从左到右依次是 Today 标签中的故事卡片,然后是卡片详情页,最后是 App 的产品页。
考虑 UI 布局方向性的最佳方法,是转换为线框图。在阿语设计中,需要将这些 UI 组件的位置调换。
标题、按钮和导航栏应更改顺序和位置;文本段落始终右对齐;轮播图和可滑动的元素也应该从右向左排布。最终得到了以下这张图的布局。
不过,改变布局方向只是开始,阿拉伯用户会以相反的顺序考虑这些页面之间的切换。因为在他们认知习惯中,他们会从右侧的 Today 标签页开始使用 App,就像他们从右到左浏览一本阿拉伯语书籍一样。
接下来举天气 App 的例子,下图左边是英文版天气,右边是阿语版天气。
我们会发现背景图片都是放在同样的位置,没有做镜像处理,原因是不管在哪个国家,太阳都是从东方升起,符合自然规律,也符合用户认知。
第二个是全天天气变化的组件,这个组件的元素布局和滑动动画都会反转。
第三个是温度指示范围。在阿语中,最低温在右边,最高温在左边。
第四个是翻页指示器。之前提到过,阿语用户的翻页思维模式也是反过来的,主页面在最右边,需要向左滑才能看到其他页面。因此,分页符号也应该从右向左滑动。
二、字体排版
在讨论字体排版之前,先简单介绍阿语的主要特点。在阿拉伯语中,下图四个字母拼出了 "阿拉伯语" 这个词。但在写作中,组成这个词的单个字母实际上没有任何意义。
举个例子,下图这个词由两部分组成,每个部分有两个字符。这是阿拉伯语字体的主要特点之一,即它的关联性,这也意味着每个字母可能对应很多字形。
以本例中第一个字母 "Ain" 为例,它的字形会随着它在单词中的位置而变化,无论是在开头、中间,还是结尾,字形都各不相同。这也会导致阿拉伯语字体库比拉丁语字体库大得多。
阿语字体的另一个特点是,在大多数情况下,它的单词比拉丁语更简洁。因为它的字母之间具有相互联系的特点,会给单词或短语带来更简洁的感觉。
另外,阿语字体的行高也比拉丁字母高,特别是当其使用了点、发声标记和变音标记。发声标记用于强调某些字母或区分发音。如果你的 App 中阿语使用了大量的发声标记,需要确保 UI 布局有足够的垂直间距,避免文字被切割。
Apple 提供了一种特殊的阿语字体 SF Arabic,这个字体经过精心的设计,考虑到了文字易读性和功能性。
这个字体的设计也与 Latin SF 系列风格保持一致,这样在双语混排的情况下,也能做到排版自然。
SF Arabic 也考虑到了可扩展性。它的字形会随着字号的大小而略有变化。
将最大字号和最小字号字母重叠,会发现它们结构之间存在差异。
Large 字号常用于标题,text 字号通常用于正文中,因为字号较小,为了保证易读性,字体笔画末端常用斜切收尾。
另外,阿语不区分大小写。当拉丁语和阿语混排时,大写的拉丁字母看起来会比阿语字号大很多,为了弥补这种视觉差异,可以将阿字体大小增加 10%。
另一个需要考虑的是字母间距。下图是阿语在 0 间距情况下的正常样式,如果使用了10% 的字间距,但没有用正确的方法处理字间距,可能会导致阿语字母断开或显示不必要的空格。
所以,如果你使用的阿语字体没有对字间距做优化,那最好使用默认的字间距或者使用系统自带的 SF Arabic 字体。当给 SF Arabic 字体增加字间距时,会给字母间增加额外的连接,而且这样也符合阿语书写规范。
因为字间距增加,额外多出的字母连接在阿语中称为「Kashida」,不同的字间距,会有不同长度的 Kashida。
最后要注意的是不透明度。当给字体添加不透明度后,会看到字母链接处有明显的接缝。这是因为这个阿语字体没有优化好。如果使用系统字体,就不会出现这个情况,不透明度会应用于整个单词或短语。
三、图标
现在来谈谈图标,图标在 UI 中是很容易被忽略的元素之一。在阿语产品中,图标的设计也有很多特别需要注意的地方。我们以 App Store 底部导航栏的图标为例:
上图分别是英语和阿语的界面,除了 "Today" 图标不同,其他图标都保持一致。 "Today" 图标里的两横线,表示文本的对齐方向。对于拉丁语用户来说,文本应该是左对齐;对于阿语用户来说,文本应该是右对齐,匹配文本自然的阅读方向。
对于 "搜索" 图标而言,在拉丁语和阿语的语境下,图标方向都是保持一致。因为大多数人都是用右手拿东西,无论是哪个国家的人。
下图还有一些其他图标例子,同样说明了在阿语语境下,图标设计的不同之处。
除了图标的方向性之外,也要重点考虑图标的设计与本地文化之间的关系。下图这些图标来自 SF Symbols 库,包含了一个专门手绘的阿语签名图标和其他文本格式图标。
使用本地化设计的图标,可以改善 App 整体体验,因为图标的样式与用户更加相关。特别是对于使用非拉丁语文字的国家或地区,我们需要更加注意,因为我们有时候会不自觉忘记不同的语言和文化的细微差别。
四、阿拉伯数字
现在我们来谈谈阿拉伯数字,下图中的数字是我们十分熟悉的阿拉伯数字。之所以叫阿拉伯数字,是因为它们是在阿拉伯世界中发明的,并取代了罗马数字。
会发现现在的计算器都是从右到左进行运算的,与阿拉伯语文字的阅读顺序相同。在当今世界,这种数字被称为西方阿拉伯数字。
这是为了与东方阿拉伯数字作区分。这两种数字都是在阿拉伯世界中发明的,用于不同的阿拉伯国家。西方阿拉伯数字主要在西非阿拉伯国家使用,比如摩洛哥、阿尔及利亚和突尼斯。而东方阿拉伯数字主要在一些地中海和海湾国家使用。但像埃及和沙特阿拉伯这样的国家,会使用这两种版本。如果你正在开发的 App 包含数字,最好包含上述两种版本的阿拉伯数字。
五、结尾
本文引自 WWDC22 苹果设计师分享的关于如何针对阿语用户做设计,探讨了关于 UI 的方向、图标、排版、数字等设计注意事项,对于本地化设计和国际化设计很有启发作用。
原文链接:https://developer.apple.com/videos/play/wwdc2022/10034/
分享者:Mohamed Samir
译者:阿饼讲设计
本文由@阿饼讲设计 翻译发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
今日份毒鸡汤张国荣说过,恋爱一定要从收到一束花还有一段正式的告白开始,该走的流程一样都不能少。恋爱要听正式的告白,大方的公开,而不是稀里糊涂的在一起,然后又莫名其妙的分开。爱情本就是一场勇敢者
春节大鱼大肉,这6款汤开胃解腻,太适合喝了这6款汤,全家喝了都夸!!超好喝的汤!!清爽解腻!!春节大鱼大肉,这6款汤开胃解腻,全家喝了都夸!太适合大鱼大肉之后喝了!1鲜甜营养海带汤做法鲜海带洗净切条,干黄豆浸泡2小时,猪骨
煮汤圆,开水煮还是冷水煮?牢记4点,汤圆不破皮不露馅各位读者朋友们大家好,感谢阅读我分享的美食文章,经验和大家一起共享,今天我要和大家分享的内容是煮汤圆,开水煮还是冷水煮?牢记4点,汤圆不破皮不露馅正月十五是中国传统佳节元宵节,也称
今日晚餐咋样?腌笃鲜超成功我绝对是贤妻良母型的,不爱逛街不爱购物,就喜欢在厨房研究吃的,以至于走亲戚的时候到谁家里都是我掌勺。今晚做了腌笃鲜,超级简单,把火腿和洗干净的咸肉还有排骨放锅里炖四十分钟,再放上竹
山海关外的酒桌江湖,为什么大碗喝酒,酒量一般也不容易醉山海关外的酒桌江湖,为什么大碗喝酒,酒量一般也不容易醉俗话说山海关外不相信喝醉,论人能喝,其实东北人的酒量也是杠杠的。如果你不知道东北人的酒量,欢迎你到东北去挑战。我们喝酒按盅,人
麦当劳将推出人造肉版麦乐鸡麦当劳周三宣布,将于下周推出植物基麦乐鸡McPlantNuggets,德国将是其试水的第一个市场。McPlantNuggets由豌豆玉米和小麦加上天妇罗面糊制成,是麦当劳与人造肉生
捷克为何成为色情行业全球之最?就连政客都纷纷加入成人影业!布拉格是捷克的首都,有着辉煌壮丽的城堡,神圣庄严的大教堂。就是这样一座千年古城,每年都吸引着无数的游客。但令人想不到的是,就是这样一个充满艺术的国度,却是全球色情行业之最,居然政府
香港奇葩地方名字,你们知道多少?今天给大家说说香港一些奇特的地方名字,让小伙伴们认识一下它的历史由来微笑香港地图香港在港英时期,又称香港英治时期,因当时长期受英国统治管理,所以当时给地方命名的时候,很多地方的名称
2023春暖花开我们一起去武汉吧几年的疫情让我们错过了樱花,错过了开学,错过了一场毕业典礼,2023年,一切都已经过去了,让我们一起相约武汉吧!附上武汉最值得去的景点大全,欢迎参考。武汉东湖,是武汉的城中湖,分为
被误解的千户苗寨拦门酒是展现苗人热情好客,而非让人看年轻女孩近日,一则驱车两千公里来到苗寨,跳舞的全是阿姨的视频在网络上传播。拍摄者表示,宣传片中跳舞的都是年轻女孩,现场看到的都是六七十岁的阿姨。九派新闻记者在仪式现场看到,年轻姑娘站在中间
世界自然遗产地梵净山索道年检保安全在世界自然遗产地梵净山,技术人员为景区索道进行年度预防性维护保养。李鹤摄世界自然遗产地梵净山景区的索道。李鹤摄在世界自然遗产地梵净山,技术人员为景区索道进行年度预防性维护保养。李鹤