APP的多語言設計我們可以做點什麼?
前言:因為工作關係,我目前做的APP一般會適配兩種(中英)或更多的語言。就以最常見的中英文切換來說,如果用中文作為設計稿語言,那麼通常會遇到頁面翻譯成英文後,原來很短的一箇中文詞彙會變成長長的英文片語的情況,一定程度上影響視覺設計上的平衡和佈局,我常常頭疼要怎麼修改設計排版。一年多的工作下來,積累了一些對於多語言設計的心得和體會。
一、儘量減少多列布局
很多時候我們都喜歡用多列的佈局,多列布局在節省空間的同時又保持了畫面平衡。但是在多語言的環境下,使用這種方式需要慎重。
二、根據不同語言調整字型的屬性
在中英文的設計裡,除了同一個詞彙的文字的長度不一樣之外,兩種語言的字號、字型、和行距也不盡相同,這就需要單獨制定兩種語言的 字型、字號、行距 等規範了。
1、字型方面不多說,不同系統中英文使用對應的字型。iOS系統下,通常英文使用SF Pro UI 和 中文使用PingFang。
2、說到 字號 ,嘗試過用兩種語言設計的朋友或許都知道,同一個字號下中文的方體字看上去要比英文的流線字要大一點點。 在開始解決這個字型大小的問題時,我曾經假想規定英文字型比中文字型要大一個字號,這樣兩個字型才能看上去一樣大。但是經過嘗試,發現如果把英文放大後,原本同一個內容下位元組長度就比中文長了,現在又會變得更加長,佔的空間再次擴大。
在蘋果字型的狀態下, 中文字型和大一號的英文字型看上去一樣大 ,但是如果遵循一樣大的字型會造成英文版本內容看上去更多, 反而使兩個語言版本的視覺差距更大。
如果使用 一致的字號 ,雖然英文字型看上去比中文小,但是 整體畫面 會和中文版本更加 相似 。
因此在中英字號方面,我們還是選擇 一樣的字號來維持整體的統一。
3、 行距 方面,也需要根據實際分別對中英文相同字號的行距作調整。
為了在不同語言下有一致的視覺體驗,相同字號下,中英文的行距需要作相應調整。
4、以上說的只是在常用的iOS系統字型情況下,在其他字型例如在Material Design設計規範裡面,原來Google已經在字型上“下手腳”,他們把同樣字號的英文和中文字型做成看上去一樣大小,行距也做了“封裝”,這樣就不存在需要考慮調整字號的問題了。
三、從語言翻譯文字著手,中英儘量做到語句長度相差相近
1、用W字母規定每行的長度佔的字元
JJYing曾經在 他的部落格 分享過有關i18n和L10n的看法:
同樣一個詞在不同地區長度差別實在太大,用當時我們常用的一個寬度單位「W」(就是一個 Arial 字型下的 W 字母寬度)來粗略計算,從 2W 到 6W 不等,對於一個按鈕來說這個長度的差別足以影響視覺設計上的平衡乃至佈局了。
W作為26個英文字母中利用他說的一個方法,我們可以把W作為長度單位,來制定規則,比如當中英文詞彙相差3W時,我們需要考慮更簡短的翻譯或者調整設計以適應兩種語言了。W可以比作是一把尺子,幫助我們衡量是否需要因語言長度不同而調整版式。
2、利用谷歌翻譯在Excel做翻譯器
網上有非常多的教程教你自制多語言翻譯器,例如我在YouTube隨便找到的這個 https://www.youtube.com/watch?v=r_MHvs7AORc
3、sketch裡的谷歌翻譯外掛
Medium上的一位作者曾經介紹過方便切換語言的 sketch外掛 (需要繫結信用卡後續收費),在sketch裡選擇你需要翻譯的語言,點選外掛翻譯即可。可根據翻譯即時調整你的設計。
四、具體頁面的不同處理方式
1、用圖示代替文字
有時候中文介面能妥妥的正常顯示,而英文則會跳出內容框,我們可以考慮使用圖示來代替文字,以適應內容區域較小的情況。
中文顯示完整,而英文顯示不完整的情況
將乘客標籤用圖示代替,解決了語言帶來的問題
2、列表頁面下,充分考慮到語言資料的多變性,找到最優的佈局方案
建議:如果你和你的團隊英文水平不錯,而你們的產品英文使用者佔有量不是太低的情況下,還是用英文作為設計稿語言比較好。因為長文字語言更容易適配成短文字語言,在適配時遇到的問題也會減少一些。
如果該產品的中文使用者還是佔大部分,中文設計稿又更加適合團隊合作的話,那使用中文作為設計稿語言時,就要更加需要考慮改變語言後的效果了,有時候是需要為了適應多語言而放棄原來在中文語言下優美的佈局,在多語言中找到平衡。