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

01 導(dǎo)讀

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

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

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

02 國(guó)際化/本地化區(qū)別

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

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

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

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

03 國(guó)際化設(shè)計(jì)

1 不同語言的差異

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

1.1 字符長(zhǎng)度

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

1.2 詞匯分界

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

1.3 閱讀順序

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

1.4 信息對(duì)齊

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

1.5 筆畫形態(tài)

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

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

04 本地化設(shè)計(jì)

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

1 書寫格式

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

1.1 日期格式

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

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

1.2 地址格式

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

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

2 貨幣單位

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

2.1 貨幣ISO代碼

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

2.2 貨幣符號(hào)

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

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

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

3 顏色偏好

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

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

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

在日本，白色代表著純潔和清新。白色在日本文化中是非常重要的顏色，因?yàn)樗c寒冷的冬季和新年的慶?；顒?dòng)有關(guān)。白色還被認(rèn)為是傳統(tǒng)和簡(jiǎn)潔的顏色，因此在日本設(shè)計(jì)中，白色是非常普遍的。

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

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

4 圖騰/不祥物

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

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

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

5 文化禁忌

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

05 語言差異會(huì)影響什么

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

1 布局拓展性

1.1 導(dǎo)航

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

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

1.2 標(biāo)簽頁

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

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

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

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

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

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

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

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

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

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

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

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

1.5 操作入口

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

1.6 列表卡片

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

1.7 用縮寫代替全拼

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

1.8 全球共識(shí)性的圖標(biāo)

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

2 對(duì)齊方式

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

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

2.2 段落文本優(yōu)先用左對(duì)齊

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

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

2.3 卡片底部文字，底對(duì)齊

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

3 文字規(guī)范

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

06 結(jié)語

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