編輯導語：如今有很多軟件都是國際化產品，可根據地區不同進行切換，根據不用地區用戶的特性也會有不同的設計；只要是根據不同特性進行頁面功能的設計，符合用戶場景和需求，就是好用的設計；本文作者分享了關于全球化設計的差異，我們一起來了解一下。

在上一篇文章中，我們提到了國際化產品大致可分為兩種：一是根據不同國家/地區分別設計不同的信息架構和用戶界面；二是出于成本考慮用相同的架構和設計做不同語言的適配。（文章還探討了關于國際化的產品設計有哪些基礎差異，附上傳送門：全球化設計系列 (一) | 設計有哪些差異？）

那這一次想和大家聊一下第2種類型：同一套信息架構和界面樣式做不同語言的適配，即我們常說的多語言設計。

我們作為設計師的角色，在設計這一類產品時，會遇到哪些精(keng)彩(die)故事呢？

一、初遇多語言設計

剛接觸做不同語言適配的國際化產品時，我們可能會以為多語言適配是翻譯團隊的事，將設計稿上的內容翻譯一下就可以了，這真是「too young，too native」。

如果還是保持著國內產品的設計思維和方式，你會發現這行不通。中文看起來完美合理的設計，換成其他語言后發現信息爆炸，造成認知負擔。如果沒有做好語言適配，甚至會使信息展示不全，給用戶帶來認知障礙。

因此，我們說多語言設計很“坑”，是因為我們需要在相同的設計下，保證信息可以清晰明確的傳遞給不同文化背景的用戶，要求設計師設計的界面必須有足夠的可伸縮性及適配性。

1. 可伸縮性：不管是語言精煉的中文，還是英文/泰文等這類表音語言，界面都可以保持合理的布局節奏，即不會看起來很空或者很擁擠，保證設計質量。
2. 適配性：界面上的元素會根據內容長短去適配不同的展示效果，保證信息可讀性。

那我們應該如何做到上述的 2 點，以滿足用一套界面語言去承載不同語言的需求呢？首先來了解一下這一類國際化產品的設計流程。

二、國際化產品的設計流程

對于國內的產品來說，產品設計流程以及涉及的角色大致如下：

其中，產品文案的部分會由產品及設計共同把控。因此設計師在設計前期已經了解信息密度，可以發揮自己所長，將信息清晰簡潔的呈現給用戶。有時候設計過程中遇到文案過長的問題，我們可以利用中文的博大精深去精簡文字或者使用視覺化語言去替代文字性信息?？偠灾?，單一語言的設計給予了設計師更大的發揮空間。

我們來看下國際化產品的設計流程呢？

看起來國際化產品的設計流程和上面的流程框架基本是一致的，只是多了一些支線流程以及角色。但這些支線流程則是影響多語言設計的關鍵。

從圖可以看出，設計稿完成后，產品需要準備多語言翻譯需求給到翻譯團隊。因此設計師在設計前期是不清楚不同語言的具體文案長度的，特別是一些小語種。如果前期沒有考慮周全，實際文案導入后，發現無法適配，需要修改設計，重新開發，這樣反復的工作流程，會使整個產品的項目進度受影響。

因此，多語言的國際化產品需要我們在設計前期就考慮到不同語言的適配規則，避免設計及開發資源的浪費，也保證不同語言下的設計質量，保證在不同語言下信息都能夠清晰的傳遞給用戶。

三、分享我們的設計 “小錦囊”

道理都懂，如何做好設計呢？我們經歷過國際化產品的設計，積累了不少“爬坑”經驗，分享給大家～

1. 彈簧設計法：界面空間能曲能伸

這里是指我們可以設置一些前端展示規則，讓界面上的展示空間像彈簧一樣，可以根據內容自適應。常見的擴展空間的方式有橫向滾動、橫向切換等，豎向同理。此外，我們在做設計的時候也需要注意預留足夠的文案展示空間。

