流利說(shuō)實(shí)戰經(jīng)驗！多語(yǔ)言UI設計避坑指南

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

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

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

難點(diǎn) 1：文案長(cháng)度不易預測

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

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

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

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

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

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

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

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

解決思路

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

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

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

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

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

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

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

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

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

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

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

△Translator 實(shí)操演示

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

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

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

作為設計師，難免會(huì )對某些字體有特別的偏愛(ài)。有的公司會(huì )為表達產(chǎn)品調性購買(mǎi)字體，設計師往往也更趨向于使用公司專(zhuān)門(mén)購買(mǎi)的字體。

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

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

拿 Gilroy 舉例：

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

解決思路

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

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

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

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

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

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

△蘋(píng)果預裝中文繁體字體

△蘋(píng)果預裝日文字體

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

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

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

解決思路

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

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

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

結語(yǔ)

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

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

以上就是我們的「多語(yǔ)言 UI 設計入門(mén)避坑指南」，希望能夠對遇到同樣問(wèn)題的設計師帶來(lái)一些幫助。

歡迎關(guān)注「流利說(shuō)設計團隊」

來(lái)源鏈接：https://www.xinnet.com/knowledge/813843300.html

本站聲明:網(wǎng)站內容來(lái)源于網(wǎng)絡(luò ),如有侵權,請聯(lián)系我們,我們將及時(shí)處理。