超全面!阿拉伯語本地化RTL設計指南

0 評論 1376 瀏覽 22 收藏 22 分鐘

產品出海不是說把APP界面、功能的中文換成英文就完事兒了的,還需要針對國家、語言和用戶習慣、行為進行調整,只有經過這樣的“本地化”才能引起目標用戶的關注。

本文將從布局、動作、字體、圖標和數字這五個方面,來分享我們整理的信息和經驗,以及有可能遇到的潛在問題及解決方案。

阿拉伯語,是世界上第三大書面語言,僅次于英語和漢語,在中東大約有6億多人在使用。在“一帶一路“的出海浪潮中,阿拉伯語本地化是繞不開的一個課題。

阿拉伯語是一種從右往左書寫的語言,在頁面布局、元素擺放和現代漢字都存在著相當大的差異。因此,在產品界面的阿拉伯語本地化工作中,并不只是將語言簡單地做翻譯,而是需要考慮整個系統設計及體驗,并符合當地的語言和使用習慣。

本文將從布局、動作、字體、圖標和數字這五個方面,來分享我們整理的信息和經驗,以及有可能遇到的潛在問題及解決方案。

一、布局

1. 什么是RTL

說RTL這個模式前,我們需要談到它的另一個模式就是LTR,這兩者的區別如下:

  • LTR(Left to Right):從左到右,書寫和閱讀的方向是從左往右延伸的,在漢語閱讀中,包括英語,我們都是以“F”方式進行掃描閱讀,先左上角,然后水平移動,繼而換行重復上一個動作。
  • RTL(Right to Left):剛好相反,就是閱讀和使用習慣都是從右向左的,阿拉伯語就屬于這個情況,他們會先從界面的右上角開始,然后水平向左移動視線,再然后向下換行重復上一個動作。

我們來看一張阿拉伯Youtube網站的首頁圖,從中文到阿拉伯語界面上好像是做了一個鏡像翻轉,用戶的整個引導視線是翻轉的“F”。網站導航布局是從右往左,頂部的篩選控件排序也是從右往左,包括圖片的標題描述等都是遵循從右向左。這就是我們說的RTL模式。

其中有些元素,例如右上角logo、中英文文字,好像還是原來的樣子,只是挪了一個位置,改了一下對齊方式,這個下方會詳細解釋。

我們再來對比一張iPhone天氣,除阿拉伯文本從右側開始外,中間的時間指示器也作了方向改變,底部的翻頁器也做了鏡像改變,第一個主頁面是在最右側。

2. RTL原則

通過以上案例,基本就了解了阿拉伯語的一個簡單原則。阿拉伯語用戶進入到一個網站,首先是從頁面的右上角開始,掃描頂部,然后換行再從右側開始掃描。

3. 實際應用場景

從LTR到RTL整個網站及應用程序,在頁面結構及閱讀習慣上需要作出調整,以下通過一些常見的案例幫你熟悉它們。

3.1. 導航

整個導航系統都會以相反的順序展示,在LTR模式下,導航是從左到右排序的,而在RTL原則下,圖標的排序方向則是相反的。

從導航進入到二級頁面后,后退/前進的箭頭也都是需要被鏡像的。

3.2. 阿語混排

在一些頁面上,也會涉及到中英阿多語言混排的情況,比如上述提到的Youtube網站,我們會發現,頁面作了鏡像,阿語采用了RTL的流向,而混插其中的中文字符和英文單詞的閱讀還是遵循LTR原則的。不過對齊方式則統一是右對齊,以保證界面的一致性。

3.3. 進度條

進度條這類受時間影響的組件,它也同樣遵循RTL原則,受閱讀方向的改變,所以進度條、加載動畫等也是同樣需要鏡像的。但注意,表示進度、容量等的連續數字不需要鏡像翻轉,如圖中的“40%”。

3.4. 圖片排序

圖片展示順序上也是需要作鏡像處理,因為它們一般以時間、字母等有一些規律做的排序,遵循RTL原則,才能保證它們排序的意義。

3.5. 骨架屏

骨架屏,一種內容加載器,也是需要做RTL布局更改的,因為它的內容條是真實的閱讀方向,在內容生成前會起到視覺引導的作用。

3.6. 圖片海報

對于海報Banner這類,不可以直接翻轉圖片,但是需要做左右排版上的調整。其中圖片上的行動按鈕是一個容易忽視的地方,當界面從LTR轉變為RTL后,圖片上的行動按鈕在布局上也是需要跟著作出調整。

