編輯導(dǎo)語(yǔ)：如今有很多軟件都是國(guó)際化產(chǎn)品，可根據(jù)地區(qū)不同進(jìn)行切換，根據(jù)不用地區(qū)用戶的特性也會(huì)有不同的設(shè)計(jì)；只要是根據(jù)不同特性進(jìn)行頁(yè)面功能的設(shè)計(jì)，符合用戶場(chǎng)景和需求，就是好用的設(shè)計(jì)；本文作者分享了關(guān)于全球化設(shè)計(jì)的差異，我們一起來了解一下。

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

那這一次想和大家聊一下第2種類型：同一套信息架構(gòu)和界面樣式做不同語(yǔ)言的適配，即我們常說的多語(yǔ)言設(shè)計(jì)。

我們作為設(shè)計(jì)師的角色，在設(shè)計(jì)這一類產(chǎn)品時(shí)，會(huì)遇到哪些精(keng)彩(die)故事呢？

一、初遇多語(yǔ)言設(shè)計(jì)

剛接觸做不同語(yǔ)言適配的國(guó)際化產(chǎn)品時(shí)，我們可能會(huì)以為多語(yǔ)言適配是翻譯團(tuán)隊(duì)的事，將設(shè)計(jì)稿上的內(nèi)容翻譯一下就可以了，這真是「too young，too native」。

如果還是保持著國(guó)內(nèi)產(chǎn)品的設(shè)計(jì)思維和方式，你會(huì)發(fā)現(xiàn)這行不通。中文看起來完美合理的設(shè)計(jì)，換成其他語(yǔ)言后發(fā)現(xiàn)信息爆炸，造成認(rèn)知負(fù)擔(dān)。如果沒有做好語(yǔ)言適配，甚至?xí)剐畔⒄故静蝗?，給用戶帶來認(rèn)知障礙。

因此，我們說多語(yǔ)言設(shè)計(jì)很“坑”，是因?yàn)槲覀?strong>需要在相同的設(shè)計(jì)下，保證信息可以清晰明確的傳遞給不同文化背景的用戶，要求設(shè)計(jì)師設(shè)計(jì)的界面必須有足夠的可伸縮性及適配性。

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

那我們應(yīng)該如何做到上述的 2 點(diǎn)，以滿足用一套界面語(yǔ)言去承載不同語(yǔ)言的需求呢？首先來了解一下這一類國(guó)際化產(chǎn)品的設(shè)計(jì)流程。

二、國(guó)際化產(chǎn)品的設(shè)計(jì)流程

對(duì)于國(guó)內(nèi)的產(chǎn)品來說，產(chǎn)品設(shè)計(jì)流程以及涉及的角色大致如下：

其中，產(chǎn)品文案的部分會(huì)由產(chǎn)品及設(shè)計(jì)共同把控。因此設(shè)計(jì)師在設(shè)計(jì)前期已經(jīng)了解信息密度，可以發(fā)揮自己所長(zhǎng)，將信息清晰簡(jiǎn)潔的呈現(xiàn)給用戶。有時(shí)候設(shè)計(jì)過程中遇到文案過長(zhǎng)的問題，我們可以利用中文的博大精深去精簡(jiǎn)文字或者使用視覺化語(yǔ)言去替代文字性信息。總而言之，單一語(yǔ)言的設(shè)計(jì)給予了設(shè)計(jì)師更大的發(fā)揮空間。

我們來看下國(guó)際化產(chǎn)品的設(shè)計(jì)流程呢？

看起來國(guó)際化產(chǎn)品的設(shè)計(jì)流程和上面的流程框架基本是一致的，只是多了一些支線流程以及角色。但這些支線流程則是影響多語(yǔ)言設(shè)計(jì)的關(guān)鍵。

從圖可以看出，設(shè)計(jì)稿完成后，產(chǎn)品需要準(zhǔn)備多語(yǔ)言翻譯需求給到翻譯團(tuán)隊(duì)。因此設(shè)計(jì)師在設(shè)計(jì)前期是不清楚不同語(yǔ)言的具體文案長(zhǎng)度的，特別是一些小語(yǔ)種。如果前期沒有考慮周全，實(shí)際文案導(dǎo)入后，發(fā)現(xiàn)無法適配，需要修改設(shè)計(jì)，重新開發(fā)，這樣反復(fù)的工作流程，會(huì)使整個(gè)產(chǎn)品的項(xiàng)目進(jìn)度受影響。

