欧美成人手机免费在线观看,眼镜人妻在线视频不卡,色色影院导航,99视频久久,se婷婷,91免费高清视频,我爱大香蕉欧美高清无,日韩高清无码电影

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：流利說設(shè)計團隊

編輯：章欣怡

共 3032 字，預(yù)計閱讀 9 分鐘

聽說專業(yè)做英語學(xué)習(xí)的流利說也遇到了語言大難題？讓我們來看看，流利說?海外版的設(shè)計師在設(shè)計各國版本的時候，是如何過五關(guān)斬六將的吧！

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

問題一

文案長度不可控

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

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

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

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

Email（電子郵件）：日語文案長度約為英語文案的 2.5 倍，西語文案的長度更是達(dá)到了英語的 3.5 倍多。

Retry（重試）：日語文案長度為英語文案的 1.6 倍，西語文案的長度更是達(dá)到了英語的 3.1 倍。

這句短句（為了解鎖等級測試，你需要學(xué)習(xí)完所有課程并獲得足夠的星星）的日語與西語在占位面積上更是「碾壓」英語。

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

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

難點 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)品進行調(diào)研后，結(jié)合歸納和演繹，得出了我們自己的結(jié)論：

圖標(biāo)與圖片等的說明文案（Caption）最小使用 11pt；

短文案或極次要文案（Notes）最小使用 13pt；

標(biāo)題、正文、按鈕文案最小均使用 14pt，常規(guī) 16pt。

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

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

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

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

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

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

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

Translator 實操演示

問題二

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

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

難點 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 進行設(shè)計時，會偏向于使用粗一些的字重，使得在多語言下，如果字體使用 Medium 字重，在回退至系統(tǒng)字體時，整體視覺效果會偏粗。

解決思路

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

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

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

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

難點 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 字重進行開發(fā)，那么在日文界面中，就只會有 Regular 這一個字重的文字了，我們將無法通過字重來達(dá)到拉開視覺層級的目的。

解決思路

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

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

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

結(jié)語

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

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

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

也歡迎對多語言設(shè)計感興趣的同學(xué)們與我們多多交流探討。

?? 我們一起聊設(shè)計 ???♂?

微信行業(yè)交流群

期待與更多優(yōu)秀設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）

推薦課程

星標(biāo)公眾號方法

點開下方公眾號 ?? 點擊右上角【...】 ?? 設(shè)為星標(biāo)

UI設(shè)計｜出海產(chǎn)品多語言UI設(shè)計避坑指南