編輯導(dǎo)語：本文從界面設(shè)計(jì)的角度介紹了在出海產(chǎn)品中，多語言設(shè)計(jì)的相關(guān)原則及要點(diǎn)，希望可以幫助剛接觸或正在做出海產(chǎn)品的設(shè)計(jì)同學(xué)，建立起對多語言設(shè)計(jì)的初步認(rèn)識。我們一起來看看。

一、背景介紹

1. 國際化與本地化

在認(rèn)識出海產(chǎn)品時，我們常常會聽到“國際化”和“本地化”兩個概念。在信息技術(shù)領(lǐng)域的官方定義下，對產(chǎn)品進(jìn)行國際化（i18n）與本地化（L10n）處理的含義是，通過修改軟件，使之能適應(yīng)目標(biāo)市場的語言、地區(qū)差異以及技術(shù)需要。

兩者概念區(qū)別有些微妙，我們或許可以用更簡單的說法來解釋——“國際化”意味著兼容，即用一套產(chǎn)品方案，來面對不同地區(qū)的用戶，這叫實(shí)現(xiàn)產(chǎn)品的“國際化”。而“本地化”意味著定制，需要根據(jù)不同地區(qū)特性，進(jìn)行分別處理，這叫“本地化”處理。兩者的共同實(shí)現(xiàn)，才能更好地服務(wù)擁有不同文化背景的用戶們。

產(chǎn)品實(shí)現(xiàn)國際化與本地化的基本范圍包括但不限于以下內(nèi)容：

2. 為什么要做多語言設(shè)計(jì)

由上述背景可知，一個出海產(chǎn)品想要達(dá)成良好的國際化與本地化效果，需要整個產(chǎn)品研發(fā)團(tuán)隊(duì)從內(nèi)容、設(shè)計(jì)、技術(shù)多個層面進(jìn)行全面考量。

對于設(shè)計(jì)環(huán)節(jié)而言，多語言設(shè)計(jì)是最需要關(guān)注的重點(diǎn)之一。做好多語言設(shè)計(jì)，能讓產(chǎn)品擁有最基本的、適應(yīng)不同地區(qū)的潛力——也為本地化內(nèi)容的翻譯呈現(xiàn)，提供良好的環(huán)境。

國內(nèi)設(shè)計(jì)師更常接觸單一中文產(chǎn)品，但用中文產(chǎn)品設(shè)計(jì)的習(xí)慣來做出海產(chǎn)品，很容易“踩坑”。這與出海產(chǎn)品與國內(nèi)產(chǎn)品的研發(fā)流程不同有關(guān)。我們團(tuán)隊(duì)在實(shí)際的項(xiàng)目經(jīng)歷中，發(fā)現(xiàn)具有一定規(guī)模的平臺型產(chǎn)品，不太可能在設(shè)計(jì)初期拿到各語種的真實(shí)文案。因此在出海產(chǎn)品的實(shí)現(xiàn)過程中，會在中間階段多出翻譯、內(nèi)容校驗(yàn)等階段。

因此，對于設(shè)計(jì)同學(xué)而言，如何做好多語言設(shè)計(jì)，以預(yù)知落地問題并提前規(guī)避，是一項(xiàng)重要挑戰(zhàn)。

二、認(rèn)識語言差異

全球文化多元各異，最直觀的體現(xiàn)便是在語言和文字上。如何用一套設(shè)計(jì)方案來兼容存在各種各樣差異的多國語言呢？這正是多語言設(shè)計(jì)的難點(diǎn)所在。

首先，我們需要認(rèn)識各類語言間存在哪些主要差異。

1. 字符形態(tài)的差異

字符是語句的基本構(gòu)成單位。不同的文化發(fā)展背景下誕生出了形態(tài)各異的字符樣式。而部分語言會共用一套字符體系。常見的字符體系有如下幾種類型。

從圖形的角度分析這些字符的形態(tài)，不難發(fā)現(xiàn)，像拉丁字母以及西里爾字母，字符筆劃構(gòu)成相對簡單，且筆劃多為平直線條或是規(guī)整的弧線。而像阿拉伯字母、泰文等字符，組成相對復(fù)雜，筆劃線條特殊的曲度較多。這是非常關(guān)鍵的字符形態(tài)差異，它將會影響后續(xù)我們對字體的選擇。

