亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

一、背景

產(chǎn)品要在全球不同區(qū)域發(fā)布，就繞不開「國際化」和「本地化」兩個概念，二者背后有不同的處理邏輯。

國際化（Internationalization），簡稱「i18n」，是指用一套產(chǎn)品方案，來面對不同地區(qū)的用戶，意味著兼容，產(chǎn)品開發(fā)成本低。

本地化（localization），簡稱「l10n」，是指產(chǎn)品為特定地區(qū)進(jìn)行特殊定制，匹配該區(qū)域的語言文字、當(dāng)?shù)匚幕c社會習(xí)慣等，針對性地進(jìn)行本地運營。

在具體的產(chǎn)品中只有均衡二者才能更好服務(wù)全球不同文化背景的用戶。

二、目的

世界是多元化的，不同地區(qū)之間存在諸多差異，諸如文化習(xí)俗、語言體系、社會習(xí)慣、政策法規(guī)，如果僅憑借對中文產(chǎn)品的接觸習(xí)慣來做的國際化產(chǎn)品，中文看起來完美合理的設(shè)計，卻不一定符合其他國家地區(qū)的用戶使用習(xí)慣，給用戶帶來認(rèn)知障礙，便很可能遭遇「水土不服」，慘淡收場。

本文對國際化和本地化設(shè)計中的多語言設(shè)計常遇到的問題進(jìn)行歸納總結(jié)，遵循相關(guān)設(shè)計要點，有效提升產(chǎn)品和應(yīng)用的全球化質(zhì)量，保證信息可以清晰明確的傳遞給不同文化背景的用戶。

三、語種差異

語言和文字的差異最直觀地體現(xiàn)了全球多元文化，這里我們只探討對界面設(shè)計造成比較大影響的差異，并探討這些差異是如何對界面設(shè)計造成影響。

通過對不同語言文字進(jìn)行歸納總結(jié)，我們發(fā)現(xiàn)文字主要有四個差異：

字符形態(tài)、信息密度、詞匯分界、閱讀順序。

1.字符形態(tài)

字符是語句的基本構(gòu)成單位，不同的文化發(fā)展背景下誕生出了形態(tài)各異的字符樣式，而有部分語言會共用一套字符體系，比如英文、法文等都用的是拉丁字母。按照不同的文字形態(tài)基本可以分成以下四種類型：

拉丁字母，以英語、法語、德語為代表

西里爾字母，以俄語、烏克蘭語為代表

方格字，以漢語、日語、韓語為代表

復(fù)雜圖形字符，以泰語、阿拉伯語為代表

拉丁字母和西里爾字母都由希臘字母演變而來，二者同源，字符筆劃相對簡單，通常由直線或者規(guī)整弧線構(gòu)成。

而像阿拉伯字母、泰文等字符，具有更多復(fù)雜組成和特殊曲度，這些會影響字體的選擇，進(jìn)而影響文本的可讀性。

以漢字為代表的方格字是等寬字符，筆劃也較多，整體視覺感受比其他類型的字符大。

在相同字體、同等字號下，由于筆畫復(fù)雜的程度以及字符結(jié)構(gòu)，不同語種的字符的視覺大小也不一樣，并且某些字符會帶有發(fā)音符號，這差異也會影響字符在行文排版時的負(fù)空間大小。

下圖是同一字號下不同語言文字對比，不難發(fā)現(xiàn)方格類字符比其他類型的字符視覺感受要大，泰文相對拉丁字母來說也比較小。

2.信息密度

不同語言文字的信息密度是不一樣的，換句話來說，同樣含義的內(nèi)容進(jìn)行翻譯后，得到的文本長度可能會有較大的差異。

如何通過設(shè)計兼容這些信息，正是做多語言設(shè)計最大的難點所在，而且這個差異帶來的挑戰(zhàn)在產(chǎn)品國際化的設(shè)計過程十分常見。

以下是在“發(fā)送郵件”的相同含義下，不同語言文字的文本長度對比，可以看到中文的文本長度比日文、英文、俄文、泰文要短，俄文的長度甚至幾乎是中文的4倍。在更復(fù)雜的國際化產(chǎn)品中，這個差異可能會更明顯。

3.詞匯分界

