導語 | 本文主要面向設計師們，文章從界面設計的角度介紹了在出海產品中，多語言設計的相關原則及要點，希望可以幫助剛接觸或正在做出海產品的設計同學，建立起對多語言設計的初步認識。

背景介紹

1. 國際化與本地化

在認識出海產品時，我們常常會聽到“國際化”和“本地化”兩個概念。在信息技術領域的官方定義下，對產品進行國際化（i18n）與本地化（L10n）處理的含義是，通過修改軟件，使之能適應目標市場的語言、地區差異以及技術需要。

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

產品實現國際化與本地化的基本范圍包括但不限于以下內容：

2. 為什么要做多語言設計

由上述背景可知，一個出海產品想要達成良好的國際化與本地化效果，需要整個產品研發團隊從內容、設計、技術多個層面進行全面考量。

對于設計環節而言，多語言設計是最需要關注的重點之一。做好多語言設計，能讓產品擁有最基本的、適應不同地區的潛力——也為本地化內容的翻譯呈現，提供良好的環境。

國內設計師更常接觸單一中文產品，但用中文產品設計的習慣來做出海產品，很容易“踩坑”。這與出海產品和國內產品的研發流程不同有關。我們團隊在實際的項目經歷中，發現具有一定規模的平臺型產品，不太可能在設計初期拿到各語種的真實文案。因此在出海產品的實現過程中，會在中間階段多出翻譯、內容校驗等階段。

因此，對于設計同學而言，如何做好多語言設計，以預知落地問題并提前規避，是一項重要挑戰。

認識語言差異

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

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

1. 字符形態的差異

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

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

2. 內容長度的差異

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

因此，在多語言設計階段，非常建議基于英語進行設計(善用谷歌翻譯)，以便于更直觀地對信息兼容進行處理和判斷。這里需要提醒的是，不建議大家用最習慣的中文進行占位，因為中文可以精煉文字，信息本身較短，很容易產生多語言適配的“盲區”。

如果設計想要預知信息翻譯后的長度，以便制定布局策略，可以用 google 文檔自帶的翻譯函數 fx=GOOGLETRANSLATE(文本，“源語言”，“目標語言”) ，以及字符統計函數 fx=LEN(文本) ，快速實現多種語言的批量翻譯和字符數計算，為設計提供初步參考。

*資料 1: 我個人使用 google 文檔創建的簡易小工具，供參考（梯子訪問）： https://docs.google.com/spreadsheets

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

3. 詞匯分界的差異

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

4. 閱讀順序的差異

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

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

核心原則：可讀性與包容性

根據對于不同語言差異的認識，以及我們團隊在項目實施過程中的經驗，我們可以將多語言設計的核心原則總結為可讀性與包容性兩大原則。

可讀性包含(1)字符可讀性 (2)內容可讀性；

包容性包含(1)布局包容性 (2)認知包容性。

1. 可讀性原則

字符可讀性

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

部分產品因為品牌調性或美術風格的需要，會引用帶有特殊風格個性的字體。而我們發現，市面上大部分風格化字體都是基于拉丁字母設計的。而那些形態特殊的字符，可能會比較難找到同種風格的風格化字體。即便有，它們的可讀性受字體影響的風險會更高，因此檢驗字符可讀性尤為必要。

例：在一次運營活動中，我們將英語版本轉為印地語版本時，兩種語言都使用了名為 Teko 的風格化字體。當地合作的印度伙伴看到落地頁面后，向我們反饋，這種字體導致他們的語言可讀性下降許多。

所以當產品覆蓋的語言類型特別多時，如果要一一對應特殊語言去找風格化字體，無論是設計成本、或是頁面加載成本都會特別高。這種情況下，可以適當考慮放棄部分語言的風格化字體效果，轉用基礎字體，優先保證字符的可讀性。

內容可讀性

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

2. 包容性原則

布局包容性

布局包容性，即需要設計同學在元素、組件、模塊等設計中，要進行彈性的設計考量，通過合理的布局設置，更好地兼容極多或極少內容的情況。

布局的包容性對于平臺型產品尤為重要。如果是一次性產出的、純展示型產品，細致地根據實際內容檢查調整適配效果并不需要太大功夫。但如果是需要長期維護、內容持續變更的平臺型產品，一個高度包容性的布局，才能幫助產品用有限的成本達成較好的落地效果。

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

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

認知包容性

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

設計實施要點

接下來，我們將從基礎樣式、通用布局、組件使用和圖標設計四個維度，介紹多語言設計時需要關注的問題要點，以及相關的處理建議。

1. 基礎樣式