2. 內(nèi)容長度的差異

在不同語言下，同樣含義的內(nèi)容進(jìn)行翻譯后，得到的文本長度可能會有較大的差異。如何通過設(shè)計(jì)兼容這些信息，正是做多語言產(chǎn)品最大的難點(diǎn)所在。

因此，在多語言設(shè)計(jì)階段，非常建議基于英語進(jìn)行設(shè)計(jì)（善用谷歌翻譯），以便于更直觀地對信息兼容進(jìn)行處理和判斷。這里需要提醒的是，不建議大家用最習(xí)慣的中文進(jìn)行占位，因?yàn)橹形目梢跃珶捨淖?，信息本身較短，很容易產(chǎn)生多語言適配的“盲區(qū)”。

如果設(shè)計(jì)想要預(yù)知信息翻譯后的長度，以便制定布局策略，可以用google文檔自帶的翻譯函數(shù) fx=GOOGLETRANSLATE（文本，“源語言”，“目標(biāo)語言”） ，以及字符統(tǒng)計(jì)函數(shù) fx=LEN（文本），快速實(shí)現(xiàn)多種語言的批量翻譯和字符數(shù)計(jì)算，為設(shè)計(jì)提供初步參考。

*資料1: 我個人使用google文檔創(chuàng)建的簡易小工具，供參考：

https://docs.google.com/spreadsheets/d/1GeX16TYKUKjLLjeCOz8Iz2sqyYXOCmuxp722007guO4/edit#gid=0

*資料2: 全球語言簡碼表：https://www.zhudc.com/browser/20162

3. 詞匯分界的差異

語言還分為帶有詞匯分界、和不帶有詞匯分界兩種情況。帶有詞匯分界的語言有英語、俄語等，分界意味著他們的語句以單詞為最小單位。而中文、泰語等語言是沒有分界的，一個語句中除了標(biāo)點(diǎn)符號分隔，字符都是相連的。這也是影響段落布局的一個重要因素。

4. 閱讀順序的差異

閱讀順序分為LTR （Left to Right）和RTL （Right to Left）兩種。我們常見的絕大部分語言都是從左到右的閱讀順序，而使用特殊右至左順序的，則以阿拉伯語為代表。不同的閱讀順序，決定了布局時信息對齊、元素排布、甚至圖標(biāo)圖示，都可能存在不同的規(guī)則。

綜上，在正式啟動設(shè)計(jì)以前，建議設(shè)計(jì)同學(xué)向業(yè)務(wù)方了解清楚，平臺會支持哪些語言。明確語言類型，了解以上差異后，才能更好地制定設(shè)計(jì)方案。

三、核心原則:可讀性與包容性

根據(jù)對于不同語言差異的認(rèn)識，以及我們團(tuán)隊(duì)在項(xiàng)目實(shí)施過程中的經(jīng)驗(yàn)，我們可以將多語言設(shè)計(jì)的核心原則總結(jié)為可讀性與包容性兩大原則。

可讀性包含（1）字符可讀性（2）內(nèi)容可讀性；

包容性包含（1）布局包容性（2）認(rèn)知包容性。

1. 可讀性原則

1.1 字符可讀性

字符可讀性，主要針對的是在應(yīng)用風(fēng)格化字體時，需考慮到在不同語言下的顯示效果。

部分產(chǎn)品因?yàn)槠放普{(diào)性或美術(shù)風(fēng)格的需要，會引用帶有特殊風(fēng)格個性的字體。而我們發(fā)現(xiàn)，市面上大部分風(fēng)格化字體都是基于拉丁字母設(shè)計(jì)的。而那些形態(tài)特殊的字符，可能會比較難找到同種風(fēng)格的風(fēng)格化字體。即便有，它們的可讀性受字體影響的風(fēng)險(xiǎn)會更高，因此檢驗(yàn)字符可讀性尤為必要。

例：在一次運(yùn)營活動中，我們將英語版本轉(zhuǎn)為印地語版本時，兩種語言都使用了名為Teko的風(fēng)格化字體。當(dāng)?shù)睾献鞯挠《然锇榭吹铰涞仨撁婧螅蛭覀兎答?，這種字體導(dǎo)致他們的語言可讀性下降許多。

