前言

最近公司的移動端項目需要上線部分東南亞國家的業務，在參與多語言適配的過程中，我深刻感受到「國內設計思維」與「表音語言文本」的沖突。很多在中文環境中看似合理的設計，在切換其他語言環境后常常“面目全非”。

我們經常說多語言設計的“坑”很多，是因為我們需要在相同的信息框架和界面內，保證信息可以清晰明確地傳遞給不同語言環境、不同文化背景的用戶，這要求我們的設計必須有足夠的適應性和兼容性。

因此，如何做好多語言設計？如何預知問題并提前規避？對于設計師來說是一項重要挑戰。本文從移動端著手，以圖文的形式介紹多語言適配、設計過程中需要關注的要點和一些建議，希望可以幫助設計師規避從設計到落地過程中可能存在的“坑”，更好地與上下游進行協作。

更多多語言設計方法：

一、多語言常見問題

1. 文本長度

文本擴展導致的布局問題，是多語言設計中最常見的問題。大多數的表音語言，其文本平均比中文長 30%~50%。因此我們需要有足夠靈活的布局和統一的設計規范，來處理文本擴展導致的布局問題。如下圖，在中文環境中看起來很常規的入口設計，在翻譯成其他語言后，就會暴露問題（文本與圖片重疊）。

在中文環境中當文本內容超出容器寬度時，設計通常會使用以下三種處理方式，這三種方式對于其他語言同樣適用：

1. 超出內容省略；
2. 通過交互彌補空間限制；
3. 允許有限/無限制地換行；

2. 文本語序

在設計環節，設計師會不斷調整各個元素的排列方式來確定最優方案。在中文環境中我們經常會使用一種句式的結構，就是將 UI 組件包含在文本內容中組成完整句式。這種情況我們需要注意在切換其他語言環境時，文本的語序可能會發生變化，從而造成理解困難。最好是將文本與 UI 組件相互獨立，例如考慮將 UI 組件放在文本的后面（下圖）

3. 媒體元素

除了組件、文本以外，圖片或視頻等媒體元素也是多語言場景下不可忽視的一環。

通常研發僅僅抓取頁面上的字段、文本提供給翻譯團隊，而圖片或視頻內容的中的文本，則常常會被忽略。

對于一些與品牌、產品相關的重要媒體元素，我們需要根據不同的語言環境對媒體元素內的文本進行相應的翻譯；至于次要的媒體素材，或者是有大量圖片的場景，比如功能介紹、幫助中心的圖片、視頻，考慮到翻譯成本，建議只翻譯中、英兩種語言即可。

4. 標點、符號和格式

標點作為語言起承轉合中不可或缺的一個元素，往往也容易被設計、研發所忽略。不同的語言環境對應著不同的標點符號樣式，需要在多語言適配階段額外關注。

以上圖為例，不同的語言環境分別對應不同類型的標點符號。（泰語通常沒有標點符號）在驗收走查的過程中，我們需要留意不同語言環境中標點的使用。

通常研發將產品內的一段連續文本提交給翻譯團隊，得到的目標語言文本，連標點符號都是跟隨目標語言，這種場景無需過多考慮。

但需要盡可能考慮到所有的翻譯場景，例如：

上圖中 “你好，用戶名！”，其中問候語是前端預設的文案，而用戶名則是讀取[user id]的數據，不受翻譯影響。所以雖然看上去是一句話，但實際上包含了兩種類型的字段。研發可能僅僅只將問候語提取出來，提交給翻譯團隊，而忽略了標點符號，從而導致標點符號沒能跟隨語言環境而切換。要避免這種情況，建議提前與研發溝通，把標點符號也加進翻譯文件內里面，標點交給翻譯團隊處理；

除了標點樣式，常見的諸如金額符號、日期格式、通信前綴等也需要注意在不同語言環境中做對應的調整。

二、設計側怎么做

1. 盡量預留更多的空間

根據產品戰略布局，設計應前瞻性的考慮產品的拓展性和靈活性，因此需要提前考慮布局多語言后的展示效果，從而在設計的時候給出最合適的方案。

在中文環境的設計流程中，往往業務文案會結合實際設計再做調整，以便能達到最理想的排版和布局效果，但布局多種語言后，由于譯文長度不可預知，往往需要通過換行來保證文本的完整性，而最直接的方法就是預留足夠的空間(通常建議多預留一行文本高度)去適應譯文。

以金剛區、宮格等重要的功能入口為例，若設計側未預留空間（前端寫死高度的場景下），內容超出容器寬度而省略，會造成文本缺失可讀性變差。而多預留一行文本高度，可以保證絕大部分的文本完整展示。另外，在常規情況下應盡量確保單個單詞不被拆開換行。

