產(chǎn)品在出海后，需要針對(duì)性地對(duì)不同國(guó)家進(jìn)行本土化設(shè)計(jì)，以切合本土用戶的使用習(xí)慣。本文以Apple為例，分析它是如何針對(duì)阿拉伯用戶做本土化設(shè)計(jì)的，希望對(duì)你有幫助。

全世界大概有 6.6 億人使用阿拉伯語(yǔ)，阿拉伯語(yǔ)是世界第三大書(shū)面語(yǔ)言，僅次于拉丁文和中文。來(lái)自超過(guò) 22 個(gè)國(guó)家或地區(qū)的人們，可能會(huì)使用到你設(shè)計(jì)的產(chǎn)品。你不僅要考慮文本的翻譯問(wèn)題，還有其他許多問(wèn)題。

接下來(lái)，我會(huì)分享在為阿拉伯用戶做設(shè)計(jì)時(shí)，需要注意的幾個(gè)方面。

一、UI 的方向性

下圖是 App Store 里的界面，從左到右依次是 Today 標(biāo)簽中的故事卡片，然后是卡片詳情頁(yè)，最后是 App 的產(chǎn)品頁(yè)。

考慮 UI 布局方向性的最佳方法，是轉(zhuǎn)換為線框圖。在阿語(yǔ)設(shè)計(jì)中，需要將這些 UI 組件的位置調(diào)換。

標(biāo)題、按鈕和導(dǎo)航欄應(yīng)更改順序和位置；文本段落始終右對(duì)齊；輪播圖和可滑動(dòng)的元素也應(yīng)該從右向左排布。最終得到了以下這張圖的布局。

不過(guò)，改變布局方向只是開(kāi)始，阿拉伯用戶會(huì)以相反的順序考慮這些頁(yè)面之間的切換。因?yàn)樵谒麄冋J(rèn)知習(xí)慣中，他們會(huì)從右側(cè)的 Today 標(biāo)簽頁(yè)開(kāi)始使用 App，就像他們從右到左瀏覽一本阿拉伯語(yǔ)書(shū)籍一樣。

接下來(lái)舉天氣 App 的例子，下圖左邊是英文版天氣，右邊是阿語(yǔ)版天氣。

我們會(huì)發(fā)現(xiàn)背景圖片都是放在同樣的位置，沒(méi)有做鏡像處理，原因是不管在哪個(gè)國(guó)家，太陽(yáng)都是從東方升起，符合自然規(guī)律，也符合用戶認(rèn)知。

第二個(gè)是全天天氣變化的組件，這個(gè)組件的元素布局和滑動(dòng)動(dòng)畫(huà)都會(huì)反轉(zhuǎn)。

第三個(gè)是溫度指示范圍。在阿語(yǔ)中，最低溫在右邊，最高溫在左邊。

第四個(gè)是翻頁(yè)指示器。之前提到過(guò)，阿語(yǔ)用戶的翻頁(yè)思維模式也是反過(guò)來(lái)的，主頁(yè)面在最右邊，需要向左滑才能看到其他頁(yè)面。因此，分頁(yè)符號(hào)也應(yīng)該從右向左滑動(dòng)。

二、字體排版

在討論字體排版之前，先簡(jiǎn)單介紹阿語(yǔ)的主要特點(diǎn)。在阿拉伯語(yǔ)中，下圖四個(gè)字母拼出了 “阿拉伯語(yǔ)” 這個(gè)詞。但在寫(xiě)作中，組成這個(gè)詞的單個(gè)字母實(shí)際上沒(méi)有任何意義。

舉個(gè)例子，下圖這個(gè)詞由兩部分組成，每個(gè)部分有兩個(gè)字符。這是阿拉伯語(yǔ)字體的主要特點(diǎn)之一，即它的關(guān)聯(lián)性，這也意味著每個(gè)字母可能對(duì)應(yīng)很多字形。

