阿拉伯语排版设计_针对说阿拉伯语的用户的测试和设计

阿拉伯语排版设计

Let me start off with some data to put things into perspective “Why?”

让我从一些数据入手,以透视“为什么?”的观点。

  • Arabic is the 5th most spoken language worldwide, with 420 million speakers, and is an official language in 20 countries.

    阿拉伯语是全球排名第五的语言,有4.2 亿说话者,并且是20个国家/地区的官方语言。

  • 60% of Arabs (and as many as 97% in Saudi Arabia and Egypt) prefer browsing in Arabic. (source: Arab media outlook)

    60%的阿拉伯人( 沙特阿拉伯埃及多达97% )更喜欢使用阿拉伯语浏览。 (来源: 阿拉伯媒体展望 )

  • Only 3% of the content online is in Arabic.

    在线内容中只有3%是阿拉伯语。

As an Arabic speaker myself, I’ve been exposed to bad user experiences very early on in my life. From alignment issues, poorly translated text to the use of unreadable fonts, confusing calendars, and mysterious currency symbols.

我本人是阿拉伯语使用者,从小就接触到不良的用户体验。 从对齐问题,翻译不佳的文本到使用无法读取的字体,混乱的日历和神秘的货币符号。

My first encounter with Right-to-left layout issues was when I was 10 years old at the stationary section in my hometown’s first foreign supermarket chain.

我第一次遇到从右到左的布局问题是在我十岁的时候,在我家乡的第一家外国超市连锁店的固定部分。

Kevin from the movie Home Alone photoshopped to be wearing an islamic white cap (kufi)
FIDA ART)FIDA ART )

In one of my occasional strolls there, where I’d marvel at unpractical but-good-for-show-off pens and notebooks. I found an Arabic notebook that looked different, but for all the wrong reasons.

在我偶尔散步的地方之一,我会惊叹于不切实际但值得炫耀的钢笔和笔记本。 我发现了一个阿拉伯语的笔记本,看上去有些不同,但是出于所有错误的原因。

  • The Name Field space was tiny. “How am I supposed to squeeze in my full name there?” There are at least 4 Sarah’s in my class, and a dozen Mohamed’s.

    名称字段空间很小。 “我应该怎么挤我的全名?” 我班上至少有4位莎拉(Sarah)和12位穆罕默德(Mohamed)。

  • The Notebook Labels Box was printed at the back (left cover) of the notebook. “How inconvenient” I thought to myself. The teacher would have to turn the notebook to see the student info and then turn it again to start reviewing the student’s homework.

    笔记本标签盒印在笔记本的背面(左盖)。 我心想:“多么不方便”。 老师将不得不打开笔记本以查看学生信息,然后再次打开笔记本以开始查看学生的作业。

  • The Page Layout was also quite not right. The date and subject fields were flipped. Normally, we’d start off by writing the subject of the lesson (placed at the top-right corner of the page), and then move on to date fields (placed at the top-left corner of the page).

    页面布局也不完全正确。 日期和主题字段被翻转。 通常,我们首先编写课程主题(放置在页面的右上角),然后移至日期字段(放置在页面的左上角)。

“Maybe I could get it for my english class”, I said to myself and went to look for my mom whom I escaped at the home section.

“对我的英语课来说,也许我可以得到它。”我对自己说,去找我在家庭区逃脱的妈妈。

为阿拉伯用户设计和测试 (Designing and testing for Arabic users)

1)从右到左布局(RTL) (1) Right-to-left layout (RTL))

Arabic, Hebrew, Persian, and Urdu are the most widespread RTL writing systems in modern times. Unlike the rest of the world’s population, our brains are wired to read, write and scan things from right to left, let air in from right nostril, and out from the left. (just kidding)

阿拉伯语,希伯来语,波斯语和乌尔都语是现代最广泛的RTL书写系统。 与世界其他地区的人不同,我们的大脑从右到左被连接起来阅读,书写和扫描事物,从右鼻Kong进入空气,从左进入空气。 (开玩笑)

Screenshot of iphone showing differences in both RTL, and LTR

调节开关 (Flip the switch)

When a UI is changed from LTR to RTL (or vice-versa), it’s often called mirroring. An RTL layout is the mirror image of an LTR layout.

当UI从LTR更改为RTL(反之亦然)时,通常称为镜像。 RTL布局是LTR布局的镜像。

