為什么歐美國家的產(chǎn)品界面更簡潔,你們可能想多了

39 評論 45634 瀏覽 184 收藏 13 分鐘

歐美國家的互聯(lián)網(wǎng)產(chǎn)品的界面普遍更簡潔,這一點(diǎn)在手機(jī)APP上尤其明顯。而亞洲國家,以中國和日本為代表,產(chǎn)品的界面都更加擁擠??梢詫?dǎo)致這種情況的原因是什么呢?

關(guān)于這種現(xiàn)象的解釋,我曾經(jīng)看到過不少的理論,總結(jié)起來大致是這么兩類:

  1. ?文化差異或生活環(huán)境。此理論認(rèn)為,歐美發(fā)達(dá)國家,人們的生活壓力較小,人們的生活方式崇尚簡潔。而東亞國家大多數(shù)地區(qū)人口密度大,生活環(huán)境擁擠和復(fù)雜,所以人們更加能接受復(fù)雜的界面。
  2. ?人種差異。有神經(jīng)學(xué)方面的研究發(fā)現(xiàn)東亞人種大腦相應(yīng)區(qū)域與西方人不同,使得東亞人更能接受更復(fù)雜的界面信息。

以上兩種理論都有一定的依據(jù),且看起來很合理。但是作為一個(gè)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員,我認(rèn)為這些說法對于我們做設(shè)計(jì)并沒什么啟發(fā),并且這些說法都很牽強(qiáng)。比如說:“生活環(huán)境對人的喜好有影響”,這個(gè)說法仿佛毫無疑問地是正確的,但是真的能直接套用來做設(shè)計(jì)嗎?

生活環(huán)境更擁擠,你就更喜歡擁擠的界面嗎?

很顯然是站不住腳的,而關(guān)于人種差異的理論也有問題。人類的神經(jīng)系統(tǒng)是高度可塑性的,有可能并不是神經(jīng)系統(tǒng)的差異導(dǎo)致人們喜歡不同的產(chǎn)品,而是不同的習(xí)慣導(dǎo)致了不同的神經(jīng)系統(tǒng)結(jié)構(gòu)。

奧卡姆剃刀法則,如果某個(gè)事物無法被證實(shí),也無法被證偽,那么我們就不應(yīng)該假設(shè)他存在。

如果有一個(gè)更合理,更直接的原因來解釋東亞和西方產(chǎn)品設(shè)計(jì)方面的差異,那么設(shè)計(jì)者根本就不需要理會所謂的環(huán)境差異和人種差異。

而這個(gè)更合理,更直接的原因,只要你真正做過英文產(chǎn)品,你就很容易體會到。但是我在網(wǎng)上卻很少看到有人分析這個(gè)原因,而是各種紙上談兵的理論層出不窮??赡車鴥?nèi)極少有人真正做過給外國人用的互聯(lián)網(wǎng)產(chǎn)品。

其實(shí)導(dǎo)致東亞與歐美互聯(lián)網(wǎng)產(chǎn)品差異的原因非常簡單,就是:中英文語言文字的差異導(dǎo)致了界面的不同,語言文字不僅導(dǎo)致視覺風(fēng)格的不同,對交互設(shè)計(jì)也產(chǎn)生很大的影響。中文是一種二維語言,詞語長度容易控制,而英文是一種一維語言,詞語和短語的長度是很難控制的。

第一個(gè)例子

下圖為京東和淘寶篩選商品的界面,這種篩選的交互模式最早在京東上見到,目前基本上已經(jīng)成為了國內(nèi)各種電商、O2O等APP篩選的模板。這種方式有著很多的優(yōu)點(diǎn),能夠做到非常方便快捷的篩選。

那么我們來看看英文APP是怎么做的:

圖為ebay的篩選界面。相比中文APP的篩選,你會發(fā)現(xiàn)eBay操作更麻煩,但是界面更加清晰簡潔,(左圖)每個(gè)篩選項(xiàng)都要點(diǎn)擊進(jìn)去篩選,(右圖)而每行只顯示一個(gè)篩選項(xiàng)。這種模式,就是我們常說的“一個(gè)頁面只做一件事情”。

那么真的是因?yàn)閑Bay這種方式更好嗎?

不一定。英文APP這么做,是因?yàn)橛⒄Z根本沒有辦法像中文界面那樣的排版。

漢語體系下的語言,包括韓語,日語等東亞語言,都可以用簡短幾個(gè)字來表達(dá)一個(gè)事物甚至一類事物。而拉丁語系的語言,如英語的單詞和短語長度是完全不可控的。

