編輯導(dǎo)語：面向不同用戶群體、針對不同場景，產(chǎn)品在功能層、設(shè)計層上都需要有所變化，以求讓用戶擁有更加美好的使用體驗，也更契合用戶的實際使用場景。那么在出海場景下，產(chǎn)品需要如何改變設(shè)計策略？不妨一起來看看作者的總結(jié)。

一、背景

我用一句話把Google翻譯整懵了，這句話對于漢語母語者很好理解，但是Google翻譯卻搞不懂在說啥。這個翻譯案例側(cè)面反映了國內(nèi)外用戶在語言表達和思維習慣上的巨大差異，這些差異最終也體現(xiàn)在界面的設(shè)計上。我們來扒一扒這個問題，看看差異根源在哪，要怎么做才能讓產(chǎn)品設(shè)計更有“海外范”。

二、海外用戶怎么看？

在大家的印象中，海外的應(yīng)用大多簡單直接，和國內(nèi)應(yīng)用調(diào)性迥異。很多資料從不同層面來分析這種差異，大多是從國內(nèi)用戶視角出發(fā)，這次嘗試從海外用戶的視角切入，看看是否會有不同的發(fā)現(xiàn)。

從Quora的諸多提問可以看出，正如很多國內(nèi)用戶疑惑為什么Google的網(wǎng)站那么簡單，海外用戶也同樣納悶中文界面為啥這么復(fù)雜，基于這些困惑，一些海外用戶也嘗試給出了他們的觀點。如下圖：

通過這些回答可以發(fā)現(xiàn)，海外用戶對此也有不同的想法。有的認為亞洲很落后（發(fā)達國家的優(yōu)越感？），有的則認為因為中文比英文高級，還有人覺得亞洲人有特殊的超能力。當然也有一些熟悉中國的海外設(shè)計師從教育環(huán)境、思維習慣、親身體驗等多個維度去分析這種差異。

結(jié)合查閱到的各種資料和觀點，我把整體的差異根源歸因成隱形和顯性兩個部分：

1. 隱形差異：文化環(huán)境差異
2. 顯性差異：文字排版差異

下面就從這兩個方面來進行深入的溯源研究。

這里貼上Quora的原貼，感興趣的話可以從原貼看更多完整回答。

Why do many mainstream Chinese websites have so much visual noise?

https://www.quora.com/Why-do-many-mainstream-Chinese-websites-have-so-much-visual-noise

Why are Chinese apps far more complex than their foreign peers? Does this imply that there is no universal principle for UI/UX design, and that the guidelines may vary from culture to culture?

https://www.quora.com/Why-are-Chinese-apps-far-more-complex-than-their-foreign-peers-Does-this-imply-that-there-is-no-universal-principle-for-UI-UX-design-and-that-the-guidelines-may-vary-from-culture-to-culture

Why are Chinese websites and software interfaces always complicated, and English-language websites, like Google, LinkedIn, and Twitter much simpler?

https://www.quora.com/Why-are-Chinese-websites-and-software-interfaces-always-complicated-and-English-language-websites-like-Google-LinkedIn-and-Twitter-much-simpler?q=why%20Chinese%20web

Why Is Chinese Web Design So Bad?

https://blog.teamtreehouse.com/why-is-chinese-web-design-so-bad

三、溯源研究

1. 隱形原因：文化環(huán)境差異

之所以把它叫做隱形差異，是因為這些差異的影響不直接表現(xiàn)在具體的界面細節(jié)，而是從產(chǎn)品理念、思維習慣、語言環(huán)境等方面影響產(chǎn)品的設(shè)計思路。具體是以下三個部分：

1）產(chǎn)品理念不同

通過上訴對比可以看出，Google的整體界面都是圍繞“搜索”這一核心功能來展開的，沒有其他多余的信息，把搜索功能做得簡單直接。

而百度則打造了一個聚合的平臺，在這里它不僅是一個搜索工具，還可以滿足網(wǎng)盤、理財、生活娛樂等多個維度的訴求。兩者相比，Google是搜索這個特定的功能，而百度則是承載搜索和生活相關(guān)功能的平臺。產(chǎn)品理念的不同，導(dǎo)致兩個都是從搜索功能切入的產(chǎn)品，在最終呈現(xiàn)上差異巨大。