字階

在同樣的文字參數下，不同語言字符的體積視覺感受確實會略有不同。但遇到體量較為復雜龐大的產品，建議使用同一套字階應對，盡可能降低設計成本和維護成本。可以基于本平臺用戶群體量級最大的語言為準來制定。

行高

為了讓文本能更彈性的適應場景需要，建議文字默認帶有行高，不按區分單行/多行情況，也便于字體樣式的統一管理。

2. 通用布局

關注文本空間

• 預留文本空間

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

• 選擇排列方式

在多語言設計中，排列方式的選擇，需要視功能的實際場景確定。

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

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

當圖標與文本內容組合出現時，同樣也需要考慮合適的排列方式。豎排更強調圖標，可以應用在強調狀態的場景下，如結果頁；而橫排時圖標與文本同級，圖標做輔助的說明作用，更適用于輕提示、列表等場景。

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

關注段落空間

• 注意最小段落寬度

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

• “加大”有限寬度

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

關注信息對齊

• 常用左對齊

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

• 同類信息水平對齊

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

• 限定高度內使用下對齊

下對齊的使用，能幫助設計師在不改變限定空間尺寸的情況下兼容延展更多信息。例如大圖卡片空間內的文本。下對齊之所以優于上對齊，是因為它能避免信息不足時，可能會浮在空中的情況。

• 特殊的“右對齊”——阿語規則

阿拉伯語界面需要根據一定的規則來滿足這個地區用戶從右至左閱讀的需求，但其中也存在一些并不需要用 RTL 做處理的信息。設計階段如果想要快速產出 RTL 界面，也可以應用設計軟件中一些現有的插件資源來實現。協作中也可以將阿語規則與開發同學優先對齊，由開發實現后，最后再進行細節的檢查。

3. 組件使用

標簽組件

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

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

按鈕組件

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

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

通知欄組件

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

選項卡組件

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

4. 圖標設計要點

選用有大眾共識的圖形

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

避免出現特定指代元素

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

RTL 場景圖標規則

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

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

更詳細的鏡像規則可參考： https://material.io/design/usability/bidirectionality.html

落地還原

在完成設計輸出后，如何與開發同學配合落地，盡量在真實文案上線前打好適配基礎，也是設計師需要投入精力關注的。

1. 設定規則

設定適配規則

在設計方案交付到開發時，需要預先明確一些規則與開發同學對齊。

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

如省略處理，需要檢查省略號前展示的內容是否可被用戶理解；如滾動顯示處理，需要評估是否會過于吸引視線，打擾到用戶；如換行處理，需要進一步明確極限行數，保證容器高度可控。

在交付設計稿前，設計師應有意識地在設計稿中盡可能展示極限情況，再配合溝通，更能提升雙方協作效率。

設定字體應用規則

為了呈現效果等合理性，字體選擇也必須進行更詳盡的適配考量。以下內容主要介紹在網頁產品中，可以如何制定字體選擇和應用的規則。

我們在項目設計的過程中進行過一次對游戲類網站中字體應用的研究，總結出一些規律：

即多數網頁產品通常會定義風格化字體和基礎字體兩種。風格化字體以凸顯品牌調性/美術個性為目標，常應用于標題；而基礎字體則應用于所有正文或控件當中。

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

2. 驗收效果

走查適配效果

在走查還原效果時，建議多運用代碼走查，在 html 結構中增加文本或是增加模塊，檢驗開發同學是否有進行響應適配情況的處理，處理效果是否符合預期。

檢查字體顯示情況

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

另外也需要檢查你選擇的網頁系統字體，在不同語言下實際應用中的效果是否符合預期。

在阿拉伯語的網頁下，tohoma 覆蓋后文字會看起來特別粗，暫不能特別明確是否是字體問題，但因為存在風險，我們將不會選擇 tahoma 為第一基礎字體，也不會列進字體聲明里。

結語

文字是一個產品觸達用戶的橋梁，而出海產品的多語言適配，需要產品、設計、開發、翻譯同學多方通力配合，才能盡可能達成較好的效果，呈現給各地區用戶使用。本文主要以設計師視角介紹了多語言適配設計過程中需關注的要點和建議，希望可以幫助設計師規避設計產出到落地過程中可能存在的“坑”，更好的與各側協作。但多語言適配涉及到的細節之多，在某些場景下并非只有唯一解，需要整個團隊一起，具體問題具體分析，才能打磨出更友好的出海產品。

如對本文有任何問題建議，歡迎指正、補充或討論~

歡迎關注作者「騰訊CDC體驗設計」的微信公眾號：