一、背景
產(chǎn)品要在全球不同區(qū)域發(fā)布，就繞不開(kāi)「國(guó)際化」和「本地化」兩個(gè)概念，二者背后有不同的處理邏輯。
國(guó)際化（Internationalization），簡(jiǎn)稱(chēng)「i18n」，是指用一套產(chǎn)品方案，來(lái)面對(duì)不同地區(qū)的用戶(hù)，意味著兼容，產(chǎn)品開(kāi)發(fā)成本低。
本地化（localization），簡(jiǎn)稱(chēng)「l10n」，是指產(chǎn)品為特定地區(qū)進(jìn)行特殊定制，匹配該區(qū)域的語(yǔ)言文字、當(dāng)?shù)匚幕c社會(huì)習(xí)慣等，針對(duì)性地進(jìn)行本地運(yùn)營(yíng)。
在具體的產(chǎn)品中只有均衡二者才能更好服務(wù)全球不同文化背景的用戶(hù)。
二、目的
世界是多元化的，不同地區(qū)之間存在諸多差異，諸如文化習(xí)俗、語(yǔ)言體系、社會(huì)習(xí)慣、政策法規(guī)，如果僅憑借對(duì)中文產(chǎn)品的接觸習(xí)慣來(lái)做的國(guó)際化產(chǎn)品，中文看起來(lái)完美合理的設(shè)計(jì)，卻不一定符合其他國(guó)家地區(qū)的用戶(hù)使用習(xí)慣，給用戶(hù)帶來(lái)認(rèn)知障礙，便很可能遭遇「水土不服」，慘淡收?qǐng)觥?/p>
本文對(duì)國(guó)際化和本地化設(shè)計(jì)中的多語(yǔ)言設(shè)計(jì)常遇到的問(wèn)題進(jìn)行歸納總結(jié)，遵循相關(guān)設(shè)計(jì)要點(diǎn)，有效提升產(chǎn)品和應(yīng)用的全球化質(zhì)量，保證信息可以清晰明確的傳遞給不同文化背景的用戶(hù)。
三、語(yǔ)種差異
語(yǔ)言和文字的差異最直觀地體現(xiàn)了全球多元文化，這里我們只探討對(duì)界面設(shè)計(jì)造成比較大影響的差異，并探討這些差異是如何對(duì)界面設(shè)計(jì)造成影響。
通過(guò)對(duì)不同語(yǔ)言文字進(jìn)行歸納總結(jié)，我們發(fā)現(xiàn)文字主要有四個(gè)差異：
字符形態(tài)、信息密度、詞匯分界、閱讀順序。
1.字符形態(tài)
字符是語(yǔ)句的基本構(gòu)成單位，不同的文化發(fā)展背景下誕生出了形態(tài)各異的字符樣式，而有部分語(yǔ)言會(huì)共用一套字符體系，比如英文、法文等都用的是拉丁字母。按照不同的文字形態(tài)基本可以分成以下四種類(lèi)型：
拉丁字母，以英語(yǔ)、法語(yǔ)、德語(yǔ)為代表
西里爾字母，以俄語(yǔ)、烏克蘭語(yǔ)為代表
方格字，以漢語(yǔ)、日語(yǔ)、韓語(yǔ)為代表
復(fù)雜圖形字符，以泰語(yǔ)、阿拉伯語(yǔ)為代表
拉丁字母和西里爾字母都由希臘字母演變而來(lái)，二者同源，字符筆劃相對(duì)簡(jiǎn)單，通常由直線(xiàn)或者規(guī)整弧線(xiàn)構(gòu)成。
而像阿拉伯字母、泰文等字符，具有更多復(fù)雜組成和特殊曲度，這些會(huì)影響字體的選擇，進(jìn)而影響文本的可讀性。
以漢字為代表的方格字是等寬字符，筆劃也較多，整體視覺(jué)感受比其他類(lèi)型的字符大。
在相同字體、同等字號(hào)下，由于筆畫(huà)復(fù)雜的程度以及字符結(jié)構(gòu)，不同語(yǔ)種的字符的視覺(jué)大小也不一樣，并且某些字符會(huì)帶有發(fā)音符號(hào)，這差異也會(huì)影響字符在行文排版時(shí)的負(fù)空間大小。
下圖是同一字號(hào)下不同語(yǔ)言文字對(duì)比，不難發(fā)現(xiàn)方格類(lèi)字符比其他類(lèi)型的字符視覺(jué)感受要大，泰文相對(duì)拉丁字母來(lái)說(shuō)也比較小。
2.信息密度
不同語(yǔ)言文字的信息密度是不一樣的，換句話(huà)來(lái)說(shuō)，同樣含義的內(nèi)容進(jìn)行翻譯后，得到的文本長(zhǎng)度可能會(huì)有較大的差異。
如何通過(guò)設(shè)計(jì)兼容這些信息，正是做多語(yǔ)言設(shè)計(jì)最大的難點(diǎn)所在，而且這個(gè)差異帶來(lái)的挑戰(zhàn)在產(chǎn)品國(guó)際化的設(shè)計(jì)過(guò)程十分常見(jiàn)。
以下是在“發(fā)送郵件”的相同含義下，不同語(yǔ)言文字的文本長(zhǎng)度對(duì)比，可以看到中文的文本長(zhǎng)度比日文、英文、俄文、泰文要短，俄文的長(zhǎng)度甚至幾乎是中文的4倍。在更復(fù)雜的國(guó)際化產(chǎn)品中，這個(gè)差異可能會(huì)更明顯。
3.詞匯分界
語(yǔ)言還分為帶有詞匯分界和不帶有詞匯分界兩種情況。帶有詞匯分界的語(yǔ)言有英語(yǔ)、俄語(yǔ)等，分界意味著他們的語(yǔ)句以單詞為最小單位。而中文、泰語(yǔ)等語(yǔ)言是沒(méi)有分界的，一個(gè)語(yǔ)句中除了標(biāo)點(diǎn)符號(hào)分隔，字符都是相連的。
詞匯分界影響著段落的布局排版，有詞匯分界意味著，當(dāng)文本需要換行時(shí)，需要避免從詞匯中間截?cái)鄵Q行，只能在詞匯分界處換行，段落尾部無(wú)法對(duì)齊，影響美觀程度，增加了閱讀難度。
4.閱讀順序
閱讀順序分為 LTR (Left to Right)和 RTL (Right to Left)兩種。
我們常見(jiàn)的絕大部分語(yǔ)言都是從左到右的閱讀順序，像是中文、英語(yǔ)、法語(yǔ)、德語(yǔ)、西班牙語(yǔ)等在內(nèi)的許多語(yǔ)言。
還有一些語(yǔ)言上是從右到左的閱讀順序，例如，阿拉伯語(yǔ)、希伯來(lái)語(yǔ)等。不同的閱讀順序，決定了布局時(shí)信息對(duì)齊、元素排布、甚至圖標(biāo)圖示，都可能存在不同的規(guī)則。
下圖是分別是LTR語(yǔ)言和RTL語(yǔ)言下的iOS系統(tǒng)設(shè)置界面。
關(guān)于不同語(yǔ)言文字的差異點(diǎn)還有很多，以上的四點(diǎn)只是對(duì)界面適配設(shè)計(jì)影響最大的。下面的設(shè)計(jì)建議就是圍繞如何解決文字差異化帶來(lái)的適配問(wèn)題。
四、設(shè)計(jì)建議
1.字體選擇
首先選擇一款合格的全球化字體
，確保該字體支持的語(yǔ)言數(shù)量要足夠多，同時(shí)還要滿(mǎn)足不同語(yǔ)言的字符可讀性和可識(shí)別性。建議設(shè)計(jì)師可以選擇系統(tǒng)提供的默認(rèn)字體，因?yàn)闊o(wú)論是蘋(píng)果、安卓還是微軟，它們?cè)谌蚧煮w的優(yōu)化上做得都比較完善、成熟，具體的字體使用可以查閱相關(guān)系統(tǒng)的設(shè)計(jì)開(kāi)發(fā)文檔。
謹(jǐn)慎使用斜體，其一是不能保證所有語(yǔ)言文字都支持斜體，其二是斜體有可能造成某些語(yǔ)言文字難于閱讀。
字重選擇需要克制，設(shè)計(jì)師常常使用不同字重文字塑造不同層級(jí)，但我們無(wú)法確保不同語(yǔ)言的文字都有對(duì)應(yīng)的字重，以蘋(píng)方為例，簡(jiǎn)體中文支持六款字重，從Ultralight到Semibold，其他語(yǔ)種的可能只有三款字重。如果使用的字重層級(jí)過(guò)多，在中文狀態(tài)下，字體的層級(jí)分明，但切換成其他語(yǔ)言（字重少的），字體層級(jí)可能會(huì)丟失。
除網(wǎng)頁(yè)超鏈接外，不建議界面文本使用下劃線(xiàn)，因?yàn)槟承┱Z(yǔ)言字符下方添加會(huì)發(fā)音符號(hào)比如阿拉伯文、西城文，下劃線(xiàn)會(huì)影響字體可讀性。
2.字號(hào)和行高
前文提到在同等字號(hào)下，不同語(yǔ)言字符的視覺(jué)大小是不一樣，比如漢字會(huì)比拉丁字母要大，所以字號(hào)和行高也要相應(yīng)做調(diào)整。
對(duì)于本地化產(chǎn)品，可以只考慮本地語(yǔ)言字符的特性，針對(duì)性進(jìn)行設(shè)計(jì)，比如國(guó)內(nèi)的產(chǎn)品，只需針對(duì)中文做設(shè)計(jì)；對(duì)于國(guó)際化產(chǎn)品，遇到的場(chǎng)景較為復(fù)雜，需要適配的語(yǔ)言較多時(shí)，如果針對(duì)每種語(yǔ)言文字單獨(dú)做設(shè)計(jì)的話(huà)，設(shè)計(jì)和開(kāi)發(fā)的工作量會(huì)非常大，這時(shí)我們可以基于產(chǎn)品用戶(hù)群體量級(jí)最大的語(yǔ)言文字為準(zhǔn)來(lái)制定字號(hào)以及行高。
在多語(yǔ)言環(huán)境下，同一文本長(zhǎng)度不確定，有可能是單行，有可能是雙行，因此建議單行文本和多行文本統(tǒng)一行高，可以以字號(hào)+8為基礎(chǔ)來(lái)設(shè)置行高，對(duì)于大段文字，可以適當(dāng)增加行高保證閱讀的舒適性，標(biāo)題適當(dāng)減小行保持緊湊性。
3.布局
謹(jǐn)慎使用橫向布局，因?yàn)椴煌Z(yǔ)言下的文本長(zhǎng)度的不確定性，有可能導(dǎo)致某些語(yǔ)言下，文本空間不足而出現(xiàn)顯示錯(cuò)亂、重要信息被省略以及換行導(dǎo)致信息對(duì)齊等問(wèn)題，但也不是絕對(duì)的，布局方式的選擇，需要視功能的實(shí)際場(chǎng)景確定。
橫向布局的好處在于節(jié)約縱向空間，在信息不長(zhǎng)或者橫行空間較大的情況下仍可以使用。如果使用上下排列的方式，文本容納的空間也將會(huì)更大，換行時(shí)的顯示效果會(huì)相對(duì)更為可控，缺點(diǎn)是會(huì)占用過(guò)多的豎向空間。
4.空間預(yù)留
如果實(shí)際的功能場(chǎng)景更合適使用橫向布局，或者遇到一些定寬組件，需要我們提前考慮文本的預(yù)留空間，保證盡可能信息的露出，避免用戶(hù)無(wú)法理解內(nèi)容，產(chǎn)生困惑。
中文是信息密度相對(duì)來(lái)說(shuō)較高的語(yǔ)言文字，其他語(yǔ)言文本長(zhǎng)度會(huì)大于中文場(chǎng)景的文本長(zhǎng)度，因此不建議用中文的文本長(zhǎng)度作為標(biāo)準(zhǔn)來(lái)預(yù)留文本空間。
建議以英文為基礎(chǔ)進(jìn)行設(shè)計(jì)，可以更直觀地處理和判斷信息的兼容性，同時(shí)預(yù)留35%的文本拓展空間，可以避免翻譯成其他語(yǔ)言時(shí)文本空間不足。
5.文本內(nèi)容溢出
即使我們使用豎向布局或者預(yù)留足夠的文本空間盡量避免文本內(nèi)容溢出，有時(shí)候也會(huì)因?yàn)樵O(shè)備適配（比如小屏適配）、某一語(yǔ)言下（俄文）文本依然超長(zhǎng)等復(fù)雜問(wèn)題，導(dǎo)致文本內(nèi)容和預(yù)留的空間沖突，針對(duì)這種不可控的文本溢出的解決方式有四種：
精簡(jiǎn)文案；超出內(nèi)容省略；通過(guò)交互彌補(bǔ)空間限制；允許有限/無(wú)限制地?fù)Q行；
精簡(jiǎn)文案：和翻譯協(xié)商是否能使用更精簡(jiǎn)的文案，這種情況一般適用于固定寫(xiě)死的文本，比較局限。
超出內(nèi)容省略：這種情況適用于該文本的重要程度不高的情況，而且這些被省略的信息都可以在下一層級(jí)的頁(yè)面得到完整的展示。
通過(guò)交互彌補(bǔ)：Web端可以通過(guò)鼠標(biāo)懸停、表示省略說(shuō)明的圖標(biāo)（比如更多或者問(wèn)號(hào)）、或者滾動(dòng)顯示（比如公告欄）完整的信息。
允許換行：通過(guò)換行顯示更多文本內(nèi)容，要預(yù)留換行的空間。
使用哪種方案需要根據(jù)實(shí)際的情況決定，核心是在保證意圖能清晰地傳達(dá)的前提下，給用戶(hù)提供更好的用戶(hù)體驗(yàn)。
6.文字對(duì)齊
如前文所說(shuō)，不同語(yǔ)言在書(shū)面上的最小單位不同，為了更好的兼容各種情況，建議多用左對(duì)齊。因?yàn)橄裼⒄Z(yǔ)這種按單詞分界的語(yǔ)言，很難保證每行內(nèi)容寬度一致，并且中文常用的兩端對(duì)齊的效果也并不能適用。多語(yǔ)言場(chǎng)景段落的左對(duì)齊相比居中對(duì)齊，更能帶給用戶(hù)較好的閱讀體驗(yàn)。
7.RTL語(yǔ)言設(shè)計(jì)
在RTL語(yǔ)言中，閱讀順序是從右到左的，這與我們常見(jiàn)的從左到右（LTR）布局截然不同。因此，在設(shè)計(jì)RTL語(yǔ)言時(shí)，必須充分考慮這種閱讀順序的差異，以確保用戶(hù)能夠輕松地閱讀和理解內(nèi)容。可以把RTL粗略得看作LTR的整體界面水平鏡像，但也有例外。
對(duì)齊方式：右對(duì)齊，包括文本、控件都是右對(duì)齊方式。
文字：LTR數(shù)字、不需翻譯的外文，閱讀順序依舊是從左到右，但對(duì)齊方式需要按照RTL語(yǔ)言的右對(duì)齊方式。
圖標(biāo)：少部分圖標(biāo)不需要鏡像，比如不傳達(dá)方向的圖標(biāo)、logo、映射真實(shí)世界的圖標(biāo)、反斜線(xiàn)以及左右對(duì)稱(chēng)的。
8.圖標(biāo)
圖形需要滿(mǎn)足認(rèn)知包容性，可以多去觀察成熟的全球性產(chǎn)品，何時(shí)會(huì)使用到純圖標(biāo)的場(chǎng)景，又使用了什么樣的圖標(biāo)。基礎(chǔ)圖形如代表播放的三角形、代表喜歡的愛(ài)心型，都是比較具有大眾共識(shí)的。
另外一些本身模擬了常見(jiàn)物品的圖標(biāo)，也不容易出錯(cuò)，如代表錄制的攝像機(jī)、代表搜索的放大鏡等。
同時(shí)需要注意，盡量不要在圖標(biāo)上直接應(yīng)用文字，因?yàn)槲淖謭D標(biāo)只在對(duì)應(yīng)的語(yǔ)言下才有意義，適配其他語(yǔ)言時(shí)，就失去了其意義；也要避免出現(xiàn)貨幣、旗幟這些帶有強(qiáng)烈國(guó)家/地區(qū)特征的符號(hào)。
9.視覺(jué)動(dòng)線(xiàn)對(duì)齊
當(dāng)頁(yè)面中包含多類(lèi)信息時(shí)，應(yīng)保持同類(lèi)信息的視覺(jué)動(dòng)線(xiàn)是對(duì)齊的，以提高用戶(hù)瀏覽信息的效率，比如卡片里，應(yīng)保持標(biāo)題和內(nèi)容各自水平對(duì)齊。
當(dāng)一個(gè)卡片模塊中有多類(lèi)信息并存時(shí)，需要關(guān)注重要信息的水平對(duì)齊，確保閱讀動(dòng)線(xiàn)的流暢，便于用戶(hù)獲取信息。
10.圖文分離
如果項(xiàng)目沒(méi)有多語(yǔ)言的需求，我們有時(shí)候會(huì)直接將圖片連同文本一并切給開(kāi)發(fā)，但在多語(yǔ)言環(huán)境下，如果還是將文本直接嵌入圖片，我們則需要對(duì)圖片中所有的文本翻譯替換后導(dǎo)出，這不僅會(huì)增加開(kāi)發(fā)成本，而且也會(huì)增加應(yīng)用的大小。
對(duì)于圖片中的文本內(nèi)容進(jìn)行單獨(dú)處理，使圖片和文本之間分離，文本用代碼去實(shí)現(xiàn)，便于替換，這樣就可以在不替換圖片的情況下，通過(guò)代碼替換字符串來(lái)滿(mǎn)足多語(yǔ)言的需求。
11.地區(qū)標(biāo)準(zhǔn)
國(guó)際標(biāo)準(zhǔn)化組織已經(jīng)盡可能的將標(biāo)準(zhǔn)進(jìn)行統(tǒng)一，但由于各種復(fù)雜原因，不同地區(qū)之間也存在不同的標(biāo)準(zhǔn)，對(duì)于國(guó)際化的部分，建議采用基于國(guó)際標(biāo)準(zhǔn)顯示，對(duì)于本地化的部分，需要充分尊重該區(qū)域的標(biāo)準(zhǔn)顯示。
基于 ISO 標(biāo)準(zhǔn)顯示：日期、數(shù)字、貨幣、語(yǔ)言、復(fù)數(shù)、性別、鍵盤(pán)布局、區(qū)域代碼等。
五、組件設(shè)計(jì)
1.彈窗按鈕
表意復(fù)雜的彈窗按鈕，文案大概率會(huì)比較長(zhǎng)，我們可以將彈窗按鈕上下排版，謹(jǐn)慎使用左右排版，確保按鈕文案有較多的空間展示。
2.標(biāo)簽TAB
標(biāo)簽式Tab比純文字Tab更具可感知性和靈活性，在國(guó)內(nèi)，對(duì)于多個(gè)平級(jí)內(nèi)容組的切換控件，大家第一反應(yīng)便是Tab選項(xiàng)卡。tab選項(xiàng)卡根據(jù)選項(xiàng)在容器中的排布方式，可以分為等分式及滾動(dòng)式兩種類(lèi)型。
但這兩種類(lèi)型在多語(yǔ)言設(shè)計(jì)中都有一些局限性。如等分式的tab可能會(huì)出現(xiàn)某個(gè)選項(xiàng)文案過(guò)長(zhǎng)而溢出的情況；而滾動(dòng)式tab，通過(guò)間距分割不同選項(xiàng)，當(dāng)文案過(guò)長(zhǎng)或選項(xiàng)過(guò)多時(shí)，右側(cè)邊緣無(wú)法露出文字導(dǎo)致用戶(hù)無(wú)法感知這里其實(shí)可以右滑查看更多選項(xiàng)。
因此，多語(yǔ)言設(shè)計(jì)中建議使用標(biāo)簽形式選項(xiàng)卡。首先這種形式對(duì)文案的長(zhǎng)度沒(méi)有什么限制，因此更靈活；同時(shí)標(biāo)簽形式是通過(guò)線(xiàn)框或者面分割每一個(gè)選項(xiàng)，選項(xiàng)之間排列更緊密，出現(xiàn)右滑滾動(dòng)時(shí)選項(xiàng)更容易被用戶(hù)感知。
3.按鈕組合
豎排的按鈕組合相比橫排按鈕，按鈕內(nèi)的文本擁有足夠的寬度，能兼容更多信息，因此在多語(yǔ)言產(chǎn)品下的使用會(huì)更為廣泛。
4.公告欄
在移動(dòng)端的多語(yǔ)言產(chǎn)品中，通知欄組件一行容納不下全部文案的情況非常常見(jiàn)。在文本超出通知欄寬度的情況下，需要靈活使用信息橫向滾動(dòng)、或是帶操作的方式，允許用戶(hù)進(jìn)入下一級(jí)或配合氣泡、彈窗，確保用戶(hù)有辦法能獲知完整內(nèi)容。
5.表單
常見(jiàn)的表單輸入框，通常為了保證右側(cè)輸入?yún)^(qū)域的內(nèi)容展示，會(huì)犧牲左側(cè)字段標(biāo)題的寬度，而導(dǎo)致左側(cè)文本需要省略或折行，在多語(yǔ)言的情況下，會(huì)使得左側(cè)的空間更加局促，以下是幾個(gè)常見(jiàn)的解決方案。
標(biāo)題和內(nèi)容橫向排版，標(biāo)題超長(zhǎng)則進(jìn)行換行處理，節(jié)省縱向空間，缺點(diǎn)是標(biāo)題和內(nèi)容的文本空間比較局促。
將標(biāo)題放置在輸入提示詞，比較簡(jiǎn)潔，但標(biāo)題和內(nèi)容只能同時(shí)存在一個(gè)，適用于表單項(xiàng)較少的情況，表單項(xiàng)較多的話(huà)會(huì)降低信息的易讀性。
標(biāo)題和內(nèi)容豎向排版，可以保證無(wú)論是字段標(biāo)題還是輸入內(nèi)容均可以在足夠的寬度內(nèi)完整展示，缺點(diǎn)是會(huì)犧牲縱向空間。
Powered by Froala Editor
4
作品
18
粉絲
1
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)