公司項目最近要接入東南亞的相關業務，Admin 背景裡需要支援到 7 種語言，分别是簡中、繁中、英語、印尼語、馬來語、越南語、泰語。
我很有幸地，負責了這次多語言适配專項的設計規範更新、設計指南的整理輸出以及團隊内設計經驗分享。公司目前有二十多名 UI/UX 設計師，有一份供參考的設計指南，不管是在設計階段還是驗收走查階段，都能提升工作效率，以及提升整個 Admin 系統的統一性。
那同時，對于這次的多語言适配專項，我也在設計内部做了一次分享會。這次分享會從多語言适配主要的三個問題開始發散：
往細節走：介紹如何利用 CSS 來讓文字的閱讀體驗更佳，以及多語言場景下的标點用法和走查執行個體。
擴充視野：介紹 Micorsoft / Shopify 和 Netflix 都在用的的「僞本地化」工作流程，以及跟其他設計師們探讨下我們的目前流程上可優化的地方。
這篇文章是以圖文的形式，記錄分享會的内容。
一、多語言适配最常見的三類問題
1. 文本擴充
文本擴充導緻的布局問題，是多語言适配中最常見的問題。在大多數語言中，文本平均比英語長 30~50%。而且很多時候不能隻靠浏覽器或元件預設的規則換行就足夠了。我們需要有足夠靈活的布局和統一的設計規範，來處理文本擴充導緻的布局問題。
下面會從元件的次元，挑選兩個元件來介紹元件是如何做到适應多語言場景。
選擇器
比如選擇器的适配，我們建議做法是選擇框定寬，下拉菜單動态寬度（設有最大寬度），以适應文本擴充時的情況。
而在某些布局允許的情況下，比如這一行内隻有一個選擇器，寬度很充裕，而且内容也是可控的簡短文案。這時選擇器也能做成動态寬度，能最大限度地利用到空間的同時，也不必擔心限定寬度導緻的文本截斷。
單選 / 多選
通常我們會将多個選項縱向排列，留出足夠多的橫向空間來給文本的擴充預留位置。
在某些場景下，翻譯後的内容較長，容器沒用足夠的寬度承載時，選項裡面的文本會需要換行展示。這時通常會将操作圖示與文本标簽的第一行垂直對齊。
除了元件的次元，我還整理列舉了當内容寬度大于容器寬度時，對應的處理方式。實際上是主要有三種方式：
- 不換行，超出容器的内容被截斷；
- 不換行，超出容器的内容用滾動 / 折疊等互動補償；
- 允許換行，無限制換行或僅允許換 N 行。
然後我也整理了一個表，枚舉了不同方式下的設計解決方案。枚舉法是比較樸素的方法，通過犧牲時間來換取答案的全面性。具體每項做法就不在這裡細說了，枯燥且無味，感興趣的話看圖即可。
2. 語序問題
語序問題出現得不多，也很好解決。因為在翻譯的時候，詞序可能會出現變化。是以我們要讓标簽文本與内聯表單互相獨立。避免使用 UI 功能元件來組成一個看似正常的句子。
3. 媒體元素
除了元件、文本以外，媒體元素也是多語言場景下不可忽視的一環
圖檔裡的文本
通常産品隻會将頁面上的文本字段提供給翻譯團隊，而像圖檔裡的文本，則經常被我們所忽略。
某些重要的圖檔，比如跟品牌、公司相關的，我們需要針對所有語言作對應的翻譯；而次級的圖檔素材，或者圖檔數量龐大的場景，比如功能介紹，或者插件中心裡面的配圖，考慮到實作成本，要麼以英文優先，或者隻做中/英兩種主流語言的翻譯。
旗幟
旗幟是比較敏感的元素，一方面是政治原因，另一方面是指向原因。用某國家/地區的旗幟來代表某種語言，是不合理的。因為會存在英文（英國）、英文（印度）、英文（澳洲）等場景。
是以即便是旗幟圖案在選擇效率上會略有提高，但仍然要慎重使用，存在以下幾種風險：
- 難以讓旗幟和語言一對一映射；
- 使用者可能被迫需要選擇一個他國字首的選項；
- 可能引起地緣政治的争議；
- 旗幟可能随着時間的發展而被替換，有更換成本。
二、充分利用 CSS 來處理網頁中的文字
在多語言的适配中，遇到「文字該怎麼換行？」這個問題，總是能衍生出很多問題，比如 “要不要中斷單詞”、“是否要保持标點避頭尾”、、“中文和英文的換行規則可以不一樣嗎”、“這裡做成強制不換行會怎樣” 等等。
1. 利用不換行規則
1-1 使用場景
通常來說，表頭需要盡量避免換行，因為在很窄的容器裡面閱讀一個四分五裂的短語，閱讀體驗确實不太好。
但當然，也有些場景是允許犧牲部分視覺層面的展示效果，換取更高的閱讀效率，和更低的互動成本。是以仍然需要設計師去判斷，目前的場景，是需要快速、低成本地完成資訊擷取或者錄入，還是整體視覺效果優先，避免出現單詞擠壓的情況。
1–2 實際案例
舉一個實際案例，目前資料域的表格，因為有「編輯表頭」的功能，是以有可能一個透視表裡同時出現 10+ 列，甚至 20+ 列。這時表格的橫向滾動就問啥避免，總是會有些靠後的元素不能出現在第一屏裡面。
目前線上的做法是大于 7 列的時候，列寬設為 150px。就導緻了表頭必定會出現換行情況。
是以這種情況就是既犧牲了部分視覺層面的展示效果，又沒有換取到更高的閱讀效率和和更低的互動成本。
後面我做了一個方案是取消掉列寬的限制，讓列寬等于内容的寬度。容器放不下時就觸發橫向滾動，表頭也永遠不會換行，對多語言支援比較友好。
1-3 擴充：在展示型頁面的做法
“針對特定文案來作強制不換行處理” 這頓操作，除了應用在 B 端 Admin 背景裡面，我們擴充下視野，看看展示類型的網站，能不能也用上類似的做法。
可以看到，蘋果官網裡，在一些專有名詞，或者段落末尾最後兩個字作不換行處理，來達到最佳的視覺浏覽體驗。
想了解更多蘋果官網的文本處理細節，不妨去我這篇文章裡瞧瞧。
Apple 官網裡三個令我驚歎的中文排版細節無論是軟體還是硬體，Apple 公司對于細節上面的執着程度可以說無人能出其右。我作為一名設計師，時常也會翻閱 Apple 的官網，拜讀、細品，每次都會有點新發現。lrd.im
2. 利用 keep-all 換行規則
2–1 規則釋義
設定 keep-all 後，可以讓 CJK 字元像西文一樣，也擁有“單詞”的概念，不強制斷開兩個标點中間的文本，隻會在遇到标點符号時才換行。
而對于非 CJK 字元，則用浏覽器預設的換行規則。
這個換行規則有兩個特點：
- 隻對 CJK 文字和标點符号有效；
- 讓優先文本在标點處斷行，而不是每個字中間都能自由換行。
2–2 實踐場景
舉一個應用用在公司項目上的例子，資料概覽頁的表格類型卡片。
由于表格内的三列内容都需要是自動寬度，而且不能像上面的例子一樣出現橫向滾動，是以在多語言的場景下，必定會出現表頭換行的情況。
上圖是英文換行時的樣式，如果在中文情況下，會像下圖一樣：
雖然說表格的規則就是這樣，首列的内容較長，自然會擠壓到其他列的寬度被縮小。不能說它有毛病，但這樣的換行真的很不好看，有其他辦法解決嗎？
如上圖，我們對表頭單元格的文字應用 keep-all 樣式屬性，因為這段話裡沒有标點符号，那這幾個中文字就被浏覽器認為是一個單詞，不會斷開文字了。是以我們就做到中文時不換行，英文時換行的效果，視覺體驗實實在在地提升了。
3–3 誰在這樣做
基于 keep-all 的特點，我也發現到似乎在中文的展示型網站（如工具型産品的官網，功能介紹頁等）上，會有奇效。
舉一個例子，去年 Github Issues 有一次大更新，同時也有一個功能的介紹頁。原本是全英文的内容，我在翻譯成中文後，第一感覺這裡的中文換行比較規律，每一行的最後都是标點；而在英文時，最後一句話是緊貼着上一句話的。用 F12 瞄一眼，果然是用了 keep-all 的規則。
由于 keep-all 特點，這個規則使用的場景有限，使用不當反而會影響文字的閱讀，是以我們要清楚掌握到該規則的特點、風險，并通過反複調試才能應用上。
三、标點處理
1. 标點的樣式
根據現在背景即将支援的 7 種語言文字，對應着不同的标點符号樣式種類。
如上圖所示，簡中是一類，繁中是一類，印尼/馬來/越南/英語是一類，泰語是一類，總共有四種類型的标點符号。（泰語通常沒有标點符号）
在驗收過程中，我們也需要留意不同語言時的标點，是否對應上。比如在英語或其他拉丁語/希臘語的世界裡，是沒有全角的， 。 ：這種符号的。
2. 實際案例
通常來說如果一段文本送出給翻譯團隊，傳回來的文本，标點符号都是跟随對應語言的，無需多慮。
但如果在一句文案，需要分開多段送出給翻譯團隊的場景下，可能就會出現問題。
執行個體
九月份的時候我有一小段時間是臨時的處理 1.0 App 裡面的樣式問題，我就走查的過程中發現在「個人中心」裡面的标點符号不對勁。
頁面頂部的文案是 “你好，店鋪名”，問候語是産品預設好的文案，而店鋪名則是讀取店鋪的資料，不受翻譯影響。
是以雖然看上去是一句話，但包含兩種類型的字段。研發可能就隻将問候語抽取出來，送出給翻譯團隊，而忽略了中間的逗号，導緻上圖的問題。
避免這個事情，暫時想到的是兩種方法：
- 提前跟研發說好，把标點符号也加進翻譯裡面，标點交給翻譯團隊處理；
- 在驗收過程中，獨立處理這種問題。
3. 網頁中，标點的本地化處理
由上圖可以看到簡中和繁中的标點樣式存在差異，簡中的逗号和句号都在左下角，而繁中的标點是居中的。
實際上這兩個都是同一個标點（Unicode 一緻），隻是展示出來的樣式不同。不像中文與英文那樣，全角的逗号和半角的逗号是兩個完全不同的字元。
我們隻需要確定網頁的标記是對應的語言代碼，就能讓這些有本地特色的标點展示在網頁上面。
現在 Admin 背景的現狀是，不論什麼語言，一律被标記為英文，是以就失去了不少本地化文字的特性。那我後來也向産品提了需求，讓研發在這次做多語言項目的時候，也順便把這裡的标記改為對應的語言編碼。
走正規的流程，合并到多語言的大需求裡面，技術評審也通過了。是以後面在繁中的時候，标點符号應該就是預期内的樣式。
除了影響到簡/繁中文的标點樣式，後續我們設計師而且也可以利用 :lang() 選擇器來比對該語言下的任意元素，做對應的樣式調整。比如英文的行高，是不是可以處理成比中文的小；或者下劃線，不同語言下或許也能有不同的處理方式。
是以，這項改動意義重大，給設計師們提供了更大的可操作空間，對後續做更細緻的本土化設計打好基礎。
我現在對「本地化的文字差異處理」這個課題還隻有碎片化的認識，但已經隐隐中感覺到是有比較大的操作空間的。是以後續我也會花點時間去掌握不同語言下樣式處理的細節。
三、了解「僞本地化」
1. 這是什麼？
僞本地化是在源語言的基礎上，按照一定的規則，将需要翻譯的文本替換為其他可閱讀的等價字元，模拟本地化軟體的過程。
比如 “Edit program settings” 這個按鈕，在通過僞本地化的程式處理後，在測試環境裡會變成 “[εεÐiiţ Þr00ģЯããm səəTτııИğ§]”。
細心的朋友已經發現了，僞本地化程式對源語言作了以下幾種處理：
- 文本的起始和末尾，被加上了中括号
- 英文被轉變成其他不同語系的文字，但仍然保持文本的可讀性
- 文本的長度被延長了
三種處理，分别對應了三種要驗收的目标，分别是：
測試文本是否完整展示，以及是否存在未送出翻譯的文本。文本的起始和末尾，被加上了中括号。如果經過僞本地化這段文字，在界面上看不到完整的方括号組合，代表内容已經被截斷。而且當某個應該被翻譯的字段，沒有産生替換，也能通過是否有方括号來檢驗出來（如下圖）。
測試對各種字型字型的支援。将将英文轉變成其他不同語系的文字，能夠檢驗到目前字型設定是否支援該字型。并且經過僞本地化程式轉換後的文字也類似原始的英文，能夠讓測試者較為容易地操作軟體。
測試文本長度被延長時，UI 界面的适配是否符合預期。僞本地化模拟了翻譯後文本長度被擴充的現象，此時能夠檢驗到頁面 UI 布局的适配是否有問題。
2. 僞本地化流程的優勢
提早發現并解決問題。通常來說，替換上翻譯的文本，是産品研發流程裡比較靠後的一環。而僞本地化可以讓我們在項目的測試階段提前介入，不斷地測試 UI 對多語言支援的程度，有利于提前發現問題。現實情況是越晚發現問題，修複的難度和成本就越大。
影響設計習慣。同時，由于将驗收多語言适配的這件事提前，會潛移默化地讓産品、設計、研發都将這件事情視為優先事項，下意識裡都認為需要把這件事做好，而不是到了上線前兩天，翻譯文檔替換上去，再瞄兩眼這樣。
以上兩點就是在産品研發流程中使用僞本地化技術的優勢，總結起來就是能夠提早發現問題，減少修複問題的成本，以及讓團隊内都重視多語言适配這件事情，有利于提高整體的界面觀感和完整度。
哦，對了。在上世紀 90 年代，Microsoft 已經在使用這個流程了。
四、個人收獲
通過這次多語言适配專項，我覺得「多語言的适配」，主要是考驗設計師的兩項功力（主觀看法，未必對）：
- 是否具有靈活的布局處理能力（基本）；
- 是否能夠作出更合适某種語言文字的設計方案（進階）。
是否具有靈活的布局處理能力。要求設計師要在多語言場景及任意浏覽器尺寸時，總是有辦法能夠讓使用者清晰、高效地擷取資訊。而不是一經過翻譯，或浏覽器尺寸變更，頁面布局崩壞，資訊四分五裂。
是否能夠作出更合适某種語言文字的設計方案。這一項是進階能力，就是當 90% 設計師都認為 “翻譯過後，隻是替換文字而已，沒什麼特别的” 時，如果設計師能針對某項語言作出某種場景下更适合該語言的展示方案時，他就是那 10% 的設計師，獨特性、不可取性就展現出來了。是以我前文提到的“本地化的文字差異處理的課題” 和費盡心思要讓前端做的 “lang 标簽需求”，則是朝着這個目标前進的一種展現。
我又一次感受到了自己的渺小，設計的世界真大！繼續學吧，學無止境~
五、參考資料
Internationalization - Shopify PolarisSkip to main content Make commerce better for everyone by building interfaces that work everywhere. These guidelines…polaris.shopify.com
全球化設計系列！國際化産品設計有哪些需要注意的事項？關于全球化設計的系列設計文章。主要分為以下三個部分： 快速入門，聊聊幾個最常見的全球化設計問題，感受一下基礎概念。 國際化設計，設計一個健壯的國際化産品需要的詳細注意事項，避免踩坑。…www.uisdc.com
Pseudo Localization @ Netflixby Tim Brandallnetflixtechblog.com
Pseudo-Localization: What It Is and Why It MattersIf you're launching a product for many different markets, there will be a step in the development process where you…www.shopify.com
Pseudolocalization - WikipediaPseudolocalization (or pseudo-localization) is a software testing method used for testing internationalization aspects…en.wikipedia.org
Apple 官網裡三個令我驚歎的中文排版細節無論是軟體還是硬體，Apple 公司對于細節上面的執着程度可以說無人能出其右。我作為一名設計師，時常也會翻閱 Apple 的官網，拜讀、細品，每次都會有點新發現。lrd.im
作者:Pudge
出處:https://lrd.im/blog/2022-01-02-e09640baf33b.html