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

01 導讀

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

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

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

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

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

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

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

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

03 國際化設計

1 不同語言的差異

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

1.1 字符長度

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

1.2 詞匯分界

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

1.3 閱讀順序

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

1.4 信息對齊

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

1.5 筆畫形態(tài)

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

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

04 本地化設計

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

1 書寫格式

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

1.1 日期格式

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

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

1.2 地址格式

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

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

2 貨幣單位

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

2.1 貨幣ISO代碼

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

2.2 貨幣符號

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

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

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

3 顏色偏好

當我們考慮本地化設計時，需要準確了解特定文化中的顏色偏好。

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

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

在日本，白色代表著純潔和清新。白色在日本文化中是非常重要的顏色，因為它與寒冷的冬季和新年的慶祝活動有關。白色還被認為是傳統(tǒng)和簡潔的顏色，因此在日本設計中，白色是非常普遍的。

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

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

4 圖騰/不祥物

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

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

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

5 文化禁忌

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

05 語言差異會影響什么

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

1 布局拓展性

1.1 導航

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

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

1.2 標簽頁

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

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

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

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

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

方案一：頂部標簽

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

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

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

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

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

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

1.5 操作入口

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

1.6 列表卡片

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

1.7 用縮寫代替全拼

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

1.8 全球共識性的圖標

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

2 對齊方式

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

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

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

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

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

2.3 卡片底部文字，底對齊

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

3 文字規(guī)范

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

06 結語

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