多語(yǔ)言（國(guó)際化）網(wǎng)頁(yè)在設(shè)計(jì)時(shí)，往往因不理解該地區(qū)的文化或語(yǔ)言，而忽視了許多小細(xì)節(jié)，累積起來(lái)就會(huì)造成諸多問題，例如：降低轉(zhuǎn)換率、無(wú)法完全地傳遞產(chǎn)品價(jià)值理念、降低使用者的信賴… 等。作者 John Saito 以他在 Dropbox 工作的經(jīng)驗(yàn)，提供許多設(shè)計(jì)的小技巧給讀者，希望能解決在設(shè)計(jì)多語(yǔ)言產(chǎn)品的相關(guān)問題，期待能讓產(chǎn)品的體驗(yàn)更好。

試著想像你正在試用一款新 app，這 app 在 微博 上受眾多人推薦、分享 … 說它很棒、生活因此改變了 … 等。這 app UI 如下圖，仔細(xì)看看是不是有些地方令你感到怪怪的？介面上方有段影片，但影片上的標(biāo)題文字你卻看不懂；介面上的用字有些奇怪，按鈕上的文字也跑版、破格。如此的 UI 呈現(xiàn)品質(zhì)，你還會(huì)信任這產(chǎn)品嗎？
當(dāng)然，這可以被解釋為此 app 不是針對(duì)你所在的地區(qū)語(yǔ)言所設(shè)計(jì)（也許是精靈語(yǔ) XD～），所以這些開發(fā)者、設(shè)計(jì)師并不曉得翻譯成各國(guó)家的語(yǔ)言后會(huì)變成怎樣。無(wú)論你信不信，這確實(shí)是非英文系國(guó)家使用者常會(huì)遇到的問題！因?yàn)樵S多 app 僅針對(duì)英文語(yǔ)系來(lái)設(shè)計(jì)，而忽略了一些翻譯后的設(shè)計(jì)細(xì)節(jié)。

為了避免類似上述的問題，底下提供了一些在設(shè)計(jì) 多語(yǔ)言（或國(guó)際化）產(chǎn)品時(shí)該注意的設(shè)計(jì)技巧：
1. 預(yù)留切換 多語(yǔ)言 的文字空間
多語(yǔ)言 產(chǎn)品最常遇到的問題就是在介面上沒有預(yù)留足夠的空間，來(lái)解決不同語(yǔ)言在翻譯時(shí)所造成的文字長(zhǎng)度差異。例如 " New! " 這個(gè)字詞包含了四個(gè)字元，但翻譯成法語(yǔ)后，就會(huì)變成9個(gè)字元（Nouveau !），超過英文的兩倍。
因此若設(shè)計(jì)的介面上包含了文字的排版，請(qǐng)確認(rèn)是否保留了足夠的空間。如果沒有，在轉(zhuǎn)換成它國(guó)語(yǔ)系時(shí)，就可能會(huì)發(fā)生文字重疊或切斷的跑版問題。


我們不可能懂世界上所有的語(yǔ)言，但我們可以借助工具來(lái)預(yù)測(cè)各種語(yǔ)言的長(zhǎng)度，如 Google 試算表 搭配 GOOGLETRANSLATE 的功能，可同時(shí)轉(zhuǎn)譯多種語(yǔ)言。雖然不一定是正確的用法，但可快速概略地了解不同語(yǔ)言文字的長(zhǎng)度。


IBM’s globalization 網(wǎng)站中有個(gè)非常有用的表格，上方告知若要將英文翻譯成其他語(yǔ)言，需要的空間大概是多少。

2. 避免將文字排列在狹小的直欄（columns）中
透過直欄 （Column）編排內(nèi)容是個(gè)不錯(cuò)的方式，它讓內(nèi)容具平衡、結(jié)構(gòu)性與協(xié)調(diào)的特性，并且能與你精心配置的網(wǎng)格系統(tǒng)良好搭配。但當(dāng)文案長(zhǎng)度無(wú)法被預(yù)期時(shí)會(huì)發(fā)生什么事？這是多語(yǔ)言產(chǎn)品在翻譯時(shí)經(jīng)常會(huì)遇到的！原先一行的標(biāo)題可能會(huì)變成二或三行，因而破壞了你精心設(shè)計(jì)的排版平衡。

當(dāng)你把文字放于較窄的直欄（column）中，就有很高的機(jī)率讓翻譯后的文字超過預(yù)設(shè)欄寬范圍而形成多行。所以較安全的作法是以較寬的橫列（row）來(lái)取代較窄的直欄（column），這樣就能有更多的彈性空間，而不會(huì)破壞了原先的排版。
3. 別在圖片中放文字
如果圖片中包含文字，又必須要有多語(yǔ)言的版本，這對(duì)設(shè)計(jì)師來(lái)說簡(jiǎn)直是個(gè)惡夢(mèng)。雖然設(shè)計(jì)師可修改 Photoshop 或 Sketch 檔案中的文字圖層，但你必須每種語(yǔ)系都進(jìn)行調(diào)整以適應(yīng)各種長(zhǎng)度的文字而造成排版上的混亂。
以下有兩個(gè)較好的解決方式：
使用線條取代文字：當(dāng)不一定要使用文字才能傳遞資訊時(shí)，可以使用不同粗細(xì)、顏色的線條來(lái)呈現(xiàn)。