中文的APP的篩選,既可以采用京東的交互模式,也可以采用eBay的交互模式,但是很顯然,京東的模式操作更方便,效率更高。但是英文的APP,只能采用類似于eBay這種交互模式。

當(dāng)然,也有一些APP不服,比如:Alibaba國際版,Alibaba國際版是給英語用戶購買中國產(chǎn)品的APP。

我個(gè)人非常不認(rèn)同這種交互,這是一種典型的以形式?jīng)Q定內(nèi)容的做法。其原因在于,Alibaba的設(shè)計(jì)師習(xí)慣了國內(nèi)的APP,套用國內(nèi)APP的做法,而沒有認(rèn)識到語言文字導(dǎo)致的差異,也沒有體會到國外用戶的思維方式。

  • Alibaba為了使用中文APP這種塊狀篩選的樣式,強(qiáng)行把很多相關(guān)的項(xiàng)拆開。英語用戶的思維習(xí)慣于把相關(guān)性很高的東西算作一類一起篩選,經(jīng)常使用國外APP的人應(yīng)該會比較認(rèn)同,比如“Automation, Motors & Drives”。但是如果用Alibaba這種方式,就需要把它拆成3個(gè)選項(xiàng)。篩選的選項(xiàng)過多,且篩選的范圍更窄。這對于英語用戶來說是非常不方便的。
  • 如圖中所示,因?yàn)橛⑽膯卧~長短不一,無法對齊,排版也顯得很混亂。視覺查找的效率不高,很容易看漏了某個(gè)選項(xiàng)。而如果是中文APP,則很容易做到對齊。
  • Alibaba為了使用這種形式,還需要限制一些過長的單詞或者短語,改用替代的單詞,這也使得語言的表達(dá)并不是非常符合英語用戶的習(xí)慣。

所以國內(nèi)這種篩選的交互模式,是東亞語言體系所特有的。其他語言體系的APP想要使用這種交互方式,會導(dǎo)致很多問題,得不償失。而做得比較好的英文界面,就會給你“一個(gè)頁面只做一件事情”的感覺。

第二個(gè)例子

這是Amazon的側(cè)邊導(dǎo)航欄。這種側(cè)邊導(dǎo)航的方式由Path最早采用,曾經(jīng)在國內(nèi)也是紅極一時(shí),但是后來被各種數(shù)據(jù)驗(yàn)證為是一種不好的交互方式后,國內(nèi)APP已經(jīng)紛紛不在使用這種交互。但是國外APP很多仍然保留這種方式的,原因仍然在于語言文字。

你和國內(nèi)的交互設(shè)計(jì)師聊聊,你會發(fā)現(xiàn)中文的文字很少成為交互設(shè)計(jì)的障礙,只要一種交互方式被證明存在問題,很快就會有其他的很多種交互方式來替代它。但是英文APP的交互設(shè)計(jì)師必須要考慮到文字很長,且長短差異極大的情況。排版和交互方式受限,所以很多情況下,側(cè)邊欄的方式仍然是一種更優(yōu)的選擇。

再比如:下圖中,京東的這種方式,也是英文APP無法采用的。左邊大分類、右邊小分類的分屏布局在英文手機(jī)APP上都是很少見的,因?yàn)檫@種樣式對于英文來說無法排版。而上面圖片、下面名稱的這種樣式,在英文APP上也是使用得比較克制。比如說:中文的“干果堅(jiān)果”,而英文則一行顯示不下“Dried Fruits & nuts”,影響視覺效果。

再看一個(gè)例子

仍然是因?yàn)檎Z言文字的關(guān)系,英文APP的操作按鈕多數(shù)都習(xí)慣放置到界面內(nèi)容區(qū)域通欄展示。而中文APP,則會盡肯能將重要操作懸停到頁面的底部,只將一些與內(nèi)容關(guān)聯(lián)密切的操作放置到內(nèi)容區(qū)。

雖然圖中的例子似乎“Add to Cart”也能放在底部排得下,但是英文的長短太不穩(wěn)定了,如果是一個(gè)“Add to Favorites”可能就放不下了。所以常見的英文APP會比較少采用底部固定懸停多個(gè)操作這種交互方式。

再比如說:中文的“收藏”是一個(gè)動作,而“收藏夾”是一個(gè)名稱。文案都非常短,而且動作的文案更短。而英文剛剛相反,“favorites”是收藏夾,而“Add to Favorites”是收藏動作,動作的文案更長,決定了操作更多地是放在界面區(qū)域通欄顯示。

再補(bǔ)充一個(gè)例子

中文的表單與英文的表單,無論在PC還是手機(jī)上都是不同的。

英文表單字段名和字段值不能放在一行,而常見的中文表單都是在一行的。

