編輯導語：當産品面對更多用戶、或者處于出海場景時，則不免需要應對用戶多語言使用的需求情況發生。此時，設計團隊則需要依據用戶群體特征、使用場景、語言内涵等多方面進行考量。本篇文章裡，作者結合自身經驗，總結分享了多語言用戶界面的設計策略與要點，一起來看一下。

在進行多語言設計時，無論産品使用一種或幾種語言，都會對進行設計決策産生影響，本文分享的幾個知識點都是來自于真正設計中遇到的問題。

基于現有産品進行設計會帶來一系列獨特的挑戰和約束（約束不一定是壞事），這會幫助你思考究竟什麼才是最重要的。

不管産品處于什麼階段，設計的目的都是解決問題。以 Netflix 為例，它的僞本地化[1]方案是供我們學習多語言 UI 設計的一個絕佳案例。

（ [1] 僞本地化（Pseudo Localization）不是軟件真正本地化，而是在源語言軟件的基礎上，按照一定的規則，将需要本地化的文本使用本地化文字進行替換，模拟本地化軟件的過程。）

有許多因素影響着設計的選擇，并且沒有絕對正确或錯誤的方法，但通過比較可以得到相對更佳的設計策略。本文中涵蓋的要點看似很普遍，但在出現問題之前，它們往往很容易被忽略。

因此，我們要學會從錯誤中學習。

“飛機噴氣式發動機副機專業” 在切換語言之後長度超出了屏幕寬度

一、故事的開始——被破壞的 UI 界面 Broken UI—a starting point

在設計過程中一切都進行得很順利，直到一種以冗長單詞而聞名的新語言——德語，出現在圍繞英文系統進行設計的界面上，它破壞了 UI 界面，這讓我不得不開始以新的思維方式着手進行設計。

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

僅僅為了适應新語言而更改字體大小并不是一個好方法；并且由于時間和資源的限制，也不允許進行較大的設計更改，因為布局的更改會造成多米諾骨牌效應：當你更改一個時，它會影響第一個、第二個……為此我們啟動了一個更大的計劃，改進信息架構以用于将來的叠代。

目标是整個産品的适配性，而不是拘泥于幾種語言的解決方案，這次叠代涉及信息架構、内容、語言和規範。

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

二、信息架構——明确優先級 Hierarchy—determining priorities

在進行 UI 設計時使用設計系統可以幫助保持一緻性并加快工作流程，但是這些系統并不适用所有情況。

在類似多語言界面設計這樣的特殊情況下，建立信息架構并确定各元素的優先級是一條準則。理想情況下，要能确保這個層級的構建能适用于整個産品的全局。

在構建信息架構時你需要考慮：每個頁面的目的是什麼？希望用戶做什麼？為什麼？這并不意味着要删除或隐藏某些元素以達到你期望的目标，而是要 在界面上創建視覺層次以指引用戶實現其期望的目标。

從内容，主要操作、次要操作以及第三級操作的維度進行思考可以幫助你縮小設計決策範圍。當時我們缺少的是對于第三級操作的思考——我們過于注重保持一緻的外觀和格調 —— 太着重于美學上的平衡，哪怕兩個元素不屬于同一等級。

用表單頁上的“取消”和“提交”按鈕作為案例。如果這兩個按鈕的樣式和操作邏輯太過相似，用戶會感到困惑：如果用戶的目标是提交表格，為什麼要有取消表單的選項？這樣的設計不能起到引導用戶的作用。

如果增加“保存”按鈕，那麼“提交”便是主要操作，“保存“是次要操作，而“取消”作為第三層級的操作，就能很好地引導用戶完成提交行為。所有細節的設計，都要以用戶目标和主要操作為中心。

更改語言後混亂的用戶界面使我們意識到，該版本設計實際上并沒有考慮優先級或信息架構，現在我們以建立層次結構為目标，重新考慮布局中的設計和位置元素。

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

語言與視覺風格同樣重要。

不同的層次結構讓UI界面的操作更清晰

三、梳理——用戶場景的重要性 Decluttering—importance of context

圖标可以幫助傳達界面的情緒，還可以起到引導用戶的作用。選擇隻使用圖标、隻使用文本或圖标 文本額組合，取決于面向的用戶群體，界面的目的和屏幕和該産品的使用場景。

三種不同的 “添加到購物車按鈕“ 都可以使用，但是“添加到購物車”真的需要圖标嗎？這個圖标實際上是一個購物袋，很多購物車的 icon 都簡化成了購物袋，但是 “添加到購物車” 文本似乎一直未被簡寫或省略——也許是因為“添加到購物車”的命令對用戶還是有一些陌生？

在我們的界面設計中，有一個按鈕使用了圖标 文本來向用戶傳達可進行的操作。選擇兩者組合的原因是該圖标與操作動作相關聯，并且它也出現在産品的其他地方，我們想借此創建系統整體間的關聯性。

