中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：本文從界面設(shè)計(jì)的角度介紹了在出海產(chǎn)品中，多語(yǔ)言設(shè)計(jì)的相關(guān)原則及要點(diǎn)，希望可以幫助剛接觸或正在做出海產(chǎn)品的設(shè)計(jì)同學(xué)，建立起對(duì)多語(yǔ)言設(shè)計(jì)的初步認(rèn)識(shí)。我們一起來(lái)看看。

一、背景介紹

1. 國(guó)際化與本地化

在認(rèn)識(shí)出海產(chǎn)品時(shí)，我們常常會(huì)聽(tīng)到“國(guó)際化”和“本地化”兩個(gè)概念。在信息技術(shù)領(lǐng)域的官方定義下，對(duì)產(chǎn)品進(jìn)行國(guó)際化（i18n）與本地化（L10n）處理的含義是，通過(guò)修改軟件，使之能適應(yīng)目標(biāo)市場(chǎng)的語(yǔ)言、地區(qū)差異以及技術(shù)需要。

兩者概念區(qū)別有些微妙，我們或許可以用更簡(jiǎn)單的說(shuō)法來(lái)解釋——“國(guó)際化”意味著兼容，即用一套產(chǎn)品方案，來(lái)面對(duì)不同地區(qū)的用戶(hù)，這叫實(shí)現(xiàn)產(chǎn)品的“國(guó)際化”。而“本地化”意味著定制，需要根據(jù)不同地區(qū)特性，進(jìn)行分別處理，這叫“本地化”處理。兩者的共同實(shí)現(xiàn)，才能更好地服務(wù)擁有不同文化背景的用戶(hù)們。

產(chǎn)品實(shí)現(xiàn)國(guó)際化與本地化的基本范圍包括但不限于以下內(nèi)容：

2. 為什么要做多語(yǔ)言設(shè)計(jì)

由上述背景可知，一個(gè)出海產(chǎn)品想要達(dá)成良好的國(guó)際化與本地化效果，需要整個(gè)產(chǎn)品研發(fā)團(tuán)隊(duì)從內(nèi)容、設(shè)計(jì)、技術(shù)多個(gè)層面進(jìn)行全面考量。

對(duì)于設(shè)計(jì)環(huán)節(jié)而言，多語(yǔ)言設(shè)計(jì)是最需要關(guān)注的重點(diǎn)之一。做好多語(yǔ)言設(shè)計(jì)，能讓產(chǎn)品擁有最基本的、適應(yīng)不同地區(qū)的潛力——也為本地化內(nèi)容的翻譯呈現(xiàn)，提供良好的環(huán)境。

國(guó)內(nèi)設(shè)計(jì)師更常接觸單一中文產(chǎn)品，但用中文產(chǎn)品設(shè)計(jì)的習(xí)慣來(lái)做出海產(chǎn)品，很容易“踩坑”。這與出海產(chǎn)品與國(guó)內(nèi)產(chǎn)品的研發(fā)流程不同有關(guān)。我們團(tuán)隊(duì)在實(shí)際的項(xiàng)目經(jīng)歷中，發(fā)現(xiàn)具有一定規(guī)模的平臺(tái)型產(chǎn)品，不太可能在設(shè)計(jì)初期拿到各語(yǔ)種的真實(shí)文案。因此在出海產(chǎn)品的實(shí)現(xiàn)過(guò)程中，會(huì)在中間階段多出翻譯、內(nèi)容校驗(yàn)等階段。

因此，對(duì)于設(shè)計(jì)同學(xué)而言，如何做好多語(yǔ)言設(shè)計(jì)，以預(yù)知落地問(wèn)題并提前規(guī)避，是一項(xiàng)重要挑戰(zhàn)。

二、認(rèn)識(shí)語(yǔ)言差異

全球文化多元各異，最直觀的體現(xiàn)便是在語(yǔ)言和文字上。如何用一套設(shè)計(jì)方案來(lái)兼容存在各種各樣差異的多國(guó)語(yǔ)言呢？這正是多語(yǔ)言設(shè)計(jì)的難點(diǎn)所在。

首先，我們需要認(rèn)識(shí)各類(lèi)語(yǔ)言間存在哪些主要差異。

1. 字符形態(tài)的差異

