阿拉伯語排版設計_針對說阿拉伯語的用戶的測試和設計

阿拉伯語排版設計

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.pswp.cn/news/274843.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274843.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274843.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

CMMI簡介

CMMI(Capability Maturity Model Integration)即能力成熟度模型集成 什么是CMMI CMMI是CMM模型的最新版本。早期的CMMI(CMMI-SE/SW/IPPD)1.02版本是應用于軟件業項目的管理方法,SEI在部分國家和地區開始推廣和試用。隨…

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輸出的序列是按從小到大的順序 (…

POJ 2696 計算表達式的值

時間限制: 1000ms內存限制:65536kB描述有些語言中表達式的運算符使用字符串表示,例如用mul代表*,用div代表/,用add代表,用sub代表-,用mod代表%。輸入第一行為表達式的個數n。其余n行每行一個表達式,表達式由…

為支持兩個語言版本,我基于谷歌翻譯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…

面試體驗:Facebook 篇(轉)

http://www.cnblogs.com/cathsfz/archive/2012/11/05/facebook-interview-experience.html 2012-11-05 08:20 by Cat Chen, 23266閱讀, 121評論, 收藏, 編輯 Google、Microsoft 和 Yahoo 都是去年的事情了&#xff0c;接下來說說今年…

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…

Weblogic EJB 學習筆記(3)精

編輯實體bean的高級課程 1. 怎樣開發主健類 ejb的主健類主要用做持久存儲和ejb容器中的唯一標識符. 通常主健類的字段直接映射到數據庫中的主健字段. 如果主健只是由單個實體bean字段組成.且其數據類型是基本的java類.如string,則bean作者不必開發自定義的主健類. 只需要在配置…

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…

C++builder enum類型

C/C code #pragmaoption push -b-enumTThreadPriority { tpIdle, tpLowest, tpLower, tpNormal, tpHigher, tpHighest, tpTimeCritical }; //這是字節型的.理論上說這是可能的最小整形.可以是1Byte, 2Bytes, 4Bytes...#pragmaoption pop#pragmaoption push -benumTThreadPriori…

chrome瀏覽器世界之窗瀏覽器的收藏夾在哪?

今天心血來潮&#xff0c;用一個查重軟件刪除重復文件&#xff0c;結果把chrome瀏覽器和世界之窗瀏覽器的收藏夾給刪除了&#xff0c;導致我保存的好多網頁都沒有了&#xff0c;在瀏覽器本身和網上都沒有找到這兩個瀏覽器默認的收藏夾在哪個位置&#xff0c;只好用DiskGenius 把…

Vue3究竟好在哪里 等推薦

話不多說&#xff0c;這一次花了幾小時精心為大家挑選了30余篇好文&#xff0c;供大家閱讀學習&#xff0c;提升自己的技術視野以及擴展自己的知識儲備。本文閱讀技巧&#xff0c;先粗看標題&#xff0c;感興趣可以都關注一波&#xff0c;一起共同進步。前端從進階到入院框架原…

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…

過濾詞

<?xml version"1.0" encoding"GB2312"?>-<wordList> <word>,</word> <word>.</word> <word><</word> <word>></word> <word>?</word> <word>/</word> <…