所以當(dāng)產(chǎn)品覆蓋的語言類型特別多時，如果要一一對應(yīng)特殊語言去找風(fēng)格化字體，無論是設(shè)計(jì)成本、或是頁面加載成本都會特別高。這種情況下，可以適當(dāng)考慮放棄部分語言的風(fēng)格化字體效果，轉(zhuǎn)用基礎(chǔ)字體，優(yōu)先保證字符的可讀性。

1.2 內(nèi)容可讀性

內(nèi)容可讀性，指頁面容納信息時，是否給用戶傳遞出了足夠多的內(nèi)容，讓用戶能達(dá)到最基本的信息理解，而不是靠猜。因此我們要針對多語言內(nèi)容的長度特性，留有一定信息空間——尤其是信息使用了縮略處理時，需謹(jǐn)慎地確認(rèn)露出的部分是否足以被用戶理解。

2. 包容性原則

2.1 布局包容性

布局包容性，即需要設(shè)計(jì)同學(xué)在元素、組件、模塊等設(shè)計(jì)中，要進(jìn)行彈性的設(shè)計(jì)考量，通過合理的布局設(shè)置，更好地兼容極多或極少內(nèi)容的情況。布局的包容性對于平臺型產(chǎn)品尤為重要。如果是一次性產(chǎn)出的、純展示型產(chǎn)品，細(xì)致地根據(jù)實(shí)際內(nèi)容檢查調(diào)整適配效果并不需要太大功夫。但如果是需要長期維護(hù)、內(nèi)容持續(xù)變更的平臺型產(chǎn)品，一個高度包容性的布局，才能幫助產(chǎn)品用有限的成本達(dá)成較好的落地效果。

例：商品貨架卡片是一種典型的彈性空間，沒有固定信息，因此信息布局以豎排為主，保證橫向空間足夠，不增加換行難度。輸出時也要兼顧不同信息豐富度下的規(guī)則。

字體的選擇同樣會影響布局包容性。當(dāng)你選擇了一個默認(rèn)字符尺寸太超乎尋常的字體（過扁、過寬）時，在產(chǎn)品存在多語言多字體的情況下，會發(fā)現(xiàn)即便是同樣的文本參數(shù)，單個字符寬度卻相差很大。這會使得文本展示空間變得更不可控，導(dǎo)致適配風(fēng)險(xiǎn)增大。

2.2 認(rèn)知包容性

認(rèn)知包容性，是指設(shè)計(jì)時需要考慮到不同文化背景下用戶，對于某些元素、符號的認(rèn)知是否相通。例如，當(dāng)產(chǎn)品出現(xiàn)需要單獨(dú)使用圖標(biāo)來指代信息的情況時，需盡量保證選用的圖標(biāo)具有全球性的大眾共識，并且不能產(chǎn)生歧義。當(dāng)然，若非極端情況（如文字信息實(shí)在是兼容不下），大部分場景下還是建議盡量將圖標(biāo)配合文字使用，幫助不同語言、不同互聯(lián)網(wǎng)認(rèn)知水平的用戶更好地理解并使用產(chǎn)品。

四、設(shè)計(jì)實(shí)施要點(diǎn)

接下來，我們將從基礎(chǔ)樣式、通用布局、組件使用和圖標(biāo)設(shè)計(jì)四個維度，介紹多語言設(shè)計(jì)時需要關(guān)注的問題要點(diǎn)，以及相關(guān)的處理建議。

1. 基礎(chǔ)樣式

1.1 字階

在同樣的文字參數(shù)下，不同語言字符的體積視覺感受確實(shí)會略有不同。但遇到體量較為復(fù)雜龐大的產(chǎn)品，建議使用同一套字階應(yīng)對，盡可能降低設(shè)計(jì)成本和維護(hù)成本?？梢曰诒酒脚_用戶群體量級最大的語言為準(zhǔn)來制定。

1.2 行高

為了讓文本能更彈性的適應(yīng)場景需要，建議文字默認(rèn)帶有行高，不按區(qū)分單行/多行情況，也便于字體樣式的統(tǒng)一管理。

2. 通用布局