字符是語(yǔ)句的基本構(gòu)成單位。不同的文化發(fā)展背景下誕生出了形態(tài)各異的字符樣式。而部分語(yǔ)言會(huì)共用一套字符體系。常見(jiàn)的字符體系有如下幾種類(lèi)型。

從圖形的角度分析這些字符的形態(tài)，不難發(fā)現(xiàn)，像拉丁字母以及西里爾字母，字符筆劃構(gòu)成相對(duì)簡(jiǎn)單，且筆劃多為平直線條或是規(guī)整的弧線。而像阿拉伯字母、泰文等字符，組成相對(duì)復(fù)雜，筆劃線條特殊的曲度較多。這是非常關(guān)鍵的字符形態(tài)差異，它將會(huì)影響后續(xù)我們對(duì)字體的選擇。

2. 內(nèi)容長(zhǎng)度的差異

在不同語(yǔ)言下，同樣含義的內(nèi)容進(jìn)行翻譯后，得到的文本長(zhǎng)度可能會(huì)有較大的差異。如何通過(guò)設(shè)計(jì)兼容這些信息，正是做多語(yǔ)言產(chǎn)品最大的難點(diǎn)所在。

因此，在多語(yǔ)言設(shè)計(jì)階段，非常建議基于英語(yǔ)進(jìn)行設(shè)計(jì)（善用谷歌翻譯），以便于更直觀地對(duì)信息兼容進(jìn)行處理和判斷。這里需要提醒的是，不建議大家用最習(xí)慣的中文進(jìn)行占位，因?yàn)橹形目梢跃珶捨淖郑畔⒈旧磔^短，很容易產(chǎn)生多語(yǔ)言適配的“盲區(qū)”。

如果設(shè)計(jì)想要預(yù)知信息翻譯后的長(zhǎng)度，以便制定布局策略，可以用google文檔自帶的翻譯函數(shù) fx=GOOGLETRANSLATE（文本，“源語(yǔ)言”，“目標(biāo)語(yǔ)言”） ，以及字符統(tǒng)計(jì)函數(shù) fx=LEN（文本），快速實(shí)現(xiàn)多種語(yǔ)言的批量翻譯和字符數(shù)計(jì)算，為設(shè)計(jì)提供初步參考。

*資料1: 我個(gè)人使用google文檔創(chuàng)建的簡(jiǎn)易小工具，供參考：

https://docs.google.com/spreadsheets/d/1GeX16TYKUKjLLjeCOz8Iz2sqyYXOCmuxp722007guO4/edit#gid=0

*資料2: 全球語(yǔ)言簡(jiǎn)碼表：https://www.zhudc.com/browser/20162

3. 詞匯分界的差異

語(yǔ)言還分為帶有詞匯分界、和不帶有詞匯分界兩種情況。帶有詞匯分界的語(yǔ)言有英語(yǔ)、俄語(yǔ)等，分界意味著他們的語(yǔ)句以單詞為最小單位。而中文、泰語(yǔ)等語(yǔ)言是沒(méi)有分界的，一個(gè)語(yǔ)句中除了標(biāo)點(diǎn)符號(hào)分隔，字符都是相連的。這也是影響段落布局的一個(gè)重要因素。

4. 閱讀順序的差異

閱讀順序分為L(zhǎng)TR （Left to Right）和RTL （Right to Left）兩種。我們常見(jiàn)的絕大部分語(yǔ)言都是從左到右的閱讀順序，而使用特殊右至左順序的，則以阿拉伯語(yǔ)為代表。不同的閱讀順序，決定了布局時(shí)信息對(duì)齊、元素排布、甚至圖標(biāo)圖示，都可能存在不同的規(guī)則。

綜上，在正式啟動(dòng)設(shè)計(jì)以前，建議設(shè)計(jì)同學(xué)向業(yè)務(wù)方了解清楚，平臺(tái)會(huì)支持哪些語(yǔ)言。明確語(yǔ)言類(lèi)型，了解以上差異后，才能更好地制定設(shè)計(jì)方案。

三、核心原則:可讀性與包容性

根據(jù)對(duì)于不同語(yǔ)言差異的認(rèn)識(shí)，以及我們團(tuán)隊(duì)在項(xiàng)目實(shí)施過(guò)程中的經(jīng)驗(yàn)，我們可以將多語(yǔ)言設(shè)計(jì)的核心原則總結(jié)為可讀性與包容性?xún)纱笤瓌t。