語言還分為帶有詞匯分界和不帶有詞匯分界兩種情況。帶有詞匯分界的語言有英語、俄語等，分界意味著他們的語句以單詞為最小單位。而中文、泰語等語言是沒有分界的，一個語句中除了標(biāo)點符號分隔，字符都是相連的。

詞匯分界影響著段落的布局排版，有詞匯分界意味著，當(dāng)文本需要換行時，需要避免從詞匯中間截斷換行，只能在詞匯分界處換行，段落尾部無法對齊，影響美觀程度，增加了閱讀難度。

4.閱讀順序

閱讀順序分為 LTR (Left to Right)和 RTL (Right to Left)兩種。

我們常見的絕大部分語言都是從左到右的閱讀順序，像是中文、英語、法語、德語、西班牙語等在內(nèi)的許多語言。

還有一些語言上是從右到左的閱讀順序，例如，阿拉伯語、希伯來語等。不同的閱讀順序，決定了布局時信息對齊、元素排布、甚至圖標(biāo)圖示，都可能存在不同的規(guī)則。

下圖是分別是LTR語言和RTL語言下的iOS系統(tǒng)設(shè)置界面。

關(guān)于不同語言文字的差異點還有很多，以上的四點只是對界面適配設(shè)計影響最大的。下面的設(shè)計建議就是圍繞如何解決文字差異化帶來的適配問題。

四、設(shè)計建議

1.字體選擇

首先選擇一款合格的全球化字體

，確保該字體支持的語言數(shù)量要足夠多，同時還要滿足不同語言的字符可讀性和可識別性。建議設(shè)計師可以選擇系統(tǒng)提供的默認(rèn)字體，因為無論是蘋果、安卓還是微軟，它們在全球化字體的優(yōu)化上做得都比較完善、成熟，具體的字體使用可以查閱相關(guān)系統(tǒng)的設(shè)計開發(fā)文檔。

謹(jǐn)慎使用斜體，其一是不能保證所有語言文字都支持斜體，其二是斜體有可能造成某些語言文字難于閱讀。

字重選擇需要克制，設(shè)計師常常使用不同字重文字塑造不同層級，但我們無法確保不同語言的文字都有對應(yīng)的字重，以蘋方為例，簡體中文支持六款字重，從Ultralight到Semibold，其他語種的可能只有三款字重。如果使用的字重層級過多，在中文狀態(tài)下，字體的層級分明，但切換成其他語言（字重少的），字體層級可能會丟失。

除網(wǎng)頁超鏈接外，不建議界面文本使用下劃線，因為某些語言字符下方添加會發(fā)音符號比如阿拉伯文、西城文，下劃線會影響字體可讀性。

2.字號和行高

前文提到在同等字號下，不同語言字符的視覺大小是不一樣，比如漢字會比拉丁字母要大，所以字號和行高也要相應(yīng)做調(diào)整。

對于本地化產(chǎn)品，可以只考慮本地語言字符的特性，針對性進(jìn)行設(shè)計，比如國內(nèi)的產(chǎn)品，只需針對中文做設(shè)計；對于國際化產(chǎn)品，遇到的場景較為復(fù)雜，需要適配的語言較多時，如果針對每種語言文字單獨做設(shè)計的話，設(shè)計和開發(fā)的工作量會非常大，這時我們可以基于產(chǎn)品用戶群體量級最大的語言文字為準(zhǔn)來制定字號以及行高。

在多語言環(huán)境下，同一文本長度不確定，有可能是單行，有可能是雙行，因此建議單行文本和多行文本統(tǒng)一行高，可以以字號+8為基礎(chǔ)來設(shè)置行高，對于大段文字，可以適當(dāng)增加行高保證閱讀的舒適性，標(biāo)題適當(dāng)減小行保持緊湊性。

3.布局

謹(jǐn)慎使用橫向布局，因為不同語言下的文本長度的不確定性，有可能導(dǎo)致某些語言下，文本空間不足而出現(xiàn)顯示錯亂、重要信息被省略以及換行導(dǎo)致信息對齊等問題，但也不是絕對的，布局方式的選擇，需要視功能的實際場景確定。

橫向布局的好處在于節(jié)約縱向空間，在信息不長或者橫行空間較大的情況下仍可以使用。如果使用上下排列的方式，文本容納的空間也將會更大，換行時的顯示效果會相對更為可控，缺點是會占用過多的豎向空間。

4.空間預(yù)留