同樣的區(qū)域,英文表單占用的空間更大,頁面也顯得更松散,而中文的表單就顯得更擁擠。如果中文表單間距過大,反而很奇怪,而且影響效率。Material Design表單比傳統(tǒng)的英文表單更緊湊一些,目前已經(jīng)很多英文表單采用。但是仍然不如中文表單效率高。

最后再談一談電商的首頁

國內(nèi)電商的首頁以“琳瑯滿目”著稱,但是Amazon、eBay等首頁都相對比較簡潔。我仍然認(rèn)為,這些都與審美、喜好什么的沒有必然關(guān)聯(lián),而與語言文字的排版有著必然關(guān)聯(lián)。

電商的首頁承載著最重要的一個(gè)功能就是流量和轉(zhuǎn)化,所以基本上中文的網(wǎng)站或APP的首頁做成什么樣子,很多時(shí)候是數(shù)據(jù)決定的。一般來講,在沒有語言文字阻礙排版的情況下,首頁的密集程度肯定會使流量達(dá)到最佳值,并不是中國人喜歡更擁擠的界面。

我問過很多人,都認(rèn)為電商APP的首頁太擁擠了,可是電商的首頁從來都不是以個(gè)體的喜歡作為依據(jù)的,而是以數(shù)據(jù)作為依據(jù)的,個(gè)體的感受與群體的最優(yōu)值往往不同。而英文的語言就決定了,首頁不可能通過中文APP的這種增加密集度的方式來優(yōu)化流量,不信你把京東或者淘寶的首頁翻譯成英文試試,界面上很多區(qū)域一個(gè)單詞短語都顯示不下,全是省略號。

總結(jié)

所以綜上所述,我認(rèn)為導(dǎo)致東亞和西方互聯(lián)網(wǎng)產(chǎn)品界面及交互方式差異的必然原因在于語言文字,而其他因素如生活環(huán)境、喜好、文化差異等都是非必然的原因。國內(nèi)產(chǎn)品的交互和視覺設(shè)計(jì)已經(jīng)獨(dú)立與歐美,形成了自己的一套風(fēng)格,這與審美和經(jīng)濟(jì)發(fā)展程度沒有關(guān)系。

中文的特點(diǎn)決定了中文界面是一種“效率型”的界面,界面信息量更大,界面結(jié)構(gòu)更復(fù)雜,初次使用視覺認(rèn)知難度更大。但對于熟悉的用戶來說,操作更方面,效率更高。

 