可讀性包含（1）字符可讀性（2）內(nèi)容可讀性；

包容性包含（1）布局包容性（2）認(rèn)知包容性。

1. 可讀性原則

1.1 字符可讀性

字符可讀性，主要針對(duì)的是在應(yīng)用風(fēng)格化字體時(shí)，需考慮到在不同語(yǔ)言下的顯示效果。

部分產(chǎn)品因?yàn)槠放普{(diào)性或美術(shù)風(fēng)格的需要，會(huì)引用帶有特殊風(fēng)格個(gè)性的字體。而我們發(fā)現(xiàn)，市面上大部分風(fēng)格化字體都是基于拉丁字母設(shè)計(jì)的。而那些形態(tài)特殊的字符，可能會(huì)比較難找到同種風(fēng)格的風(fēng)格化字體。即便有，它們的可讀性受字體影響的風(fēng)險(xiǎn)會(huì)更高，因此檢驗(yàn)字符可讀性尤為必要。

例：在一次運(yùn)營(yíng)活動(dòng)中，我們將英語(yǔ)版本轉(zhuǎn)為印地語(yǔ)版本時(shí)，兩種語(yǔ)言都使用了名為T(mén)eko的風(fēng)格化字體。當(dāng)?shù)睾献鞯挠《然锇榭吹铰涞仨?yè)面后，向我們反饋，這種字體導(dǎo)致他們的語(yǔ)言可讀性下降許多。

所以當(dāng)產(chǎn)品覆蓋的語(yǔ)言類(lèi)型特別多時(shí)，如果要一一對(duì)應(yīng)特殊語(yǔ)言去找風(fēng)格化字體，無(wú)論是設(shè)計(jì)成本、或是頁(yè)面加載成本都會(huì)特別高。這種情況下，可以適當(dāng)考慮放棄部分語(yǔ)言的風(fēng)格化字體效果，轉(zhuǎn)用基礎(chǔ)字體，優(yōu)先保證字符的可讀性。

1.2 內(nèi)容可讀性

內(nèi)容可讀性，指頁(yè)面容納信息時(shí)，是否給用戶(hù)傳遞出了足夠多的內(nèi)容，讓用戶(hù)能達(dá)到最基本的信息理解，而不是靠猜。因此我們要針對(duì)多語(yǔ)言?xún)?nèi)容的長(zhǎng)度特性，留有一定信息空間——尤其是信息使用了縮略處理時(shí)，需謹(jǐn)慎地確認(rèn)露出的部分是否足以被用戶(hù)理解。

2. 包容性原則

2.1 布局包容性

布局包容性，即需要設(shè)計(jì)同學(xué)在元素、組件、模塊等設(shè)計(jì)中，要進(jìn)行彈性的設(shè)計(jì)考量，通過(guò)合理的布局設(shè)置，更好地兼容極多或極少內(nèi)容的情況。布局的包容性對(duì)于平臺(tái)型產(chǎn)品尤為重要。如果是一次性產(chǎn)出的、純展示型產(chǎn)品，細(xì)致地根據(jù)實(shí)際內(nèi)容檢查調(diào)整適配效果并不需要太大功夫。但如果是需要長(zhǎng)期維護(hù)、內(nèi)容持續(xù)變更的平臺(tái)型產(chǎn)品，一個(gè)高度包容性的布局，才能幫助產(chǎn)品用有限的成本達(dá)成較好的落地效果。

例：商品貨架卡片是一種典型的彈性空間，沒(méi)有固定信息，因此信息布局以豎排為主，保證橫向空間足夠，不增加換行難度。輸出時(shí)也要兼顧不同信息豐富度下的規(guī)則。

字體的選擇同樣會(huì)影響布局包容性。當(dāng)你選擇了一個(gè)默認(rèn)字符尺寸太超乎尋常的字體（過(guò)扁、過(guò)寬）時(shí)，在產(chǎn)品存在多語(yǔ)言多字體的情況下，會(huì)發(fā)現(xiàn)即便是同樣的文本參數(shù)，單個(gè)字符寬度卻相差很大。這會(huì)使得文本展示空間變得更不可控，導(dǎo)致適配風(fēng)險(xiǎn)增大。