（1）彈窗按鈕的排布方式及文字縮小規則

表意復雜的彈窗按鈕，文案大概率會比較長，我們可以將彈窗按鈕上下排布，確保按鈕文案有較多的空間展示。

除此之外，我們還需要設計按鈕文案的縮小規則，這樣我們才可以確保按鈕信息展示全。按鈕文案的縮小規則需要注意不同端的區別：iOS和安卓可以根據文案長度把字號縮小至展示完整；Web/Mweb 端則需要設計指定文案超長時縮小至指定字號。

（2）標簽式Tab比純文字Tab更具可感知性和靈活性

在國內，對于多個平級內容組的切換控件，大家第一反應便是Tab選項卡。tab選項卡根據選項在容器中的排布方式，可以分為等分式及滾動式2種類型。

但這2種類型在多語言設計中都有一些局限性。如等分式的tab可能會出現某個選項文案過長而溢出的情況，本身不符合我們“彈簧設計”的原則；而滾動式tab，通過間距分割不同選項，當文案過長或選項過多時，右側邊緣無法露出文字導致用戶無法感知這里其實可以右滑查看更多選項。

因此，多語言設計中更建議使用標簽形式選項卡。首先這種形式對文案的長度沒有什么限制，因此更靈活；同時標簽形式是通過線框或者面分割每一個選項，選項之間排列更緊密，出現右滑滾動時選項更容易被用戶感知。

（3）圖文結合設計手法的限制

圖文結合的表現形式大家都非常熟悉，如運營banner。圖片上信息的展示規則要盡可能的滿足“彈簧設計法”。一般來說有2種形式：

1）圖片高度自適應

這里是指固定文字信息與圖片的上下間距，背景高度根據不同語言自適應。這種方式簡單、可實現性強。

設計側只需要標注清楚：

• 圖片與文字信息的上下間距；
• 圖片上其他元素隨著背景高度變化的位置變化方式；
• 背景圖片隨著高度變化的裁剪方式

2）圖片高度固定而文案變化

有時候當多個banner并列或者banner所處位置的空間固定時，那第一種方式就不適用了，我們只能在文字信息上做文章。

設計初期我們可以預留出相對充足的空間給文字展示，選擇合適的文字大小，讓文字單行與多行時都有較好的閱讀性與美觀性。也可以設置當標題超過x行時，隱藏信息層級相對比較低的描述文字，把空間給重要的標題及操作按鈕。

除此之外，還有2個小“坑”需要大家注意的是：

3）文字排版建議左對齊

左對齊對文本長度適應性更強，居中對齊在多行文字時容易顯得參差不齊，導致閱讀性差。

4）文字信息不做字形變化等特殊的視覺化處理

如果做了特殊處理，則需要設計師根據不同語言輸出一張圖，由開發配置在不同語言下展示。相對來說靈活性差，設計開發資源都有一定程度上的浪費。

2. 省略規則注意這些“坑”

對于界面上的一些信息，如果內容過長展示不下時，常見的處理方式是超長省略同時提供其他的途徑給用戶展示完整信息?？此坪唵蔚氖÷砸巹t，其中有不少細節是需要大家注意的。

（1）卡片上標簽的省略規則

這是比較常見的一種場景：標簽有多個，但展示的區域只有一行。此時大家會怎么去設置展示規則呢？“標簽最多一行，依次展示；標簽內容展示不下時，省略展示”這樣的規則大家覺得有沒有問題呢？

實際上，規則里還少了一個重要的最小限制，即 “標簽可展示的空間 < xx px時，標簽隱藏” 。具體的數值可以由設計師自行決定，我們建議是一個展示3個字母的標簽長度為基準。加上這樣的規則是為了防止出現下圖中的情況。

（2）信息省略的優先級

還有一種情景是在多語言設計中比較常見的：通過圓點或豎線的方式將多個同層級的字段拼接在一起展示。如果對字段展示沒有要求的話，尾部省略是最簡單的一種方式。但這種方式會使有些信息因省略而無法被用戶感知到。

