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

問(wèn)題一：文案長(zhǎng)度不可控

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

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

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

用英日西的長(zhǎng)度差異舉幾個(gè)簡(jiǎn)單的例子大家感受下：

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

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

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

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

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

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

解決思路

1. 在保證可讀性與層級(jí)的前提下盡可能減小字號(hào)，提高字符承載能力

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

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

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

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

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

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

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

3. 快速試驗(yàn)多語(yǔ)言下的文案實(shí)際長(zhǎng)度

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

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

△Translator 實(shí)操演示

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

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

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

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

可是在涉及多語(yǔ)言時(shí)，這些字體可能導(dǎo)致以下問(wèn)題：

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

拿 Gilroy 舉例：

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

解決思路

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

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

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

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

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

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

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

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

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

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

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

解決思路

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

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

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

結(jié)語(yǔ)

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

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

以上就是我們的「多語(yǔ)言 UI 設(shè)計(jì)入門避坑指南」，希望能夠?qū)τ龅酵瑯訂?wèn)題的設(shè)計(jì)師帶來(lái)一些幫助。

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