2.2 認(rèn)知包容性

認(rèn)知包容性，是指設(shè)計(jì)時(shí)需要考慮到不同文化背景下用戶(hù)，對(duì)于某些元素、符號(hào)的認(rèn)知是否相通。例如，當(dāng)產(chǎn)品出現(xiàn)需要單獨(dú)使用圖標(biāo)來(lái)指代信息的情況時(shí)，需盡量保證選用的圖標(biāo)具有全球性的大眾共識(shí)，并且不能產(chǎn)生歧義。當(dāng)然，若非極端情況（如文字信息實(shí)在是兼容不下），大部分場(chǎng)景下還是建議盡量將圖標(biāo)配合文字使用，幫助不同語(yǔ)言、不同互聯(lián)網(wǎng)認(rèn)知水平的用戶(hù)更好地理解并使用產(chǎn)品。

四、設(shè)計(jì)實(shí)施要點(diǎn)

接下來(lái)，我們將從基礎(chǔ)樣式、通用布局、組件使用和圖標(biāo)設(shè)計(jì)四個(gè)維度，介紹多語(yǔ)言設(shè)計(jì)時(shí)需要關(guān)注的問(wèn)題要點(diǎn)，以及相關(guān)的處理建議。

1. 基礎(chǔ)樣式

1.1 字階

在同樣的文字參數(shù)下，不同語(yǔ)言字符的體積視覺(jué)感受確實(shí)會(huì)略有不同。但遇到體量較為復(fù)雜龐大的產(chǎn)品，建議使用同一套字階應(yīng)對(duì)，盡可能降低設(shè)計(jì)成本和維護(hù)成本?？梢曰诒酒脚_(tái)用戶(hù)群體量級(jí)最大的語(yǔ)言為準(zhǔn)來(lái)制定。

1.2 行高

為了讓文本能更彈性的適應(yīng)場(chǎng)景需要，建議文字默認(rèn)帶有行高，不按區(qū)分單行/多行情況，也便于字體樣式的統(tǒng)一管理。

2. 通用布局

2.1 關(guān)注文本空間

2.1.1 預(yù)留文本空間

普遍情況下，多語(yǔ)言場(chǎng)景下文本長(zhǎng)度會(huì)大于中文場(chǎng)景的文本長(zhǎng)度，因此需要考慮預(yù)留更多文本空間，以保證信息露出的有效性。過(guò)小的露出空間（如只能露出一個(gè)單詞）會(huì)讓用戶(hù)無(wú)法理解內(nèi)容，產(chǎn)生困惑。

2.1.2 選擇排列方式

在多語(yǔ)言設(shè)計(jì)中，排列方式的選擇，需要視功能的實(shí)際場(chǎng)景確定。

兩類(lèi)信息在同一水平下橫排，就必然會(huì)需要分割有限的寬度空間，這種情況下如果文本超長(zhǎng)需要換行時(shí)，信息可能會(huì)顯得略微雜亂；但它的好處在于節(jié)約縱向空間，在信息不長(zhǎng)或者橫行空間較大的情況下仍可以使用。

如果使用上下排列的方式，文本容納的空間也將會(huì)更大，換行時(shí)的顯示效果會(huì)相對(duì)更為可控。

當(dāng)圖標(biāo)與文本內(nèi)容組合出現(xiàn)時(shí)，同樣也需要考慮合適的排列方式。豎排更強(qiáng)調(diào)圖標(biāo)，可以應(yīng)用在強(qiáng)調(diào)狀態(tài)的場(chǎng)景下，如結(jié)果頁(yè)；而橫排時(shí)圖標(biāo)與文本同級(jí)，圖標(biāo)做輔助的說(shuō)明作用，更適用于輕提示、列表等場(chǎng)景。

但值得注意的是，在多個(gè)圖標(biāo)及文字并存的場(chǎng)景下，多語(yǔ)言設(shè)計(jì)布局會(huì)更常用橫排的方式來(lái)兼容信息，例如快捷操作，或是一些入口場(chǎng)景。橫排更能保證文字說(shuō)明的露出效率，以及提升樣式布局的規(guī)整度，并且也更方便內(nèi)容條目的拓展。

2.2 關(guān)注段落空間

2.2.1 注意最小段落寬度