2. 更為靈活的布局方案

因為移動端硬件的特性，通常頁面的橫向空間較為限制，而縱向空間因為交互習慣（上下滑動）的關系，可以向下延展。故在設計時，可以盡量發揮縱向空間的優勢進行設計。

例如上圖常見的表單輸入框，通常為了保證右側輸入區域的內容展示，會犧牲左側字段標題的寬度，而導致左側文本需要省略或折行。布局多語言后，會使得左側的空間更加局促。如果換個思路選擇上下結構的樣式，可以保證無論是字段標題還是輸入參數均可以在足夠的寬度內完整展示，且高度上與常規輸入框換行后相差無幾。

我們在設計結果頁時，通常會習慣性的使用左右平分的按鈕組合來展示相關操作，但這一定程度上限制了按鈕的寬度，在切換其他語言環境后，文本可能會接近或超出按鈕的臨界寬度。但如果根據業務優先級將按鈕調整為上下布局的話， 則單個按鈕內的文本擁有足夠的寬度，保證其文本的完整展示。

3. 適當降低區域內信息密度

不能苛求在一行內展示更多的信息，因為這樣只會帶來更弱的適應性。在中文環境中，我們通常希望在有限的區域內承載更多的信息，以保證信息的傳遞效率，但這種效率，在多語言場景下很可能會踩坑。如果無法完全保證譯文在區域內正常展示，可以嘗試換行或收起的形式來降低信息密度。

在單行內如果包含數量、金額等長度不確定的數據類型時，我們應該在設計初始階段(即便是中文環境)就應該保證數據類型的顯示不會與其他元素產生沖突，而不是在切換語言、走查后著急忙慌地去進行調整。

4. 圖文盡量分離

如果項目沒有多語言的需求，我們往往會直接將圖片連同文本一并切給研發進行配置。而布局多語言后，如果還是將文本直接嵌入圖片中進行切圖，我們則需要對項目內所有圖片、所有的文本進行替換并導出，這一方面會增加應用的大小，另一方面也容易產生遺漏。

所以我們建議最好能夠實現圖片和文本的分離，即文本用代碼去實現，便于替換。這樣就可以在不替換圖片的情況下，通過代碼替換字符串來滿足多語言的需求。

除了文本外，在圖片和圖標素材的設計上也盡量不要展示貨幣符號，使用常規通用的元素進行設計，例如金幣等...

5. 使用適應性更高的組件

很多常見的組件通常更適合在中文環境中使用，因為中文可以通過精練的語言來表達復雜的功能釋義，而這些組件往往不適合長文本的展示，所以我們需要考慮在業務實現的前提下，使用適應性更高的組件。

例如常見的氣泡菜單，作為一個輕量化的組件，在文本較長的語言環境下，可能會造成組件的寬度過長而影響視覺效果。換一種思路，考慮到該組件是為了展開操作選項以供用戶選擇，則也可以通過上拉菜單實現相同的功能，并且可以完美適配文本過長的場景。

6. 通過交互彌補空間限制

上文說到，當內容超出容器時常見的三種處理方式，其中的一種是通過交互來彌補空間上的限制。并不是所有的內容都適合換行展示，有時候多文本、多 Tab 在換行后呈現的效果會給用戶帶來較大的視覺壓力也會使頁面丟失平衡，基于此類場景，我們更希望通過包括滑動、折疊等常見的交互，來保證視覺上的平衡。

以通知欄為例，通常通知欄內承載著告知用戶的重要信息和提醒，在切換其他語言環境后，可能會觸發多行展示，一方面信息過多可讀性不佳，另一方面由于其組件本身懸停在頁面上的特性，占用單屏過多的高度，使得屏幕的使用率不高。因此我們考慮使用動態的通知欄，通過自動循環，橫向滾動的形式單行展示信息，以此解決閱讀體驗和空間限制。

最后

當我們使用相同的信息架構和界面去承載不同的語言時，實際上是一個把不同語言環境、不同文化背景的用戶之間的共性提煉出來的過程。在這個過程中涉及的細節很多，十分考驗設計師是否具備前瞻性和靈活的布局處理能力，這些能力都需要在不斷的試煉中學習、總結。

當然不僅僅是設計，在整個研發流程中，如果能夠讓項目團隊都重視多語言適配這件事情以及提前發現問題，更有利于提高整體的界面觀感和完整度，減少修復問題的成本，打磨出更友好的多語言產品。

歡迎關注作者微信公眾號：「Gtech UED」