As explained in Material Design’ guidelines for Bidirectionality, mirroring is considered the 101 rule for bidirectional UX, and it effects everything from layout, text to graphics and icons.

如Material Design的“双向性”指南中所述 ,镜像被视为双向UX的101规则,它影响从布局,文本到图形和图标的所有内容。

Mirroring icons

镜像图标

Back and forward navigation buttons are reversed

前进和后退导航按钮反转

LTR back button
LTR back button
LTR后退按钮
RTL back button mirrored
RTL back button mirrored
RTL后退按钮已镜像
RTL volume with speaker icon and slider mirrored
RTL volume with speaker icon and slider mirrored
带有扬声器图标和镜像的RTL音量

触控手势 (Touch gestures)

Touch gestures
Slide gestures mirrored
滑动手势已镜像

镜像等级和页面选择器 (Mirroring rating and page selectors)

Image for post
UX Best Practices for Bi-Directional Languages by Gilad)Gilad的UX双向语言最佳实践 )

不要对数字使用镜像 (Don’t use mirroring for numbers)

Image for post
Phone number is not mirrored and is the same
电话号码未镜像且相同

Unlike text, numbers are read and written from left-to-right even within phrases. This also applies for phone numbers.

与文本不同,数字甚至在词组内也从左至右读写。 这也适用于电话号码。

常见的镜像错误: (Common mirroring mistake:)

Cursors that make you want to curse. Cursors in most input fields fail to follow the direction of the inputted text.

使您想诅咒的游标。 大多数输入字段中的光标无法遵循输入文本的方向。

Image for post
How cursor should work for text (RTL) and numbers (LTR). ✅
光标应如何工作以显示文本(RTL)和数字(LTR)。 ✅
Image for post
How cursors shouldn’t work for numbers and emojis with Arabic text ❌
Arabic不应使用阿拉伯文本的数字和表情符号显示光标❌

2)数字🔢 (2) Numbers 🔢)

There are two ways of writing numbers in Arabic:

阿拉伯数字有两种写法:

  • Hindi: ٩ ٨ ٧ ٦ ٥ ٤ ٣ ٢ ١ ٠

    印地语:٧ ١ ٠ ١
  • Arabic: 0 1 2 3 4 5 6 7 8 9

    阿拉伯语:0 1 2 3 4 5 6 7 8 9

According to Wikipedia:

根据维基百科 :

the reason the digits are more commonly known as “Arabic numerals” in Europe and the Americas is that they were introduced to Europe in the 10th century by Arabic-speakers of North Africa, who were then using the digits from Libya to Morocco.

数字在欧洲和美洲被更普遍称为“阿拉伯数字”的原因是,它们是由北非的阿拉伯语国家于10世纪引入欧洲的,后来他们使用从利比亚到摩洛哥的数字。

常见数字错误: (Common numbers mistakes:)

  • Inconsistency: Displaying a mix of both types.

    不一致:同时显示两种类型。

Text with numbers inconsitency highlighted
RTL Styling 101 by Ahmed)Ahmed的RTL Styling 101 )
  • Not supporting both types on input: Numbers associated with Arabic keyboards are the “hindi numbers” and switching to “Arabic numbers” requires users to switch to the English Keyboard (accessed with a minimum of 3 clicks)

    不支持两种类型的输入:与阿拉伯语键盘关联的数字是“印地语数字”,切换到“阿拉伯语数字”要求用户切换到英语键盘(至少需要单击3次才能访问)

3)货币显示 (3) Currency display)

There are 3 ways to display currencies online and offline:

有3种在线和离线显示货币的方式:

  • Currency name: Saudi Riyal, for example, is displayed as “ريال” which refers to “Riyal

    货币名称:例如,沙特里亚尔显示为“ ريال ”,表示“ 里亚尔

  • Currency Symbol: Saudi Riyal is abbreviated to “ر.س”, the first letter is the currency’s first letter (ر = ريال) while the 2nd one is the country’s first letter (س = سعودي)

    货币符号 :沙特里亚尔缩写为“ ر.س ”,第一个字母是货币的第一个字母(ر=ريال),而第二个字母是国家的第一个字母(س=سعودي)

  • Currency ISO code: where Saudi Riyal is displayed as “SAR

    货币ISO代码:沙特里亚尔显示为“ SAR

