多語係網頁在設計上該考慮什麼，才能有好的使用者體驗？
標簽：
網頁設計
2017.04.25
多語言（國際化）網頁在設計時，往往因不理解該地區的文化或語言，而忽視了許多小細節，累積起來就會造成諸多問題，例如：降低轉換率、無法完全地傳遞產品價值理念、降低使用者的信賴… 等。作者 John Saito 以他在 Dropbox 工作的經驗，提供許多設計的小技巧給讀者，希望能解決在設計多語言產品的相關問題，期待能讓產品的體驗更好。
試著想像你正在試用一款新 app，這 app 在 微博 上受眾多人推薦、分享 … 說它很棒、生活因此改變了 … 等。這 app UI 如下圖，仔細看看是不是有些地方令你感到怪怪的？介麵上方有段影片，但影片上的標題文字你卻看不懂；介麵上的用字有些奇怪，按鈕上的文字也跑版、破格。如此的 UI 呈現品質，你還會信任這產品嗎？
當然，這可以被解釋為此 app 不是針對你所在的地區語言所設計（也許是精靈語 XD～），所以這些開發者、設計師並不曉得翻譯成各國家的語言後會變成怎樣。無論你信不信，這確實是非英文係國家使用者常會遇到的問題！因為許多 app 僅針對英文語係來設計，而忽略了一些翻譯後的設計細節。
為了避免類似上述的問題，底下提供了一些在設計 多語言（或國際化）產品時該注意的設計技巧：
1. 預留切換 多語言 的文字空間
多語言 產品最常遇到的問題就是在介麵上沒有預留足夠的空間，來解決不同語言在翻譯時所造成的文字長度差異。例如 " New! " 這個字詞包含了四個字元，但翻譯成法語後，就會變成9個字元（Nouveau !），超過英文的兩倍。
因yin此ci若ruo設she計ji的de介jie麵mian上shang包bao含han了le文wen字zi的de排pai版ban，請qing確que認ren是shi否fou保bao留liu了le足zu夠gou的de空kong間jian。如ru果guo沒mei有you，在zai轉zhuan換huan成cheng它ta國guo語yu係xi時shi，就jiu可ke能neng會hui發fa生sheng文wen字zi重zhong疊die或huo切qie斷duan的de跑pao版ban問wen題ti。
咦？是不是覺得空間有點窄？
我們不可能懂世界上所有的語言，但我們可以借助工具來預測各種語言的長度，如 Google 試算表 搭配 GOOGLETRANSLATE 的功能，可同時轉譯多種語言。雖然不一定是正確的用法，但可快速概略地了解不同語言文字的長度。
這是我透過 google 試算表所做的 “預估” 文字長度之工具
IBM’s globalization 網站中有個非常有用的表格，上方告知若要將英文翻譯成其他語言，需要的空間大概是多少。
2. 避免將文字排列在狹小的直欄（columns）中
透過直欄 （Column）編排內容是個不錯的方式，它讓內容具平衡、jiegouxingyuxietiaodetexing，bingqienengyunijingxinpeizhidewanggexitonglianghaodapei。dandangwenanchangduwufabeiyuqishihuifashengshenmeshi？zheshiduoyuyanchanpinzaifanyishijingchanghuiyudaode！原先一行的標題可能會變成二或三行，因而破壞了你精心設計的排版平衡。
當你把文字放於較窄的直欄（column）中，就有很高的機率讓翻譯後的文字超過預設欄寬範圍而形成多行。所以較安全的作法是以較寬的橫列（row）來取代較窄的直欄（column），這樣就能有更多的彈性空間，而不會破壞了原先的排版。
3. 別在圖片中放文字
如果圖片中包含文字，又必須要有多語言的版本，這對設計師來說簡直是個惡夢。雖然設計師可修改 Photoshop 或 Sketch 檔案中的文字圖層，但你必須每種語係都進行調整以適應各種長度的文字而造成排版上的混亂。
以下有兩個較好的解決方式：
使用線條取代文字：當不一定要使用文字才能傳遞資訊時，可以使用不同粗細、顏色的線條來呈現。
直接使用前端語言：如下圖，綠色圓形上的文字並不屬於圖片的一部分，而是用網頁前端語言刻出來的（因此切換語係時即能自動翻譯，而不需要為了多語言而製作很多張圖）。
4. 不要在句子中擺放 UI 元件
對設計師來說，不斷調整 UI 元件的排版來確認哪個是最好的方案，是件再正常不過的事情。但其中若包含了文字時，你就要特別的注意。例如：包含文字的按鈕、checkbox 或下拉選單安排於句子中，就可能會造成許多問題。
為什麼這樣做對多語言設計會造成困擾？
排列文法不同：不同語言因文法不同，排列也會有所差異。譬如將 “Buy 3 shirts” 翻譯成日文，“Buy” 會移到句子的最後。如果你所擺放的 UI 元件在句子中順序是無法被改變，那則無法順利地適應不同語係的句子。
複數：對英文來說，會有單數與複數的兩種名詞表達方式，如：1 picture” 與“__ pictures” 。但在俄語中，有三種表達方式。所以如果使用者在句子中輸入數量，句子就需要跟著改變，否則文法就會有誤。
詞性：有些語言對名詞與形容詞有特別的用法。在法語中，“ large ” 會視所描述的東西尺寸，而使用 grand、 grande、grands 或 grandes 等不同字。如果你在句子中擺放一個下拉式按鈕，可能在翻譯後就會造成文法上的錯誤。
那該怎麼做呢？比較好的作法是讓這些元件獨立存在，譬如放在後麵（下圖）。
5. 同一件事有不同的文化隱喻
在產品設計中，我們常使用真實世界的隱喻於 icon、按鈕與互動方式上。例如，Dropbox icon 即使用了置物箱的隱喻； " 點擊並拖拉 " 的互動方式取自手拿物體的隱喻。
但dan有you些xie東dong西xi對dui不bu同tong文wen化hua的de人ren會hui有you相xiang異yi的de隱yin喻yu，例li如ru在zai美mei國guo，貓mao頭tou鷹ying代dai表biao智zhi慧hui，但dan在zai芬fen蘭lan或huo印yin度du，它ta代dai表biao了le愚yu蠢chun。此ci外wai，某mou些xie物wu體ti對dui不bu同tong文wen化hua的de認ren知zhi也ye不bu盡jin相xiang同tong。美mei國guo人ren對dui郵you箱xiang的de印yin象xiang如ru下xia圖tu，但dan其qi他ta國guo家jia的de郵you箱xiang就jiu不bu一yi定ding長chang成cheng這zhe樣yang，像xiang是shi大da多duo數shu國guo家jia並bing不bu會hui把ba旗qi幟zhi插cha於yu郵you箱xiang上shang。此ci時shi，隱yin喻yu便bian不bu管guan用yong了le。
在開始設計前，最好針對你所想使用的隱喻做些研究。在Dropbox 裏，當我們對於將推出的多語言設計（icon 、插畫）有文化認知上的疑慮時，通常會詢問“解決國際化問題" 的團隊（Internationalization team）是否能有效的認知這些設計背後的資訊。
6. 使用能描述功能的詞彙
就jiu行xing銷xiao的de觀guan點dian，他ta們men喜xi歡huan針zhen對dui某mou些xie功gong能neng發fa明ming有you趣qu的de名ming稱cheng，來lai吸xi引yin目mu光guang。但dan有you趣qu的de名ming字zi往wang往wang難nan以yi翻fan譯yi成cheng不bu同tong語yu言yan，甚shen至zhi在zai其qi他ta語yu言yan中zhong不bu帶dai有you意yi義yi。幾ji年nian前qian，Dropbox 推出了無限版本控管的功能，最初命名為 “Packrat” 。
也許 “Packrat” 對美國人來說挺有趣的，但對其他語言來說卻沒有任何意思，尤其左側的老鼠 icon（上圖），更讓人困惑。發現問題後，我們改為 “Extended version history” ，很直接也更好翻譯。
為了避免翻譯造成的問題，使用描述性的文字作為功能名稱的風險較小，雖然這樣可能較無聊，但更易於翻譯且使用性也較高。
7. 多準備一份翻譯版
一般來說，當你所撰寫的文案必須全部被翻譯成多語言時，用字風格最好是精準、原始不誇張且自然的。然而總會有些情境?，你想特別突顯品牌特性而使用一些有趣、好玩的用字。此時，我們就會同時出兩種多語言版本：一個為在地化語係版；另一個則是翻譯版。
如果遇到較特殊且不易翻譯的字彙，你可增加注解，讓翻譯者參考。舉個例子，最近我們為 Dropbox 的貼圖建立文字標簽，我們打算給下圖的文字標簽為 “OMG cat”，同時在下方注解：也可用 “Surprised cat” 來翻譯。翻譯者就更有彈性且也能兼顧用字的特性。
