製作多語系界面設計的 7 個訣竅
當你的產品會在多個國家上線，在進行界面設計時，想必一定曾經碰到過多語言適配上的問題吧，特別是當我們用中文先開始做設計時，最容易遇到原本很短的一個詞彙，轉換成其他語言時變成很長一串，而影響到排版及視覺體驗，甚至造成操作或閱讀上的不便，今天這篇文章就要來跟大家分享一些在做多語言 UI 設計時的眉眉角角，那就讓我們開始吧！
想要測試不同語系的切換效果，直接替換成對應的語言自然是最直接的方，但我們在設計時不一定能立即得到全部語言的文案，在無法確定確切文案的情況下，也能夠利用一些小工具，來快速地測試不同語系的展示效果，以下介紹兩個方法：
1. Google Sheet & Googletranslate
在Google Sheet 中可以利用一些簡單的參數設置，快速的將你的文案翻譯成對應的語言，也可以透過字數統計的功能簡單的計算不同語言所需要的字數，下面的圖示為一個簡單的範例：
翻譯的部分只要使用以下句法，就可以快速地得到翻譯後的文案
GOOGLETRANSLATE(text, [source_language, target_language])
在 source_language 的部分可以輸入”auto“ 自動判斷，當然也可以自行輸入對應語言的代碼，語言代碼可以參考這個頁面 🔗 Link ，關於 Google Translate 在 Google Sheet 中的使用，也可以看看 Google 的官方教學，你會發現這其實很簡單，以我的範例來做說明，我要翻譯的文案在 B1 這一格，而我想要把它翻譯成日文，在格中輸入以下句法即可
=GOOGLETRANSLATE(B1,”auto”,”ja”)
雖然 Google Translate 翻譯的結果不一定是最終確認的文案，但在設計階段做多語言的考量已經非常足夠了。
字數統計的部分也很簡單，只要在輸入格中使用以下句法，就能夠快速計算。
=len(Text)
2. Figma Plugin
我自己平常在做設計時使用的軟體是 Figma，它簡單卻強大的設計功能還有跟工程師及產品團隊的協作的便利度，相信讓不少設計師都從其他軟體紛紛跳槽過來的吧，除了前面提到的優點，Figma 還有個很大的優勢就是社群中大量的插件 (Plugins) 和設計資源了，其中也包含了自動翻譯的插件，下面這個就是我所使用的 Plugin。
它支持的語系非常的多，雖然不是百分之百都能翻譯正確，有些比較長的文案也會有翻譯不出來的時候，但是在做多語系的快速實驗時，也已經有足夠的效果了。
不論是用 Google Translate 或是 Figma Plugin 中的 Translator 來做翻譯的快速試驗，都可以發現不同的語言的長度都有著很大的差異。以「立即註冊」這個文案來看，不同的語言不論是在字數或是佔用的寬度上都各不相同，那在做多語言適配時該怎麼設計才能避免一些破版、折行⋯⋯等等的問題呢？下面將會開始介紹一些設計時的小訣竅！
TIP 1： 在能保證閱讀性的前提下，減小字號
當你將要翻譯的語系越多，文案長度越是不容易預測，而去限制字符的數量也較難以執行，在確定內容的優先級後，以易讀性為前提，可以適當的減小字號，以確保在不同語系下用戶都能夠順暢的瀏覽。
至於字號可以縮到多小呢？我們可以將不同優先級的文案大致分為幾類：
- 圖標、圖片的說明文字：最小約可以使用到 10pt 或 11pt，像是在 iOS 系統中的 Tab Bar，圖標的說明文字就只有 10 pt，因為這都是屬於輔助說明的文案，圖標及圖片都能有一定的引導意義，所以字號縮減到這麼小還在能夠接受的範圍內。
- 次級文案：次級內容的部分最小使用到 12pt 就已經是極限了，比較建議的最小尺寸是13pt，閱讀起來會比較舒適。
- 主要閱讀文字：正文的部分建議最小使用到 14pt，近年來也比較流行大一點的字體運用，常規的話建議是使用 16pt 會比較適當。
TIP 2：增加文案佔位的寬度
除了調整文字的大小，增加文案的佔位寬度也是一種方式，大多數語言不像中文一樣一個字元就是一個字，像英文就是由數個字元組合成一個單字，若是空間太小可能連一個單字都無法完整展示，會嚴重影響閱讀體驗。
大家都不陌生的訂房網站 Airbnb 支援的語系非常多，以這個頁面為例，在界面上就利用較大的文字區域，來適應多語系的問題，從圖上我們就可以看出中文跟西文的長度相差甚遠，現在就讓我們試著把文字佔位的區域改得小一點看看。
中文版的部分其實還不會有違和感，但西語版的標題的折行就已會影響閱讀，標題與內文的平衡感也被破壞了。
TIP 3：避免多列佈局
這點其實跟第二點蠻接近的，都是希望盡量增加文案佔位的區域，以符合多語系的適配。我們在做設計時經常會使用網格系統 ( Grid System ) 來作為排版的參考，可以幫助我們讓畫面更平衡、具協調性，在做界面設計時直欄 ( columns ) 就是一個很常使用的輔助參考，而在做多語系產品時，應該盡量避免將文字放在狹窄的直欄中，雖然這樣的多列佈局，能夠節省空間也能保有平衡感，但在多語系的產品上就需要謹慎運用了。
從這兩個產品都能夠明顯的發現在英文的狀況下，文字會很容易折行，不過這樣程度的折行還不至於到令人覺得難受，在許可的狀況下仍然是可以使用多列的設計，只是記得要謹慎使用。
TIP 4：使用系統字體
有時候我們在做設計時，會為了整體的設計風格、品牌識別⋯⋯等原因購買字體，在界面上應用，然而這些字體可能無法支持你所需要的全部語系，再切換語系時就會變回系統字，反而造成了不同語系間的風格差異，影響倒是覺得呈現，使用系統字就成了最保險的選擇。
如果是在設計形象網站，風格性、品牌的識別度非常重要時，也可以在一些不需要做多語言適配的字段使用特殊字體，像是品牌標語、數字之類的地方，也是能夠展現個性化的設計。
TIP 5：圖標代替文字
由於不同語系的文字長度不可控，在能夠直觀理解的情況下，直接利用圖標代替文字也是在做多語系界面設計時的一個好方法，像是電商產品的收藏、購物車，或是訂房產品的成人、兒童等的圖標都是很容易辨識理解，在有多語系適配需求時，都很適合直接使用圖標來代替文字。
TIP 6：圖片中不要使用文字
在多語系的產品中，如果需要配圖時，雖然設計師能夠在設計時針對不同語系製作不同的圖片，但不同文案的長度也可能會需要調整設計，同時也會佔用到網站資源，如果可以單純用圖片展示出想傳達的意象的話那將會是最好的方式，如果必須呈現文案的話，直接使用前端語言刻出來，在多語言的適配時也會更容易，只是設計時仍然要注意預留的空間是否足夠所有語系的問案展示。
TIP 7：因應不同國家的差異設計
在做多語系的界面設計時，我們會希望盡量維持所有語系在設計上的一致性，不過在一些設計細節上，可以因應不同國家的習慣，讓產品的體驗更好。例如日期的部分，在美式用法習慣上會用「月/日/年」，而英式/歐式用法則是「日/月/年」；另外像是一些計量單位，我們習慣使用公斤、公克、公尺、公里⋯⋯等單位，而在歐美國家則會使用磅、盎司、呎、英里⋯⋯等，在這些細節上使用當地慣用的單位，也能讓用戶免去換算的麻煩，獲得更好的體驗。
另外也需要注意圖片、顏色等在不同文化中可能有不同的含義，因而造成誤解甚至冒犯，就需要在特定國家的界面上作差異化設計，而這種與當地文化、宗教、種族等有關的差異通常是比較隱晦的，此時就很需要充足的研究，以及當地的合作人員協作，讓產品能夠更貼近當地文化。
今天總結了幾個設計時可以多注意的原則及小訣竅，分享給大家，之後也會繼續跟大家分享更多設計心得，希望這篇文章對大家有幫助～期待下次再見！也別忘了持續關注 PeerOne 喔！