A list of currencies and its symbols in Arabic can be found here

可以在这里找到阿拉伯语的货币列表及其符号

Pictures of price tags in stores
Price tags for different brick-and-mortar stores in the UAE
阿联酋不同实体商店的价格标签

常见货币错误 (Common currency mistake:)

Targeting/operating in multiple Arab markets, and using currency name only. Different Arab countries share the same currency name. For example, Riyal is the currency for Saudi, Oman, Qatar, and Yemen while Dinar is the currency for 7 Arab countries. For this case, using currency Symbol is a better option as it tells the user the currency and country.

在多个阿拉伯市场定位/运营,并且仅使用货币名称。 不同的阿拉伯国家使用相同的货币名称。 例如, 里亚尔是沙特,阿曼,卡塔尔和也门的货币,而第纳尔7个阿拉伯国家的货币。 对于这种情况,使用货币符号是更好的选择,因为它会告诉用户货币和国家。

4)日历 (4) Calendars)

Gregorian Calendar — Latin month names: Used in the majority of Arab countries. Where May ,for example is, referred to as “Mayo” “مايو” and “September” as “Sebtember” “سبتمبر” which may or may not have to do with the inexistence of the letter P in Arabic

阳历-拉丁月份名称:在大多数阿拉伯国家中使用。 例如,将May称为“ Mayo”,“مايو”和“ September”称为“ Sebtember”,“سبتمبر”,这可能与阿拉伯语中字母P的不存在或无关

Gregorian Calendar — Syriac month names: Used mostly in Syria and Lebanon. Where months are named after Assyrian calendar months. the month of May is referred to as أيار “Ayyar”.

公历—叙利亚月份的名称:主要用于叙利亚和黎巴嫩。 月份以亚述历月命名。 5月被称为أيار“ Ayyar”

Hijri Calendar: Used in Saudi Arabia. Hijri, the Islamic calendar, is lunar-based, consisting of 12 lunar months in a year of 354 or 355 days. It is used to determine the days of Islamic holidays and rituals, such as Ramadan, the annual period of fasting, and the proper time for the pilgrimage to Mecca.

回历日历:在沙特阿拉伯使用。 伊斯兰历法回历以阴历为基础,一年中的354天或355天包含12个阴历月。 它用于确定伊斯兰节日和礼节的日期,例如斋月,每年的禁食时间以及前往麦加朝圣的适当时间。

常见日历错误 (Common calendar mistake)

  • Using Gregorian calendar with syraic month names which is used primarily in 2 countries for all your Arab users.

    将带有公历月份名称的公历使用在两个国家中主要用于您的所有阿拉伯用户。
  • Not offering a Hijri calendar as an option when a big share of your users are from Saudi

    当很大一部分用户来自沙特阿拉伯时,不提供回历日历作为选项
“then what” Pop Art of bored Einstein photoshopped to be wearing Bedouin hear-gear
Nasser纳赛尔

Besides displaying content in the right layout and in the preferred format (numbers / calendars / currencies), Language, typography, and choice of graphics play a big role in the experience of your users and their perception of you as a brand.

除了以正确的布局和首选格式(数字/日历/货币)显示内容外,语言,印刷术和图形选择在用户体验以及他们对您的品牌认知中也起着重要作用。

And It goes without saying, there’s no single monolithic Arabic UX. Arabic as a language have evolved significantly throughout the years and so are the experiences and preferences of the Arab market. The best way to build usable products is by researching your own users

不用说,没有单一的整体阿拉伯用户体验。 这些年来,阿拉伯语作为一种语言已经有了长足的发展,阿拉伯市场的经验和偏好也是如此。 打造可用产品的最佳方法是研究自己的用户

翻译自: https://uxdesign.cc/testing-and-designing-for-arabic-speaking-users-acbe701b9fed

阿拉伯语排版设计

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SVN:“SVN”不是内部命令,解决方法

1、安装完TortoiseSVN-1.6.16.21511-x64-svn-1.6.17.msi 2、在运行窗口cmd---svn,提示: “SVN” 不是内部命令 郁闷,小有纠结 解决方法:安装Slik-Subversion-1.6.17-x64.msi 命令行窗口关闭,再次打开命令行窗口&#x…

7个月,4000+人,500+源码笔记,诚邀你参加源码共读~