直接使用前端語(yǔ)言：如下圖，綠色圓形上的文字并不屬于圖片的一部分，而是用網(wǎng)頁(yè)前端語(yǔ)言刻出來(lái)的（因此切換語(yǔ)系時(shí)即能自動(dòng)翻譯，而不需要為了多語(yǔ)言而制作很多張圖）。

4. 不要在句子中擺放 UI 元件
對(duì)設(shè)計(jì)師來(lái)說，不斷調(diào)整 UI 元件的排版來(lái)確認(rèn)哪個(gè)是最好的方案，是件再正常不過的事情。但其中若包含了文字時(shí)，你就要特別的注意。例如：包含文字的按鈕、checkbox 或下拉選單安排于句子中，就可能會(huì)造成許多問題。

為什么這樣做對(duì)多語(yǔ)言設(shè)計(jì)會(huì)造成困擾？
排列文法不同：不同語(yǔ)言因文法不同，排列也會(huì)有所差異。譬如將 “Buy 3 shirts” 翻譯成日文，“Buy” 會(huì)移到句子的最后。如果你所擺放的 UI 元件在句子中順序是無(wú)法被改變，那則無(wú)法順利地適應(yīng)不同語(yǔ)系的句子。
復(fù)數(shù)：對(duì)英文來(lái)說，會(huì)有單數(shù)與復(fù)數(shù)的兩種名詞表達(dá)方式，如：1 picture” 與“__ pictures” 。但在俄語(yǔ)中，有三種表達(dá)方式。所以如果使用者在句子中輸入數(shù)量，句子就需要跟著改變，否則文法就會(huì)有誤。
詞性：有些語(yǔ)言對(duì)名詞與形容詞有特別的用法。在法語(yǔ)中，“ large ” 會(huì)視所描述的東西尺寸，而使用 grand、 grande、grands 或 grandes 等不同字。如果你在句子中擺放一個(gè)下拉式按鈕，可能在翻譯后就會(huì)造成文法上的錯(cuò)誤。
那該怎么做呢？比較好的作法是讓這些元件獨(dú)立存在，譬如放在后面（下圖）。

5. 同一件事有不同的文化隱喻
在產(chǎn)品設(shè)計(jì)中，我們常使用真實(shí)世界的隱喻于 icon、按鈕與互動(dòng)方式上。例如，Dropbox icon 即使用了置物箱的隱喻； " 點(diǎn)擊并拖拉 " 的互動(dòng)方式取自手拿物體的隱喻。
但有些東西對(duì)不同文化的人會(huì)有相異的隱喻，例如在美國(guó)，貓頭鷹代表智慧，但在芬蘭或印度，它代表了愚蠢。此外，某些物體對(duì)不同文化的認(rèn)知也不盡相同。美國(guó)人對(duì)郵箱的印象如下圖，但其他國(guó)家的郵箱就不一定長(zhǎng)成這樣，像是大多數(shù)國(guó)家并不會(huì)把旗幟插于郵箱上。此時(shí)，隱喻便不管用了。

在開始設(shè)計(jì)前，最好針對(duì)你所想使用的隱喻做些研究。在Dropbox 里，當(dāng)我們對(duì)于將推出的多語(yǔ)言設(shè)計(jì)（icon 、插畫）有文化認(rèn)知上的疑慮時(shí)，通常會(huì)詢問“解決國(guó)際化問題" 的團(tuán)隊(duì)（Internationalization team）是否能有效的認(rèn)知這些設(shè)計(jì)背后的資訊。
6. 使用能描述功能的詞匯
就行銷的觀點(diǎn)，他們喜歡針對(duì)某些功能發(fā)明有趣的名稱，來(lái)吸引目光。但有趣的名字往往難以翻譯成不同語(yǔ)言，甚至在其他語(yǔ)言中不帶有意義。幾年前，Dropbox 推出了無(wú)限版本控管的功能，最初命名為 “Packrat” 。

也許 “Packrat” 對(duì)美國(guó)人來(lái)說挺有趣的，但對(duì)其他語(yǔ)言來(lái)說卻沒有任何意思，尤其左側(cè)的老鼠 icon（上圖），更讓人困惑。發(fā)現(xiàn)問題后，我們改為 “Extended version history” ，很直接也更好翻譯。
為了避免翻譯造成的問題，使用描述性的文字作為功能名稱的風(fēng)險(xiǎn)較小，雖然這樣可能較無(wú)聊，但更易于翻譯且使用性也較高。
7. 多準(zhǔn)備一份翻譯版
一般來(lái)說，當(dāng)你所撰寫的文案必須全部被翻譯成多語(yǔ)言時(shí)，用字風(fēng)格最好是精準(zhǔn)、原始不夸張且自然的。然而總會(huì)有些情境?，你想特別突顯品牌特性而使用一些有趣、好玩的用字。此時(shí)，我們就會(huì)同時(shí)出兩種多語(yǔ)言版本：一個(gè)為在地化語(yǔ)系版；另一個(gè)則是翻譯版。

如果遇到較特殊且不易翻譯的字匯，你可增加注解，讓翻譯者參考。舉個(gè)例子，最近我們?yōu)?Dropbox 的貼圖建立文字標(biāo)簽，我們打算給下圖的文字標(biāo)簽為 “OMG cat”，同時(shí)在下方注解：也可用 “Surprised cat” 來(lái)翻譯。翻譯者就更有彈性且也能兼顧用字的特性。

文章標(biāo)題：多語(yǔ)系網(wǎng)頁(yè)在設(shè)計(jì)上該考慮什么，才能有好的使用者體驗(yàn)？
文章分享：http://www.js-pz168.com/news17/143517.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)