在做多語言 ui 設(shè)計(jì)的這段時(shí)間里，遇到過不少在進(jìn)行單語言設(shè)計(jì)時(shí)不會去考慮的問題，因此做了相關(guān)研究，找到了一些解決方案并應(yīng)用到了我們的設(shè)計(jì)工作中。如果你也正準(zhǔn)備進(jìn)行多語言設(shè)計(jì)，那么這份避坑指南也許能夠幫助你避免一些基本的設(shè)計(jì)問題，從而有更多的精力去思考具體的視覺呈現(xiàn)。
問題一：文案長度不可控文案長度不可控，是我們在進(jìn)行多語言設(shè)計(jì)時(shí)遇到的最主要也是首先應(yīng)該考慮的問題。我們發(fā)現(xiàn)，該問題基本由以下兩點(diǎn)導(dǎo)致：
難點(diǎn) 1：文案長度不易預(yù)測
有時(shí)候看似留足了空間的設(shè)計(jì)，但由于錯誤判斷了文案翻譯后的長度，導(dǎo)致原來的設(shè)計(jì)預(yù)留空間不夠，這種情況在日語、西語等情況下尤為常見。
用英日西的長度差異舉幾個簡單的例子大家感受下：
的實(shí)現(xiàn)中就會很容易遇到文本溢出的情況，標(biāo)題末尾的省略號會經(jīng)常出現(xiàn)，最可怕的是交互文案可能無法在其容器內(nèi)以正確的樣式完整顯示，哪怕不限制字符溢出，一行變兩行、字號壓縮變小、容器產(chǎn)生不符合預(yù)期的形變等，都可能會影響頁面的整體視覺效果。
對這個問題我們首先想到的思路，是限制文案字符數(shù)。但是這也就引出了第二個問題：
難點(diǎn) 2：文案字符數(shù)限制不易執(zhí)行
文案在界面中是幫助用戶理解信息的，一個被迫「閹割」過的交互文案很可能無法準(zhǔn)確表達(dá)含義，讓用戶無法 正確解讀，從而在使用產(chǎn)品時(shí)容易產(chǎn)生不符合預(yù)期的結(jié)果，這樣的文案實(shí)際上是違背用戶體驗(yàn)的。
我們也屢屢由于限制文案字符數(shù)而和翻譯產(chǎn)生許多溝通上的問題，在一些語境情況下，翻譯方表示文案絕對不可能短到滿足我們的字符數(shù)限制。
因此，為了用戶體驗(yàn)考慮，同時(shí)也為了減少不必要的翻譯溝通，我們在設(shè)計(jì)時(shí)應(yīng)盡量避免限制文案字符數(shù)的情況發(fā)生。
解決思路1. 在保證可讀性與層級的前提下盡可能減小字號，提高字符承載能力
那到底多小的字號是最小且能夠保證可讀性的字號呢。這可能還真沒有一個「標(biāo)準(zhǔn)答案」，不同的字體、字重會影響相同字號下的可讀性。
我們基于一些文字可讀性 方面的調(diào)研，再結(jié)合 human interface guidelines 和 material design guidelines 對字號的要求，并對 airbnb 等在包容性設(shè)計(jì)上投入較大的產(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ì)，哪怕只是使用英語等拉丁語系語言進(jìn)行單語言設(shè)計(jì)，也能有效幫助避免由文案或單詞長度帶來的展示問題。
△文案占位寬度預(yù)留不夠，導(dǎo)致一行只能放下一個單詞，甚至出現(xiàn)一個單詞被強(qiáng)行分行的情況
3. 快速試驗(yàn)多語言下的文案實(shí)際長度
translator 在 figma 眾多的多語言插件中實(shí)測最為好用，我們使用 translator 檢查頁面在其他語言中的效果。它可以快速選擇目標(biāo)語言并對所有文字進(jìn)行機(jī)翻。
雖然機(jī)器翻譯未必準(zhǔn)確，但我們在實(shí)際操作中發(fā)現(xiàn)，當(dāng)英語文案正確時(shí)，人工翻譯與機(jī)器翻譯在絕大部分情況下的長度是非常接近的，在使用這樣的方法進(jìn)行檢查后，暫時(shí)還未遇到人工翻譯文案過長而導(dǎo)致需要重新設(shè)計(jì)的情況。
△translator 實(shí)操演示
問題二：前端字體實(shí)現(xiàn)效果不可控越優(yōu)秀的前端工程師越是能夠高度還原設(shè)計(jì)稿，然而如果我們在進(jìn)行多語言設(shè)計(jì)時(shí)不考慮以下問題，前端再優(yōu)秀怕也是愛莫能助。
難點(diǎn) 1：字體不可控
作為設(shè)計(jì)師，難免會對某些字體有特別的偏愛。有的公司會為表達(dá)產(chǎn)品調(diào)性購買字體，設(shè)計(jì)師往往也更趨向于使用公司專門購買的字體。
可是在涉及多語言時(shí)，這些字體可能導(dǎo)致以下問題：
字符支持不夠完整，并且當(dāng)字體的特色較為明顯時(shí)，遇到其不支持的語言而產(chǎn)生系統(tǒng)字體替換時(shí)，實(shí)際展示效果與設(shè)計(jì)時(shí)預(yù)期的效果不符。
拿 gilroy 舉例：
如上圖，在字號 14pt，字重 regular 下，gilroy 比 ios 系統(tǒng)默認(rèn)英文字體 sf pro text 看起來更細(xì)更小。那么為了保證文字的可讀性，我們在使用 gilroy 進(jìn)行設(shè)計(jì)時(shí)，會偏向于使用粗一些的字重，使得在多語言下，如果字體使用 medium 字重，在回退至系統(tǒng)字體時(shí)，整體視覺效果會偏粗。
解決思路系統(tǒng)字體已經(jīng)對大部分語言進(jìn)行了良好的適配，所以在進(jìn)行多語言設(shè)計(jì)時(shí)，比較簡單的做法是：
使用系統(tǒng)字體進(jìn)行涉及多語言的界面設(shè)計(jì)。
難點(diǎn)在于，設(shè)計(jì)師要控制好自己想使用更偏愛字體的欲望。
當(dāng)然，在一些無須支持多語言的情況下，比如說品牌向的特定詞匯、阿拉伯?dāng)?shù)字、英語詞典中的英文等等，還是可以考慮使用非系統(tǒng)字體來提高設(shè)計(jì)的整體視覺效果的。
難點(diǎn) 2：字重不可控
這個實(shí)際上也是在解決 gilroy 會出現(xiàn)的問題時(shí)發(fā)現(xiàn)的。在想要提高視覺層級時(shí)，我們會用到 gilroy 的 extrabold 乃至 black 字重，但是一到多語言實(shí)現(xiàn)時(shí)，extrabold 或 black 在蘋方下只能顯示為 semibold 字重，在視覺上的「重量」完全不能符合期望。這使得我們不禁開始懷疑，就算我們在設(shè)計(jì)時(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è)計(jì)。
如果喜歡用蘋方字體的話，那設(shè)計(jì)時(shí)用 semibold 也可，只要與開發(fā)約定好開發(fā)時(shí)使用 bold 替代 semibold 就行。
結(jié)語最后總結(jié)一下進(jìn)行多語言界面設(shè)計(jì)時(shí)需要注意的點(diǎn)：
盡量避免限制文案字符數(shù)在保證可讀性與層級的前提下盡可能減小字號，提高字符承載能力盡量增加文案占位的寬度使用系統(tǒng)字體進(jìn)行設(shè)計(jì)使用 regular 與 bold 雙字重進(jìn)行設(shè)計(jì)以上就是我們的「多語言 ui 設(shè)計(jì)入門避坑指南」，希望能夠?qū)τ龅酵瑯訂栴}的設(shè)計(jì)師帶來一些幫助。
歡迎關(guān)注「流利說設(shè)計(jì)團(tuán)隊(duì)」