大家好,我是若川。按照从易到难的顺序,前面几期(比如:validate-npm-package-name、axios工具函数)很多都只需要花2-3小时就能看完,并写好笔记。但收获确实很大。开阔视野、查漏补缺、升职加薪。已经有400笔…

火焰和烟雾的训练图像数据集_游戏开发者是烟雾和镜子的大师

火焰和烟雾的训练图像数据集Video games are incredible. They transport us to new worlds, allow us to partake in otherwise impossible situations, and empower us in our every day lives. Games can make us feel like a part of something bigger than ourselves, per…

平衡树SPLAY

一个比线段树代码还要又臭又长的数据结构,各式各样的函数,咱也不知道别人怎么记住的,咱也不敢问 SPLAY的性质 1.某个节点的左子树全部小于此节点,右子树全部大于此节点 2.中序遍历splay输出的序列是按从小到大的顺序 (…

为支持两个语言版本,我基于谷歌翻译API写了一款自动翻译的 webpack 插件

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文来…

全球 化 化_全球化设计

全球 化 化重点 (Top highlight)Designing for a global audience can feel daunting. Do you localize your product? Or, do you internationalize your product? And what does that even entail?为全球观众设计可能会令人生畏。 您是否将产品本地化? 还是您将…

springMVC_数据的处理过程

1、DispatcherServlet&#xff1a;作为前端控制器&#xff0c;负责分发客户的请求到 Controller 其在web.xml中的配置如下&#xff1a; <servlet><servlet-name>dispatcherServlert</servlet-name><servlet-class>org.springframework.web.servlet.Dis…

JavaScript 新增两个原始数据类型

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列JavaS…

axure低保真原型_如何在Google表格中创建低保真原型

axure低保真原型Google Sheets is a spreadsheet, just like Microsoft Excel.Google表格是一个电子表格&#xff0c;就像Microsoft Excel一样。 Most people associate it with calculating numbers. But Google Sheets is actually great for organizing your ideas, making…

Lerna 运行流程剖析

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列Lerna…

手动创建线程池 效果会更好_创建更好的,可访问的焦点效果

手动创建线程池 效果会更好Most browsers has their own default, outline style for the :focus psuedo-class.大多数浏览器对于&#xff1a;focus psuedo-class具有其默认的轮廓样式。 Chrome’s default outline styleChrome浏览器的默认轮廓样式 This outline style is cr…

eazy ui 复选框单选_UI备忘单:单选按钮,复选框和其他选择器

eazy ui 复选框单选重点 (Top highlight)Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and checkboxes) side by…

VS2010 VC Project的default Include设置

http://blog.csdn.net/jeffchen/article/details/5491435 VS2010与以往的版本一个最大的不同是&#xff1a;VC Directory设置的位置和以前的版本不一样。VS2010之前&#xff0c;VC Directory的设置都是在IDE的Tools->Options中设置的&#xff1b;VS2010改为&#xff0c;分别…

初级中级高级_初级职位,(半)高级职位

初级中级高级As a recent hire at my new job, as expected, a lot of things seemed scary and overwhelming. The scariest part was not the unfamiliarity with certain tasks or certain tools, but in communicating with higher-level coworkers, managers and bosses. …

如何写好技术文章(看张鑫旭老师的直播总结

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文是…

iOS 流媒体 基本使用 和方法注意

项目里面需要添加视频方法 我自定义 选用的是 avplayer 没选择 MediaPlayer 原因很简单 , avplayer 会更容易扩展 有篇博客 也很好地说明了 使用avplayer的优越性 blog.csdn.net/think12/article/details/8549438在iOS開發上&#xff0c;如果遇到需要播放影片&#xff0c;…

figma下载_迁移至Figma

figma下载Being an intuitive and user-friendly tool and having the possibility of real-time collaboration are some of the main reasons people choose to use Figma. But the migration process to Figma may sometimes be painful or time-consuming. 人们选择使用Fig…

TypeScript 常用的新玩法

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列上周分…

面试官是怎样高效面试的(面试官的“套路”

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列最近正…

微服务负载均衡实现高可用_使用负载平衡实现大容量可用性

微服务负载均衡实现高可用Written by Yona Gidalevitz由Yona Gidalevitz撰写 Most users of the web are blissfully unaware of the sheer scale of the process responsible for bringing content across the Internet. There are literally miles of Internet between you …