全球化設計系列

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

那這一次想和大家聊一下第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. 省略規則注意這些“坑”

對於介面上的一些資訊，如果內容過長展示不下時，常見的處理方式是超長省略同時提供其他的途徑給使用者展示完整資訊。看似簡單的省略規則，其中有不少細節是需要大家注意的。

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

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

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

（2）資訊省略的優先順序

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

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

（3）資訊展示方式

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

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

1. 拓展空間：這和我們前文提到的“彈簧設計法”是一致的道理。在有限的螢幕空間裡，我們可以透過區域內滾實現資訊展示空間的擴充套件。
2. “展開全部”功能：資訊展示空間有限時，一些次級內容我們可以限制資訊展示長度並結合“展開全部”功能。當用戶點選後再向下展開剩餘內容。
3. 其他方式：Web端可以採用滑鼠懸停時，出現氣泡，展示完整資訊；移動端可以透過點選更多內容出現的彈窗/浮層等來展示所有內容。

3. 有些資訊注意不同語言的表述

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

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

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

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

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

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

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

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

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

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

寫在最後

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

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

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

#專欄作家#

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

本文原創釋出於人人都是產品經理。未經許可，禁止轉載

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