在做多語(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ì)」