用戶界面設計過程以用戶為中心（多語言用戶界面到底應該如何設計）

2023-04-19 05:30:18

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

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

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

不管產品處於什麼階段，設計的目的都是解決問題。以 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 協議

,