當(dāng)頁(yè)面的橫行分割較多時(shí)，單個(gè)段落寬度就會(huì)變得較小。此時(shí)在某些語(yǔ)言場(chǎng)景下容易出現(xiàn)單個(gè)單詞換行，甚至寬度都容納不下一個(gè)極長(zhǎng)的單詞情況。因此，在多語(yǔ)言場(chǎng)景下，需要保證段落有一定的寬度容納信息。移動(dòng)端小屏幕建議謹(jǐn)慎使用一行三個(gè)的布局方式。

2.2.2 “加大”有限寬度

排版時(shí)也可以通過(guò)改變排列方式加大段落寬度，只是這樣會(huì)導(dǎo)致同樣高度下可展示的卡片數(shù)量變少，信息密度降低，因此需要根據(jù)實(shí)際情況取舍；如果實(shí)在改變不了段落寬度，還可以通過(guò)縮小字號(hào)或字間距，變相加大寬度，盡可能容納多一些信息。

2.3 關(guān)注信息對(duì)齊

2.3.1 常用左對(duì)齊

如前文所說(shuō)，不同語(yǔ)言在書(shū)面上的最小單位不同，為了更好的兼容各種情況，建議多用左對(duì)齊。因?yàn)橄裼⒄Z(yǔ)這種按單詞分界的語(yǔ)言，很難保證每行內(nèi)容寬度一致，并且中文常用的兩端對(duì)齊的效果也并不能適用。多語(yǔ)言場(chǎng)景段落的左對(duì)齊相比居中對(duì)齊，更能帶給用戶(hù)較好的閱讀體驗(yàn)。

2.3.2 同類(lèi)信息水平對(duì)齊

當(dāng)一個(gè)卡片模塊中有多類(lèi)信息并存時(shí)，需要關(guān)注重要信息的水平對(duì)齊，確保閱讀動(dòng)線的流暢，便于用戶(hù)獲取信息。

2.3.3 限定高度內(nèi)使用下對(duì)齊

下對(duì)齊的使用，能幫助設(shè)計(jì)師在不改變限定空間尺寸的情況下兼容延展更多信息。例如大圖卡片空間內(nèi)的文本。下對(duì)齊之所以?xún)?yōu)于上對(duì)齊，是因?yàn)槟芩苊庑畔⒉蛔銜r(shí)，可能會(huì)浮在空中的情況。

2.3.4 特殊的“右對(duì)齊”——阿語(yǔ)規(guī)則

阿拉伯語(yǔ)界面需要根據(jù)一定的規(guī)則來(lái)滿(mǎn)足這個(gè)地區(qū)用戶(hù)從右至左閱讀的需求，但其中也存在一些并不需要用RTL做處理的信息。設(shè)計(jì)階段如果想要快速產(chǎn)出RTL界面，也可以應(yīng)用設(shè)計(jì)軟件中一些現(xiàn)有的插件資源來(lái)實(shí)現(xiàn)。協(xié)作中也可以將阿語(yǔ)規(guī)則與開(kāi)發(fā)同學(xué)優(yōu)先對(duì)齊，由開(kāi)發(fā)實(shí)現(xiàn)后，最后再進(jìn)行細(xì)節(jié)的檢查。

3. 組件使用

3.1 標(biāo)簽組件

在中文場(chǎng)景下，標(biāo)簽通常精簡(jiǎn)為2-4字。而在英語(yǔ)這類(lèi)帶有分界的語(yǔ)言下，通常建議標(biāo)簽內(nèi)最多不超過(guò)兩個(gè)單詞，或是使用數(shù)字和符號(hào)代替，如20%off 或 -20% 代替 20 percentoff。如果一些輔助描述信息，必須展示3個(gè)及以上單詞才能說(shuō)清楚，建議以文本形式放到界面中，而不是使用標(biāo)簽組件，以保證信息的可拓展性。

例：亞馬遜的標(biāo)簽一般情況下只會(huì)承載促銷(xiāo)說(shuō)明用的短詞組。而對(duì)商品的更多信息補(bǔ)充，如配送范圍、官方認(rèn)證等，會(huì)直接用文本的形式補(bǔ)充在商品列表中。

3.2 按鈕組件

豎排的按鈕組合相比橫排按鈕，能兼容更多信息，因此在多語(yǔ)言產(chǎn)品下的使用會(huì)更為廣泛。