如果實際的功能場景更合適使用橫向布局，或者遇到一些定寬組件，需要我們提前考慮文本的預(yù)留空間，保證盡可能信息的露出，避免用戶無法理解內(nèi)容，產(chǎn)生困惑。

中文是信息密度相對來說較高的語言文字，其他語言文本長度會大于中文場景的文本長度，因此不建議用中文的文本長度作為標(biāo)準(zhǔn)來預(yù)留文本空間。

建議以英文為基礎(chǔ)進(jìn)行設(shè)計，可以更直觀地處理和判斷信息的兼容性，同時預(yù)留35%的文本拓展空間，可以避免翻譯成其他語言時文本空間不足。

5.文本內(nèi)容溢出

即使我們使用豎向布局或者預(yù)留足夠的文本空間盡量避免文本內(nèi)容溢出，有時候也會因為設(shè)備適配（比如小屏適配）、某一語言下（俄文）文本依然超長等復(fù)雜問題，導(dǎo)致文本內(nèi)容和預(yù)留的空間沖突，針對這種不可控的文本溢出的解決方式有四種：

精簡文案；超出內(nèi)容省略；通過交互彌補(bǔ)空間限制；允許有限/無限制地?fù)Q行；

精簡文案：和翻譯協(xié)商是否能使用更精簡的文案，這種情況一般適用于固定寫死的文本，比較局限。

超出內(nèi)容省略：這種情況適用于該文本的重要程度不高的情況，而且這些被省略的信息都可以在下一層級的頁面得到完整的展示。

通過交互彌補(bǔ)：Web端可以通過鼠標(biāo)懸停、表示省略說明的圖標(biāo)（比如更多或者問號）、或者滾動顯示（比如公告欄）完整的信息。

允許換行：通過換行顯示更多文本內(nèi)容，要預(yù)留換行的空間。

使用哪種方案需要根據(jù)實際的情況決定，核心是在保證意圖能清晰地傳達(dá)的前提下，給用戶提供更好的用戶體驗。

6.文字對齊

如前文所說，不同語言在書面上的最小單位不同，為了更好的兼容各種情況，建議多用左對齊。因為像英語這種按單詞分界的語言，很難保證每行內(nèi)容寬度一致，并且中文常用的兩端對齊的效果也并不能適用。多語言場景段落的左對齊相比居中對齊，更能帶給用戶較好的閱讀體驗。

7.RTL語言設(shè)計

在RTL語言中，閱讀順序是從右到左的，這與我們常見的從左到右（LTR）布局截然不同。因此，在設(shè)計RTL語言時，必須充分考慮這種閱讀順序的差異，以確保用戶能夠輕松地閱讀和理解內(nèi)容?？梢园裄TL粗略得看作LTR的整體界面水平鏡像，但也有例外。

對齊方式：右對齊，包括文本、控件都是右對齊方式。

文字：LTR數(shù)字、不需翻譯的外文，閱讀順序依舊是從左到右，但對齊方式需要按照RTL語言的右對齊方式。

圖標(biāo)：少部分圖標(biāo)不需要鏡像，比如不傳達(dá)方向的圖標(biāo)、logo、映射真實世界的圖標(biāo)、反斜線以及左右對稱的。

8.圖標(biāo)

圖形需要滿足認(rèn)知包容性，可以多去觀察成熟的全球性產(chǎn)品，何時會使用到純圖標(biāo)的場景，又使用了什么樣的圖標(biāo)?；A(chǔ)圖形如代表播放的三角形、代表喜歡的愛心型，都是比較具有大眾共識的。

另外一些本身模擬了常見物品的圖標(biāo)，也不容易出錯，如代表錄制的攝像機(jī)、代表搜索的放大鏡等。

同時需要注意，盡量不要在圖標(biāo)上直接應(yīng)用文字，因為文字圖標(biāo)只在對應(yīng)的語言下才有意義，適配其他語言時，就失去了其意義；也要避免出現(xiàn)貨幣、旗幟這些帶有強(qiáng)烈國家/地區(qū)特征的符號。

9.視覺動線對齊

當(dāng)頁面中包含多類信息時，應(yīng)保持同類信息的視覺動線是對齊的，以提高用戶瀏覽信息的效率，比如卡片里，應(yīng)保持標(biāo)題和內(nèi)容各自水平對齊。