3.7. 富文本編輯器

內容編輯文檔,也需要將段落的輸入調整成從右往左,其中編輯器的工具欄也需要作鏡像改變。注意,撤銷(上一步)、重做(下一步)按鈕的位置,也是需要鏡像的。

3.8. 時間線圖表

以時間為維度圖表在橫軸上,也是需要從右往左來作出調整,都是閱讀的起始時間在最右側,結束時間在左側,其中日歷組件也是遵循同樣的原則。

3.9. 界面對齊

排版布局中,RTL需要保持一致的右對齊方式,比如表格、表單、圖表等,就像我們瀏覽日常網站一樣,一致的閱讀起始線,能給用戶舒適的閱讀體驗。

4. 如何鏡像翻轉

這個地方,網站開發工程師不需要重新code網站,只要已設計好的網站或者應用程序,做一個語言鏡像動作就可以。

不過仍然需要注意,鏡像后的文本語言,可能會出現布局錯亂溢出等情況發生,還需要作二次的細微調整。

感興趣的同學,可以在自己的網站全局CSS屬性加入direction=rtl,即可得到當前網站的一個鏡像,然后再把語言翻譯一下。

二、 動作

上述談到,RTL原則界面的書寫和閱讀順序都是從右往左,界面會存在一些動畫、鼠標點擊及手勢動作,它們同樣也需要遵循RTL的原則。

1. 手勢滑動方向

在RTL模式下,手勢會調整成從左往右滑動,隱藏的操作按鈕會落在視線的結束位置,也就是該內容區域的左側位置。

2. 跑馬燈方向

因為面積有限,跑馬燈是一個很好節省空間的組件。在RTL原則下,因為人的閱讀方向是從右側開始的,所以隱藏的文字需要左側露出,其滾動方向就是從左往右的。

3. 輪播方向

上述舉 iPhone 天氣例子有提到,翻頁器也是做了鏡像改變,在RTL模式下,輪播圖的第一張是顯示在最右側,所以輪播圖的滑動方向也是鏡像,從左到右輪動的。

三、字體

1. 漢字的差異

一般情況下,阿拉伯字體比漢字高度小一點,在水平方向上會更寬一點,字體上也會更簡單一點,所以占用屏幕空間多一點。

在一些普通的文本中,我們可以直接沿用原來字號的大小。但是一些按鈕、標題、標簽等需要強調的展示上,為了保證整個視覺的平衡,可以將字體稍微增大2磅,因為直接翻譯后的阿拉伯語在視覺上會顯得稍小,稍微增大能夠有效彌補帶來的視覺差異。

2. 英語的差異

阿拉伯語和英語不一樣,它沒有大小寫的概念。比如一些導航、標題使用上,全部的英文大寫,在視覺上會相比阿拉伯語重很多。要彌補這種視覺大小的差異,可以將阿拉伯語放大10。這個地方尤其需要注意,較小的字號全部英文大寫直接翻譯會更為明顯,像是導航名稱上CRM、CDP這類通用的產品名尤其注意。

3. 不要放大字間距

阿拉伯語字詞之間是相互連接起來的,不要隨意增加它們的間距,否則會把一些字母斷開,從而帶來一些語言上的歧義。

四、圖標

圖標是界面信息中非常重要的組成部分,它是作為一些操作引導或信息傳達的視覺觸發點,設計上也仍需要遵循RTL原則。

1. 帶有方向的圖標需要鏡像

簡單來說,圖標在信息傳達上就含有左右的指向需要作鏡像處理的,翻轉后的圖標和文本閱讀方向上更為匹配,常見的有汽車、飛機等交通類工具圖標。

指向性箭頭圖標需要鏡像。這類比較簡單,它在原本LTR界面就有方向性,在RTL布局中,受整個界面閱讀的方向改變,也是需要作翻轉的。

帶文本閱讀方向的圖標,這類是比較容易忽視的,因為圖標內采用的條形是真實的閱讀方向,比如閱讀文本、樹結構等圖標。

2. 模擬現實的普通圖標無需鏡像

這類圖標主要是模擬現實物體的,它不受閱讀方向這個因素影響,比如一些生活用品圖標,阿拉伯語人和我們看到的是一樣的,不過也有一些圖標會引起誤解,下面著重說明。