在我們的設計案例中，使用多餘的圖标會導緻德語系統下的排版錯亂。于是我們進行了更深入的研究，發現添加圖标實際上并沒有讓用戶使用更加方便（當沒有圖标時文本簡潔易懂），文本足以向用戶傳達操作命令，這個改動進一步證明了重新梳理的重要性。隻用圖标這種形式在我們的案例中并不可行。

Instagram 的兩種不同布局：一個以文本作為按鈕，另一個以圖标作為按鈕

左側的命令傳達非常清晰，但可以想象不斷的顯示和重複會讓頁面變得擁擠，這可能導緻用戶視覺焦點從内容轉移到命令行。在這種情況下，圖标可以很好地發揮作用，增加用戶的參與度。

許多人不熟悉汽車上的胎壓圖标（TPMS-胎壓監測系統）。這些圖标通常在各個品牌和國家 / 地區通用，并且具有特定的顔色。即使很多用戶（通常為司機）不能百分百确定圖标的含義，但工程師在看到圖标時也能迅速知道問題所在。

輪胎低氣壓圖标TPMS

除了顯示上面的圖标外，還可以在汽車系統内通知司機（ 例如通過語音用戶界面，或者在不影響駕駛的地方顯示 “低胎壓” ），但若僅出于想要彰顯獨創性或凸顯個人的風格，為如此重要的對象創建自定義圖标，是危險且不負責任的。它可能導緻更多的問題——可以想象一下一個綠色停止标志——你是否在看到圖标時感到困惑（ 盡管它們似乎确實存在 ）？

再重申一遍，使用場景對于設計非常重要。

四、語言——含義上的差異 Language—differences in meaning

翻譯多語言産品可能會令人興奮，在這個過程中會得到學習和成長，但也會出現重重困難，其中大部分障礙可歸因于翻譯的方式。時間和選擇的方式會影響翻譯的質量，通常翻譯的方式有兩種，或兩者兼有：人工翻譯或計算機翻譯。

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

尋找專業譯者是另一種方案。很多時候，機翻會存在問題，例如在芬蘭語中，一個單詞可能具有多種含義（如下圖所示）：

• Kuusi palaa = 六個
• Kuusi palaa = 數字6回來了
• Kuusi palaa = 那顆雲杉起火了
• Kuusi palaa = 那顆雲杉回來了
• Kuusi palaa = 你的月亮回來了

等等。

Which one?

猜猜 Kuusi palaa 的意思究竟是哪一個？

譯者需要了解行業和背景才能提供理想的翻譯，越早地讓譯者參與設計過程效果越好。

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

若不确定某個翻譯，可以參考競品如何使用這個詞語。他們通常會在尋找最理想的文字上下比較大的功夫，但不能完全照搬複制，而是針對 UI 設計中的通用字段進行參考。如“添加到購物車”就是大衆已形成一定認知的用法。

Google 将 “添加到購物車” 翻譯為德語 “ in den Warenkorb legen”（這是已經過認證的文本）。我對一些德國零售商進行了快速研究，以了解他們的用法：

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

我們可以看到宜家的語言選擇最接近 Google 機翻結果。你在你的設計語境中會使用哪一個？你所在的行業可能會對此産生影響。

語言能傳達産品的個性。例如，其他語言的敬語在英語體系下可能無法——對應；此外，大寫規則在德語和英語中是不同的——在英語中錯誤的用法可能在德語中是正确的，也許所有字母都使用大寫在多語言設計中更為保險。

在某些情況下需要考慮，僅使用圖标是否足以傳達操作信息，别忘了除了語言，國家之間的計量單位等也存在差異。

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

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

五、規範——布局的靈活性 Specifications—flexibility in layouts

在當下，網格和版式是一個熱點話題。

關于如何正确使用網格可以在網上查詢到大量的資料，盡管除了網格之外，但關于相關設計細節的文章卻很少，例如行高、固定元素、最大和最小寬度等，但如果你在設計時将其添加為規範的一部分，則可以僞設計帶來很大的幫助。

在設計中經常會出現信息過載，字段太長導緻無法完整顯示，但是這些細節不必逐一在每個頁面上進行設計和調整——通常，可以建立組件庫，以保證所有頁面相似組件的一緻性。你可以使用諸如 Zeplin 之類的工具檢查 UI 設計，但并非所有内容都可以在 Zeplin 檢查器模式下使用。

我們遇到的問題是，未考慮過如何處理産品項目标題出現過長的字符串。

這是一個字體尺寸和間距問題。我們必須重新考慮屏幕上元素的最大寬度，并決定字符上限和換行規則，由于沒有空間可以換行，因此必須在一定的字符數之後進行打點省略。若事先設定理想字符長度規範會減少許多不必要的麻煩。

基于信息架構、用戶場景場景，整合梳理，語言和規範的調整有助于解決由于語言切換導緻的混亂界面，但這并不意味着已經做完了所有工作——産品總是在不斷叠代。

讓我們一起來聊聊你在多語言設計中遇到的問題吧～

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

作者：Simo Herold

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

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

本文由@TCC翻譯情報局 翻譯發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部