當(dāng)一個卡片模塊中有多類信息并存時，需要關(guān)注重要信息的水平對齊，確保閱讀動線的流暢，便于用戶獲取信息。

10.圖文分離

如果項目沒有多語言的需求，我們有時候會直接將圖片連同文本一并切給開發(fā)，但在多語言環(huán)境下，如果還是將文本直接嵌入圖片，我們則需要對圖片中所有的文本翻譯替換后導(dǎo)出，這不僅會增加開發(fā)成本，而且也會增加應(yīng)用的大小。

對于圖片中的文本內(nèi)容進(jìn)行單獨處理，使圖片和文本之間分離，文本用代碼去實現(xiàn)，便于替換，這樣就可以在不替換圖片的情況下，通過代碼替換字符串來滿足多語言的需求。

11.地區(qū)標(biāo)準(zhǔn)

國際標(biāo)準(zhǔn)化組織已經(jīng)盡可能的將標(biāo)準(zhǔn)進(jìn)行統(tǒng)一，但由于各種復(fù)雜原因，不同地區(qū)之間也存在不同的標(biāo)準(zhǔn)，對于國際化的部分，建議采用基于國際標(biāo)準(zhǔn)顯示，對于本地化的部分，需要充分尊重該區(qū)域的標(biāo)準(zhǔn)顯示。

基于 ISO 標(biāo)準(zhǔn)顯示：日期、數(shù)字、貨幣、語言、復(fù)數(shù)、性別、鍵盤布局、區(qū)域代碼等。

五、組件設(shè)計

1.彈窗按鈕

表意復(fù)雜的彈窗按鈕，文案大概率會比較長，我們可以將彈窗按鈕上下排版，謹(jǐn)慎使用左右排版，確保按鈕文案有較多的空間展示。

2.標(biāo)簽TAB

標(biāo)簽式Tab比純文字Tab更具可感知性和靈活性，在國內(nèi)，對于多個平級內(nèi)容組的切換控件，大家第一反應(yīng)便是Tab選項卡。tab選項卡根據(jù)選項在容器中的排布方式，可以分為等分式及滾動式兩種類型。

但這兩種類型在多語言設(shè)計中都有一些局限性。如等分式的tab可能會出現(xiàn)某個選項文案過長而溢出的情況；而滾動式tab，通過間距分割不同選項，當(dāng)文案過長或選項過多時，右側(cè)邊緣無法露出文字導(dǎo)致用戶無法感知這里其實可以右滑查看更多選項。

因此，多語言設(shè)計中建議使用標(biāo)簽形式選項卡。首先這種形式對文案的長度沒有什么限制，因此更靈活；同時標(biāo)簽形式是通過線框或者面分割每一個選項，選項之間排列更緊密，出現(xiàn)右滑滾動時選項更容易被用戶感知。

3.按鈕組合

豎排的按鈕組合相比橫排按鈕，按鈕內(nèi)的文本擁有足夠的寬度，能兼容更多信息，因此在多語言產(chǎn)品下的使用會更為廣泛。

4.公告欄

在移動端的多語言產(chǎn)品中，通知欄組件一行容納不下全部文案的情況非常常見。在文本超出通知欄寬度的情況下，需要靈活使用信息橫向滾動、或是帶操作的方式，允許用戶進(jìn)入下一級或配合氣泡、彈窗，確保用戶有辦法能獲知完整內(nèi)容。

5.表單

常見的表單輸入框，通常為了保證右側(cè)輸入?yún)^(qū)域的內(nèi)容展示，會犧牲左側(cè)字段標(biāo)題的寬度，而導(dǎo)致左側(cè)文本需要省略或折行，在多語言的情況下，會使得左側(cè)的空間更加局促，以下是幾個常見的解決方案。

標(biāo)題和內(nèi)容橫向排版，標(biāo)題超長則進(jìn)行換行處理，節(jié)省縱向空間，缺點是標(biāo)題和內(nèi)容的文本空間比較局促。

將標(biāo)題放置在輸入提示詞，比較簡潔，但標(biāo)題和內(nèi)容只能同時存在一個，適用于表單項較少的情況，表單項較多的話會降低信息的易讀性。

標(biāo)題和內(nèi)容豎向排版，可以保證無論是字段標(biāo)題還是輸入內(nèi)容均可以在足夠的寬度內(nèi)完整展示，缺點是會犧牲縱向空間。

Powered by Froala Editor