你給我翻譯翻譯,什麼叫用 Adobe Xd 設計多國語系網站

林育正 Riven
May 3 · 14 min read
多國語系網頁切換在跨國性的網站、產品中無疑是對使用者相當友善的做法,但對於工程師/設計師來說可非常不友善!要怎麼做到同一套設計稿與程式碼自動切換成多國語言呢?這篇文章將由設計師的可行作法切入,並期待能減少工程師在開發上的困難。

所謂的多國語系網站

Adobe Xd Plugin 「World Ready」介紹


取得 Google Translate API 金鑰

將這串金鑰貼到 World Ready 即可。

如果需要更多語言的版本,就是再勾選即可,不過這個外掛預設是英文,如果有需要更多語言翻譯,在等等的 Googhe Sheet 操作流程中就可以解決。
日本人與家畜

使用 Google 試算表 + Google 翻譯進行語言協作

比如說網頁中的「關於我們」區快
若設為個人或機構內才可檢視,則無法套用 Plugin。
貼上公開連結
自動套入 Google 試算表內的內容

Google 試算表的翻譯蒟蒻函數

=GOOGLETRANSLATE([文字], [原文語言], [譯文語言])
我直接把這份 Google 試算表連結公開給你,就算看不懂上面在寫殺小,還是可以用複製貼上的方式練習:點此取得試算表範本 打開後直接副本拿走就好。
此設定會自動儲存,下次打開不用重新來。
透過 Google 試算表翻譯 + Google Sheet 外掛導入 Adobe Xd
多國語言網站設計流程整理

後記與補充

國際化(i18n)與本地化(L10n)

Adobe Xd 學習型社群與資源


Google Translate 函數各國語法代稱

af 南非荷蘭語 sq 阿爾巴尼亞語
ar-sa 阿拉伯語(沙特阿拉伯)
ar-iq 阿拉伯語(伊拉克)
ar-eg 阿拉伯語(埃及)
ar-ly 阿拉伯語(利比亞)
ar-dz 阿拉伯語(阿爾及利亞)
ar-ma 阿拉伯語(摩洛哥)
ar-tn 阿拉伯語(突尼斯)
ar-om 阿拉伯語(阿曼)
ar-ye 阿拉伯語(也門)
ar-sy 阿拉伯語(敘利亞)
ar-jo 阿拉伯語(約旦)
ar-lb 阿拉伯語(黎巴嫩)
ar-kw 阿拉伯語(科威特)
ar-ae 阿拉伯語(阿拉伯聯合酋長國)
ar-bh 阿拉伯語(巴林)
ar-qa 阿拉伯語(卡塔爾)
eu 巴斯克語
bg 保加利亞語
be 貝勞語
ca 加泰羅尼亞語
zh-tw 繁體中文(台灣)
zh-cn 簡體中文(中國)
zh-hk 中文(香港)
zh-sg 中文(新加坡)
hr 克羅地亞語
cs 捷克語
da 丹麥語
nl 荷蘭語(標準)
nl-be 荷蘭語(比利時)
en 英語
en-us 英語(美國)
en-gb 英語(英國)
en-au 英語(澳大利亞)
en-ca 英語(加拿大)
en-nz 英語(新西蘭)
en-ie 英語(愛爾蘭)
en-za 英語(南非)
en-jm 英語(牙買加)
en 英語(加勒比)
en-bz 英語(伯利茲)
en-tt 英語(特立尼達)
et 愛沙尼亞語
fo 法羅語
fa 波斯語
fi 芬蘭語
fr 法語(標準)
fr-be 法語(比利時)
fr-ca 法語(加拿大)
fr-ch 法語(瑞士)
fr-lu 法語(盧森堡)
gd 蓋爾語(蘇格蘭)
gd-ie 蓋爾語(愛爾蘭)
de 德語(標準)
de-ch 德語(瑞士)
de-at 德語(奧地利)
de-lu 德語(盧森堡)
de-li 德語(列支敦士登)
el 希臘語
he 希伯來語
hi 北印度語
hu 匈牙利語
is 冰島語
in 印度尼西亞語
it 意大利語(標準)
it-ch 意大利語(瑞士)
ja 日語
ko 朝鮮語
ko 朝鮮語(韓國)
lv 拉脫維亞語
lt 立陶宛語
mk FYRO 馬其頓語
ms 馬來西亞語
mt 馬耳他語
no 挪威語(博克馬爾)
no 挪威語(尼諾斯克)
pl 波蘭語
pt-br 葡萄牙語(巴西)
pt 葡萄牙語(葡萄牙)
rm 拉丁語系
ro 羅馬尼亞語
ro-mo 羅馬尼亞語(摩爾達維亞)
ru 俄語
ru-mo 俄語(摩爾達維亞)
sz 薩摩斯語(拉普蘭)
sr 塞爾維亞語(西里爾)
sr 塞爾維亞語(拉丁)
sk 斯洛伐克語
sl 斯洛文尼亞語
sb 索布語 es 西班牙語(西班牙傳統)
es-mx 西班牙語(墨西哥)
es 西班牙語(西班牙現代)
es-gt 西班牙語(危地馬拉)
es-cr 西班牙語(哥斯達黎加)
es-pa 西班牙語(巴拿馬)
es-do 西班牙語(多米尼加共和國)
es-ve 西班牙語(委內瑞拉)
es-co 西班牙語(哥倫比亞)
es-pe 西班牙語(秘魯)
es-ar 西班牙語(阿根廷)
es-ec 西班牙語(厄瓜多爾)
es-cl 西班牙語(智利)
es-uy 西班牙語(烏拉圭)
es-py 西班牙語(巴拉圭)
es-bo 西班牙語(玻利維亞)
es-sv 西班牙語(薩爾瓦多)
es-hn 西班牙語(洪都拉斯)
es-ni 西班牙語(尼加拉瓜)
es-pr 西班牙語(波多黎各)
sx 蘇圖語
sv 瑞典語
sv-fi 瑞典語(芬蘭)
th 泰語
ts 湯加語
tn 瓦納語
tr 土耳其語
uk 烏克蘭語
ur 烏爾都語
ve 文達語
vi 越南語
xh 科薩語
ji 依地語
zu 祖魯語

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

林育正 Riven

Written by

Monospace 共同創辦人|Adobe Xd 官方合作講師|UI/UX & WordPress 網頁設計師 https://www.facebook.com/Riven.Design

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com