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

阿拉伯語是一種從右往左書寫的語言，在頁面布局、元素?cái)[放和現(xiàn)代漢字都存在著相當(dāng)大的差異。因此，在產(chǎn)品界面的阿拉伯語本地化工作中，并不只是將語言簡(jiǎn)單地做翻譯，而是需要考慮整個(gè)系統(tǒng)設(shè)計(jì)及體驗(yàn)，并符合當(dāng)?shù)氐恼Z言和使用習(xí)慣。本文將從布局、動(dòng)作、字體、圖標(biāo)和數(shù)字這五個(gè)方面，來分享我們整理的信息和經(jīng)驗(yàn)，以及有可能遇到的潛在問題及解決方案。

更多本地化設(shè)計(jì)技巧：

一、布局

1. 什么是 RTL

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

LTR（Left to Right）：從左到右，書寫和閱讀的方向是從左往右延伸的，在漢語閱讀中，包括英語，我們都是以“F”方式進(jìn)行掃描閱讀，先左上角，然后水平移動(dòng)，繼而換行重復(fù)上一個(gè)動(dòng)作。

RTL（Right to Left）：剛好相反，就是閱讀和使用習(xí)慣都是從右向左的，阿拉伯語就屬于這個(gè)情況，他們會(huì)先從界面的右上角開始，然后水平向左移動(dòng)視線，再然后向下?lián)Q行重復(fù)上一個(gè)動(dòng)作。

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

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

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

2. RTL 原則

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

3. 實(shí)際應(yīng)用場(chǎng)景

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

①導(dǎo)航

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

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

②阿語混排

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

③進(jìn)度條

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

④圖片排序

圖片展示順序上也是需要作鏡像處理，因?yàn)樗鼈円话阋詴r(shí)間、字母等有一些規(guī)律做的排序，遵循 RTL 原則，才能保證它們排序的意義。

⑤骨架屏

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

⑥圖片海報(bào)

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

⑦富文本編輯器

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

⑧時(shí)間線圖表

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

⑨界面對(duì)齊

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

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

這個(gè)地方，網(wǎng)站開發(fā)工程師不需要重新 code 網(wǎng)站，只要已設(shè)計(jì)好的網(wǎng)站或者應(yīng)用程序，做一個(gè)語言鏡像動(dòng)作就可以，不過仍然需要注意，鏡像后的文本語言，可能會(huì)出現(xiàn)布局錯(cuò)亂溢出等情況發(fā)生，還需要作二次的細(xì)微調(diào)整。感興趣的同學(xué)，可以在自己的網(wǎng)站全局 CSS 屬性加入 direction=rtl，即可得到當(dāng)前網(wǎng)站的一個(gè)鏡像，然后再把語言翻譯一下。

二、 動(dòng)作

上述談到，RTL 原則界面的書寫和閱讀順序都是從右往左，界面會(huì)存在一些動(dòng)畫、鼠標(biāo)點(diǎn)擊及手勢(shì)動(dòng)作，它們同樣也需要遵循 RTL 的原則。

1. 手勢(shì)滑動(dòng)方向

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

2. 跑馬燈方向

因?yàn)槊娣e有限，跑馬燈是一個(gè)很好節(jié)省空間的組件。在 RTL 原則下，因?yàn)槿说拈喿x方向是從右側(cè)開始的，所以隱藏的文字需要左側(cè)露出，其滾動(dòng)方向就是從左往右的。

3. 輪播方向

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

三、字體

1. 漢字的差異

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

在一些普通的文本中，我們可以直接沿用原來字號(hào)的大小。但是一些按鈕、標(biāo)題、標(biāo)簽等需要強(qiáng)調(diào)的展示上，為了保證整個(gè)視覺的平衡，可以將字體稍微增大 2 磅，因?yàn)橹苯臃g后的阿拉伯語在視覺上會(huì)顯得稍小，稍微增大能夠有效彌補(bǔ)帶來的視覺差異。

2. 英語的差異

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

3. 不要放大字間距

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

四、圖標(biāo)

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

1. 帶有方向的圖標(biāo)需要鏡像

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

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

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

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

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

①右手圖標(biāo)

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

②字符圖標(biāo)

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

③媒體播放圖標(biāo)

這類圖標(biāo)一般指視頻、音頻的播放，包括進(jìn)度條都不需要鏡像的，因?yàn)檫@里的進(jìn)度及指向性代表播放和進(jìn)度的方向，而不是閱讀方向。

④圓形的時(shí)鐘

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

3. 反斜線無需鏡像

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

4. 注意帶豬形象的圖標(biāo)

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

五、數(shù)字

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

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

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

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

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

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

六、用戶測(cè)試

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

1. 確保同性測(cè)試會(huì)議場(chǎng)景

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

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

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

總結(jié)

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

參考文獻(xiàn)

1. 《Apple Design》Right to left | Apple Developer Documentation
2. 《Apple Design for Arabic》Design for Arabic - WWDC22 - Videos - Apple Developer
3. 《Material Design》 https://m2.material.io/design/usability/bidirectionality.html
4. 《Right-to-Left Development: Tips and Tricks》Right-to-Left Development: Tips and Tricks

歡迎關(guān)注作者微信公眾號(hào)：「小高雜談」