國際化設計：為世界不同地區的人設計更好的產品

標題似乎聽起來有點大。但事實上，這是非常實際的一篇文章。現在世界越來越小，一個 APP 也不一定只在國區上架。當你的產品被世界不同地區、講不同語言的人看到的時候，它還能提供同樣優秀的用戶體驗嗎？在這篇文章裡面，來自 dropbox 的設計師 John Saito 為我們提供了一些為國際化設計的思考。

閱讀時間：7 分鐘

想像一下你在試用一個新產品，推特上的人都說好。你打開的時候看到的是這樣的：

嗯？有點奇怪，頂部有個視頻，但用的是看不懂的語言。中間的介紹文字也不知道說的是什麼。右下角按鈕上的文字甚至連邊框都沒有適配好。 這也能算好的產品？

好吧，其實是因為這個產品最開始是用精靈語設計的，然後翻譯成了英文。大部分用這個產品的人都看的是精靈語，所以他們不知道用你的語言看這個產品時的體驗。

同樣地，對於設計師來說，要讓你的產品被更多人喜歡（尤其是那些需要走上國際市場的產品），就需要注意這些細節。因為很多產品都只考慮了某一個語言的設計情況。

下面是一些避免這些問題的建議：

1. 為更長的翻譯文字預留出空間

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

一個簡單的例子，在英語裡面的「New! 」這個單詞，法語裡面卻是「Nouveau ! 」而且法語的感嘆號前面還需要留一個空格。字元數從四個變成了八個，變成了整整兩倍。更不要說字元更多的德語了。另外，中文字元本身一個字就相當於兩個英文字元，這也是設計的時候需要考慮的。

如果設計涉及單詞，那麼要考慮為單詞留出更長的翻譯空間。不然的話，你的文字可能就會被切斷了。

看起來有點擠的邊緣文字

我用的一個估計方法是用谷歌電子表格。用谷歌翻譯可以得到一系列的翻譯文字，然後我就能大致知道被翻譯文字的長度最長有多少，這樣就可以提前算好預留空間。

我用谷歌電子表格做的一個翻譯長度測算表

IBM』s globalization site 有一個非常實用的表格，給出了從英文翻譯到不同語言需要預留多少空間：

中文的話可以按照 1/2 的比例推算。

2. 窄距邊框裡面不要放文字

邊框是組織內容的好工具。它讓你的設計更有平衡感，結構感和韻律。但如果往邊框里放不可預知的文字會怎樣？

一旦你設計好的文字翻譯成其他語言，可能就會出現上圖這種被迫換行的情況，然後你美麗的設計就毀於一旦了。

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

如果你的設計包含了有文字的圖片，那在翻譯之後，可能就會變成一場噩夢。

這裡有些更好的建議：

• 用線行代替文字：有時候，你其實並不需要真實的文字來表達你的設計，幾行恰到好處的線條就可以讓人意會

• 用 CSS 加一層：綠色圈圈裡面的文字其實並不是圖片的一部分，而是用 CSS 又加了一層文字上去。

4. 不要利用 UI 組件來構成句子

設計師經常會到處移動 UI 組件來看看放在哪裡合適。把文本框放在左邊看看，把下拉菜單放在右邊看看。

但你在處理文字的時候，就需要格外小心了。如果你打算把文字和一些組件，例如按鈕啦，框啦，下拉菜單啦之類的組合在一起，可能翻譯之後就會產生很多問題。

這樣對產品國際化不利的原因有幾點：

• 不同的單詞順序：因為不同語言裡面，一個句子里單詞構成的順序常常是不同的。比如法語形容詞的後置，日語里動詞的後置，等等。
• 複數的問題：在英語裡面，每個名詞都有一個單數形式一個複數形式，比如「1 picture 」 「 「_ pictures 」。但在俄語裡面，複數有三種可能的形式。在法語裡面，有不少單詞變成複數之後拼寫也會改變，所以如果用戶要在句子中間輸入數字，那麼這種設計就可能造成語法錯誤。
• 陰陽性的問題：有些語言裡面，單詞是區分陰陽性的。比如在法語裡面，形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個下拉菜單框，那麼可能又會造成語法錯誤。

所以要怎麼辦呢？

一個好的建議就是把 UI 組件放到句子之外。

5. 注意隱喻

設計就是關於隱喻的一切。許多設計都是對於現實世界存在物體的反映。比如，dropbox 的設計原型就來源於生活中的存儲箱。

然而在不同的文化中，不同的物品卻隱喻著不同的內涵。比如在美國，貓頭鷹象徵著智慧，而在芬蘭和印度，則貓頭鷹則象徵著愚蠢。（突然好奇芬蘭讀者讀哈利波特的感受。）

不同的物品在不同國家也很可能不一樣，比如下圖的信箱。在美國可以這樣設計，但是在其他很多國家，信箱上面並沒有一個小旗子。所以如果設計成這樣的圖片，可能其他國家的人並不會理解這是代表一個信箱。

這也從另一個角度說明了《設計精髓》裡面講到的，不要在設計中過分運用隱喻的原則。

如果可能的話，要提前對你設計所運用的隱喻做好調查。在 dropbox，我們如果擔心一個隱喻的運用是否能國際化，就會去諮詢我們的國際化團隊。

6. 對功能使用描述性的語言

從營銷的角度來講，我們總是剋制不住要給產品的每個功能起一個好玩的、有意思的名字。然而從國際化角度來說，翻譯過後的語言不一定會有源語言那樣的效果，甚至可能毫無意義。

幾年前，dropbox 向用戶展示了一個新的功能，也就是在文件裡面加上了無限的版本歷史記錄。我們給這個功能起名叫「packrat 」（老鼠包）

然而，儘管「Packrat 」在英語裡面聽起來顯得很聰明，對其他語言的用戶來說，這確實毫無意義的一個詞。尤其是，我們還在這個功能左邊加上了一個老鼠圖標，這就更讓人困惑了。不過好在我們最終還是決定把名字改成了直白易懂的「Extended version history 」。這明顯好翻譯多了。

為了避免翻譯帶來的問題，最好還是為功能取一個描述性的文字。描述性的文字可能比較無趣，但卻實際上為國際用戶帶來了更好的體驗。

7. 為翻譯提供選擇

總之，如果你正在為產品寫的文字是需要被翻譯的，那麼要保證一個準確、書面並且中立的風格。但有時候，你可能會有想讓品牌更好玩的時刻。

這樣的情況下，建議你提供兩個版本，一個源語言版本，一個為翻譯提供的版本。

你可以為任何有點難翻譯的部分提供標註。目前我們正在為 dropbox 的產品貼紙撰寫標籤。以我們的「OMG cat 」標籤為例

當譯者看到這個 「OMG cat 」標籤的時候，他們也會看到有一個備註說也可以翻譯成 「Surprised cat 」。這樣譯者就有了很大的翻譯自由。他可以選擇是譯成比較逗的風格還是比較書面的風格。

感謝閱讀！希望對你們有所幫助。

原文：Design for internationalization

這應該是年前我（我的專欄：盒子以外）為大家貢獻的最後一篇文章啦，在這裡祝大家新年快樂，新年新智慧，越來越聰明。有個好用的腦子比什麼都重要。：）

推薦閱讀：