2）受教育方式不同

因為接受到的教育方式不同，導(dǎo)致思維習慣的差異。國內(nèi)的用戶在瀏覽信息時，會進入一種數(shù)據(jù)采集模式（Data Acquisition Mode），這種模式更容易接受和記憶繁多的信息數(shù)據(jù)，而西方人更擅長理解步驟加動手操作，在面對鋪面而來的大量信息時遍難以招架。

這種差異讓海外用戶對于功能明確，內(nèi)容聚焦的產(chǎn)品接受度更高，對于大而全的產(chǎn)品則不太適應(yīng)。

3）信息內(nèi)化能力不同

漢字傳遞的信息熵值比英文更高，這個差異讓從小以漢字為母語的人對壓縮度高的信息有著快速內(nèi)化的能力。但是高信息密度的內(nèi)容對西方用戶來說很難適應(yīng)，這也影響到界面的設(shè)計思路，簡潔直接的內(nèi)容更符合歐美用戶的語言習慣。

相關(guān)鏈接：

中文是最有效率的語言嗎？——信息熵簡談

https://zhuanlan.zhihu.com/p/89958871

哪種語言最適合微博？

https://www.economist.com/international/2012/03/31/twtr

世界上信息熵最大的語言是漢語嗎？

https://www.zhihu.com/question/37998688

2. 顯性原因：文字排版差異

相比隱形原因，顯性原因是直接影響到界面排版和設(shè)計細節(jié)的具體內(nèi)容，包括以下四個部分：

1）文字字形差異

a. 漢字是在田字格中書寫的文字，早期為豎向排列，這讓漢字逐漸形成四周都有邊距的方格子形態(tài)，體積感很強。英文則是橫向排列的，只需考慮左右邊距，整體橫向拓展，體積感知上會弱一些。

基于這個差異，排版時會感覺同等字號的英文比中文要小一些。

b. 上圖是一個比較極端的例子，復(fù)雜字形的漢字在字號偏小的時候筆畫粘連嚴重，導(dǎo)致辨識度大幅下降，而英文字形較為簡單，小字號依然能保持不錯的識別度。

基于上面兩個特性并結(jié)合實際案例，可以發(fā)現(xiàn)在英文界面的排版中，字號的使用區(qū)間比中文要大一些，即標題使用的字號可以更大，標簽或輔助文字使用的字號可以更小。

2）斷句方式

中文是方格子，體積固定為塊狀，而英文是橫向拓展的，每個詞語的長度不固定。這讓英文文本的右側(cè)形成錯落的空白，導(dǎo)致空間利用率降低，信息占用高度變多，但錯落的留白也讓界面顯的不那么“滿”了。

3）大寫和斜體使用

漢字沒有大寫和斜體（漢字的斜體是軟件扭曲字形實現(xiàn)的）的形態(tài)，而英文則常常使用大寫和斜體進行排版上的區(qū)分。

大寫：

• a-在排版中大寫常常被用于重點強調(diào)，比如重要新聞的標題，引導(dǎo)按鈕的文案。
• b-大寫表示一種語氣的體現(xiàn)，在一段文字中單獨使用大寫的文字，就像提高了語氣聲調(diào)。
• c-在一些小字號的標簽中也經(jīng)常使用大寫字母，因為大寫字母的辨識度高于小寫，可以幫助用戶更好的識別。

斜體：

在圖片注釋、外鏈信息引用、電影書籍名稱等場景常常使用斜體區(qū)分。斜體也可以用作強調(diào)的表示。

斜體一般性用法：

http://www.xueshutang.com/yingyu/23620.html

英文大寫和斜體的使用讓界面節(jié)奏更多變，層次更分明。

4）字體和字重選擇

英文字體的字重梯度一般比中文字體要多，在英文資訊類界面中，通常用利用字重差來強化標題與正文的層級感。

另外在主流資訊類APP（ESPN、NBC News等）中可以發(fā)現(xiàn)，標題和正文也經(jīng)常利用非襯線體與襯線體搭配的方式來強化層級區(qū)分。相較來說，國內(nèi)的同類資訊APP更多使用統(tǒng)一字體，字重差也會小一些。

