阿拉伯语排版设计

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.

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

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) 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进入空气，从左进入空气。 (开玩笑)

(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后退按钮

RTL back button mirrored RTL后退按钮已镜像

RTL volume with speaker icon and slider mirrored 带有扬声器图标和镜像的RTL音量

触控手势 (Touch gestures)

Slide gestures mirrored 滑动手势已镜像

(Mirroring rating and page selectors)

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

(Don’t use mirroring for numbers)

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.

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

How cursor should work for text (RTL) and numbers (LTR). ✅ 光标应如何工作以显示文本(RTL)和数字(LTR)。 ✅

How cursors shouldn’t work for numbers and emojis with Arabic text ❌ Arabic不应使用阿拉伯文本的数字和表情符号显示光标❌

(2) Numbers 🔢)

There are two ways of writing numbers in Arabic:

阿拉伯数字有两种写法：

  • Hindi: ٩ ٨ ٧ ٦ ٥ ٤ ٣ ٢ ١ ٠
  • Arabic: 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. 不一致：同时显示两种类型。

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) 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

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

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) 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

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

阿拉伯语排版设计