2.1. 右手圖標

無論文本方向如何改變,阿拉伯人也是習慣用右手,常見的有鋼筆、放大鏡、杯子等。

2.2. 字符圖標

漢字、英文字符圖標不需要鏡像,和上述布局中提到的一樣,涉及中文、英文字符時,阿拉伯用戶的閱讀行為和我們是一致性的,不過這類圖標,可以根據需要作本地化處理。

2.3. 媒體播放圖標

這類圖標一般指視頻、音頻的播放,包括進度條都不需要鏡像的,因為這里的進度及指向性代表播放和進度的方向,而不是閱讀方向。

2.4. 圓形的時鐘

阿拉伯人和我們看到的也是一樣的,都是順時鐘方向旋轉的。

3. 反斜線無需鏡像

表示禁止的反斜線不需要翻轉,因為這是社會約定俗成的規定,它表示禁止含義。常見的有靜音、禁飛等圖標。但是注意斜線下喇叭這類有方向感的圖標,還是建議進行鏡像。

4. 注意帶豬形象的圖標

另外需要注意帶豬形象的存錢罐圖標,不適用于阿拉伯社會,在穆斯林里,豬是不潔的動物,所以需要避免這類宗教的問題。

五、數字

數字之所以被稱為阿拉伯數字,是因為現代社會的數字是經由阿拉伯世界傳播推廣的。直到今天,數學的計算都是從右向左進行的,我們從小學習的 “個位、十位、百位、千萬…”,它也是一種從右向左的閱讀順序。

1. 連續的數字無需鏡像

在RTL界面原則中,數字遵循的是和LTR同樣的閱讀原則。如果連續的數字還需要傳達意義,則不應該翻轉。例如年份2023仍然會寫成2023,系統內的編號、編碼等,因為有具體指代,也是不能翻轉的。但是請注意,表達年份的開始和結束,連續的年份數字不變,但閱讀方向上需要調整RTL思維模式。

區號、電話號碼視為連續數字,數字順序均無需鏡像翻轉,且區號控件和電話號碼控件的排列順序,也應該保持從左到右的閱讀順序。

2. 分離的數字需要鏡像處理

這類數字其在信息傳達上其實和文本是一樣的,需要遵循RTL原則,例如步驟條,評分等控件,這種帶有數字的控件需要作出調整,以匹配整個方向的閱讀體驗。

六、用戶測試

按照RTL原則界面調整完畢后,我們仍需要真實的用戶,來測試系統的體驗。因為不管我們如何設計,想得再全面,設計者也不是真正的用戶,對于當地的文化也是缺乏了解的,所以需要進行可用性測試來閉環整個體驗,在這個過程中,我們需要注意一些測試的注意事項。

1. 確保同性測試會議場景

確保每次的測試會議,測試者和主持人性別是相同的。這是因為在沙特社會,人們比較注重性別隔離,例如在學校、公共交通工具上,女性在這些場合穿著保守,甚至不能和男性坐在一起。如果主持人是異性時,參與者都會表現出更加保守的行為。所以理想的情況下,女性主持人主持,測試參與者也是女性,男性主持人也是一樣。

2. 建議選擇5個測試樣本數量

因為這個數量的測試樣例,至少能夠發現系統中80%以上的問題,有興趣的同學可以去查看《用戶體驗度量》這本書有詳細介紹,當然樣本更多會更好,只不過它的邊際收益會逐漸降低。

總結

以上就是阿拉伯語界面設計所要遵守的RTL原則,遵守這些準則可以幫助大家避免一些錯誤,并給本地用戶帶來更好的使用體驗。此外在本土化的設計過程當中,需要有保持一種寬容友好的態度,而不是一種傲慢,因為我們所提供的產品和服務,是理應要尊重當地人文和風俗習慣的。

參考文獻

《Apple Design》Right to left | Apple Developer Documentation

《Apple Design for Arabic》Design for Arabic – WWDC22 – Videos – Apple Developer

《Material Design》https://m2.material.io/design/usability/bidirectionality.html

《Right-to-Left Development: Tips and Tricks》Right-to-Left Development: Tips and Tricks

專欄作家

小高雜談,人人都是產品經理專欄作家。10年+專注在To B產品設計,擅長SaaS產品從0到1、1到N產品規劃及體驗設計,關注電商零售、供應鏈及新領域AI探索。

本文原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!