多語言場景設(shè)計是指在同一個設(shè)計中同時包含多種語言的設(shè)計。這種設(shè)計策略的目的是為了滿足不同地區(qū)和文化背景的用戶需求，讓他們能夠更好地理解和使用產(chǎn)品。本文作者就從國際化設(shè)計和本地化設(shè)計兩方面，淺談了多語言場景設(shè)計策略，歡迎閱讀。

更多出海設(shè)計干貨：

一、導(dǎo)讀

隨著全球化貿(mào)易的進(jìn)一步加深，互聯(lián)網(wǎng)產(chǎn)品陸續(xù)選擇“出?！保罱óa(chǎn)品國際化和多語言設(shè)計已經(jīng)成為必不可少的需求。

多語言設(shè)計需要考慮到不同語言和文化之間的差異，以確保產(chǎn)品的設(shè)計和界面能夠適應(yīng)不同的用戶需求和習(xí)慣。

通過對多語言設(shè)計場景的探索與實踐，提升產(chǎn)品的易用性和用戶體驗，可以幫助產(chǎn)品在全球范圍內(nèi)更好地推廣，從而獲得一席之地。今天就從國際化設(shè)計和本地化設(shè)計兩方面，淺談一下多語言場景設(shè)計策略。

二、國際化/本地化區(qū)別

i18n 和 L10n 是兩個經(jīng)常在軟件開發(fā)和多語言場景設(shè)計中提到的縮寫。它們分別代表國際化（internationalization）和本地化（localization），是實現(xiàn)多語言場景設(shè)計的兩個核心概念。

i18n 是“internationalization”的縮寫，其中的“18”代表了單詞“internationalization”中的 18 個字母，即 i 后面跟了 18 個字符。國際化設(shè)計目的是讓產(chǎn)品能夠輕松地適應(yīng)不同的語言和文化環(huán)境。

L10n 是“l(fā)ocalization”的縮寫，其中的“10”代表了單詞“l(fā)ocalization”中的 10 個字母，即 L 后面跟了 10 個字符。L10n 是指根據(jù)不同的語言和文化環(huán)境，對設(shè)計進(jìn)行適當(dāng)?shù)恼{(diào)整和修改，以使其符合當(dāng)?shù)氐姆ㄒ?guī)、標(biāo)準(zhǔn)和習(xí)慣，提供更好的用戶體驗。

i18n 和 L10n 的區(qū)別在于，i18n 是指讓軟件能夠適應(yīng)不同的語言和文化環(huán)境，而 L10n 是指將產(chǎn)品適當(dāng)?shù)卣{(diào)整和修改，以符合當(dāng)?shù)氐恼Z言和文化環(huán)境。兩者結(jié)合起來，可以實現(xiàn)跨語言和跨文化的設(shè)計語言，提供更好的用戶體驗。

三、國際化設(shè)計

1. 不同語言的差異

國際化設(shè)計需要考慮不同語言之間的差異，包括字符長度、詞匯分界、閱讀順序、筆畫形態(tài)等方面

①字符長度

通常拉丁文比中文、日文、韓文、泰文等亞洲語言的字符更長，所以對于外語不太好的同學(xué)，在設(shè)計中可以先用英文機翻，用來占位最為合適，長度平均在中文的 2.5 倍以上。確保文本可以適應(yīng)不同語言的字符長度，避免出現(xiàn)文本溢出或者字體錯亂等問題。

②詞匯分界

詞匯分界是指在語言中，將單詞或短語分開的規(guī)則和方式。在國際化設(shè)計中，不同語言的詞匯分界方式也會對界面設(shè)計產(chǎn)生影響。所以需要采用不同的方式來處理文本和布局，以確保用戶能夠正確理解和使用產(chǎn)品。

③閱讀順序

在規(guī)劃信息布局的時候，我們需要特別考慮該國家的閱讀順序。比如，英語包括大部分拉丁語言是從左到右書寫，而阿拉伯語是從右到左書寫。在日語等一些東亞語言中，還存在從上到下的書寫方式。在進(jìn)行國際化設(shè)計時，需要仔細(xì)考慮不同語言的閱讀順序，以確保在不同的語言和文化環(huán)境中都能夠提供良好的用戶體驗。

④信息對齊