2.1 關(guān)注文本空間

2.1.1 預(yù)留文本空間

普遍情況下，多語言場景下文本長度會大于中文場景的文本長度，因此需要考慮預(yù)留更多文本空間，以保證信息露出的有效性。過小的露出空間（如只能露出一個單詞）會讓用戶無法理解內(nèi)容，產(chǎn)生困惑。

2.1.2 選擇排列方式

在多語言設(shè)計(jì)中，排列方式的選擇，需要視功能的實(shí)際場景確定。

兩類信息在同一水平下橫排，就必然會需要分割有限的寬度空間，這種情況下如果文本超長需要換行時，信息可能會顯得略微雜亂；但它的好處在于節(jié)約縱向空間，在信息不長或者橫行空間較大的情況下仍可以使用。

如果使用上下排列的方式，文本容納的空間也將會更大，換行時的顯示效果會相對更為可控。

當(dāng)圖標(biāo)與文本內(nèi)容組合出現(xiàn)時，同樣也需要考慮合適的排列方式。豎排更強(qiáng)調(diào)圖標(biāo)，可以應(yīng)用在強(qiáng)調(diào)狀態(tài)的場景下，如結(jié)果頁；而橫排時圖標(biāo)與文本同級，圖標(biāo)做輔助的說明作用，更適用于輕提示、列表等場景。

但值得注意的是，在多個圖標(biāo)及文字并存的場景下，多語言設(shè)計(jì)布局會更常用橫排的方式來兼容信息，例如快捷操作，或是一些入口場景。橫排更能保證文字說明的露出效率，以及提升樣式布局的規(guī)整度，并且也更方便內(nèi)容條目的拓展。

2.2 關(guān)注段落空間

2.2.1 注意最小段落寬度

當(dāng)頁面的橫行分割較多時，單個段落寬度就會變得較小。此時在某些語言場景下容易出現(xiàn)單個單詞換行，甚至寬度都容納不下一個極長的單詞情況。因此，在多語言場景下，需要保證段落有一定的寬度容納信息。移動端小屏幕建議謹(jǐn)慎使用一行三個的布局方式。

2.2.2 “加大”有限寬度

排版時也可以通過改變排列方式加大段落寬度，只是這樣會導(dǎo)致同樣高度下可展示的卡片數(shù)量變少，信息密度降低，因此需要根據(jù)實(shí)際情況取舍；如果實(shí)在改變不了段落寬度，還可以通過縮小字號或字間距，變相加大寬度，盡可能容納多一些信息。

2.3 關(guān)注信息對齊

2.3.1 常用左對齊

如前文所說，不同語言在書面上的最小單位不同，為了更好的兼容各種情況，建議多用左對齊。因?yàn)橄裼⒄Z這種按單詞分界的語言，很難保證每行內(nèi)容寬度一致，并且中文常用的兩端對齊的效果也并不能適用。多語言場景段落的左對齊相比居中對齊，更能帶給用戶較好的閱讀體驗(yàn)。

2.3.2 同類信息水平對齊

當(dāng)一個卡片模塊中有多類信息并存時，需要關(guān)注重要信息的水平對齊，確保閱讀動線的流暢，便于用戶獲取信息。

2.3.3 限定高度內(nèi)使用下對齊

下對齊的使用，能幫助設(shè)計(jì)師在不改變限定空間尺寸的情況下兼容延展更多信息。例如大圖卡片空間內(nèi)的文本。下對齊之所以優(yōu)于上對齊，是因?yàn)槟芩苊庑畔⒉蛔銜r，可能會浮在空中的情況。

2.3.4 特殊的“右對齊”——阿語規(guī)則

阿拉伯語界面需要根據(jù)一定的規(guī)則來滿足這個地區(qū)用戶從右至左閱讀的需求，但其中也存在一些并不需要用RTL做處理的信息。設(shè)計(jì)階段如果想要快速產(chǎn)出RTL界面，也可以應(yīng)用設(shè)計(jì)軟件中一些現(xiàn)有的插件資源來實(shí)現(xiàn)。協(xié)作中也可以將阿語規(guī)則與開發(fā)同學(xué)優(yōu)先對齊，由開發(fā)實(shí)現(xiàn)后，最后再進(jìn)行細(xì)節(jié)的檢查。

