如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

5 評(píng)論 6237 瀏覽 84 收藏 17 分鐘

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

一、背景

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

二、海外用戶怎么看?

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

通過這些回答可以發(fā)現(xiàn),海外用戶對(duì)此也有不同的想法。有的認(rèn)為亞洲很落后(發(fā)達(dá)國(guó)家的優(yōu)越感?),有的則認(rèn)為因?yàn)橹形谋扔⑽母呒?jí),還有人覺得亞洲人有特殊的超能力。當(dāng)然也有一些熟悉中國(guó)的海外設(shè)計(jì)師從教育環(huán)境、思維習(xí)慣、親身體驗(yàn)等多個(gè)維度去分析這種差異。

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

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

下面就從這兩個(gè)方面來進(jìn)行深入的溯源研究。

這里貼上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)境差異

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

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

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

2)受教育方式不同

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

因?yàn)榻邮艿降慕逃绞讲煌?,?dǎo)致思維習(xí)慣的差異。國(guó)內(nèi)的用戶在瀏覽信息時(shí),會(huì)進(jìn)入一種數(shù)據(jù)采集模式(Data Acquisition Mode),這種模式更容易接受和記憶繁多的信息數(shù)據(jù),而西方人更擅長(zhǎng)理解步驟加動(dòng)手操作,在面對(duì)鋪面而來的大量信息時(shí)遍難以招架。

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

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

相關(guān)鏈接:

中文是最有效率的語言嗎?——信息熵簡(jiǎn)談

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

哪種語言最適合微博?

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

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

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

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

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

1)文字字形差異

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

基于這個(gè)差異,排版時(shí)會(huì)感覺同等字號(hào)的英文比中文要小一些。

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

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

2)斷句方式

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

3)大寫和斜體使用

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

大寫:

  • a-在排版中大寫常常被用于重點(diǎn)強(qiáng)調(diào),比如重要新聞的標(biāo)題,引導(dǎo)按鈕的文案。
  • b-大寫表示一種語氣的體現(xiàn),在一段文字中單獨(dú)使用大寫的文字,就像提高了語氣聲調(diào)。
  • c-在一些小字號(hào)的標(biāo)簽中也經(jīng)常使用大寫字母,因?yàn)榇髮懽帜傅谋孀R(shí)度高于小寫,可以幫助用戶更好的識(shí)別。

斜體:

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

斜體一般性用法:

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

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

4)字體和字重選擇

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

英文字體的字重梯度一般比中文字體要多,在英文資訊類界面中,通常用利用字重差來強(qiáng)化標(biāo)題與正文的層級(jí)感。

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

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

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

建議二:避免橫向多個(gè)信息排布

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

建議三:使用更大的字號(hào)區(qū)間

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

頭部標(biāo)題會(huì)使用更大的字體:這些應(yīng)用在頭部標(biāo)題的文字基本都使用了超過30px(1倍尺寸)的字號(hào),中文應(yīng)用較少會(huì)使用這么大的字號(hào)。

漢字因?yàn)槭欠綁K狀且筆畫較多,字號(hào)過大會(huì)略顯沉悶擁擠,而英文字形結(jié)構(gòu)簡(jiǎn)單,加上單詞長(zhǎng)短不一形成的錯(cuò)落留白,就避免了這個(gè)問題。

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

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

在標(biāo)題或重要文字上,可以利用英文豐富的字重梯度,嘗試更大的字重來加強(qiáng)信息層級(jí)的對(duì)比。

建議五:利用英文大寫

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

建議六:標(biāo)題正文可以嘗試區(qū)分字體

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

如何讓產(chǎn)品設(shè)計(jì)更有「海外范」?

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

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

五、結(jié)語

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

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

 

作者:wilbur,來自騰訊P&PDesign

推薦關(guān)注公眾號(hào) “騰訊設(shè)計(jì)”( 微信ID:TencentDesign ),第一時(shí)間獲取騰訊官方的設(shè)計(jì)方法論

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 代入海外用戶的視角,讓自己的思路率先“出?!?,才能讓產(chǎn)品設(shè)計(jì)越來越符合“海外”的味道。

    來自廣東 回復(fù)
  2. 我覺得與其想怎么有海外范不如怎么想想怎樣讓它更有創(chuàng)意和中國(guó)化。

    來自山東 回復(fù)
    1. 6

      來自北京 回復(fù)
    2. 所以你覺得海外范兒跟創(chuàng)意沖突,還有你所謂的中國(guó)化你自己心里都沒有具體概念吧,建議你先接觸接觸海外的業(yè)務(wù),而不是為了杠而杠

      來自北京 回復(fù)
  3. 海外產(chǎn)品更加注重功能的打造,而國(guó)內(nèi)的更像是打造一個(gè)全面的平臺(tái),這點(diǎn)非常直觀

    來自廣東 回復(fù)