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

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

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

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

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

一、布局

1. 什么是RTL

說RTL這個模式前，我們需要談到它的另一個模式就是LTR，這兩者的區(qū)別如下：

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

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

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

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

2. RTL原則

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

3. 實際應(yīng)用場景

從LTR到RTL整個網(wǎng)站及應(yīng)用程序，在頁面結(jié)構(gòu)及閱讀習慣上需要作出調(diào)整，以下通過一些常見的案例幫你熟悉它們。

3.1. 導(dǎo)航

整個導(dǎo)航系統(tǒng)都會以相反的順序展示，在LTR模式下，導(dǎo)航是從左到右排序的，而在RTL原則下，圖標的排序方向則是相反的。

從導(dǎo)航進入到二級頁面后，后退/前進的箭頭也都是需要被鏡像的。

3.2. 阿語混排

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

3.3. 進度條

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

3.4. 圖片排序

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

3.5. 骨架屏

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

3.6. 圖片海報

對于海報Banner這類，不可以直接翻轉(zhuǎn)圖片，但是需要做左右排版上的調(diào)整。其中圖片上的行動按鈕是一個容易忽視的地方，當界面從LTR轉(zhuǎn)變?yōu)镽TL后，圖片上的行動按鈕在布局上也是需要跟著作出調(diào)整。

3.7. 富文本編輯器

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

3.8. 時間線圖表

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

3.9. 界面對齊

排版布局中，RTL需要保持一致的右對齊方式，比如表格、表單、圖表等，就像我們?yōu)g覽日常網(wǎng)站一樣，一致的閱讀起始線，能給用戶舒適的閱讀體驗。

4. 如何鏡像翻轉(zhuǎn)

這個地方，網(wǎng)站開發(fā)工程師不需要重新code網(wǎng)站，只要已設(shè)計好的網(wǎng)站或者應(yīng)用程序，做一個語言鏡像動作就可以。

不過仍然需要注意，鏡像后的文本語言，可能會出現(xiàn)布局錯亂溢出等情況發(fā)生，還需要作二次的細微調(diào)整。

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

二、 動作

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

1. 手勢滑動方向

在RTL模式下，手勢會調(diào)整成從左往右滑動，隱藏的操作按鈕會落在視線的結(jié)束位置，也就是該內(nèi)容區(qū)域的左側(cè)位置。

2. 跑馬燈方向

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

3. 輪播方向

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

三、字體

1. 漢字的差異

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

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

2. 英語的差異

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

3. 不要放大字間距

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

四、圖標

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

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

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

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

帶文本閱讀方向的圖標，這類是比較容易忽視的，因為圖標內(nèi)采用的條形是真實的閱讀方向，比如閱讀文本、樹結(jié)構(gòu)等圖標。

2. 模擬現(xiàn)實的普通圖標無需鏡像

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

2.1. 右手圖標

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

2.2. 字符圖標

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

2.3. 媒體播放圖標

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

2.4. 圓形的時鐘

阿拉伯人和我們看到的也是一樣的，都是順時鐘方向旋轉(zhuǎn)的。

3. 反斜線無需鏡像

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

4. 注意帶豬形象的圖標

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

五、數(shù)字

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

1. 連續(xù)的數(shù)字無需鏡像

在RTL界面原則中，數(shù)字遵循的是和LTR同樣的閱讀原則。如果連續(xù)的數(shù)字還需要傳達意義，則不應(yīng)該翻轉(zhuǎn)。例如年份2023仍然會寫成2023，系統(tǒng)內(nèi)的編號、編碼等，因為有具體指代，也是不能翻轉(zhuǎn)的。但是請注意，表達年份的開始和結(jié)束，連續(xù)的年份數(shù)字不變，但閱讀方向上需要調(diào)整RTL思維模式。

區(qū)號、電話號碼視為連續(xù)數(shù)字，數(shù)字順序均無需鏡像翻轉(zhuǎn)，且區(qū)號控件和電話號碼控件的排列順序，也應(yīng)該保持從左到右的閱讀順序。

2. 分離的數(shù)字需要鏡像處理

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

六、用戶測試

按照RTL原則界面調(diào)整完畢后，我們?nèi)孕枰鎸嵉挠脩?，來測試系統(tǒng)的體驗。因為不管我們?nèi)绾卧O(shè)計，想得再全面，設(shè)計者也不是真正的用戶，對于當?shù)氐奈幕彩侨狈α私獾模孕枰M行可用性測試來閉環(huán)整個體驗，在這個過程中，我們需要注意一些測試的注意事項。

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

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

2. 建議選擇5個測試樣本數(shù)量

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

總結(jié)

以上就是阿拉伯語界面設(shè)計所要遵守的RTL原則，遵守這些準則可以幫助大家避免一些錯誤，并給本地用戶帶來更好的使用體驗。此外在本土化的設(shè)計過程當中，需要有保持一種寬容友好的態(tài)度，而不是一種傲慢，因為我們所提供的產(chǎn)品和服務(wù)，是理應(yīng)要尊重當?shù)厝宋暮惋L俗習慣的。

參考文獻

《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