3. 組件使用

3.1 標(biāo)簽組件

在中文場景下，標(biāo)簽通常精簡為2-4字。而在英語這類帶有分界的語言下，通常建議標(biāo)簽內(nèi)最多不超過兩個單詞，或是使用數(shù)字和符號代替，如20%off 或 -20% 代替 20 percentoff。如果一些輔助描述信息，必須展示3個及以上單詞才能說清楚，建議以文本形式放到界面中，而不是使用標(biāo)簽組件，以保證信息的可拓展性。

例：亞馬遜的標(biāo)簽一般情況下只會承載促銷說明用的短詞組。而對商品的更多信息補(bǔ)充，如配送范圍、官方認(rèn)證等，會直接用文本的形式補(bǔ)充在商品列表中。

3.2 按鈕組件

豎排的按鈕組合相比橫排按鈕，能兼容更多信息，因此在多語言產(chǎn)品下的使用會更為廣泛。

非均等場景的按鈕組合，需要限制圖標(biāo)下文字長度；如果為可能分界的語言，建議使用單個單詞，否則建議更換成其他按鈕組合樣式。

3.3 通知欄組件

在移動端的多語言產(chǎn)品中，通知欄組件一行容納不下全部文案的情況非常常見。在文本超出通知欄寬度的情況下，需要靈活使用信息橫向滾動、或是帶操作的方式，允許用戶進(jìn)入下一級或配合氣泡、彈窗，確保用戶有辦法能獲知完整內(nèi)容。

3.4 選項(xiàng)卡組件

當(dāng)選項(xiàng)卡選項(xiàng)大于等于三個時，建議使用等間距的選項(xiàng)設(shè)計(jì)，而不是均分寬度的選項(xiàng)設(shè)計(jì)，以避免文案溢出，同時顯示信息更均勻緊湊。

4. 圖標(biāo)設(shè)計(jì)要點(diǎn)

4.1 選用有大眾共識的圖形

圖形需要滿足認(rèn)知包容性原則，可以多去觀察成熟的全球性產(chǎn)品，何時會使用到純圖標(biāo)的場景，又使用了什么樣的圖標(biāo)?；A(chǔ)圖形如代表播放的三角形、代表喜歡的愛心型，都是比較具有大眾共識的。另外一些本身模擬了常見物品的圖標(biāo)，也不容易出錯，如代表錄制的攝像機(jī)、代表收藏的標(biāo)簽等。

4.2 避免出現(xiàn)特定指代元素

在圖標(biāo)設(shè)計(jì)中，可能會使用到一些特定的信息作為裝飾，如文字或者是符號。如果這些符號帶有特定區(qū)域，如美元的貨幣符號、或是贊的漢字，在全球性多地區(qū)的產(chǎn)品圖標(biāo)中必須謹(jǐn)慎使用。建議用更通用的元素代替，避免產(chǎn)生歧義。

4.3 RTL場景圖標(biāo)規(guī)則

RTL場景中，并非所有圖標(biāo)都需要鏡像。例如暗示真實(shí)物體時，圖標(biāo)可以保持一致。需要鏡像的常為帶有方向含義的圖標(biāo)。

有個比較特殊的場景值得說明：在內(nèi)容播放場景中，播放按鈕以及進(jìn)度指示反應(yīng)的是播放的方向，因此保持從左至右即可；而音量值的大小控制，是需要鏡像的。

更詳細(xì)的鏡像規(guī)則可參考：https://material.io/design/usability/bidirectionality.html#mirroring-elements

五、落地還原

在完成設(shè)計(jì)輸出后，如何與開發(fā)同學(xué)配合落地，盡量在真實(shí)文案上線前打好適配基礎(chǔ)，也是設(shè)計(jì)師需要投入精力關(guān)注的。

1. 設(shè)定規(guī)則

1.1 設(shè)定適配規(guī)則

在設(shè)計(jì)方案交付到開發(fā)時，需要預(yù)先明確一些規(guī)則與開發(fā)同學(xué)對齊。

例如在非通欄的容器中，需要向開發(fā)同學(xué)示意信息的極限寬度和內(nèi)邊距，并且明確超出該范圍的情況下，應(yīng)直接省略、滾動顯示、還是換行處理。

