流利說實戰(zhàn)經(jīng)驗！多語言UI設(shè)計避坑指南

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

問題一：文案長度不可控

文案長度不可控，是我們在進(jìn)行多語言設(shè)計時遇到的最主要也是首先應(yīng)該考慮的問題。我們發(fā)現(xiàn)，該問題基本由以下兩點(diǎn)導(dǎo)致：

難點(diǎn) 1：文案長度不易預(yù)測

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

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

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

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

難點(diǎn) 2：文案字符數(shù)限制不易執(zhí)行

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

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

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

解決思路

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

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

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

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

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

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

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

△文案占位寬度預(yù)留不夠，導(dǎo)致一行只能放下一個單詞，甚至出現(xiàn)一個單詞被強(qiáng)行分行的情況

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

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

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

△Translator 實操演示

問題二：前端字體實現(xiàn)效果不可控

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

難點(diǎn) 1：字體不可控

作為設(shè)計師，難免會對某些字體有特別的偏愛。有的公司會為表達(dá)產(chǎn)品調(diào)性購買字體，設(shè)計師往往也更趨向于使用公司專門購買的字體。

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

字符支持不夠完整，并且當(dāng)字體的特色較為明顯時，遇到其不支持的語言而產(chǎn)生系統(tǒng)字體替換時，實際展示效果與設(shè)計時預(yù)期的效果不符。

拿 Gilroy 舉例：

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

解決思路

系統(tǒng)字體已經(jīng)對大部分語言進(jìn)行了良好的適配，所以在進(jìn)行多語言設(shè)計時，比較簡單的做法是：

使用系統(tǒng)字體進(jìn)行涉及多語言的界面設(shè)計。

難點(diǎn)在于，設(shè)計師要控制好自己想使用更偏愛字體的欲望。

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

難點(diǎn) 2：字重不可控

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

△蘋果預(yù)裝中文繁體字體

△蘋果預(yù)裝日文字體

基于這些疑問，我們調(diào)研了中、日、韓、英等語言下的系統(tǒng)預(yù)裝字體對字重的支持。

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

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

解決思路

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

使用 Regular 與 Bold 雙字重進(jìn)行設(shè)計。

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

結(jié)語

最后總結(jié)一下進(jìn)行多語言界面設(shè)計時需要注意的點(diǎn)：

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

以上就是我們的「多語言 UI 設(shè)計入門避坑指南」，希望能夠?qū)τ龅酵瑯訂栴}的設(shè)計師帶來一些幫助。

歡迎關(guān)注「流利說設(shè)計團(tuán)隊」