信息對齊同樣也要遵循該國家的閱讀順序。比如在阿拉伯語設(shè)計中，模塊排列的順序應(yīng)該是從右到左。這意味著頁面上的第一個模塊應(yīng)該是在最右側(cè)，而最后一個模塊應(yīng)該是在最左側(cè)。

⑤筆畫形態(tài)

當(dāng)字體的筆畫曲率變化較大時，不同字體之間的差異可能會更加顯著，這意味著選擇適合多語言場景的字體范圍會更小。

因此，設(shè)計師需要選擇一種具有良好可讀性和可識別性的字體，并確保其能夠適應(yīng)不同語言的筆畫形態(tài)。

四、本地化設(shè)計

本地化設(shè)計通常包括：書寫格式、顏色偏好、文化禁忌、圖騰/不詳物。根據(jù)不同地區(qū)文化和語言的需求，對產(chǎn)品進(jìn)行本地化的調(diào)整和優(yōu)化，以便更好的提升本地用戶的用戶體驗和滿意度。

1. 書寫格式

不同地區(qū)和不同語言的書寫格式可能會有所不同，包括日期格式和地址格式等。

①日期格式

在美國日期通常以日-月-年的順序書寫，例如：4/11/2023 表示 2023 年 4 月 11 日。但在東南亞，日期通常以月-日-年的順序書寫，例如：11/4/2023 表示 2023 年 4 月 11 日。

除了日期的順序外，日期的分隔符也可能有所不同。例如，在美國，日期通常使用斜杠“/”分隔，而在歐洲，日期通常使用破折號“-”分隔。

②地址格式

在不同國家和地區(qū)，地址的書寫格式也可能會有所不同。例如，在美國，地址通常按照以下順序書寫：房間號、樓層、樓號、道路、地區(qū)、市、省、國家。

除了順序外，地址中的單位名稱和縮寫也可能會有所不同。例如，在美國，州通常使用兩個字母的縮寫，例如 CA 代表加利福尼亞州，而在加拿大，省和地區(qū)通常使用一個字母的縮寫，例如 BC 代表哥倫比亞省。

2. 貨幣單位

不同國家和地區(qū)使用的貨幣可能會有所不同，甚至相同貨幣的符號也可能會不同。

①貨幣 ISO 代碼

ISO 4217 是一個國際標(biāo)準(zhǔn)，用于定義各種貨幣和貨幣符號的代碼。每種貨幣都有一個獨特的三位字母代碼，例如美元的 ISO 代碼為 USD，歐元的 ISO 代碼為 EUR，日元的 ISO 代碼為 JPY。

②貨幣符號

貨幣符號是用來表示貨幣的符號或字符，通常在貨幣數(shù)值前面或后面放置。不同的國家和地區(qū)可能會使用不同的貨幣符號，甚至相同的貨幣也可能會使用不同的符號。例如，美元符號為$，歐元符號為€，日元符號為￥。

在進(jìn)行本地化設(shè)計時，需要確保使用正確的貨幣符號和 ISO 代碼，以便用戶能夠準(zhǔn)確地識別和理解貨幣。此外，還需要注意在某些國家和地區(qū)，貨幣符號的位置可能與你所熟悉的位置不同。例如，在美國，貨幣符號通常放在數(shù)值前面，例如$10.00，而在法國，貨幣符號通常放在數(shù)值后面，例如 10,00€。

在進(jìn)行本地化設(shè)計時，需要考慮到不同國家和地區(qū)使用的貨幣單位和貨幣符號的差異，以確保產(chǎn)品的可用性和易用性。

3. 顏色偏好

當(dāng)我們考慮本地化設(shè)計時，需要準(zhǔn)確了解特定文化中的顏色偏好。

在國內(nèi)紅色代表著幸運和喜慶。紅色是中國傳統(tǒng)文化中的重要顏色，而紅包是在重要場合（如春節(jié)和婚禮）用于贈送禮物的傳統(tǒng)方式。所以，在國內(nèi)設(shè)計中，紅色是常見的主要顏色。

在馬來西亞，綠色代表著穆斯林的信仰。因此，綠色在馬來西亞的設(shè)計中非常普遍。綠色還被視為幸運的顏色，所以在許多馬來西亞商業(yè)品牌的標(biāo)志中也出現(xiàn)了綠色。

在日本，白色代表著純潔和清新。白色在日本文化中是非常重要的顏色，因為它與寒冷的冬季和新年的慶?；顒佑嘘P(guān)。白色還被認(rèn)為是傳統(tǒng)和簡潔的顏色，因此在日本設(shè)計中，白色是非常普遍的。