如省略處理，需要檢查省略號前展示的內(nèi)容是否可被用戶理解；

如滾動顯示處理，需要評估是否會過于吸引視線，打擾到用戶；如換行處理，需要進(jìn)一步明確極限行數(shù)，保證容器高度可控。

在交付設(shè)計(jì)稿前，設(shè)計(jì)師應(yīng)有意識地在設(shè)計(jì)稿中盡可能展示極限情況，再配合溝通，更能提升雙方協(xié)作效率。

1.2 設(shè)定字體應(yīng)用規(guī)則

為了呈現(xiàn)效果等合理性，字體選擇也必須進(jìn)行更詳盡的適配考量。以下內(nèi)容主要介紹在網(wǎng)頁產(chǎn)品中，可以如何制定字體選擇和應(yīng)用的規(guī)則。

我們在項(xiàng)目設(shè)計(jì)的過程中進(jìn)行過一次對游戲類網(wǎng)站中字體應(yīng)用的研究，總結(jié)出一些規(guī)律：

即多數(shù)網(wǎng)頁產(chǎn)品通常會定義風(fēng)格化字體和基礎(chǔ)字體兩種。風(fēng)格化字體以凸顯品牌調(diào)性/美術(shù)個性為目標(biāo)，常應(yīng)用于標(biāo)題；而基礎(chǔ)字體則應(yīng)用于所有正文或控件當(dāng)中。

基礎(chǔ)字體的選擇一般從網(wǎng)頁默認(rèn)可引用的字體庫中選擇即可。常用的系統(tǒng)字體有Arial或者Helvetica等。如果在字體聲明中沒有特別列舉某些語言的字體，瀏覽器在識別時會自動轉(zhuǎn)為提供對應(yīng)語言的常用系統(tǒng)默認(rèn)字體，如Thonburi（泰語）、Geeza Pro（阿語），因此不需要針對所有語言逐一做字體聲明。

2. 驗(yàn)收效果

2.1 走查適配效果

在走查還原效果時，建議多運(yùn)用代碼走查，在html結(jié)構(gòu)中增加文本或是增加模塊，檢驗(yàn)開發(fā)同學(xué)是否有進(jìn)行響應(yīng)適配情況的處理，處理效果是否符合預(yù)期。

2.2 檢查字體顯示情況

著重檢查font-family的規(guī)則，是否符合不同語言下的效果預(yù)期。其中需要注意，如果需要特別聲明中文字體，務(wù)必把英文基礎(chǔ)字體最前置，以防中文字體包中的字母樣式覆蓋英語場景。

另外也需要檢查你選擇的網(wǎng)頁系統(tǒng)字體，在不同語言下實(shí)際應(yīng)用中的效果是否符合預(yù)期。

在阿拉伯語的網(wǎng)頁下，tohoma覆蓋后文字會看起來特別粗，暫不能特別明確是否是字體問題，但因?yàn)榇嬖陲L(fēng)險(xiǎn)，我們將不會選擇tahoma為第一基礎(chǔ)字體，也不會列進(jìn)字體聲明里。

六、結(jié)語

文字是一個產(chǎn)品觸達(dá)用戶的橋梁，而出海產(chǎn)品的多語言適配，需要產(chǎn)品、設(shè)計(jì)、開發(fā)、翻譯同學(xué)多方通力配合，才能盡可能達(dá)成較好的效果，呈現(xiàn)給各地區(qū)用戶使用。

本文主要以設(shè)計(jì)師視角介紹了多語言適配設(shè)計(jì)過程中需關(guān)注的要點(diǎn)和建議，希望可以幫助設(shè)計(jì)師規(guī)避設(shè)計(jì)產(chǎn)出到落地過程中可能存在的“坑”，更好的與各側(cè)協(xié)作。但多語言適配涉及到的細(xì)節(jié)之多，在某些場景下并非只有唯一解，需要整個團(tuán)隊(duì)一起，具體問題具體分析，才能打磨出更友好的出海產(chǎn)品。

作者：騰訊CDC，微信公眾號：騰訊CDC體驗(yàn)設(shè)計(jì)

本文由 @騰訊CDC體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議