以本例中第一個(gè)字母 “Ain” 為例，它的字形會(huì)隨著它在單詞中的位置而變化，無(wú)論是在開(kāi)頭、中間，還是結(jié)尾，字形都各不相同。這也會(huì)導(dǎo)致阿拉伯語(yǔ)字體庫(kù)比拉丁語(yǔ)字體庫(kù)大得多。

阿語(yǔ)字體的另一個(gè)特點(diǎn)是，在大多數(shù)情況下，它的單詞比拉丁語(yǔ)更簡(jiǎn)潔。因?yàn)樗淖帜钢g具有相互聯(lián)系的特點(diǎn)，會(huì)給單詞或短語(yǔ)帶來(lái)更簡(jiǎn)潔的感覺(jué)。

另外，阿語(yǔ)字體的行高也比拉丁字母高，特別是當(dāng)其使用了點(diǎn)、發(fā)聲標(biāo)記和變音標(biāo)記。發(fā)聲標(biāo)記用于強(qiáng)調(diào)某些字母或區(qū)分發(fā)音。如果你的 App 中阿語(yǔ)使用了大量的發(fā)聲標(biāo)記，需要確保 UI 布局有足夠的垂直間距，避免文字被切割。

Apple 提供了一種特殊的阿語(yǔ)字體 SF Arabic，這個(gè)字體經(jīng)過(guò)精心的設(shè)計(jì)，考慮到了文字易讀性和功能性。

這個(gè)字體的設(shè)計(jì)也與 Latin SF 系列風(fēng)格保持一致，這樣在雙語(yǔ)混排的情況下，也能做到排版自然。

SF Arabic 也考慮到了可擴(kuò)展性。它的字形會(huì)隨著字號(hào)的大小而略有變化。

將最大字號(hào)和最小字號(hào)字母重疊，會(huì)發(fā)現(xiàn)它們結(jié)構(gòu)之間存在差異。

Large 字號(hào)常用于標(biāo)題，text 字號(hào)通常用于正文中，因?yàn)樽痔?hào)較小，為了保證易讀性，字體筆畫(huà)末端常用斜切收尾。

另外，阿語(yǔ)不區(qū)分大小寫(xiě)。當(dāng)拉丁語(yǔ)和阿語(yǔ)混排時(shí)，大寫(xiě)的拉丁字母看起來(lái)會(huì)比阿語(yǔ)字號(hào)大很多，為了彌補(bǔ)這種視覺(jué)差異，可以將阿字體大小增加 10%。

另一個(gè)需要考慮的是字母間距。下圖是阿語(yǔ)在 0 間距情況下的正常樣式，如果使用了10% 的字間距，但沒(méi)有用正確的方法處理字間距，可能會(huì)導(dǎo)致阿語(yǔ)字母斷開(kāi)或顯示不必要的空格。

所以，如果你使用的阿語(yǔ)字體沒(méi)有對(duì)字間距做優(yōu)化，那最好使用默認(rèn)的字間距或者使用系統(tǒng)自帶的 SF Arabic 字體。當(dāng)給 SF Arabic 字體增加字間距時(shí)，會(huì)給字母間增加額外的連接，而且這樣也符合阿語(yǔ)書(shū)寫(xiě)規(guī)范。

因?yàn)樽珠g距增加，額外多出的字母連接在阿語(yǔ)中稱為「Kashida」，不同的字間距，會(huì)有不同長(zhǎng)度的 Kashida。

最后要注意的是不透明度。當(dāng)給字體添加不透明度后，會(huì)看到字母鏈接處有明顯的接縫。這是因?yàn)檫@個(gè)阿語(yǔ)字體沒(méi)有優(yōu)化好。如果使用系統(tǒng)字體，就不會(huì)出現(xiàn)這個(gè)情況，不透明度會(huì)應(yīng)用于整個(gè)單詞或短語(yǔ)。

三、圖標(biāo)

現(xiàn)在來(lái)談?wù)剤D標(biāo)，圖標(biāo)在 UI 中是很容易被忽略的元素之一。在阿語(yǔ)產(chǎn)品中，圖標(biāo)的設(shè)計(jì)也有很多特別需要注意的地方。我們以 App Store 底部導(dǎo)航欄的圖標(biāo)為例：