非均等場(chǎng)景的按鈕組合，需要限制圖標(biāo)下文字長(zhǎng)度；如果為可能分界的語(yǔ)言，建議使用單個(gè)單詞，否則建議更換成其他按鈕組合樣式。

3.3 通知欄組件

在移動(dòng)端的多語(yǔ)言產(chǎn)品中，通知欄組件一行容納不下全部文案的情況非常常見(jiàn)。在文本超出通知欄寬度的情況下，需要靈活使用信息橫向滾動(dòng)、或是帶操作的方式，允許用戶(hù)進(jìn)入下一級(jí)或配合氣泡、彈窗，確保用戶(hù)有辦法能獲知完整內(nèi)容。

3.4 選項(xiàng)卡組件

當(dāng)選項(xiàng)卡選項(xiàng)大于等于三個(gè)時(shí)，建議使用等間距的選項(xiàng)設(shè)計(jì)，而不是均分寬度的選項(xiàng)設(shè)計(jì)，以避免文案溢出，同時(shí)顯示信息更均勻緊湊。

4. 圖標(biāo)設(shè)計(jì)要點(diǎn)

4.1 選用有大眾共識(shí)的圖形

圖形需要滿(mǎn)足認(rèn)知包容性原則，可以多去觀察成熟的全球性產(chǎn)品，何時(shí)會(huì)使用到純圖標(biāo)的場(chǎng)景，又使用了什么樣的圖標(biāo)?；A(chǔ)圖形如代表播放的三角形、代表喜歡的愛(ài)心型，都是比較具有大眾共識(shí)的。另外一些本身模擬了常見(jiàn)物品的圖標(biāo)，也不容易出錯(cuò)，如代表錄制的攝像機(jī)、代表收藏的標(biāo)簽等。

4.2 避免出現(xiàn)特定指代元素

在圖標(biāo)設(shè)計(jì)中，可能會(huì)使用到一些特定的信息作為裝飾，如文字或者是符號(hào)。如果這些符號(hào)帶有特定區(qū)域，如美元的貨幣符號(hào)、或是贊的漢字，在全球性多地區(qū)的產(chǎn)品圖標(biāo)中必須謹(jǐn)慎使用。建議用更通用的元素代替，避免產(chǎn)生歧義。

4.3 RTL場(chǎng)景圖標(biāo)規(guī)則

RTL場(chǎng)景中，并非所有圖標(biāo)都需要鏡像。例如暗示真實(shí)物體時(shí)，圖標(biāo)可以保持一致。需要鏡像的常為帶有方向含義的圖標(biāo)。

有個(gè)比較特殊的場(chǎng)景值得說(shuō)明：在內(nèi)容播放場(chǎng)景中，播放按鈕以及進(jìn)度指示反應(yīng)的是播放的方向，因此保持從左至右即可；而音量值的大小控制，是需要鏡像的。

更詳細(xì)的鏡像規(guī)則可參考：https://material.io/design/usability/bidirectionality.html#mirroring-elements

五、落地還原

在完成設(shè)計(jì)輸出后，如何與開(kāi)發(fā)同學(xué)配合落地，盡量在真實(shí)文案上線前打好適配基礎(chǔ)，也是設(shè)計(jì)師需要投入精力關(guān)注的。

1. 設(shè)定規(guī)則

1.1 設(shè)定適配規(guī)則

在設(shè)計(jì)方案交付到開(kāi)發(fā)時(shí)，需要預(yù)先明確一些規(guī)則與開(kāi)發(fā)同學(xué)對(duì)齊。

例如在非通欄的容器中，需要向開(kāi)發(fā)同學(xué)示意信息的極限寬度和內(nèi)邊距，并且明確超出該范圍的情況下，應(yīng)直接省略、滾動(dòng)顯示、還是換行處理。

如省略處理，需要檢查省略號(hào)前展示的內(nèi)容是否可被用戶(hù)理解；

如滾動(dòng)顯示處理，需要評(píng)估是否會(huì)過(guò)于吸引視線，打擾到用戶(hù)；如換行處理，需要進(jìn)一步明確極限行數(shù)，保證容器高度可控。

在交付設(shè)計(jì)稿前，設(shè)計(jì)師應(yīng)有意識(shí)地在設(shè)計(jì)稿中盡可能展示極限情況，再配合溝通，更能提升雙方協(xié)作效率。

