如何讓產品設計更有「海外范」?

5 評論 5876 瀏覽 82 收藏 17 分鐘

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

一、背景

如何讓產品設計更有「海外范」?

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

二、海外用戶怎么看?

在大家的印象中,海外的應用大多簡單直接,和國內應用調性迥異。很多資料從不同層面來分析這種差異,大多是從國內用戶視角出發,這次嘗試從海外用戶的視角切入,看看是否會有不同的發現。

如何讓產品設計更有「海外范」?

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

如何讓產品設計更有「海外范」?

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

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

  1. 隱形差異:文化環境差異
  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. 隱形原因:文化環境差異

之所以把它叫做隱形差異,是因為這些差異的影響不直接表現在具體的界面細節,而是從產品理念、思維習慣、語言環境等方面影響產品的設計思路。具體是以下三個部分:

1)產品理念不同

如何讓產品設計更有「海外范」?

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

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

2)受教育方式不同

如何讓產品設計更有「海外范」?

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

這種差異讓海外用戶對于功能明確,內容聚焦的產品接受度更高,對于大而全的產品則不太適應。

3)信息內化能力不同

如何讓產品設計更有「海外范」?

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

相關鏈接:

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

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

哪種語言最適合微博?

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

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

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

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

相比隱形原因,顯性原因是直接影響到界面排版和設計細節的具體內容,包括以下四個部分:

1)文字字形差異

如何讓產品設計更有「海外范」?

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

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

如何讓產品設計更有「海外范」?

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

基于上面兩個特性并結合實際案例,可以發現在英文界面的排版中,字號的使用區間比中文要大一些,即標題使用的字號可以更大,標簽或輔助文字使用的字號可以更小。

2)斷句方式

如何讓產品設計更有「海外范」?

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

3)大寫和斜體使用

如何讓產品設計更有「海外范」?

漢字沒有大寫和斜體(漢字的斜體是軟件扭曲字形實現的)的形態,而英文則常常使用大寫和斜體進行排版上的區分。

大寫:

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

斜體:

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

斜體一般性用法:

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

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

4)字體和字重選擇

如何讓產品設計更有「海外范」?

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

另外在主流資訊類APP(ESPN、NBC News等)中可以發現,標題和正文也經常利用非襯線體與襯線體搭配的方式來強化層級區分。相較來說,國內的同類資訊APP更多使用統一字體,字重差也會小一些。

四、具體產品研究與“海外范”

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

如何讓產品設計更有「海外范」?

如何讓產品設計更有「海外范」?

通過對這些界面的文字梯度、間距梯度、交互結構等維度進行分析提煉后,發現它們在設計上的一些共性,整理后得到了以下七個可以讓界面更具“海外范”的建議。具體如下。

建議一:聚焦核心內容,減少信息密度

如何讓產品設計更有「海外范」?

這些產品的單頁信息量相較國內應用都更少一些,所以在海外產品的設計上可以盡量保持信息精簡,內容聚焦,轉變內容呈現的思路,海外用戶可以接受更多的滑屏,但是難以忍受單屏爆滿的信息。

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

如何讓產品設計更有「海外范」?

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

建議三:使用更大的字號區間

如何讓產品設計更有「海外范」?

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

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

輔助信息使用更小的字體:同樣因為漢字筆畫結構較復雜,文字過小導致筆畫黏連,導致辨識度降低;而英文的簡單字形讓較小的字號仍能保持其識別度。所以可以發現這些應用在輔助文字的字號上都使用了更小的字號(10-11px)

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

如何讓產品設計更有「海外范」?

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

建議五:利用英文大寫

如何讓產品設計更有「海外范」?

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

建議六:標題正文可以嘗試區分字體

資訊類的產品,可以嘗試在標題正文中使用不同的字體(襯線體結合非襯線體),強化層級區分的同時,也能增添海外傳統媒體的味道。

如何讓產品設計更有「海外范」?

建議七:預留更大的間距

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

五、結語

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

出海之路任重道遠,希望大家可以多多交流指教,讓我們一起在出海設計的航路上走的更穩更遠~

 

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

推薦關注公眾號 “騰訊設計”( 微信ID:TencentDesign ),第一時間獲取騰訊官方的設計方法論

本文由 @騰訊設計 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 代入海外用戶的視角,讓自己的思路率先“出海”,才能讓產品設計越來越符合“海外”的味道。

    來自廣東 回復
  2. 我覺得與其想怎么有海外范不如怎么想想怎樣讓它更有創意和中國化。

    來自山東 回復
    1. 6

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

      來自北京 回復
  3. 海外產品更加注重功能的打造,而國內的更像是打造一個全面的平臺,這點非常直觀

    來自廣東 回復