如何打造B端國際化
點擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長
三分設(shè) x 京東設(shè)計中心JDC
1、項目背景
2、JDL國際業(yè)務(wù)情況
1）覆蓋國家和地區(qū)
目前 JDL 國際物流業(yè)務(wù)已覆蓋美國、荷蘭、英國、智利、日本、澳洲、中國香港等 220 多個國家和地區(qū)，涉及的語言有中文、英文、印尼語、泰語、馬來語、日語等，為多國提供專業(yè)的倉運配物流軟件+自動化倉儲規(guī)劃+物流運營經(jīng)驗結(jié)合的一體化供應(yīng)鏈方案。
2）具有包容性的國際化產(chǎn)品
跨國業(yè)務(wù)的需求量增多，促使我們需要一個具有【國際化】 產(chǎn)品來服務(wù)于不同國家的用戶，而國際化的主要需求特點就是——包容性。
3、國際化特點
喜好差異：在不同的文化與生活背景下，左右著人們的喜好。例如不同顏色在不同國家所代表的意義也完全不同，在中國的文化背景里，紅色代表著吉祥喜慶。新年等節(jié)日元素中，大家都會使用紅色，而不是藍色，綠色。
行為差異：文化受到多方因素的影響，例如地理、經(jīng)濟、社會政治等因素，不同文化背景下成長的人，養(yǎng)成不同的行為習(xí)慣，例如國內(nèi)的閱讀習(xí)慣是從左向右，但穆斯林國家是從右向左。
喜好差異與行為差異，都是會影響視覺界面的重要因素，例子還有很多，內(nèi)容如下：
1）喜好差異
基于不同的文化背景，色彩所代表的意義與情緒感受會有所不同。了解色彩禁忌，規(guī)避文化沖突的風(fēng)險。
中國香港地區(qū)：白、黑、灰色不大受歡迎，紅、黃和鮮艷的色彩則很受歡迎。
日本：喜愛紅、白、藍、橙、黃等色，禁忌黑白相間色、綠色、深灰色。
泰國：喜愛紅、黃色，禁忌褐色。
馬來西亞：伊斯蘭教區(qū)喜愛綠色……
文化背景不同，宗教信仰的差異，會表現(xiàn)在一些禁忌上，這里簡單的說一下圖案的使用，界面設(shè)計時要結(jié)合國家特性使用圖案，特別要避免使用一些禁忌圖形。
在圖標運用中，視覺設(shè)計師經(jīng)常使用日常中熟悉的元素。然而不同的國家有不同的文化理解與不同的形狀。
國際頁面上使用的照片、插圖盡量避免人物膚色單一，避免帶來一些敏感性問題，不使用真實環(huán)境中的膚色也是一樣不錯的方案。
2）行為差異
不同國家的閱讀順序不一樣，界面中文字排布要特別符合當?shù)厝说拈喿x習(xí)慣，很多中東國家的語言閱讀習(xí)慣是從右向左的（RTL）。
從左到右（Left-to-Right 以下簡稱LTR），如漢語、英語、韓語、日語；
從右到左（Right-to-Left 以下簡稱RTL），如阿拉伯語、波斯語、烏爾都語等。
中國的地址通常是按照“國家-省-市-地區(qū)-道路-小區(qū)-樓房-樓層-房間號”的順序，是由大到小的順序書寫，英美國家的地址恰恰相反，是由小到大的書寫方式。
例如：#20A, 2345 Belmont Avenue, Durham, NC， 27700
其中#代表公寓號， 2345 Belmont Avenue代表街道號，Durham是城市，NC是州，27700是郵編，一般在網(wǎng)上郵編、城市和州都有分出來讓你分別填寫，如果沒有的話就按上面的內(nèi)容填寫。
不同國家的時間展示方式不同，會影響用戶的理解成本，如果使用錯誤的話會導(dǎo)致不必要的錯誤發(fā)生。
如果涉及到多國家使用同一套樣式，電話號碼部分不建議用“空格”區(qū)分位數(shù)。但為了提高用戶體驗，在頁面落地時可以，按照每個國家習(xí)慣格式展示。
RMB 并不是國際通用的人民幣縮寫，而是由 ISO 4217 定義的 CNY。同樣的，為了避免出現(xiàn)其他標準上或理解上的錯誤，建議統(tǒng)一使用 ISO 標準。
4、B端國際化設(shè)計策略
在了解了上方的這些國際化差異特點后，如何應(yīng)用到具體的國際化項目？我們可以從表現(xiàn)層、行為層、業(yè)務(wù)層三個角度去思考。
1）表現(xiàn)層
（圖片來源于，阿里云官網(wǎng)中國站/海外站 https://www.aliyun.com/?utm_content=se_1013083955）
例如，阿里在中國站與國際站頁面，采用了完全兩種視覺風(fēng)格。
國內(nèi)版色彩清亮并使用3D元素+動效元素，而國際版更多的會選用穩(wěn)重深沉的顏色，比如灰、深藍、黑色等，圖片選用上，多為一些重色、扁平的圖片，可以起到感觀刺激的作用。
京東印尼logo設(shè)計：京東 Logo 在國內(nèi)和其他國際站點都是用的小狗，在做印尼的logo設(shè)計時，避開使用狗的元素，改成了小馬，充分表達了對本地文化的尊重。
（伊斯蘭教規(guī)定禁止把狗當作寵物養(yǎng)在家中，也不允許把狗當做兒童的玩伴，因為會對兒童的健康不利，也不允許讓狗與人有密切的接觸。）
空狀態(tài)設(shè)計：在空狀態(tài)上，在考慮到色彩禁忌、優(yōu)化屏效，以及國際簡潔的風(fēng)格，縮小了圖形尺寸，采用線性疊加小面積填充色的樣式；
人物插畫：如果插畫中需體現(xiàn)人物，可以在性別、種族、發(fā)色、膚色上提供多種組合方案。
圖片中的文字，是不跟隨語言切換改變的，會造成語言內(nèi)容不統(tǒng)一，對用戶體驗影響很大。
一般來說，盡可能避免圖片上使用文字，如需要，圖片上的文字建議采用分層展示，也就是可以在不替換圖片的情況下，通過簡單替換字符串即可滿足需求（在特別為某個國家設(shè)計的情況下，可以做在圖片中）
2）行為層
在B端表單頁中，國際的地址填寫與國內(nèi)地址存在差異，且需注意填寫順序，國家后地址為倒序填寫。
亞洲國家日期一般為年/月/日；
歐洲國家、英聯(lián)邦國家或拉丁語國家，日期一般為日/月/年；如果是美國系國家，一般為月/日/年。
需要我們在進行設(shè)計的時候，務(wù)必了解用戶當?shù)厥褂们闆r，保障閱讀習(xí)慣的一致性。
根據(jù)用戶選擇的國家不同，展示對應(yīng)的電話格式。需要增加國家編碼的選擇器，一般會使用【前置選擇器+輸入框】復(fù)合型輸入框組件，也可根據(jù)情況在選擇器里增加國旗輔助判斷。
LTR (左至右)為常規(guī)閱讀方式，這里需要重點注意 RTL (右至左)適布局。通常情況下，對齊關(guān)系、排列順序等均需要進行相反處理，包括 icon 、箭頭方向也需要進行翻轉(zhuǎn)鏡像。主要操作按鈕也要從右側(cè)調(diào)整至左側(cè)。
3）業(yè)務(wù)層
若工作臺前期未考慮語言適配，后期直接適配多語言會出現(xiàn)哪些問題？在多語言UI界面中最容易出現(xiàn)的問題之一，就是語言適配時文案占位面積不可控。
以京東國際物流文案為例，做了多語言占位面積測試，來了解語言翻譯后的效果，可以發(fā)現(xiàn)拉丁字母的國家文案長度是眾多語言中最長的，基本在中文的2.5倍以上。
在做國際化設(shè)計時，可以考慮以英文版做基礎(chǔ)產(chǎn)出，并防止后期加入其它長度大于英文的語言，可以預(yù)留 50%的長度；也可以漢字為參考，預(yù)留 200%~300% 長度產(chǎn)出，都可較好避免占位面積出現(xiàn)的顯示問題。
針對國際UI進行組件化，并建立規(guī)范，能大幅度提高設(shè)計效率、一致性和復(fù)用性，也便于其他同學(xué)快速了解國際組件的差異性。
文化背景不同、審美觀念不同等，造成了當前國內(nèi)外存在不同的視覺衡量標準，兩種標準其實不分好壞，相信在全球化的浪潮下，中西方文化會相互影響、相互促進，國內(nèi)外的視覺風(fēng)格會逐漸趨同、審美邊界越來越小，但又有著各自國家的特性，彰顯不同的美。
- END -
我們相信設(shè)計師和創(chuàng)造者一樣是思想家