因此，多語(yǔ)言的國(guó)際化產(chǎn)品需要我們?cè)谠O(shè)計(jì)前期就考慮到不同語(yǔ)言的適配規(guī)則，避免設(shè)計(jì)及開發(fā)資源的浪費(fèi)，也保證不同語(yǔ)言下的設(shè)計(jì)質(zhì)量，保證在不同語(yǔ)言下信息都能夠清晰的傳遞給用戶。

三、分享我們的設(shè)計(jì) “小錦囊”

道理都懂，如何做好設(shè)計(jì)呢？我們經(jīng)歷過國(guó)際化產(chǎn)品的設(shè)計(jì)，積累了不少“爬坑”經(jīng)驗(yàn)，分享給大家～

1. 彈簧設(shè)計(jì)法：界面空間能曲能伸

這里是指我們可以設(shè)置一些前端展示規(guī)則，讓界面上的展示空間像彈簧一樣，可以根據(jù)內(nèi)容自適應(yīng)。常見的擴(kuò)展空間的方式有橫向滾動(dòng)、橫向切換等，豎向同理。此外，我們?cè)谧鲈O(shè)計(jì)的時(shí)候也需要注意預(yù)留足夠的文案展示空間。

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

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

除此之外，我們還需要設(shè)計(jì)按鈕文案的縮小規(guī)則，這樣我們才可以確保按鈕信息展示全。按鈕文案的縮小規(guī)則需要注意不同端的區(qū)別：iOS和安卓可以根據(jù)文案長(zhǎng)度把字號(hào)縮小至展示完整；Web/Mweb 端則需要設(shè)計(jì)指定文案超長(zhǎng)時(shí)縮小至指定字號(hào)。

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

在國(guó)內(nèi)，對(duì)于多個(gè)平級(jí)內(nèi)容組的切換控件，大家第一反應(yīng)便是Tab選項(xiàng)卡。tab選項(xiàng)卡根據(jù)選項(xiàng)在容器中的排布方式，可以分為等分式及滾動(dòng)式2種類型。

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

因此，多語(yǔ)言設(shè)計(jì)中更建議使用標(biāo)簽形式選項(xiàng)卡。首先這種形式對(duì)文案的長(zhǎng)度沒有什么限制，因此更靈活；同時(shí)標(biāo)簽形式是通過線框或者面分割每一個(gè)選項(xiàng)，選項(xiàng)之間排列更緊密，出現(xiàn)右滑滾動(dòng)時(shí)選項(xiàng)更容易被用戶感知。

（3）圖文結(jié)合設(shè)計(jì)手法的限制

圖文結(jié)合的表現(xiàn)形式大家都非常熟悉，如運(yùn)營(yíng)banner。圖片上信息的展示規(guī)則要盡可能的滿足“彈簧設(shè)計(jì)法”。一般來說有2種形式：

1）圖片高度自適應(yīng)

這里是指固定文字信息與圖片的上下間距，背景高度根據(jù)不同語(yǔ)言自適應(yīng)。這種方式簡(jiǎn)單、可實(shí)現(xiàn)性強(qiáng)。

設(shè)計(jì)側(cè)只需要標(biāo)注清楚：

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

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

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

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

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

3）文字排版建議左對(duì)齊

左對(duì)齊對(duì)文本長(zhǎng)度適應(yīng)性更強(qiáng)，居中對(duì)齊在多行文字時(shí)容易顯得參差不齊，導(dǎo)致閱讀性差。

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

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

2. 省略規(guī)則注意這些“坑”

對(duì)于界面上的一些信息，如果內(nèi)容過長(zhǎng)展示不下時(shí)，常見的處理方式是超長(zhǎng)省略同時(shí)提供其他的途徑給用戶展示完整信息?？此坪?jiǎn)單的省略規(guī)則，其中有不少細(xì)節(jié)是需要大家注意的。

（1）卡片上標(biāo)簽的省略規(guī)則

這是比較常見的一種場(chǎng)景：標(biāo)簽有多個(gè)，但展示的區(qū)域只有一行。此時(shí)大家會(huì)怎么去設(shè)置展示規(guī)則呢？“標(biāo)簽最多一行，依次展示；標(biāo)簽內(nèi)容展示不下時(shí)，省略展示”這樣的規(guī)則大家覺得有沒有問題呢？