例如下圖：這是由菜系/人均價格/位置 3 個字段拼接組成的一組信息，展示長度最多一行。我們應該如何標注呢？

（3）信息展示方式

前面2點我們講了關于省略規則需要注意的細節。這些被省略的信息都可以在下一層級的頁面得到完整的展示，因此在一些語言特別長的情況，我們可以考慮適當的省略。

那設計過程中如果遇到了沒有下一級頁面承載的信息該如何處理呢？我們可以通過一些設計手法，讓信息展示的方式更靈活。

1. 拓展空間：這和我們前文提到的“彈簧設計法”是一致的道理。在有限的屏幕空間里，我們可以通過區域內滾實現信息展示空間的擴展。
2. “展開全部”功能：信息展示空間有限時，一些次級內容我們可以限制信息展示長度并結合“展開全部”功能。當用戶點擊后再向下展開剩余內容。
3. 其他方式：Web端可以采用鼠標懸停時，出現氣泡，展示完整信息；移動端可以通過點擊更多內容出現的彈窗/浮層等來展示所有內容。

3. 有些信息注意不同語言的表述

國際化產品服務的用戶有著不同的文化背景與語言文字，因此在多語言設計中還需要注意是否有差異化的表達或者禁忌。如下面這幾種常見的場景：

（1）不同語言下的價格展示

“多少元起”中“起”這個概念在不同的語言下，位置是不同的。如中文/韓文是在價格后面，而英文/泰文等是在價格前面。這個概念在日本也可以用“～”這個符號來表達。

我們在設計的時候，需要兼顧到這個“起”在前在后，即不同語言下的用戶，對價格這一塊的信息都有優秀的可讀性。如果我們在設計的時候沒有注意到這些，可能會給用戶帶來認知負擔。因此了解這些差異，才可以幫我們更好的判斷設計方案的優劣。

（2）使用圖標替代文字時需謹慎

因為多語言的關系，文字長度是相對不可控的。因此在設計中如果能用圖標表達清楚的話，我們更傾向于用圖標。像分享/收藏等帶有功能含義的圖標已被大眾認可，必要時可以直接使用圖標替代文字。

但也要時常提醒自己：這個圖標代表的含義是被不同國家的人認可的嗎？例如國內產品常見的主題換膚功能，一般會使用畫板畫筆或者衣服為原型的圖標，但這不是一個大部分用戶都知道的含義。因此，像這樣的場景還是需要搭配文字使用。

（3）使用旗幟圖標時需慎重

我們使用旗幟圖標時，需要非常注意使用場景以及上下文措辭。如果使用不當，可能引起引起政治爭議，給產品帶來負面影響。

如不太建議使用旗幟圖標來指示語言。因為旗幟與語言不是一一對應的，用戶有可能被迫選擇展示了他國旗幟的語言，從而引發爭議。此外，旗幟可能隨著時間的發展發生調整或替換，有一定的維護成本?，F在大部分國際化產品也在逐漸減少旗幟的使用，如Airbnb /Apple官網更換語言的界面，都去掉了旗幟。

寫在最后

以上就是我們本期所有內容啦。主要是從設計師角色出發，分享了設計師在設計多語言產品中會遇到的一些情況以及處理技巧。希望能給閱讀到最后的你帶來一點幫助。

我們使用同一個信息架構和界面去承載不同的語言，其實是一個把不同文化背景的用戶之間的通用部分提煉出來的過程。理想的情況是我們可以為不同的場景不同的人盡可能去細化設計，但這中間也涉及到成本與收益的取舍。我們只有先做好共性的部分，再將那些差異化較大又有決定性的部分，根據成本投入做一些不同的設計。

設計之路漫漫，共勉之 ：）

#專欄作家#

設計牛奶盒，微信公眾號：設計牛奶盒，人人都是產品經理專欄作家。做一個有生活態度的設計牛奶盒。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。