本文由 @楓葉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 文子確實(shí)是一個(gè)很重要的因素。針對東西方界面設(shè)計(jì)差異這篇文章也分享了相關(guān)研究,給出了答案。文章鏈接 https://mp.weixin.qq.com/s/CPYSCF6KqdchCl8JvfhriA

    來自上海 回復(fù)
  2. 漲知識了,習(xí)以為常的文字語言實(shí)際上影響著產(chǎn)品設(shè)計(jì)的方方面面

    來自安徽 回復(fù)
  3. 為什么英文表單不可以在一行呢?有些疑惑。

    來自北京 回復(fù)
    1. 因?yàn)檫@樣會導(dǎo)致長度過長的英文詞組被迫折行,有時(shí)候會很丑

      來自河北 回復(fù)
  4. 只是代表你個(gè)人觀點(diǎn)… 不是定性,大家都有所啟發(fā),感謝作者。順便說下,現(xiàn)在國內(nèi)很多產(chǎn)品也很靠近國外的風(fēng)格

    來自上海 回復(fù)
  5. 看問題的角度,新奇特。

    來自北京 回復(fù)
  6. 作為一個(gè)國內(nèi)國外APP均參與設(shè)計(jì)過的UI,表示還是中文的簡單好實(shí)現(xiàn),雖然b格低了點(diǎn)

    來自北京 回復(fù)
    1. 等中國的國際影響力超過了美國,外國人就會覺得用中文的b格更高了,哈哈

      來自浙江 回復(fù)
  7. 分析的不錯

    來自重慶 回復(fù)
  8. 觀點(diǎn)很新穎,值得深入探究。但是我不認(rèn)為文字的差異是必然原因,很多頁面的呈現(xiàn)是圖形化的,在文字之外的部分也是值得思考的。加油~

    來自廣東 回復(fù)
  9. 但是這個(gè)產(chǎn)品邏輯也有關(guān)系吧,你現(xiàn)在是從語言文字的角度反推這個(gè)邏輯

    來自上海 回復(fù)
  10. 確實(shí)語言是主要的一方面的原因,不過語言的差異也導(dǎo)致了思維方式的差異,還有東西方確實(shí)存在審美上的不同,這和文化、生活環(huán)境確實(shí)是有實(shí)在的聯(lián)系的。如果按照你的說法,那么和語言因素?zé)o關(guān)的設(shè)計(jì),比方說「服裝設(shè)計(jì)」「產(chǎn)品設(shè)計(jì)」,東西方應(yīng)該就沒有什么外觀和交互上的差異性了。實(shí)際上影響設(shè)計(jì)結(jié)果有很多方便的因素,不能忽略社會文化等主觀方面的因素。文章寫的好,分析很透徹,但是不能下定論說“導(dǎo)致東亞和西方互聯(lián)網(wǎng)產(chǎn)品界面及交互方式差異的必然原因在于語言文字”,小小的意見,期待你更多更好的分享!

    來自上海 回復(fù)
    1. “導(dǎo)致東亞和西方互聯(lián)網(wǎng)產(chǎn)品界面及交互方式差異的必然原因在于語言文字。而其他因素如生活環(huán)境、喜好、文化差異等都是非必然的原因”

      來自江蘇 回復(fù)
    2. 其實(shí)你可以分析下其它這些因素對于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的影響,做個(gè)第二期,哈哈哈哈

      來自上海 回復(fù)
    3. 其實(shí)也可以這么說,每個(gè)國家的語言文字都是受其他方面的特殊性的影響導(dǎo)致的,社會文化,氣候等等,都會影響到語言文字

      來自浙江 回復(fù)
  11. 挺好的!分析的不錯

    來自江蘇 回復(fù)
  12. 感受挺深的,接的國外項(xiàng)目,使用Material Design風(fēng)格很容易作出合適的布局, 但國內(nèi)客戶的項(xiàng)目使用Material Design風(fēng)格就總是顯得格格不入。

    來自香港 回復(fù)
  13. 豁然開朗,厲害!不過大神,你可以發(fā)一張國外電商首頁的圖嗎

    回復(fù)
  14. 看完后有一種豁然開朗的感覺。

    回復(fù)
  15. 另外請問你做過海外產(chǎn)品嗎?可否分享一下你的高見?

    回復(fù)
  16. 前面幾個(gè)例子寫得那么清楚你都看不懂,對你智商表示懷疑

    回復(fù)
  17. 有道理

    回復(fù)
  18. 需要補(bǔ)充一點(diǎn)的是,語言文字造成交互設(shè)計(jì)和視覺設(shè)計(jì)差異的主要原因,然而造成產(chǎn)品功能方面差異的原因,仍然是文化差異,政策等。

    來自江蘇 回復(fù)
  19. 看完這篇文章,我對中文的喜愛程度直接上了幾個(gè)等級,中文是最好的語言!

    來自廣東 回復(fù)
  20. 之前面試 海外電商產(chǎn)品失敗了,一直挺遺憾的,希望多您溝通下取取經(jīng),本人也是一位移動端交互設(shè)計(jì)師,希望加個(gè)微信:raincnos

    來自廣東 回復(fù)
  21. 確實(shí),漢字言簡意賅

    來自上海 回復(fù)
  22. 我也是做海外電商的,可以加微信交流下,微信:boy-lujin

    來自北京 回復(fù)
  23. 以前只是認(rèn)為中英文排版方式不一樣,但沒細(xì)想原因,現(xiàn)在有種豁然開朗的感覺!贊!

    來自河南 回復(fù)
  24. 分析的有理有據(jù),讓人信服+1

    來自廣東 回復(fù)
  25. 真是大實(shí)話,分析的有理有據(jù),讓人信服

    來自浙江 回復(fù)
  26. 筆者是做面向國外受眾的產(chǎn)品的么,可以交流下不?

    來自江蘇 回復(fù)
    1. 是的,我們有做國外用戶使用的產(chǎn)品

      來自江蘇 回復(fù)
    2. 加個(gè)wx唄 c592377651

      來自江蘇 回復(fù)
  27. 分析的有理有據(jù),之前一篇說是由于文化影響比較玄乎,就需要這種理性的分析

    來自上海 回復(fù)
  28. 以前做海外社交產(chǎn)品,表示認(rèn)同

    來自四川 回復(fù)
  29. 這才是大實(shí)話,我們做海外產(chǎn)品最讓人頭疼的就是文字的擴(kuò)展、文字基本都決定了交互方式的基線。英語還算好的了。如果做全球產(chǎn)品的話考慮的不僅僅是英語、尤其是阿拉伯語言等翻譯更長。

    來自廣東 回復(fù)
    1. 而且 方向還不一樣

      來自江蘇 回復(fù)
    2. 確實(shí)不一樣,全反了

      回復(fù)
  30. 非常獨(dú)特的分析,贊

    來自上海 回復(fù)