實(shí)際上，規(guī)則里還少了一個(gè)重要的最小限制，即 “標(biāo)簽可展示的空間 < xx px時(shí)，標(biāo)簽隱藏” 。具體的數(shù)值可以由設(shè)計(jì)師自行決定，我們建議是一個(gè)展示3個(gè)字母的標(biāo)簽長(zhǎng)度為基準(zhǔn)。加上這樣的規(guī)則是為了防止出現(xiàn)下圖中的情況。

（2）信息省略的優(yōu)先級(jí)

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

例如下圖：這是由菜系/人均價(jià)格/位置 3 個(gè)字段拼接組成的一組信息，展示長(zhǎng)度最多一行。我們應(yīng)該如何標(biāo)注呢？

（3）信息展示方式

前面2點(diǎn)我們講了關(guān)于省略規(guī)則需要注意的細(xì)節(jié)。這些被省略的信息都可以在下一層級(jí)的頁(yè)面得到完整的展示，因此在一些語(yǔ)言特別長(zhǎng)的情況，我們可以考慮適當(dāng)?shù)氖÷浴?/p>

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

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

3. 有些信息注意不同語(yǔ)言的表述

國(guó)際化產(chǎn)品服務(wù)的用戶有著不同的文化背景與語(yǔ)言文字，因此在多語(yǔ)言設(shè)計(jì)中還需要注意是否有差異化的表達(dá)或者禁忌。如下面這幾種常見的場(chǎng)景：

（1）不同語(yǔ)言下的價(jià)格展示

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

我們?cè)谠O(shè)計(jì)的時(shí)候，需要兼顧到這個(gè)“起”在前在后，即不同語(yǔ)言下的用戶，對(duì)價(jià)格這一塊的信息都有優(yōu)秀的可讀性。如果我們?cè)谠O(shè)計(jì)的時(shí)候沒有注意到這些，可能會(huì)給用戶帶來認(rèn)知負(fù)擔(dān)。因此了解這些差異，才可以幫我們更好的判斷設(shè)計(jì)方案的優(yōu)劣。

（2）使用圖標(biāo)替代文字時(shí)需謹(jǐn)慎

因?yàn)槎嗾Z(yǔ)言的關(guān)系，文字長(zhǎng)度是相對(duì)不可控的。因此在設(shè)計(jì)中如果能用圖標(biāo)表達(dá)清楚的話，我們更傾向于用圖標(biāo)。像分享/收藏等帶有功能含義的圖標(biāo)已被大眾認(rèn)可，必要時(shí)可以直接使用圖標(biāo)替代文字。

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

（3）使用旗幟圖標(biāo)時(shí)需慎重

我們使用旗幟圖標(biāo)時(shí)，需要非常注意使用場(chǎng)景以及上下文措辭。如果使用不當(dāng)，可能引起引起政治爭(zhēng)議，給產(chǎn)品帶來負(fù)面影響。

如不太建議使用旗幟圖標(biāo)來指示語(yǔ)言。因?yàn)槠鞄门c語(yǔ)言不是一一對(duì)應(yīng)的，用戶有可能被迫選擇展示了他國(guó)旗幟的語(yǔ)言，從而引發(fā)爭(zhēng)議。此外，旗幟可能隨著時(shí)間的發(fā)展發(fā)生調(diào)整或替換，有一定的維護(hù)成本?，F(xiàn)在大部分國(guó)際化產(chǎn)品也在逐漸減少旗幟的使用，如Airbnb /Apple官網(wǎng)更換語(yǔ)言的界面，都去掉了旗幟。

寫在最后

以上就是我們本期所有內(nèi)容啦。主要是從設(shè)計(jì)師角色出發(fā)，分享了設(shè)計(jì)師在設(shè)計(jì)多語(yǔ)言產(chǎn)品中會(huì)遇到的一些情況以及處理技巧。希望能給閱讀到最后的你帶來一點(diǎn)幫助。

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

設(shè)計(jì)之路漫漫，共勉之 ：）

#專欄作家#

設(shè)計(jì)牛奶盒，微信公眾號(hào)：設(shè)計(jì)牛奶盒，人人都是產(chǎn)品經(jīng)理專欄作家。做一個(gè)有生活態(tài)度的設(shè)計(jì)牛奶盒。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。