原創(chuàng)精選｜多語言用戶界面到底應(yīng)該如何設(shè)計(jì)！
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識，幫助全球 1 億設(shè)計(jì)師成長
轉(zhuǎn)自：TCC 翻譯情報局
編輯：劉麗
共 4496 字，預(yù)計(jì)閱讀 12 分鐘
推薦：大家好，我是張聿彤。當(dāng)我們在設(shè)計(jì)多語言產(chǎn)品時，一定會遇到切換語言后 UI 界面排版一片混亂的情況，本文通過案例分析，從信息架構(gòu)的重設(shè)計(jì)、用戶場景、語言含義、規(guī)范四個維度分享了多語言設(shè)計(jì)中的問題解決方案，通過本文的學(xué)習(xí)，沒有多語言設(shè)計(jì)經(jīng)歷的你可以未雨綢繆，經(jīng)常受其困擾的你的設(shè)計(jì)錦上添花。
在進(jìn)行多語言設(shè)計(jì)時，無論產(chǎn)品使用一種或幾種語言，都會對進(jìn)行設(shè)計(jì)決策產(chǎn)生影響，本文分享的幾個知識點(diǎn)都是來自于真正設(shè)計(jì)中遇到的問題。
基于現(xiàn)有產(chǎn)品進(jìn)行設(shè)計(jì)會帶來一系列獨(dú)特的挑戰(zhàn)和約束（約束不一定是壞事），這會幫助你思考究竟什么才是最重要的。
不管產(chǎn)品處于什么階段，設(shè)計(jì)的目的都是解決問題。 以 Netflix 為例，它的 偽本地化 [1] 方案是供我們學(xué)習(xí)多語言 UI 設(shè)計(jì)的一個絕佳案例。
（ [1] 偽本地化（Pseudo Localization）不是軟件真正本地化，而是在源語言軟件的基礎(chǔ)上，按照一定的規(guī)則，將需要本地化的文本使用本地化文字進(jìn)行替換，模擬本地化軟件的過程。）
有許多因素影響著設(shè)計(jì)的選擇，并且沒有絕對正確或錯誤的方法，但通過比較可以得到相對更佳的設(shè)計(jì)策略。本文中涵蓋的要點(diǎn)看似很普遍，但在出現(xiàn)問題之前，它們往往很容易被忽略。
因此，我們要學(xué)會從錯誤中學(xué)習(xí)。
“飛機(jī)噴氣式發(fā)動機(jī)副機(jī)專業(yè)” 在切換語言之后長度超出了屏幕寬度
1. 故事的開始 —— 被破壞的 UI 界面
1. Broken UI — a starting point
在設(shè)計(jì)過程中一切都進(jìn)行得很順利，直到一種以冗長單詞而聞名的新語言 —— 德語，出現(xiàn)在圍繞英文系統(tǒng)進(jìn)行設(shè)計(jì)的界面上，它破壞了 UI 界面，這讓我不得不開始以新的思維方式著手進(jìn)行設(shè)計(jì)。
由于 UI 界面被破壞，我們重新考慮如何處理其中的元素布局 ，盡量使其與所有語言保持一致 。 僅僅為了適應(yīng)新語言而更改字體大小并不是一個好方法； 并且由于時間和資源的限制，也不允許進(jìn)行較大的設(shè)計(jì)更改，因?yàn)椴季值母臅斐啥嗝字Z骨牌效應(yīng)：當(dāng)你更改一個時，它會影響第一個，第二個…… 為此我們啟動了一個更大的計(jì)劃，改進(jìn)信息架構(gòu)以用于將來的迭代。
目標(biāo)是整個產(chǎn)品的適配性 ，而不是拘泥于幾種語言的解決方案 ，這次迭代涉及信息架構(gòu)，內(nèi)容，語言和規(guī)范。
哪些是重要的？什么是最重要的？為什么？
2. 信息架構(gòu) —— 明確優(yōu)先級
2. Hierarchy — determining priorities
在進(jìn)行 UI 設(shè)計(jì)時使用設(shè)計(jì)系統(tǒng)可以幫助保持一致性并加快工作流程 ，但是這些系統(tǒng)并不適用所有情況 。在類似多語言界面設(shè)計(jì)這樣的特殊情況下，建立信息架構(gòu)并確定各元素的優(yōu)先級是一條準(zhǔn)則。理想情況下，要能確保這個層級的構(gòu)建能適用于整個產(chǎn)品的全局。
在構(gòu)建信息架構(gòu)時你需要考慮：每個頁面的目的是什么？希望用戶做什么？為什么？這并不意味著要刪除或隱藏某些元素以達(dá)到你期望的目標(biāo)，而是要 在界面上創(chuàng)建視覺層次以指引用戶實(shí)現(xiàn)其期望的目標(biāo) 。
從內(nèi)容，主要操作，次要操作以及第三級操作的維度進(jìn)行思考可以幫助你縮小設(shè)計(jì)決策范圍 。當(dāng)時我們?nèi)鄙俚氖菍τ诘谌壊僮鞯乃伎?—— 我們過于注重保持一致的外觀和格調(diào) —— 太著重于美學(xué)上的平衡，哪怕兩個元素不屬于同一等級。
用表單頁上的 “取消” 和 “提交” 按鈕作為案例。如果這兩個按鈕的樣式和操作邏輯太過相似，用戶會感到困惑：如果用戶的目標(biāo)是提交表格，為什么要有取消表單的選項(xiàng)？這樣的設(shè)計(jì)不能起到引導(dǎo)用戶的作用。如果增加 “保存” 按鈕，那么 “提交” 便是主要操作，“保存“ 是次要操作，而 “取消” 作為第三層級的操作，就能很好的引導(dǎo)用戶完成提交行為。所有細(xì)節(jié)的設(shè)計(jì) ，都要以用戶目標(biāo)和主要操作為中心。
更改語言后混亂的用戶界面使我們意識到，該版本設(shè)計(jì)實(shí)際上并沒有考慮優(yōu)先級或信息架構(gòu)，現(xiàn)在我們 以建立層次結(jié)構(gòu)為目標(biāo) ，重新考慮布局中的設(shè)計(jì)和位置元素 。我們將兩個同一層次的按鈕更改為主要操作和第三操作 （如下圖所示），UI 界面并未因新設(shè)計(jì)而被破壞，反而比以前更加靈活和清晰，在這個過程中設(shè)計(jì)組件庫不斷完善，這樣的設(shè)計(jì)改變有助于構(gòu)建一個綜合系統(tǒng) 。
語言與視覺風(fēng)格同樣重要。
不同的層次結(jié)構(gòu)讓UI界面的操作更清晰
3. 梳理 —— 用戶場景的重要性
3. Decluttering — importance of context
圖標(biāo)可以幫助傳達(dá)界面的情緒 ，還可以起到引導(dǎo)用戶的作用 。 選擇只使用圖標(biāo)、只使用文本或圖標(biāo)+文本額組合，取決于面向的用戶群體，界面的目的和屏幕和該產(chǎn)品的使用場景。
三種不同的 “添加到購物車按鈕“ 都可以使用，但是 “添加到購物車” 真的需要圖標(biāo)嗎？ 這個圖標(biāo)實(shí)際上是一個購物袋，很多購物車的 icon 都簡化成了購物袋，但是 “添加到購物車” 文本似乎一直未被簡寫或省略 —— 也許是因?yàn)?“添加到購物車” 的命令對用戶還是有一些陌生？
在我們的界面設(shè)計(jì)中，有一個按鈕使用了圖標(biāo) + 文本來向用戶傳達(dá)可進(jìn)行的操作。選擇兩者組合的原因是該圖標(biāo)與操作動作相關(guān)聯(lián)，并且它也出現(xiàn)在產(chǎn)品的其他地方，我們想借此創(chuàng)建系統(tǒng)整體間的關(guān)聯(lián)性 。
在我們的設(shè)計(jì)案例中，使用多余的圖標(biāo)會導(dǎo)致德語系統(tǒng)下的排版錯亂 。于是我們進(jìn)行了更深入的研究，發(fā)現(xiàn)添加圖標(biāo)實(shí)際上并沒有讓用戶使用更加方便 （當(dāng)沒有圖標(biāo)時文本簡潔易懂），文本足以向用戶傳達(dá)操作命令，這個改動進(jìn)一步證明了重新梳理的重要性。只用圖標(biāo)這種形式在我們的案例中并不可行。
Instagram 的兩種不同布局： 一個以文本作為按鈕，另一個以圖標(biāo)作為按鈕
左側(cè)的命令傳達(dá)非常清晰，但可以想象不斷的顯示和重復(fù)會讓頁面變得擁擠，這可能導(dǎo)致用戶視覺焦點(diǎn)從內(nèi)容轉(zhuǎn)移到命令行，在這種情況下，圖標(biāo)可以很好地發(fā)揮作用，增加用戶的參與度。
許多人不熟悉汽車上的胎壓圖標(biāo) （TPMS-胎壓監(jiān)測系統(tǒng)）。這些圖標(biāo)通常在各個品牌和國家 / 地區(qū)通用，并且具有特定的顏色。即使很多用戶 （通常為司機(jī)） 不能百分百確定圖標(biāo)的含義，但工程師在看到圖標(biāo)時也能迅速知道問題所在。
輪胎低氣壓圖標(biāo)TPMS
除了顯示上面的圖標(biāo)外，還可以在汽車系統(tǒng)內(nèi)通知司機(jī) （ 例如通過語音用戶界面，或者在不影響駕駛的地方顯示 "低胎壓" ），但若僅出于想要彰顯獨(dú)創(chuàng)性或凸顯個人的風(fēng)格，為如此重要的對象創(chuàng)建自定義圖標(biāo)，是危險且不負(fù)責(zé)任的。它可能導(dǎo)致更多的問題 —— 可以想象一下一個綠色停止標(biāo)志 —— 你是否在看到圖標(biāo)時感到困惑？（ 盡管它們似乎確實(shí)存在 ）。再重申一遍，使用場景對于設(shè)計(jì)非常重要。
4. 語言 —— 含義上的差異
4. Language — differences in meaning
翻譯多語言產(chǎn)品可能會令人興奮，在這個過程中會得到學(xué)習(xí)和成長，但也會出現(xiàn)重重困難，其中大部分障礙可歸因于翻譯的方式。時間和選擇的方式會影響翻譯的質(zhì)量，通常翻譯的方式有兩種，或兩者兼有：人工翻譯或計(jì)算機(jī)翻譯。
基于計(jì)算機(jī)和 AI 的翻譯已得到了很大的改進(jìn)，可以作為一種迅速且低成本的解決方案 。雖然，每種語言的 AI 翻譯準(zhǔn)確性會有所不同，但無論采用哪種方式，翻譯都應(yīng)由另一人 （以該語言為母語的人） 檢查，以保證翻譯準(zhǔn)確。
尋找專業(yè)譯者是另一種方案。很多時候，機(jī)翻會存在問題，例如在芬蘭語中，一個單詞可能具有多種含義 （如下圖所示）：
Kuusi palaa = 六個
Kuusi palaa = 數(shù)字6回來了
Kuusi palaa = 那顆云杉起火了
Kuusi palaa = 那顆云杉回來了
Kuusi palaa = 你的月亮回來了
等等。
Which one?
猜猜 Kuusi palaa 的意思究竟是哪一個？
譯者需要了解行業(yè)和背景才能提供理想的翻譯 ，越早地讓譯者參與設(shè)計(jì)過程效果越好。一個詞在一種語言中可能是最佳選擇，但在其他語言中可能無法很好地引起共鳴，如果您以 Excel 文件中的單元格形式提供翻譯并通過電子郵件發(fā)送出去，則上述情況很容易發(fā)生。
若不確定某個翻譯，可以參考競品如何使用這個詞語。他們通常會在尋找最理想的文字上下比較大的功夫 ，但不能完全照搬復(fù)制 ，而是針對 UI 設(shè)計(jì)中的通用字段進(jìn)行參考 。如 “添加到購物車”就是大眾已形成一定認(rèn)知的用法。
Google 將 “添加到購物車” 翻譯為德語 “ in den Warenkorb legen” （這是已經(jīng)過認(rèn)證的文本）。我對一些德國零售商進(jìn)行了快速研究，以了解他們的用法：
Zara 德國： “Hinzufügen”
Tommy Hilfiger 德國： “ ArtikelHinzufügen”
Amazon 德國： “ In den Einkaufswagen”
Ikea 德國： “ In den Warenkorb”
我們可以看到宜家的語言選擇最接近 Google 機(jī)翻結(jié)果。你在你的設(shè)計(jì)語境中會使用哪一個？你所在的行業(yè)可能會對此產(chǎn)生影響。
語言能傳達(dá)產(chǎn)品的個性。例如，其他語言的敬語在英語體系下可能無法 —— 對應(yīng)； 此外，大寫規(guī)則在德語和英語中是不同的 —— 在英語中錯誤的用法可能在德語中是正確的，也許所有字母都使用大寫在多語言設(shè)計(jì)中更為保險。
在某些情況下需要考慮，僅使用圖標(biāo)是否足以傳達(dá)操作信息， 別忘了除了語言，國家之間的計(jì)量單位等也存在差異。
語言是所有用戶界面的重要組成部分。
不同國家的計(jì)量單位也存在差異：18 石大約等于 114 公斤或 252 磅
5. 規(guī)范 —— 布局的靈活性
5. Specifications — flexibility in layouts
在當(dāng)下網(wǎng)格和版式是一個熱點(diǎn)話題。關(guān)于如何正確使用網(wǎng)格可以在網(wǎng)上查詢到大量的資料，盡管除了網(wǎng)格之外，但關(guān)于相關(guān)設(shè)計(jì)細(xì)節(jié)的文章卻很少，例如行高，固定元素，最大和最小寬度等，但如果你在設(shè)計(jì)時將其添加為規(guī)范的一部分，則可以偽設(shè)計(jì)帶來很大的幫助。
在設(shè)計(jì)中經(jīng)常會出現(xiàn)信息過載，字段太長導(dǎo)致無法完整顯示，但是這些細(xì)節(jié)不必逐一在每個頁面上進(jìn)行設(shè)計(jì)和調(diào)整 —— 通常，可以建立組件庫，以保證所有頁面相似組件的一致性。你可以使用諸如 Zeplin 之類的工具檢查 UI 設(shè)計(jì)，但并非所有內(nèi)容都可以在 Zeplin 檢查器模式下使用。
我們遇到的問題是，未考慮過如何處理產(chǎn)品項(xiàng)目標(biāo)題出現(xiàn)過長的字符串 。這是一個字體尺寸和間距問題。我們必須重新考慮屏幕上元素的最大寬度，并決定字符上限和換行規(guī)則，由于沒有空間可以換行，因此必須在一定的字符數(shù)之后進(jìn)行打點(diǎn)省略。若事先設(shè)定理想字符長度規(guī)范會減少許多不必要的麻煩。
基于信息架構(gòu)、用戶場景場景，整合梳理，語言和規(guī)范的調(diào)整 有助于解決由于語言切換導(dǎo)致的混亂界面，但這并不意味著已經(jīng)做完了所有工作 —— 產(chǎn)品總是在不斷迭代。
讓我們一起來聊聊你在多語言設(shè)計(jì)中遇到的問題吧～
星標(biāo)公眾號方法
點(diǎn)開下方公眾號 ?? 點(diǎn)擊右上角【...】 ?? 設(shè)為星標(biāo)