四、具體產(chǎn)品研究與“海外范”

在溯源研究之后，我找了一些具體產(chǎn)品來研究這些差異在界面中實際的體現(xiàn)?；诂F(xiàn)有業(yè)務(wù)需求，選擇了資訊和體育兩類產(chǎn)品，資訊類選擇了歐美受眾比較廣的BBC News、CNN、NBC News。體育類選擇了較知名的ESPN、CBS Sports以及電競類的Riot Esoprts。

通過對這些界面的文字梯度、間距梯度、交互結(jié)構(gòu)等維度進行分析提煉后，發(fā)現(xiàn)它們在設(shè)計上的一些共性，整理后得到了以下七個可以讓界面更具“海外范”的建議。具體如下。

建議一：聚焦核心內(nèi)容，減少信息密度

這些產(chǎn)品的單頁信息量相較國內(nèi)應(yīng)用都更少一些，所以在海外產(chǎn)品的設(shè)計上可以盡量保持信息精簡，內(nèi)容聚焦，轉(zhuǎn)變內(nèi)容呈現(xiàn)的思路，海外用戶可以接受更多的滑屏，但是難以忍受單屏爆滿的信息。

建議二：避免橫向多個信息排布

為英文（多語言同理）預(yù)留更多的空間，避免橫向多個信息內(nèi)容。在按鈕的設(shè)計上也要避免擁擠，可以單獨設(shè)置區(qū)域更大的按鈕，避免橫向出現(xiàn)并列的文字按鈕，這對手掌相對較大的歐洲用戶也更友好。

建議三：使用更大的字號區(qū)間

頭部標題會使用更大的字體：這些應(yīng)用在頭部標題的文字基本都使用了超過30px（1倍尺寸）的字號，中文應(yīng)用較少會使用這么大的字號。

漢字因為是方塊狀且筆畫較多，字號過大會略顯沉悶擁擠，而英文字形結(jié)構(gòu)簡單，加上單詞長短不一形成的錯落留白，就避免了這個問題。

輔助信息使用更小的字體：同樣因為漢字筆畫結(jié)構(gòu)較復(fù)雜，文字過小導(dǎo)致筆畫黏連，導(dǎo)致辨識度降低；而英文的簡單字形讓較小的字號仍能保持其識別度。所以可以發(fā)現(xiàn)這些應(yīng)用在輔助文字的字號上都使用了更小的字號（10-11px）

建議四：利用英文的字重梯度

在標題或重要文字上，可以利用英文豐富的字重梯度，嘗試更大的字重來加強信息層級的對比。

建議五：利用英文大寫

按鈕和部分重要標題建議使用大寫，作為語氣和引導(dǎo)的強調(diào)。在一些小字號的標簽中，同樣可以使用大寫來增加文字的辨識度。

建議六：標題正文可以嘗試區(qū)分字體

資訊類的產(chǎn)品，可以嘗試在標題正文中使用不同的字體（襯線體結(jié)合非襯線體），強化層級區(qū)分的同時，也能增添海外傳統(tǒng)媒體的味道。

建議七：預(yù)留更大的間距

在多個信息排列時，通常預(yù)留更大的上下間距，一方面考慮到英文換行需要預(yù)留一定的內(nèi)容高度，另一方面充足的間距留白也可以避免信息密度過大。

五、結(jié)語

在國內(nèi)外差異的問題上，我理解中西方的互聯(lián)網(wǎng)設(shè)計走向不同的發(fā)展路線，就像漢字和英語，也會相互影響產(chǎn)生一些舶來詞匯，但它們沒有高下或?qū)﹀e，只是面對不同的用戶和市場，并在各自的環(huán)境土壤結(jié)出因地制宜的果實。對于要做設(shè)計出海的我們來說，則需要代入海外用戶的視角，讓自己的思路率先“出?！?，才能讓產(chǎn)品設(shè)計越來越符合“海外”的味道。

出海之路任重道遠，希望大家可以多多交流指教，讓我們一起在出海設(shè)計的航路上走的更穩(wěn)更遠~

作者：wilbur，來自騰訊P&PDesign

推薦關(guān)注公眾號 “騰訊設(shè)計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設(shè)計方法論

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

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