產品出海不是說把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協議

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