為什么歐美國家的產(chǎn)品界面更簡潔,你們可能想多了
歐美國家的互聯(lián)網(wǎng)產(chǎn)品的界面普遍更簡潔,這一點(diǎn)在手機(jī)APP上尤其明顯。而亞洲國家,以中國和日本為代表,產(chǎn)品的界面都更加擁擠??梢詫?dǎo)致這種情況的原因是什么呢?
關(guān)于這種現(xiàn)象的解釋,我曾經(jīng)看到過不少的理論,總結(jié)起來大致是這么兩類:
- ?文化差異或生活環(huán)境。此理論認(rèn)為,歐美發(fā)達(dá)國家,人們的生活壓力較小,人們的生活方式崇尚簡潔。而東亞國家大多數(shù)地區(qū)人口密度大,生活環(huán)境擁擠和復(fù)雜,所以人們更加能接受復(fù)雜的界面。
- ?人種差異。有神經(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é)議
文子確實(shí)是一個(gè)很重要的因素。針對東西方界面設(shè)計(jì)差異這篇文章也分享了相關(guān)研究,給出了答案。文章鏈接 https://mp.weixin.qq.com/s/CPYSCF6KqdchCl8JvfhriA
漲知識了,習(xí)以為常的文字語言實(shí)際上影響著產(chǎn)品設(shè)計(jì)的方方面面
為什么英文表單不可以在一行呢?有些疑惑。
因?yàn)檫@樣會導(dǎo)致長度過長的英文詞組被迫折行,有時(shí)候會很丑
只是代表你個(gè)人觀點(diǎn)… 不是定性,大家都有所啟發(fā),感謝作者。順便說下,現(xiàn)在國內(nèi)很多產(chǎn)品也很靠近國外的風(fēng)格
看問題的角度,新奇特。
作為一個(gè)國內(nèi)國外APP均參與設(shè)計(jì)過的UI,表示還是中文的簡單好實(shí)現(xiàn),雖然b格低了點(diǎn)
等中國的國際影響力超過了美國,外國人就會覺得用中文的b格更高了,哈哈
分析的不錯
觀點(diǎn)很新穎,值得深入探究。但是我不認(rèn)為文字的差異是必然原因,很多頁面的呈現(xiàn)是圖形化的,在文字之外的部分也是值得思考的。加油~
但是這個(gè)產(chǎn)品邏輯也有關(guān)系吧,你現(xiàn)在是從語言文字的角度反推這個(gè)邏輯
確實(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)品界面及交互方式差異的必然原因在于語言文字”,小小的意見,期待你更多更好的分享!
“導(dǎo)致東亞和西方互聯(lián)網(wǎng)產(chǎn)品界面及交互方式差異的必然原因在于語言文字。而其他因素如生活環(huán)境、喜好、文化差異等都是非必然的原因”
其實(shí)你可以分析下其它這些因素對于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的影響,做個(gè)第二期,哈哈哈哈
其實(shí)也可以這么說,每個(gè)國家的語言文字都是受其他方面的特殊性的影響導(dǎo)致的,社會文化,氣候等等,都會影響到語言文字
挺好的!分析的不錯
感受挺深的,接的國外項(xiàng)目,使用Material Design風(fēng)格很容易作出合適的布局, 但國內(nèi)客戶的項(xiàng)目使用Material Design風(fēng)格就總是顯得格格不入。
豁然開朗,厲害!不過大神,你可以發(fā)一張國外電商首頁的圖嗎
看完后有一種豁然開朗的感覺。
另外請問你做過海外產(chǎn)品嗎?可否分享一下你的高見?
前面幾個(gè)例子寫得那么清楚你都看不懂,對你智商表示懷疑
有道理
需要補(bǔ)充一點(diǎn)的是,語言文字造成交互設(shè)計(jì)和視覺設(shè)計(jì)差異的主要原因,然而造成產(chǎn)品功能方面差異的原因,仍然是文化差異,政策等。
看完這篇文章,我對中文的喜愛程度直接上了幾個(gè)等級,中文是最好的語言!
之前面試 海外電商產(chǎn)品失敗了,一直挺遺憾的,希望多您溝通下取取經(jīng),本人也是一位移動端交互設(shè)計(jì)師,希望加個(gè)微信:raincnos
確實(shí),漢字言簡意賅
我也是做海外電商的,可以加微信交流下,微信:boy-lujin
以前只是認(rèn)為中英文排版方式不一樣,但沒細(xì)想原因,現(xiàn)在有種豁然開朗的感覺!贊!
分析的有理有據(jù),讓人信服+1
真是大實(shí)話,分析的有理有據(jù),讓人信服
筆者是做面向國外受眾的產(chǎn)品的么,可以交流下不?
是的,我們有做國外用戶使用的產(chǎn)品
加個(gè)wx唄 c592377651
分析的有理有據(jù),之前一篇說是由于文化影響比較玄乎,就需要這種理性的分析
以前做海外社交產(chǎn)品,表示認(rèn)同
這才是大實(shí)話,我們做海外產(chǎn)品最讓人頭疼的就是文字的擴(kuò)展、文字基本都決定了交互方式的基線。英語還算好的了。如果做全球產(chǎn)品的話考慮的不僅僅是英語、尤其是阿拉伯語言等翻譯更長。
而且 方向還不一樣
確實(shí)不一樣,全反了
非常獨(dú)特的分析,贊