編輯導(dǎo)語(yǔ)：當(dāng)產(chǎn)品面對(duì)更多用戶、或者處于出海場(chǎng)景時(shí)，則不免需要應(yīng)對(duì)用戶多語(yǔ)言使用的需求情況發(fā)生。此時(shí)，設(shè)計(jì)團(tuán)隊(duì)則需要依據(jù)用戶群體特征、使用場(chǎng)景、語(yǔ)言內(nèi)涵等多方面進(jìn)行考量。本篇文章里，作者結(jié)合自身經(jīng)驗(yàn)，總結(jié)分享了多語(yǔ)言用戶界面的設(shè)計(jì)策略與要點(diǎn)，一起來(lái)看一下。

在進(jìn)行多語(yǔ)言設(shè)計(jì)時(shí)，無(wú)論產(chǎn)品使用一種或幾種語(yǔ)言，都會(huì)對(duì)進(jìn)行設(shè)計(jì)決策產(chǎn)生影響，本文分享的幾個(gè)知識(shí)點(diǎn)都是來(lái)自于真正設(shè)計(jì)中遇到的問(wèn)題。

基于現(xiàn)有產(chǎn)品進(jìn)行設(shè)計(jì)會(huì)帶來(lái)一系列獨(dú)特的挑戰(zhàn)和約束（約束不一定是壞事），這會(huì)幫助你思考究竟什么才是最重要的。

不管產(chǎn)品處于什么階段，設(shè)計(jì)的目的都是解決問(wèn)題。以 Netflix 為例，它的偽本地化[1]方案是供我們學(xué)習(xí)多語(yǔ)言 UI 設(shè)計(jì)的一個(gè)絕佳案例。

（ [1] 偽本地化（Pseudo Localization）不是軟件真正本地化，而是在源語(yǔ)言軟件的基礎(chǔ)上，按照一定的規(guī)則，將需要本地化的文本使用本地化文字進(jìn)行替換，模擬本地化軟件的過(guò)程。）

有許多因素影響著設(shè)計(jì)的選擇，并且沒(méi)有絕對(duì)正確或錯(cuò)誤的方法，但通過(guò)比較可以得到相對(duì)更佳的設(shè)計(jì)策略。本文中涵蓋的要點(diǎn)看似很普遍，但在出現(xiàn)問(wèn)題之前，它們往往很容易被忽略。

因此，我們要學(xué)會(huì)從錯(cuò)誤中學(xué)習(xí)。

“飛機(jī)噴氣式發(fā)動(dòng)機(jī)副機(jī)專業(yè)” 在切換語(yǔ)言之后長(zhǎng)度超出了屏幕寬度

一、故事的開(kāi)始——被破壞的 UI 界面?Broken UI—a starting point

在設(shè)計(jì)過(guò)程中一切都進(jìn)行得很順利，直到一種以冗長(zhǎng)單詞而聞名的新語(yǔ)言——德語(yǔ)，出現(xiàn)在圍繞英文系統(tǒng)進(jìn)行設(shè)計(jì)的界面上，它破壞了 UI 界面，這讓我不得不開(kāi)始以新的思維方式著手進(jìn)行設(shè)計(jì)。

由于 UI 界面被破壞，我們重新考慮如何處理其中的元素布局，盡量使其與所有語(yǔ)言保持一致。

僅僅為了適應(yīng)新語(yǔ)言而更改字體大小并不是一個(gè)好方法；并且由于時(shí)間和資源的限制，也不允許進(jìn)行較大的設(shè)計(jì)更改，因?yàn)椴季值母臅?huì)造成多米諾骨牌效應(yīng)：當(dāng)你更改一個(gè)時(shí)，它會(huì)影響第一個(gè)、第二個(gè)……為此我們啟動(dòng)了一個(gè)更大的計(jì)劃，改進(jìn)信息架構(gòu)以用于將來(lái)的迭代。

目標(biāo)是整個(gè)產(chǎn)品的適配性，而不是拘泥于幾種語(yǔ)言的解決方案，這次迭代涉及信息架構(gòu)、內(nèi)容、語(yǔ)言和規(guī)范。

哪些是重要的？什么是最重要的？為什么？

二、信息架構(gòu)——明確優(yōu)先級(jí)?Hierarchy—determining priorities

在進(jìn)行 UI 設(shè)計(jì)時(shí)使用設(shè)計(jì)系統(tǒng)可以幫助保持一致性并加快工作流程，但是這些系統(tǒng)并不適用所有情況。

