案例研究|多語言用戶界面到底應該如何設計

0 評論 14244 瀏覽 19 收藏 17 分鐘

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

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

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!