在做多語言 UI 設計的這段時間里，遇到過不少在進行單語言設計時不會去考慮的問題，因此做了相關研究，找到了一些解決方案并應用到了我們的設計工作中。如果你也正準備進行多語言設計，那么這份避坑指南也許能夠幫助你避免一些基本的設計問題，從而有更多的精力去思考具體的視覺呈現。

問題一：文案長度不可控

文案長度不可控，是我們在進行多語言設計時遇到的最主要也是首先應該考慮的問題。我們發現，該問題基本由以下兩點導致：

難點 1：文案長度不易預測

有時候看似留足了空間的設計，但由于錯誤判斷了文案翻譯后的長度，導致原來的設計預留空間不夠，這種情況在日語、西語等情況下尤為常見。

用英日西的長度差異舉幾個簡單的例子大家感受下：

的實現中就會很容易遇到文本溢出的情況，標題末尾的省略號會經常出現，最可怕的是交互文案可能無法在其容器內以正確的樣式完整顯示，哪怕不限制字符溢出，一行變兩行、字號壓縮變小、容器產生不符合預期的形變等，都可能會影響頁面的整體視覺效果。

對這個問題我們首先想到的思路，是限制文案字符數。但是這也就引出了第二個問題：

難點 2：文案字符數限制不易執行

文案在界面中是幫助用戶理解信息的，一個被迫「閹割」過的交互文案很可能無法準確表達含義，讓用戶無法 正確解讀，從而在使用產品時容易產生不符合預期的結果，這樣的文案實際上是違背用戶體驗的。

我們也屢屢由于限制文案字符數而和翻譯產生許多溝通上的問題，在一些語境情況下，翻譯方表示文案絕對不可能短到滿足我們的字符數限制。

因此，為了用戶體驗考慮，同時也為了減少不必要的翻譯溝通，我們在設計時應盡量避免限制文案字符數的情況發生。

解決思路

1. 在保證可讀性與層級的前提下盡可能減小字號，提高字符承載能力

那到底多小的字號是最小且能夠保證可讀性的字號呢。這可能還真沒有一個「標準答案」，不同的字體、字重會影響相同字號下的可讀性。

我們基于一些文字可讀性 方面的調研，再結合 Human Interface Guidelines 和 Material Design Guidelines 對字號的要求，并對 Airbnb 等在包容性設計上投入較大的產品進行調研后，結合歸納和演繹，得出了我們自己的結論：

• 圖標與圖片等的說明文案（Caption）最小使用 11pt；
• 短文案或極次要文案（Notes）最小使用 13pt；
• 標題、正文、按鈕文案最小均使用 14pt，常規 16pt。

△Human Interface Guidelines 和 Material Design Guidelines 字體規范的部分截圖

2. 盡量增加文案占位的寬度

盡量增加文案占位的寬度，尤其盡量避免文案并排放置。在這個思路下進行設計，哪怕只是使用英語等拉丁語系語言進行單語言設計，也能有效幫助避免由文案或單詞長度帶來的展示問題。

△文案占位寬度預留不夠，導致一行只能放下一個單詞，甚至出現一個單詞被強行分行的情況

3. 快速試驗多語言下的文案實際長度

Translator 在 Figma 眾多的多語言插件中實測最為好用，我們使用 Translator 檢查頁面在其他語言中的效果。它可以快速選擇目標語言并對所有文字進行機翻。

雖然機器翻譯未必準確，但我們在實際操作中發現，當英語文案正確時，人工翻譯與機器翻譯在絕大部分情況下的長度是非常接近的，在使用這樣的方法進行檢查后，暫時還未遇到人工翻譯文案過長而導致需要重新設計的情況。

△Translator 實操演示

問題二：前端字體實現效果不可控

越優秀的前端工程師越是能夠高度還原設計稿，然而如果我們在進行多語言設計時不考慮以下問題，前端再優秀怕也是愛莫能助。

難點 1：字體不可控

作為設計師，難免會對某些字體有特別的偏愛。有的公司會為表達產品調性購買字體，設計師往往也更趨向于使用公司專門購買的字體。

可是在涉及多語言時，這些字體可能導致以下問題：

字符支持不夠完整，并且當字體的特色較為明顯時，遇到其不支持的語言而產生系統字體替換時，實際展示效果與設計時預期的效果不符。

拿 Gilroy 舉例：

如上圖，在字號 14pt，字重 Regular 下，Gilroy 比 iOS 系統默認英文字體 SF Pro Text 看起來更細更小。那么為了保證文字的可讀性，我們在使用 Gilroy 進行設計時，會偏向于使用粗一些的字重，使得在多語言下，如果字體使用 Medium 字重，在回退至系統字體時，整體視覺效果會偏粗。

解決思路

系統字體已經對大部分語言進行了良好的適配，所以在進行多語言設計時，比較簡單的做法是：

使用系統字體進行涉及多語言的界面設計。

難點在于，設計師要控制好自己想使用更偏愛字體的欲望。

當然，在一些無須支持多語言的情況下，比如說品牌向的特定詞匯、阿拉伯數字、英語詞典中的英文等等，還是可以考慮使用非系統字體來提高設計的整體視覺效果的。

難點 2：字重不可控

這個實際上也是在解決 Gilroy 會出現的問題時發現的。在想要提高視覺層級時，我們會用到 Gilroy 的 Extrabold 乃至 Black 字重，但是一到多語言實現時，Extrabold 或 Black 在蘋方下只能顯示為 Semibold 字重，在視覺上的「重量」完全不能符合期望。這使得我們不禁開始懷疑，就算我們在設計時都使用系統字體，會不會也會有由字重導致的還原問題呢？

△蘋果預裝中文繁體字體

△蘋果預裝日文字體

基于這些疑問，我們調研了中、日、韓、英等語言下的系統預裝字體對字重的支持。

以 iOS 為例，日文字體 Hiragino Sans 對字重的支持只有 W3/W6/W7（等同于 Regular/ Bold/ Heavy），而繁體中文 PingFang 雖然支持的字重多達 6 個，最粗卻只支持到 Semibold。

這將導致：如果我們使用 Regular、Medium、Semibold 字重進行開發，那么在日文界面中，就只會有 Regular 這一個字重的文字了，我們將無法通過字重來達到拉開視覺層級的目的。

解決思路

基于系統字體支持的字重和字重回退的邏輯，我們得出了以下方案：

使用 Regular 與 Bold 雙字重進行設計。

如果喜歡用蘋方字體的話，那設計時用 Semibold 也可，只要與開發約定好開發時使用 Bold 替代 Semibold 就行。

結語

最后總結一下進行多語言界面設計時需要注意的點：

• 盡量避免限制文案字符數
• 在保證可讀性與層級的前提下盡可能減小字號，提高字符承載能力
• 盡量增加文案占位的寬度
• 使用系統字體進行設計
• 使用 Regular 與 Bold 雙字重進行設計

以上就是我們的「多語言 UI 設計入門避坑指南」，希望能夠對遇到同樣問題的設計師帶來一些幫助。

歡迎關注「流利說設計團隊」