近年來，越來越多的國內(nèi)開發(fā)者將目光從國內(nèi)轉(zhuǎn)移到國外，紛紛投入到移動大航海時代的浪潮之中。在產(chǎn)品國際化的過程中，產(chǎn)品UI是否也跟上了國際化的步伐？Dropbox 設(shè)計師 John Saito 針對產(chǎn)品設(shè)計國際化中出現(xiàn)的問題進(jìn)行了分析并提出了 7 條建議，值得一看。

假設(shè)你正首次使用一款新 app，它在 Twitter 上好評如潮。人們都說這款 app 棒極了、改變了他們的生活并且令人愉悅。

你打開它并看到了如下一幕：

呃…有點怪。頂部有個視頻，但是你不知道這是什么語言的標(biāo)題。措辭很奇怪，而且按鈕文字甚至都不與按鈕相匹配。人們是怎么認(rèn)定這是一款優(yōu)秀 app 的？

哦，原來這款 app 并不是用你的語言設(shè)計的。它是以精靈語（Elvish）進(jìn)行設(shè)計，然后再翻譯成你的語言。因為大多數(shù)的人們都在使用精靈語版本，所以他們并不知道以你的語言產(chǎn)品會看起來怎么樣。

不管你信不信，這就是非英語用戶一次又一次不得不面對的事情。因為許多 app 設(shè)計時只是考慮英語，如果你不注意的話，一些細(xì)節(jié)會在翻譯中丟失。

為了避免碰到上面遇到的情況，這里有一些在國際化設(shè)計時需要記住的小技巧：

1. 為較長的翻譯留出空間

最常見的國際化問題是沒有為翻譯留出足夠的空間。

以標(biāo)簽「New!」為例，在英語中，只是帶感嘆號的 4 個字符，但是在法語中，則是 9 個字符：「Nouveau !」。這是英語尺寸的兩倍多，并且在法語中，在感嘆號之前應(yīng)該有一個空格。

如果你的設(shè)計包含單詞，確保你留出了足夠的空間來適應(yīng)較長的譯文。如果不這樣的話，你可能會以重疊或截斷的文本而告終。

哦噢，這里感覺有點擁擠。

我用于估計譯文長度的一種方法是使用谷歌電子表格（Google Spreadsheets）。通過使用谷歌翻譯
功能，我可以一次機(jī)器翻譯多種語言。幾秒鐘內(nèi)，我就可以粗略知道譯文在每種語言中會有多長。

我用谷歌電子表格制作了一個工具來估計譯文長度。

IBM的全球化網(wǎng)站中有一個有用的圖表，上面展示了從英語進(jìn)行翻譯時需要多少額外的空間。

2. 避免以窄欄的形式放置文字

欄是一種用以組織內(nèi)容的優(yōu)秀方式。它們創(chuàng)造了平衡、結(jié)構(gòu)和韻律。它們和你精心設(shè)計的網(wǎng)格系統(tǒng)配合良好。

但是當(dāng)你的文本長度變得不可預(yù)測時會發(fā)生什么呢？這就是在翻譯時會發(fā)生的事情。你 1 行的標(biāo)題會變成 2 到 3 行，而且你美麗的平衡布局會被突然打破。

折斷的文字可以毀掉設(shè)計師一天的好心情。

當(dāng)你以窄欄的形式放置文本時，很有可能一些譯文會折斷成多行。一個安全的選擇是用寬行來替代窄欄，這會給你的文本提供更多的延展空間卻不會破壞排版。

3. 不要在圖片中嵌入文字

如果你的設(shè)計包含有帶文字的圖片，這在翻譯成不同語言時可能會成為一個噩夢。

翻譯者可以在 Photoshop 或 Sketch 文件中翻譯每個文字圖層，但這會變得凌亂，因為你或許要調(diào)整每種語言的布局來適應(yīng)較長的譯文。

下面是一些更好的選項：

（1）使用橫線替代文字

有時你無需使用真正的詞語來傳達(dá)信息，令人驚訝的是幾條模糊的橫線就能做到這點。

（2）用 CSS 生成覆蓋文本

下圖綠色圓圈中的文字實際上并不是圖片的一部分，文字是用 CSS 加上去的。

4. 不要用 UI 元素來造句

設(shè)計師通常會移動不同的 UI 元素來查看哪種布局是最適合的?！缸屛覀儼堰@個文本框放到這里靠右。讓我們把這個下拉列表移到左邊?！?/p>

但是當(dāng)你處理語句的時候你要額外小心。如果你試圖把文字和按鈕、文本框或下拉列表相結(jié)合來組成句子的時候，你經(jīng)常會遇到很多困難。

這會讓 UI 國際化變得混亂。

之所以這會成為 UI 國際化的痛處有幾個原因：