1.2 設(shè)定字體應(yīng)用規(guī)則

為了呈現(xiàn)效果等合理性，字體選擇也必須進(jìn)行更詳盡的適配考量。以下內(nèi)容主要介紹在網(wǎng)頁(yè)產(chǎn)品中，可以如何制定字體選擇和應(yīng)用的規(guī)則。

我們?cè)陧?xiàng)目設(shè)計(jì)的過(guò)程中進(jìn)行過(guò)一次對(duì)游戲類(lèi)網(wǎng)站中字體應(yīng)用的研究，總結(jié)出一些規(guī)律：

即多數(shù)網(wǎng)頁(yè)產(chǎn)品通常會(huì)定義風(fēng)格化字體和基礎(chǔ)字體兩種。風(fēng)格化字體以凸顯品牌調(diào)性/美術(shù)個(gè)性為目標(biāo)，常應(yīng)用于標(biāo)題；而基礎(chǔ)字體則應(yīng)用于所有正文或控件當(dāng)中。

基礎(chǔ)字體的選擇一般從網(wǎng)頁(yè)默認(rèn)可引用的字體庫(kù)中選擇即可。常用的系統(tǒng)字體有Arial或者Helvetica等。如果在字體聲明中沒(méi)有特別列舉某些語(yǔ)言的字體，瀏覽器在識(shí)別時(shí)會(huì)自動(dòng)轉(zhuǎn)為提供對(duì)應(yīng)語(yǔ)言的常用系統(tǒng)默認(rèn)字體，如Thonburi（泰語(yǔ)）、Geeza Pro（阿語(yǔ)），因此不需要針對(duì)所有語(yǔ)言逐一做字體聲明。

2. 驗(yàn)收效果

2.1 走查適配效果

在走查還原效果時(shí)，建議多運(yùn)用代碼走查，在html結(jié)構(gòu)中增加文本或是增加模塊，檢驗(yàn)開(kāi)發(fā)同學(xué)是否有進(jìn)行響應(yīng)適配情況的處理，處理效果是否符合預(yù)期。

2.2 檢查字體顯示情況

著重檢查font-family的規(guī)則，是否符合不同語(yǔ)言下的效果預(yù)期。其中需要注意，如果需要特別聲明中文字體，務(wù)必把英文基礎(chǔ)字體最前置，以防中文字體包中的字母樣式覆蓋英語(yǔ)場(chǎng)景。

另外也需要檢查你選擇的網(wǎng)頁(yè)系統(tǒng)字體，在不同語(yǔ)言下實(shí)際應(yīng)用中的效果是否符合預(yù)期。

在阿拉伯語(yǔ)的網(wǎng)頁(yè)下，tohoma覆蓋后文字會(huì)看起來(lái)特別粗，暫不能特別明確是否是字體問(wèn)題，但因?yàn)榇嬖陲L(fēng)險(xiǎn)，我們將不會(huì)選擇tahoma為第一基礎(chǔ)字體，也不會(huì)列進(jìn)字體聲明里。

六、結(jié)語(yǔ)

文字是一個(gè)產(chǎn)品觸達(dá)用戶(hù)的橋梁，而出海產(chǎn)品的多語(yǔ)言適配，需要產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)、翻譯同學(xué)多方通力配合，才能盡可能達(dá)成較好的效果，呈現(xiàn)給各地區(qū)用戶(hù)使用。

本文主要以設(shè)計(jì)師視角介紹了多語(yǔ)言適配設(shè)計(jì)過(guò)程中需關(guān)注的要點(diǎn)和建議，希望可以幫助設(shè)計(jì)師規(guī)避設(shè)計(jì)產(chǎn)出到落地過(guò)程中可能存在的“坑”，更好的與各側(cè)協(xié)作。但多語(yǔ)言適配涉及到的細(xì)節(jié)之多，在某些場(chǎng)景下并非只有唯一解，需要整個(gè)團(tuán)隊(duì)一起，具體問(wèn)題具體分析，才能打磨出更友好的出海產(chǎn)品。

作者：騰訊CDC，微信公眾號(hào)：騰訊CDC體驗(yàn)設(shè)計(jì)

本文由 @騰訊CDC體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議