翻譯：David Lee
在谷歌2012年8月的一項(xiàng)課題中毕箍，研究人員發(fā)現(xiàn)，用戶(hù)在1/20-1/50秒內(nèi)即可判斷網(wǎng)站設(shè)計(jì)的漂亮與否道盏，并且而柑，與更簡(jiǎn)潔的設(shè)計(jì)參照物比對(duì)，視覺(jué)復(fù)雜程度高的網(wǎng)站得到了一致差評(píng)荷逞。
此外媒咳，?“原型化”程度很高的網(wǎng)站?——既那些與同類(lèi)型網(wǎng)站有相似布局——且設(shè)計(jì)簡(jiǎn)潔的網(wǎng)站在整個(gè)研究中被評(píng)選為最漂亮的。
換句話說(shuō)种远，這個(gè)研究發(fā)現(xiàn)涩澡，越簡(jiǎn)單的設(shè)計(jì)，越好坠敷。
但……這是為什么筏养？
在這篇文章里，我們會(huì)解釋?zhuān)瑸槭裁凑J(rèn)知流暢性和視覺(jué)信息處理理論常拓，會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)潔化的決定性因素，另外辉浦，更簡(jiǎn)潔的設(shè)計(jì)如何為產(chǎn)品帶來(lái)更多的轉(zhuǎn)化弄抬。
我們還要研究一些已經(jīng)使用簡(jiǎn)潔設(shè)計(jì)的網(wǎng)站案例，看看他們是如何提高轉(zhuǎn)化率的宪郊，從而為你在簡(jiǎn)化自己的設(shè)計(jì)時(shí)提供一些指導(dǎo)掂恕。
什么是原型網(wǎng)站？
如果我說(shuō)“家具”?什么圖像會(huì)在你的頭腦中閃現(xiàn)弛槐？?如果你跟95%的人差不多懊亡，你會(huì)想到椅子。如果我問(wèn)什么顏色代表“男孩”乎串，你會(huì)說(shuō)“藍(lán)色”店枣，女孩?=?“粉色”，車(chē)?=?轎車(chē)，鳥(niǎo)?=?更知鳥(niǎo)鸯两，等等……
原型——當(dāng)大腦需要?dú)w類(lèi)所有你感受過(guò)的事物時(shí)闷旧，在頭腦中所創(chuàng)造的最基本圖像?。無(wú)論是家具還是網(wǎng)站钧唐，你的大腦都會(huì)創(chuàng)造一個(gè)樣板來(lái)定義這些事物的外觀和感覺(jué)忙灼。
在互聯(lián)網(wǎng)領(lǐng)域，原型被分解到更細(xì)分的類(lèi)別中钝侠。對(duì)于社交網(wǎng)絡(luò)该园，電子商務(wù)網(wǎng)站和博客，大腦中都會(huì)有一個(gè)完全不同但獨(dú)一無(wú)二的圖像來(lái)描述它……?當(dāng)這些獨(dú)特的網(wǎng)站缺少了圖像中的某些信息時(shí)帅韧，有意無(wú)意間你就會(huì)拒絕它里初。
比如說(shuō)“針對(duì)20多歲時(shí)尚年輕人的在線服裝商城”你可能立刻會(huì)想象這樣的東西：
這些網(wǎng)站都是獨(dú)特的青瀑，也不存在互相抄襲。相反萧诫，它們只是順應(yīng)了你期望中電子商務(wù)網(wǎng)站的樣子而已斥难。
認(rèn)知流暢性是什么意思?
認(rèn)知流暢性字面背后的基本意思就是，大腦喜歡想到一些容易想到的事情……
這就是為什么你會(huì)喜歡瀏覽一些網(wǎng)站……他們遵從你的本能帘饶，你很自然的知道所有的內(nèi)容在哪哑诊，也能知道下一個(gè)操作該做什么。
“流暢使得我們的思維處于你根本感受不到它在工作的狀態(tài)下及刻，無(wú)論什么情形下當(dāng)需要考慮很多信息時(shí)镀裤，它就會(huì)影響我們”?—Uxmatters.com
“認(rèn)知流暢性”其實(shí)源自于另一個(gè)概念，也就是被大家所熟知的曝光效應(yīng)缴饭，它的基本理念就是指暑劝，某件物品越多的曝光給你，你就越喜歡它颗搂。
同樣担猛，這個(gè)原則也適用于互聯(lián)網(wǎng)。
比如丢氢，博客右邊欄上的選項(xiàng)就讓人很“熟悉”傅联，電商網(wǎng)站上，一個(gè)吸引眼球的大標(biāo)題疚察，加上特寫(xiě)高清大圖蒸走，又或者在屏幕左手邊最頂部的公司標(biāo)志。
如果你網(wǎng)站的來(lái)訪者已經(jīng)熟識(shí)了某些同類(lèi)網(wǎng)站的必備特征貌嫡，并認(rèn)為它是這一類(lèi)型網(wǎng)站的標(biāo)準(zhǔn)比驻，那么偏離這些標(biāo)準(zhǔn)會(huì)導(dǎo)致他們下意識(shí)的把你放入“不好看”的行列中该溯。
以下是一些電商網(wǎng)站〖尥В看看你能否注意到他們的相似之處朗伶。
注意：無(wú)論如何，別把我說(shuō)過(guò)的話當(dāng)做“做的和別人一樣就行了步咪÷劢裕”如果你一不留神，很有可能因?yàn)檫@種做法受到損失猾漫。
在同類(lèi)別的網(wǎng)站中点晴，知道什么樣的設(shè)計(jì)是“原型”非常重要，但是更為重要的是悯周，找到證據(jù)支撐設(shè)計(jì)決策才能讓最終結(jié)果有所提升粒督。
有很多設(shè)計(jì)師都會(huì)做糟糕的選擇。如果不做任何研究禽翼，你也很有可能重蹈覆轍屠橄。比如，很多網(wǎng)站使用自動(dòng)切換的圖片來(lái)顯示產(chǎn)品闰挡，但是多次研究中表明自動(dòng)圖片切換降低了轉(zhuǎn)化率锐墙。
面對(duì)你的基本預(yù)期時(shí)都發(fā)生了什么——一項(xiàng)案例研究
看看上面的三幅圖，?你內(nèi)心對(duì)一個(gè)電子商務(wù)網(wǎng)站的期待差不多就是這樣了长酗。?即時(shí)你從未訪問(wèn)過(guò)這些網(wǎng)站溪北，?但好的設(shè)計(jì)就會(huì)讓你感覺(jué)到它內(nèi)在的“可信度”。
因?yàn)楦咚降牧鲿丑w驗(yàn)夺脾，一個(gè)網(wǎng)站會(huì)讓人感到非常熟悉之拨，來(lái)訪的用戶(hù)就不需要花費(fèi)太多精力去檢視整個(gè)網(wǎng)站，而是專(zhuān)注于他們所要做的最重要的事咧叭。
然而蚀乔，當(dāng)體驗(yàn)不流暢的時(shí)候，你立刻就能感覺(jué)到菲茬。?訪問(wèn)這家在線零售商吉挣，Skinnyties.com，之前他們的網(wǎng)站看上去一點(diǎn)都不像做電商的生均，直到2012年十月份重新設(shè)計(jì)之后才有所改觀。
改版前:
改版后:
對(duì)一些關(guān)鍵點(diǎn)的處理方式腥刹，導(dǎo)致了兩個(gè)版本的巨大差異:
遵循了“原型”電子商務(wù)網(wǎng)站的布局主題
留白讓頁(yè)面更加“開(kāi)放”
一張?zhí)貙?xiě)只展示一件商品马胧，并且使用了高清的圖片和對(duì)比強(qiáng)烈的顏色。
點(diǎn)擊這里查看針對(duì)這次重新設(shè)計(jì)的完整案例分析衔峰，如這篇文章所示佩脊，你完全有可能在給網(wǎng)站做升級(jí)的同時(shí)蛙粘，讓你的網(wǎng)站更好地“適應(yīng)”通用的原型標(biāo)準(zhǔn)。
這次再設(shè)計(jì)僅上線2.5周后所帶來(lái)的驚人結(jié)果
當(dāng)然威彰，這次再設(shè)計(jì)本身做的還不錯(cuò)出牧，但也并不是那么有開(kāi)創(chuàng)性。它只是準(zhǔn)確的迎合了人們對(duì)于一個(gè)流行的在線服裝商店的期望歇盼。它是“開(kāi)放的”, 響應(yīng)式的舔痕，并在所有的產(chǎn)品頁(yè)面使用了統(tǒng)一的設(shè)計(jì)語(yǔ)言。
我們與舊頁(yè)面對(duì)比就會(huì)發(fā)現(xiàn)豹缀，顯而易見(jiàn)伯复，正是缺少了這些通用的元素導(dǎo)致用戶(hù)不會(huì)在這個(gè)舊頁(yè)面上付費(fèi)。
面對(duì)復(fù)雜的網(wǎng)站邢笙，我們會(huì)經(jīng)歷什么樣的視覺(jué)信息處理過(guò)程啸如？
連接中的這項(xiàng)研究課題，由哈佛大學(xué)氮惯，馬里蘭州立大學(xué)叮雳，科羅拉多州立大學(xué)共同完成，研究人員針對(duì)“美觀”這個(gè)課題妇汗，對(duì)不同地域的人群進(jìn)行研究帘不，發(fā)現(xiàn)了強(qiáng)有力且在數(shù)學(xué)上極為嚴(yán)謹(jǐn)?shù)淖C據(jù)?——?比如，具有博士學(xué)位的測(cè)試者不喜歡特別花哨的網(wǎng)站——?當(dāng)然铛纬，如果我們討論的是面向大眾視覺(jué)魅力厌均，這就沒(méi)什么參考價(jià)值了。
我們能得到的唯一普遍真理是告唆，視覺(jué)復(fù)雜程度越高的網(wǎng)站棺弊，視覺(jué)吸引力就越低。
為什么從科學(xué)角度講模她，簡(jiǎn)單的信息更容易被大腦處理
“視覺(jué)復(fù)雜程度”低的網(wǎng)站之所以被認(rèn)為更漂亮，很大一部分原因在于不復(fù)雜的網(wǎng)站不需要眼睛和大腦費(fèi)力的去編譯懂牧，存儲(chǔ)和處理這些信息侈净。
最初，你的視網(wǎng)膜會(huì)將真實(shí)世界的視覺(jué)信息轉(zhuǎn)化為電脈沖僧凤。然后畜侦，這些脈沖會(huì)通過(guò)特定路線進(jìn)入對(duì)應(yīng)的感光細(xì)胞，然后光和顏色信息被傳輸?shù)酱竽X躯保。
在頁(yè)面中旋膳，光和顏色的變化越多（視覺(jué)上復(fù)雜），就需要眼睛做更多工作以便將信息送入大腦途事。
“…眼睛接收視覺(jué)信息验懊，然后將這些信息編譯成電子化的神經(jīng)活動(dòng)擅羞，正是這個(gè)過(guò)程完成了大腦中的“存儲(chǔ)”和“編譯”。這些信息可以被大腦的其他部分加以利用义图，關(guān)聯(lián)其他腦部活動(dòng)减俏，比如記憶，洞察和注意力碱工⊥蕹校”-?Simplypsychology.org
每一個(gè)元素都在傳達(dá)微妙的信息
設(shè)計(jì)一個(gè)網(wǎng)站時(shí)，你必須記住痛垛，每一個(gè)元素都至關(guān)重要——字體草慧，標(biāo)志和顏色選擇——都轉(zhuǎn)達(dá)著關(guān)于品牌的微妙信息。
當(dāng)這些設(shè)計(jì)元素都沒(méi)做到位的時(shí)候匙头，自以為是的設(shè)計(jì)師會(huì)為了彌補(bǔ)這種不足而添加隨便找來(lái)的元素和圖像漫谷，然而這增加了網(wǎng)站的視覺(jué)雜亂程度，還導(dǎo)致整體的美感下降蹂析。
我們應(yīng)該先考慮視覺(jué)信息的處理過(guò)程舔示，再去優(yōu)化一個(gè)頁(yè)面——尤其是要簡(jiǎn)化信息從眼部傳入大腦的這個(gè)過(guò)程?—?這就需要用盡可能少的元素表達(dá)足夠多的信息.
雖然這篇文章只是講述他們品牌設(shè)計(jì)的個(gè)案，MailChimp標(biāo)志再設(shè)計(jì)的反思.
但我們能從中看到电抚，當(dāng)他們決定讓自己的品牌成長(zhǎng)時(shí)惕稻，他們并沒(méi)有添加類(lèi)似于“我們自從2001年步入電子郵件領(lǐng)域，已經(jīng)獲得了300萬(wàn)忠實(shí)用戶(hù)蝙叛，這就是為什么我們很酷俺祠，X&￥#@……”之類(lèi)的信息。
相反借帘，他們讓字體的書(shū)寫(xiě)很?chē)?yán)密蜘渣，去掉了網(wǎng)站頂部標(biāo)題上一句簡(jiǎn)單的“讓發(fā)送郵件更美好”——并且針對(duì)核心產(chǎn)品，添加了一個(gè)更為簡(jiǎn)潔的說(shuō)明動(dòng)畫(huà)肺然。
雖然這只是其巨大放量策略的一部分蔫缸，但結(jié)果還是令人震驚，自6月份新logo第一次啟用际起，帶來(lái)了超過(guò)100萬(wàn)的新用戶(hù)增長(zhǎng)拾碌。
“臨時(shí)記憶” & 轉(zhuǎn)換率圣杯
正是因?yàn)橐曈X(jué)信息更快捷的傳輸?shù)搅舜竽X，我們才能看到簡(jiǎn)潔所帶來(lái)的成果街望。
普林斯頓大學(xué)校翔，心理學(xué)家George A Miller的一個(gè)著名的研究中指出，平均計(jì)算灾前，一個(gè)成年人的大腦能在短期內(nèi)存儲(chǔ)5-9“堆”信息防症，稱(chēng)之為臨時(shí)記憶.
臨時(shí)記憶是指，你大腦中的一部分，在一個(gè)短暫的過(guò)程中臨時(shí)存儲(chǔ)并處理這些信息告希。?正是臨時(shí)記憶幫助你集中注意力，減少分心烧给，最重要的是燕偶，引導(dǎo)你去做出決定。
目前為止础嫡，我們所說(shuō)的一切都是為了減少干擾以便讓“臨時(shí)記憶”能夠順暢的工作指么。
一個(gè)“復(fù)雜程度低，原型化很高的網(wǎng)站“中榴鼎，只有一些為數(shù)不多的內(nèi)容需要臨時(shí)記憶嘗試去處理伯诬，比如品質(zhì)保證，產(chǎn)品描述巫财，價(jià)格或者出價(jià)這樣的信息盗似。當(dāng)臨時(shí)記憶可以專(zhuān)注在真正需要處理的問(wèn)題上時(shí)，試錯(cuò)和解決問(wèn)題的速度就會(huì)更快平项。
小的偏離導(dǎo)致了天壤之別
當(dāng)你的網(wǎng)站不符合一個(gè)人的預(yù)期時(shí)——價(jià)格高于預(yù)期赫舒，配色和對(duì)齊都做得很糟糕，網(wǎng)站加載速度不夠快闽瓢，照片的像素不夠高——臨時(shí)記憶就會(huì)去處理這些信息而不是真正重要的事情接癌。
這是因?yàn)椋R時(shí)記憶會(huì)喚醒永久記憶扣讼，并用我們已知的方法去完成任務(wù)缺猛。當(dāng)永久記憶不能為處理信息提供足夠的幫助時(shí)，整個(gè)過(guò)程被打斷椭符，臨時(shí)記憶會(huì)取而代之繼續(xù)完成任務(wù)荔燎。
這就是為什么最至關(guān)重要的是，你必須要了解艰山，對(duì)網(wǎng)站用戶(hù)來(lái)說(shuō)湖雹，所有內(nèi)容的曝光等級(jí)如何?——不僅局限于你同類(lèi)別中的網(wǎng)站，對(duì)于所有的網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)——你都需要這么做曙搬，如果你想通過(guò)好的設(shè)計(jì)來(lái)“黑掉”他們的臨時(shí)記憶摔吏。
他們讀過(guò)的博客，經(jīng)常購(gòu)物的網(wǎng)站纵装，他們的瀏覽器征讲，年齡，性別和地理位置橡娄， 所有這些線索都會(huì)影響到他們對(duì)你的第一印象及熟悉程度诗箍。
結(jié)論
當(dāng)用戶(hù)不能依靠過(guò)往的經(jīng)驗(yàn)去使用你的網(wǎng)站時(shí)，他們并不覺(jué)得這是一種創(chuàng)新挽唉。他們只是離開(kāi)滤祖，同時(shí)還在想筷狼，為什么不把那些信息和按鈕放在“應(yīng)該在的位置”。如果你想賣(mài)點(diǎn)兒東西匠童，這種做法可不是個(gè)最佳選擇埂材。
加分項(xiàng):?簡(jiǎn)潔的網(wǎng)站需要做的7件事兒
1.研究你的用戶(hù)還有他們最常用的網(wǎng)站。找一些上述網(wǎng)站設(shè)計(jì)調(diào)整方面的案例研究汤求，還要了解這些設(shè)計(jì)是如何讓他們?cè)陉P(guān)鍵數(shù)據(jù)上取得進(jìn)步的俏险。
2.用這些“有用的”零件為你自己的網(wǎng)站搭建一個(gè)大框架。
3.當(dāng)你做設(shè)計(jì)布局時(shí)扬绪，要遵從認(rèn)知流暢性的相關(guān)規(guī)則竖独。把所有內(nèi)容放在用戶(hù)習(xí)慣于看到的位置上。
4.僅依靠你自己的配色挤牛，標(biāo)志莹痢，字體去和用戶(hù)交流，信息的呈現(xiàn)要清晰并且巧妙墓赴。不要添加隨便找來(lái)的東西或者圖片格二，除非這能傳達(dá)給用戶(hù)他們真正關(guān)心的信息。
5.盡可能的保持簡(jiǎn)潔——?用1張大圖替代1堆小圖竣蹦，1個(gè)表格替代3個(gè)——盡力利用留白去設(shè)計(jì)顶猜。
6.反復(fù)確認(rèn)，必須確定你的網(wǎng)站符合大眾對(duì)于價(jià)格痘括，美感长窄，加載速度的期望。
7.記住?“原型”?并不意味著你網(wǎng)站的每一個(gè)部分都要符合條條框框的要求纲菌。
別把你的網(wǎng)站看成像一片雪花一樣獨(dú)一無(wú)二的藝術(shù)品挠日，你應(yīng)該把它當(dāng)做一切最好設(shè)計(jì)的大合集。
你的用戶(hù)會(huì)因此愛(ài)死你翰舌。