在印度，紫色通常與宗教和精神相關(guān)聯(lián)。在印度的某些地區(qū)，紫色還與喪禮有關(guān)，因此在設(shè)計中應(yīng)該謹(jǐn)慎使用。盡管如此，在印度的一些傳統(tǒng)服飾和文化活動中，紫色仍然是常見的顏色。

理解本地文化對顏色的偏好和符號使用非常重要，以確保設(shè)計的合適性和文化敏感性。

4. 圖騰/不祥物

不同的文化和地區(qū)可能對特定的動物或物品有不同的象征意義和文化禁忌，設(shè)計師需要了解并尊重這些文化差異，以避免造成不必要的誤解或冒犯。

例如，在泰國，狗被認(rèn)為是不吉利的動物，因此在泰國的設(shè)計中應(yīng)避免使用狗這個圖騰或形象。在穆斯林國家，豬被視為一種不潔動物，因此應(yīng)避免在設(shè)計中使用與豬有關(guān)的圖騰或形象。

在設(shè)計時，需要考慮到這些文化差異，并確保設(shè)計中不包含任何可能引起冒犯的元素。這涉及到對目標(biāo)受眾文化的深入了解和尊重，以確保設(shè)計能夠真正與目標(biāo)用戶產(chǎn)生共鳴。

5. 文化禁忌

為了避免文化禁忌，需要對不同文化、宗教和地域的文化禁忌進(jìn)行了解和尊重。在設(shè)計過程中，可以采用多樣性、包容性和尊重的原則，以確保設(shè)計不會侵犯任何人的權(quán)利或引起不必要的爭議。如果插畫中需要體現(xiàn)人物，可以在性別、種族、發(fā)色、膚色上提供多種組合方案

五、語言差異會影響什么

剛剛我們已經(jīng)了解了國際化和本地化帶來的多語言差異。接下來，我將從布局拓展性、對齊方式、文字規(guī)范這三個方面分享一些實戰(zhàn)經(jīng)驗。

1. 布局拓展性

①導(dǎo)航

在設(shè)計導(dǎo)航時，可以用英文作為寬度定位的一種方法，但是需要考慮不同語言的文字長度差異，以便適應(yīng)不同的屏幕大小和分辨率。

另外，為了更好地適配多語言，可以考慮使用展開和收起的功能，使得導(dǎo)航菜單可以根據(jù)不同語言的文字長度進(jìn)行靈活調(diào)整，避免出現(xiàn)排版錯亂或者溢出的問題。同時，在設(shè)計導(dǎo)航時，可以輔以文字說明或者圖標(biāo)提示，使得用戶更容易理解導(dǎo)航功能，提升用戶體驗

②標(biāo)簽頁

在中文場景下，標(biāo)簽頁通常采用空間等分的設(shè)計。然而，由于不同語言的文本長度不確定，更適合采用等間距的設(shè)計形式，以便更好地適應(yīng)不同語言的長度變化。

③數(shù)據(jù)錄入/詳情

在多語言的設(shè)計中，為了保證數(shù)據(jù)的可讀性和結(jié)構(gòu)的一致性，我們通常采用頂部標(biāo)簽的設(shè)計形式，用于展示錄入和詳情等結(jié)構(gòu)化數(shù)據(jù)。

④數(shù)據(jù)篩選區(qū)

由于字符長度不確定性，數(shù)據(jù)篩選區(qū)這里推薦三種展示方式：

方案一：頂部標(biāo)簽

這種方式適用于篩選條件比較少的情況，可以在頁面頂部展示所有篩選條件，用戶可以直接選擇需要的條件進(jìn)行篩選，也可以通過點擊標(biāo)簽來編輯條件。這種方式的好處是簡單直接，易于操作，但當(dāng)篩選條件較多時，頁面可能會顯得擁擠，不太美觀。

方案二：行內(nèi)標(biāo)簽+已選結(jié)果平鋪

這種方式適用于篩選條件較多的情況，可以在頁面上方展示所有篩選條件的行內(nèi)標(biāo)簽，并且在下方展示已選的篩選結(jié)果，用戶可以通過點擊標(biāo)簽來選擇或取消篩選條件，同時可以清晰地看到已選的篩選條件。這種方式的好處是可以減少頁面的擁擠感，同時也可以提供用戶清晰的篩選結(jié)果展示。