上圖分別是英語(yǔ)和阿語(yǔ)的界面，除了 “Today” 圖標(biāo)不同，其他圖標(biāo)都保持一致。 “Today” 圖標(biāo)里的兩橫線，表示文本的對(duì)齊方向。對(duì)于拉丁語(yǔ)用戶來(lái)說(shuō)，文本應(yīng)該是左對(duì)齊；對(duì)于阿語(yǔ)用戶來(lái)說(shuō)，文本應(yīng)該是右對(duì)齊，匹配文本自然的閱讀方向。

對(duì)于 “搜索” 圖標(biāo)而言，在拉丁語(yǔ)和阿語(yǔ)的語(yǔ)境下，圖標(biāo)方向都是保持一致。因?yàn)榇蠖鄶?shù)人都是用右手拿東西，無(wú)論是哪個(gè)國(guó)家的人。

下圖還有一些其他圖標(biāo)例子，同樣說(shuō)明了在阿語(yǔ)語(yǔ)境下，圖標(biāo)設(shè)計(jì)的不同之處。

除了圖標(biāo)的方向性之外，也要重點(diǎn)考慮圖標(biāo)的設(shè)計(jì)與本地文化之間的關(guān)系。下圖這些圖標(biāo)來(lái)自 SF Symbols 庫(kù)，包含了一個(gè)專門(mén)手繪的阿語(yǔ)簽名圖標(biāo)和其他文本格式圖標(biāo)。

使用本地化設(shè)計(jì)的圖標(biāo)，可以改善 App 整體體驗(yàn)，因?yàn)閳D標(biāo)的樣式與用戶更加相關(guān)。特別是對(duì)于使用非拉丁語(yǔ)文字的國(guó)家或地區(qū)，我們需要更加注意，因?yàn)槲覀冇袝r(shí)候會(huì)不自覺(jué)忘記不同的語(yǔ)言和文化的細(xì)微差別。

四、阿拉伯?dāng)?shù)字

現(xiàn)在我們來(lái)談?wù)劙⒗當(dāng)?shù)字，下圖中的數(shù)字是我們十分熟悉的阿拉伯?dāng)?shù)字。之所以叫阿拉伯?dāng)?shù)字，是因?yàn)樗鼈兪窃诎⒗澜缰邪l(fā)明的，并取代了羅馬數(shù)字。

會(huì)發(fā)現(xiàn)現(xiàn)在的計(jì)算器都是從右到左進(jìn)行運(yùn)算的，與阿拉伯語(yǔ)文字的閱讀順序相同。在當(dāng)今世界，這種數(shù)字被稱為西方阿拉伯?dāng)?shù)字。

這是為了與東方阿拉伯?dāng)?shù)字作區(qū)分。這兩種數(shù)字都是在阿拉伯世界中發(fā)明的，用于不同的阿拉伯國(guó)家。西方阿拉伯?dāng)?shù)字主要在西非阿拉伯國(guó)家使用，比如摩洛哥、阿爾及利亞和突尼斯。而東方阿拉伯?dāng)?shù)字主要在一些地中海和海灣國(guó)家使用。但像埃及和沙特阿拉伯這樣的國(guó)家，會(huì)使用這兩種版本。如果你正在開(kāi)發(fā)的 App 包含數(shù)字，最好包含上述兩種版本的阿拉伯?dāng)?shù)字。

五、結(jié)尾

本文引自 WWDC22 蘋(píng)果設(shè)計(jì)師分享的關(guān)于如何針對(duì)阿語(yǔ)用戶做設(shè)計(jì)，探討了關(guān)于 UI 的方向、圖標(biāo)、排版、數(shù)字等設(shè)計(jì)注意事項(xiàng)，對(duì)于本地化設(shè)計(jì)和國(guó)際化設(shè)計(jì)很有啟發(fā)作用。