• 不同的次序：不同的語言有不同的詞語排列方法。如果你將「買 3 件襯衫」翻譯成日語時，單詞「買」將會移到句子末尾。如果你的設(shè)計依賴于特定順序的詞句，那么就不適用于每一種語言。
• 復(fù)數(shù)形式：在英語中每個名詞只有一種單數(shù)形式和一種復(fù)數(shù)形式：「1 picture」和「__ pictures」。但是在俄語中，則有 3 種可能的形式。所以如果一個用戶需要在句子中輸入一個數(shù)字的時候，整個句子可能會根據(jù)輸入的數(shù)字出現(xiàn)語法錯誤。
• 詞性：某些語言針對名詞或形容詞會有特定詞性的形式。在法語中，根據(jù)其所描述的事物單詞「large」可以被翻譯成「grand」、「grande」、「grands」或者「grandes」。如果你把一個下拉列表放到句子中，這個句子可能回因其周圍的詞句出現(xiàn)語法錯誤。

所以你會如何替代？一個較好的選擇是讓 UI 元素置于句外：

最好是把UI元素放到句子外邊。

5. 注意隱喻

產(chǎn)品設(shè)計總與隱喻相關(guān)。每個圖標(biāo)，每個按鈕以及每個交互都是物理世界中某種事物的隱喻。Dropbox 的圖標(biāo)是存儲箱的隱喻。點擊并拖動是你用手拿東西的隱喻。

但是某些隱喻在不同的文化中的意思會有所不同。在美國，貓頭鷹代表智慧。在芬蘭與印度，貓頭鷹則代表愚蠢。

同一種物品在世界各地看起來也各不相同。對于大多數(shù)美國人來說，下面的物品就是一個郵箱，但是在全球，郵箱看起來可不是這個樣子。大部分國家不會在他們的郵箱上樹立旗子，所以這個隱喻并不會讓所有人都理解。

在世界的大部分地方，郵箱都不長成這個樣子。

如果可能的話，在將隱喻加入你的設(shè)計之前進(jìn)行一些研究是一個不錯的想法。在 Dropbox，如果我們擔(dān)心全球用戶是如何感知圖標(biāo)或者插圖的時候，我們通常會讓我們的國際化團(tuán)隊來檢查它們。

6. 使用描述性的特性名稱

從市場營銷的角度來看，起一個引發(fā)人們談?wù)摰挠腥ぬ匦悦Q是件誘人的事情。但是有趣的名稱難于翻譯，并且在不同的語言中它們可能毫無意義。

多年以前，Dropbox 引入了一個讓用戶查看文件無限版本歷史的功能特性。我們一開始稱呼這個特性為「口袋老鼠」（Packrat）。

帶有一個小老鼠圖標(biāo)的「口袋老鼠」選項。

雖然「口袋老鼠」對于美國用戶來可能是一個巧妙的名字，但是在其他語言中則毫無意義。旁邊的老鼠圖標(biāo)讓事情更加難以理解。謝天謝地的是我們把這個名字改為「拓展版本歷史」，這個翻譯起來容易多了。

為了避免翻譯錯誤，使用描述性的詞匯來表達(dá)特性名稱更加安全。描述性的詞看起來可能會有點無聊，但是它們更加有助于正確翻譯和提高可用性。

7. 為翻譯提供替代方案

一般來說，當(dāng)你在撰寫需要翻譯的詞語的時候，最好以一種準(zhǔn)確、平實并且中性的風(fēng)格進(jìn)行表述。然而，你可能會有希望更加有趣的品牌時刻。

在這樣的情況下，我們有時會寫兩個版本：一個是英語版本，一個是用于翻譯的替代版本。

你可以為任何難于的翻譯的詞語增加評論。我們正在 Dropbox 為使用的貼紙書寫標(biāo)簽。我們決定用「天了嚕貓」（OMG cat）作為下面貼紙的標(biāo)簽。

哦，我的天哪！這是天了嚕貓。

當(dāng)翻譯者在進(jìn)行翻譯的時候，他們會看到一條評論說這可以被翻譯成「驚訝貓」。這樣，翻譯者可以自由地使用一個有趣的翻譯，但是在需要的時候，他們也可以回退到一個更加平實的翻譯。

以上就是設(shè)計師 John Saito 針對產(chǎn)品UI國際化提出的7條建議：

1. 為較長的譯文留出空間
2. 避免以窄欄的形式放置文字
3. 不要在圖片中嵌入文字
4. 不要用 UI 元素來造句
5. 注意隱喻
6. 使用描述性的特性名稱
7. 為翻譯提供替代方案

設(shè)計師在進(jìn)行國際化的產(chǎn)品 UI 設(shè)計時需要格外注意翻譯適配、設(shè)計隱喻和文案撰寫三個方面，針對拿不準(zhǔn)的設(shè)計提前進(jìn)行調(diào)研并不斷拓寬自己的視野，只有這樣才能為不同語言、國家、文化的用戶提供一致的產(chǎn)品體驗。如果你有什么好的想法歡迎留言回復(fù)，讓我們?yōu)榉?wù)好全球用戶一起努力。

原文地址

譯者：孫啟玉

譯文地址：https://zhuanlan.zhihu.com/p/24938276

本文由 @孫啟玉 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。