方案三：通過抽屜+折疊面板的形式提升拓展性

篩選條件較多時也可以采用這種方式，可以通過抽屜的形式展示更多的篩選條件，折疊面板可以隱藏多余的篩選條件，減少干擾信息，讓頁面更簡潔，但是抽屜需要用戶點擊才能展開，相對于方案一和方案二，需要額外操作一步，篩選條件長度不會影響整體的秩序感

以上三種方案的選擇，取決于具體場景和需求。需要根據(jù)實際情況選擇最合適的方案，提供更好的用戶體驗。

⑤操作入口

在操作入口的設(shè)計中，橫向排布的設(shè)計在多語言文本長度不確定的情況下，容易出現(xiàn)文本溢出、折行、對齊不整齊等問題。這些問題會降低頁面的可讀性和美觀度，影響用戶的使用體驗。相比之下，縱向排布的設(shè)計更能保持布局的整齊度，同時對于多語言的適配更加友好。

⑥列表卡片

在多語言設(shè)計中，文本長度的不確定性會對布局產(chǎn)生影響，因此，一些常見的布局方式可能需要重新考慮。一行幾個小圖的布局方式可能導(dǎo)致圖片與文本對齊不準(zhǔn)確，使得頁面顯得混亂不清。相比之下，采用左圖右文的布局方式可以更好地保持頁面的信息可讀性和美觀程度，確保文本與圖片之間有足夠的空間，并且在不同語言的情況下，文本的長度不會影響頁面的整體布局。此外，該布局方式還具有較強的包容性和拓展性，因為它可以適應(yīng)不同數(shù)量和尺寸的圖片和文本，從而在自由的在不同的場景中使用。

⑦用縮寫代替全拼

在設(shè)計日期組件和可視化圖表時，可以采用縮寫代替全拼，來適應(yīng)多語言的差異。

⑧全球共識性的圖標(biāo)

具有全球共識性的圖標(biāo)，可脫離文字獨立使用。當(dāng)圖標(biāo)不具備全球共識性時，用戶可能無法準(zhǔn)確地理解它們的含義。這時，可以采用 hover 氣泡的方式，通過鼠標(biāo)懸?；螯c擊等方式來提供解釋和說明，以確保用戶能夠正確地理解圖標(biāo)的含義。同時，我們還可以在設(shè)計圖標(biāo)時，盡量保持簡潔明了，避免使用過于復(fù)雜的形狀或顏色，以便用戶更容易理解。

2. 對齊方式

①優(yōu)先讓重要的內(nèi)容保持固定、水平對齊

優(yōu)先讓重要的內(nèi)容保持固定、水平對齊，這有助于提高頁面的整齊度和信息的可讀性

②段落文本優(yōu)先用左對齊

英文作為分界詞匯時，建議不要使用兩端對齊的方式，這樣會導(dǎo)致視覺上的不自然和間隙不一致。比較好的方式是采用左對齊或居中對齊，讓文本更易讀且視覺效果更好。

防止出現(xiàn)段落的最后一行只有一個單詞，這樣的情況叫做“widow”，有時也被稱作“斷頭詞”（orphan word）。這會導(dǎo)致視覺上的不協(xié)調(diào)和閱讀上的不適感。為了避免這種情況，可以通過調(diào)整行間距或字間距、增加或減少行數(shù)等方式來解決。最好的方式是盡量避免出現(xiàn) widow，可以通過微調(diào)文字長度或段落長度等方式來避免這種情況。

③卡片底部文字，底對齊

卡片底部文字，底對齊，防止翻譯之后單行文字懸空

3. 文字規(guī)范

• 筆畫形態(tài)不規(guī)則的文字，最好不要采用特殊字體包
• 段落文本行高同樣需要滿足：字號+8 的原則
• 拉丁系文字可以在字重、字號設(shè)定上更靈活

六、結(jié)語

多語言設(shè)計場景雖然常見，但是設(shè)計細(xì)節(jié)關(guān)注度較低，很多設(shè)計師無論是否擁有多語言設(shè)計經(jīng)驗都習(xí)慣憑主觀直覺設(shè)計。因此，我們對多語言設(shè)計抽絲剝繭，總結(jié)出比較系統(tǒng)化的設(shè)計方法。希望這篇文章可以幫助到更多剛接觸多語言業(yè)務(wù)的設(shè)計師。