在類似多語(yǔ)言界面設(shè)計(jì)這樣的特殊情況下，建立信息架構(gòu)并確定各元素的優(yōu)先級(jí)是一條準(zhǔn)則。理想情況下，要能確保這個(gè)層級(jí)的構(gòu)建能適用于整個(gè)產(chǎn)品的全局。

在構(gòu)建信息架構(gòu)時(shí)你需要考慮：每個(gè)頁(yè)面的目的是什么？希望用戶做什么？為什么？這并不意味著要?jiǎng)h除或隱藏某些元素以達(dá)到你期望的目標(biāo)，而是要 在界面上創(chuàng)建視覺(jué)層次以指引用戶實(shí)現(xiàn)其期望的目標(biāo)。

從內(nèi)容，主要操作、次要操作以及第三級(jí)操作的維度進(jìn)行思考可以幫助你縮小設(shè)計(jì)決策范圍。當(dāng)時(shí)我們?nèi)鄙俚氖菍?duì)于第三級(jí)操作的思考——我們過(guò)于注重保持一致的外觀和格調(diào) —— 太著重于美學(xué)上的平衡，哪怕兩個(gè)元素不屬于同一等級(jí)。

用表單頁(yè)上的“取消”和“提交”按鈕作為案例。如果這兩個(gè)按鈕的樣式和操作邏輯太過(guò)相似，用戶會(huì)感到困惑：如果用戶的目標(biāo)是提交表格，為什么要有取消表單的選項(xiàng)？這樣的設(shè)計(jì)不能起到引導(dǎo)用戶的作用。

如果增加“保存”按鈕，那么“提交”便是主要操作，“保存“是次要操作，而“取消”作為第三層級(jí)的操作，就能很好地引導(dǎo)用戶完成提交行為。所有細(xì)節(jié)的設(shè)計(jì)，都要以用戶目標(biāo)和主要操作為中心。

更改語(yǔ)言后混亂的用戶界面使我們意識(shí)到，該版本設(shè)計(jì)實(shí)際上并沒(méi)有考慮優(yōu)先級(jí)或信息架構(gòu)，現(xiàn)在我們以建立層次結(jié)構(gòu)為目標(biāo)，重新考慮布局中的設(shè)計(jì)和位置元素。

我們將兩個(gè)同一層次的按鈕更改為主要操作和第三操作（如下圖所示），UI 界面并未因新設(shè)計(jì)而被破壞，反而比以前更加靈活和清晰，在這個(gè)過(guò)程中設(shè)計(jì)組件庫(kù)不斷完善，這樣的設(shè)計(jì)改變有助于構(gòu)建一個(gè)綜合系統(tǒng)。

語(yǔ)言與視覺(jué)風(fēng)格同樣重要。

不同的層次結(jié)構(gòu)讓UI界面的操作更清晰

三、梳理——用戶場(chǎng)景的重要性?Decluttering—importance of context

圖標(biāo)可以幫助傳達(dá)界面的情緒，還可以起到引導(dǎo)用戶的作用。選擇只使用圖標(biāo)、只使用文本或圖標(biāo)+文本額組合，取決于面向的用戶群體，界面的目的和屏幕和該產(chǎn)品的使用場(chǎng)景。

三種不同的 “添加到購(gòu)物車按鈕“ 都可以使用，但是“添加到購(gòu)物車”真的需要圖標(biāo)嗎？這個(gè)圖標(biāo)實(shí)際上是一個(gè)購(gòu)物袋，很多購(gòu)物車的 icon 都簡(jiǎn)化成了購(gòu)物袋，但是 “添加到購(gòu)物車” 文本似乎一直未被簡(jiǎn)寫(xiě)或省略——也許是因?yàn)椤疤砑拥劫?gòu)物車”的命令對(duì)用戶還是有一些陌生？

在我們的界面設(shè)計(jì)中，有一個(gè)按鈕使用了圖標(biāo) + 文本來(lái)向用戶傳達(dá)可進(jìn)行的操作。選擇兩者組合的原因是該圖標(biāo)與操作動(dòng)作相關(guān)聯(lián)，并且它也出現(xiàn)在產(chǎn)品的其他地方，我們想借此創(chuàng)建系統(tǒng)整體間的關(guān)聯(lián)性。

在我們的設(shè)計(jì)案例中，使用多余的圖標(biāo)會(huì)導(dǎo)致德語(yǔ)系統(tǒng)下的排版錯(cuò)亂。于是我們進(jìn)行了更深入的研究，發(fā)現(xiàn)添加圖標(biāo)實(shí)際上并沒(méi)有讓用戶使用更加方便（當(dāng)沒(méi)有圖標(biāo)時(shí)文本簡(jiǎn)潔易懂），文本足以向用戶傳達(dá)操作命令，這個(gè)改動(dòng)進(jìn)一步證明了重新梳理的重要性。只用圖標(biāo)這種形式在我們的案例中并不可行。

Instagram 的兩種不同布局：一個(gè)以文本作為按鈕，另一個(gè)以圖標(biāo)作為按鈕

左側(cè)的命令傳達(dá)非常清晰，但可以想象不斷的顯示和重復(fù)會(huì)讓頁(yè)面變得擁擠，這可能導(dǎo)致用戶視覺(jué)焦點(diǎn)從內(nèi)容轉(zhuǎn)移到命令行。在這種情況下，圖標(biāo)可以很好地發(fā)揮作用，增加用戶的參與度。

許多人不熟悉汽車上的胎壓圖標(biāo)（TPMS-胎壓監(jiān)測(cè)系統(tǒng)）。這些圖標(biāo)通常在各個(gè)品牌和國(guó)家 / 地區(qū)通用，并且具有特定的顏色。即使很多用戶（通常為司機(jī)）不能百分百確定圖標(biāo)的含義，但工程師在看到圖標(biāo)時(shí)也能迅速知道問(wèn)題所在。

輪胎低氣壓圖標(biāo)TPMS

除了顯示上面的圖標(biāo)外，還可以在汽車系統(tǒng)內(nèi)通知司機(jī)（ 例如通過(guò)語(yǔ)音用戶界面，或者在不影響駕駛的地方顯示 “低胎壓” ），但若僅出于想要彰顯獨(dú)創(chuàng)性或凸顯個(gè)人的風(fēng)格，為如此重要的對(duì)象創(chuàng)建自定義圖標(biāo)，是危險(xiǎn)且不負(fù)責(zé)任的。它可能導(dǎo)致更多的問(wèn)題——可以想象一下一個(gè)綠色停止標(biāo)志——你是否在看到圖標(biāo)時(shí)感到困惑（ 盡管它們似乎確實(shí)存在 ）？

再重申一遍，使用場(chǎng)景對(duì)于設(shè)計(jì)非常重要。

四、語(yǔ)言——含義上的差異?Language—differences in meaning

翻譯多語(yǔ)言產(chǎn)品可能會(huì)令人興奮，在這個(gè)過(guò)程中會(huì)得到學(xué)習(xí)和成長(zhǎng)，但也會(huì)出現(xiàn)重重困難，其中大部分障礙可歸因于翻譯的方式。時(shí)間和選擇的方式會(huì)影響翻譯的質(zhì)量，通常翻譯的方式有兩種，或兩者兼有：人工翻譯或計(jì)算機(jī)翻譯。

基于計(jì)算機(jī)和 AI 的翻譯已得到了很大的改進(jìn)，可以作為一種迅速且低成本的解決方案。雖然，每種語(yǔ)言的 AI 翻譯準(zhǔn)確性會(huì)有所不同，但無(wú)論采用哪種方式，翻譯都應(yīng)由另一人（以該語(yǔ)言為母語(yǔ)的人）檢查，以保證翻譯準(zhǔn)確。

尋找專業(yè)譯者是另一種方案。很多時(shí)候，機(jī)翻會(huì)存在問(wèn)題，例如在芬蘭語(yǔ)中，一個(gè)單詞可能具有多種含義（如下圖所示）：

• Kuusi palaa = 六個(gè)
• Kuusi palaa = 數(shù)字6回來(lái)了
• Kuusi palaa = 那顆云杉起火了
• Kuusi palaa = 那顆云杉回來(lái)了
• Kuusi palaa = 你的月亮回來(lái)了

等等。

Which one?

猜猜 Kuusi palaa 的意思究竟是哪一個(gè)？

譯者需要了解行業(yè)和背景才能提供理想的翻譯，越早地讓譯者參與設(shè)計(jì)過(guò)程效果越好。

一個(gè)詞在一種語(yǔ)言中可能是最佳選擇，但在其他語(yǔ)言中可能無(wú)法很好地引起共鳴，如果您以 Excel 文件中的單元格形式提供翻譯并通過(guò)電子郵件發(fā)送出去，則上述情況很容易發(fā)生。

若不確定某個(gè)翻譯，可以參考競(jìng)品如何使用這個(gè)詞語(yǔ)。他們通常會(huì)在尋找最理想的文字上下比較大的功夫，但不能完全照搬復(fù)制，而是針對(duì) UI 設(shè)計(jì)中的通用字段進(jìn)行參考。如“添加到購(gòu)物車”就是大眾已形成一定認(rèn)知的用法。

Google 將 “添加到購(gòu)物車” 翻譯為德語(yǔ) “ in den Warenkorb legen”（這是已經(jīng)過(guò)認(rèn)證的文本）。我對(duì)一些德國(guó)零售商進(jìn)行了快速研究，以了解他們的用法：

• Zara 德國(guó)：“Hinzufügen”
• Tommy Hilfiger 德國(guó)：“ ArtikelHinzufügen”
• Amazon 德國(guó)：“ In den Einkaufswagen”
• Ikea 德國(guó)：“ In den Warenkorb”

我們可以看到宜家的語(yǔ)言選擇最接近 Google 機(jī)翻結(jié)果。你在你的設(shè)計(jì)語(yǔ)境中會(huì)使用哪一個(gè)？你所在的行業(yè)可能會(huì)對(duì)此產(chǎn)生影響。

語(yǔ)言能傳達(dá)產(chǎn)品的個(gè)性。例如，其他語(yǔ)言的敬語(yǔ)在英語(yǔ)體系下可能無(wú)法——對(duì)應(yīng)；此外，大寫(xiě)規(guī)則在德語(yǔ)和英語(yǔ)中是不同的——在英語(yǔ)中錯(cuò)誤的用法可能在德語(yǔ)中是正確的，也許所有字母都使用大寫(xiě)在多語(yǔ)言設(shè)計(jì)中更為保險(xiǎn)。

在某些情況下需要考慮，僅使用圖標(biāo)是否足以傳達(dá)操作信息，別忘了除了語(yǔ)言，國(guó)家之間的計(jì)量單位等也存在差異。

語(yǔ)言是所有用戶界面的重要組成部分。

不同國(guó)家的計(jì)量單位也存在差異：18石大約等于114公斤或252磅

五、規(guī)范——布局的靈活性?Specifications—flexibility in layouts

在當(dāng)下，網(wǎng)格和版式是一個(gè)熱點(diǎn)話題。

關(guān)于如何正確使用網(wǎng)格可以在網(wǎng)上查詢到大量的資料，盡管除了網(wǎng)格之外，但關(guān)于相關(guān)設(shè)計(jì)細(xì)節(jié)的文章卻很少，例如行高、固定元素、最大和最小寬度等，但如果你在設(shè)計(jì)時(shí)將其添加為規(guī)范的一部分，則可以偽設(shè)計(jì)帶來(lái)很大的幫助。

在設(shè)計(jì)中經(jīng)常會(huì)出現(xiàn)信息過(guò)載，字段太長(zhǎng)導(dǎo)致無(wú)法完整顯示，但是這些細(xì)節(jié)不必逐一在每個(gè)頁(yè)面上進(jìn)行設(shè)計(jì)和調(diào)整——通常，可以建立組件庫(kù)，以保證所有頁(yè)面相似組件的一致性。你可以使用諸如 Zeplin 之類的工具檢查 UI 設(shè)計(jì)，但并非所有內(nèi)容都可以在 Zeplin 檢查器模式下使用。

我們遇到的問(wèn)題是，未考慮過(guò)如何處理產(chǎn)品項(xiàng)目標(biāo)題出現(xiàn)過(guò)長(zhǎng)的字符串。

這是一個(gè)字體尺寸和間距問(wèn)題。我們必須重新考慮屏幕上元素的最大寬度，并決定字符上限和換行規(guī)則，由于沒(méi)有空間可以換行，因此必須在一定的字符數(shù)之后進(jìn)行打點(diǎn)省略。若事先設(shè)定理想字符長(zhǎng)度規(guī)范會(huì)減少許多不必要的麻煩。

基于信息架構(gòu)、用戶場(chǎng)景場(chǎng)景，整合梳理，語(yǔ)言和規(guī)范的調(diào)整有助于解決由于語(yǔ)言切換導(dǎo)致的混亂界面，但這并不意味著已經(jīng)做完了所有工作——產(chǎn)品總是在不斷迭代。

讓我們一起來(lái)聊聊你在多語(yǔ)言設(shè)計(jì)中遇到的問(wèn)題吧～

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）。

作者：Simo Herold

原文：https://uxdesign.cc/learnings-from-designing-for-multi-language-user-interfaces-573bcb688eee

譯者：陳熠璇；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議