翻譯：David Lee
在谷歌2012年8月的一項課題中，研究人員發現，用戶在1/20-1/50秒內即可判斷網站設計的漂亮與否，并且，與更簡潔的設計參照物比對，視覺復雜程度高的網站得到了一致差評。
此外，?“原型化”程度很高的網站?——既那些與同類型網站有相似布局——且設計簡潔的網站在整個研究中被評選為最漂亮的。
換句話說，這個研究發現，越簡單的設計，越好。
但……這是為什么？
在這篇文章里，我們會解釋，為什么認知流暢性和視覺信息處理理論，會成為網頁設計簡潔化的決定性因素，另外，更簡潔的設計如何為產品帶來更多的轉化。
我們還要研究一些已經使用簡潔設計的網站案例，看看他們是如何提高轉化率的，從而為你在簡化自己的設計時提供一些指導。
什么是原型網站？
如果我說“家具”?什么圖像會在你的頭腦中閃現？?如果你跟95%的人差不多，你會想到椅子。如果我問什么顏色代表“男孩”，你會說“藍色”，女孩?=?“粉色”，車?=?轎車，鳥?=?更知鳥，等等……
原型——當大腦需要歸類所有你感受過的事物時，在頭腦中所創造的最基本圖像?。無論是家具還是網站，你的大腦都會創造一個樣板來定義這些事物的外觀和感覺。
在互聯網領域，原型被分解到更細分的類別中。對于社交網絡，電子商務網站和博客，大腦中都會有一個完全不同但獨一無二的圖像來描述它……?當這些獨特的網站缺少了圖像中的某些信息時，有意無意間你就會拒絕它。
比如說“針對20多歲時尚年輕人的在線服裝商城”你可能立刻會想象這樣的東西：
這些網站都是獨特的，也不存在互相抄襲。相反，它們只是順應了你期望中電子商務網站的樣子而已。
認知流暢性是什么意思?
認知流暢性字面背后的基本意思就是，大腦喜歡想到一些容易想到的事情……
這就是為什么你會喜歡瀏覽一些網站……他們遵從你的本能，你很自然的知道所有的內容在哪，也能知道下一個操作該做什么。
“流暢使得我們的思維處于你根本感受不到它在工作的狀態下，無論什么情形下當需要考慮很多信息時，它就會影響我們”?—Uxmatters.com
“認知流暢性”其實源自于另一個概念，也就是被大家所熟知的曝光效應，它的基本理念就是指，某件物品越多的曝光給你，你就越喜歡它。
同樣，這個原則也適用于互聯網。
比如，博客右邊欄上的選項就讓人很“熟悉”，電商網站上，一個吸引眼球的大標題，加上特寫高清大圖，又或者在屏幕左手邊最頂部的公司標志。
如果你網站的來訪者已經熟識了某些同類網站的必備特征，并認為它是這一類型網站的標準，那么偏離這些標準會導致他們下意識的把你放入“不好看”的行列中。
以下是一些電商網站。看看你能否注意到他們的相似之處。
注意：無論如何，別把我說過的話當做“做的和別人一樣就行了。”如果你一不留神，很有可能因為這種做法受到損失。
在同類別的網站中，知道什么樣的設計是“原型”非常重要，但是更為重要的是，找到證據支撐設計決策才能讓最終結果有所提升。
有很多設計師都會做糟糕的選擇。如果不做任何研究，你也很有可能重蹈覆轍。比如，很多網站使用自動切換的圖片來顯示產品，但是多次研究中表明自動圖片切換降低了轉化率。
面對你的基本預期時都發生了什么——一項案例研究
看看上面的三幅圖，?你內心對一個電子商務網站的期待差不多就是這樣了。?即時你從未訪問過這些網站，?但好的設計就會讓你感覺到它內在的“可信度”。
因為高水平的流暢體驗，一個網站會讓人感到非常熟悉，來訪的用戶就不需要花費太多精力去檢視整個網站，而是專注于他們所要做的最重要的事。
然而，當體驗不流暢的時候，你立刻就能感覺到。?訪問這家在線零售商，Skinnyties.com，之前他們的網站看上去一點都不像做電商的，直到2012年十月份重新設計之后才有所改觀。
改版前:
改版后:
對一些關鍵點的處理方式，導致了兩個版本的巨大差異:
遵循了“原型”電子商務網站的布局主題
留白讓頁面更加“開放”
一張特寫只展示一件商品，并且使用了高清的圖片和對比強烈的顏色。
點擊這里查看針對這次重新設計的完整案例分析，如這篇文章所示，你完全有可能在給網站做升級的同時，讓你的網站更好地“適應”通用的原型標準。
這次再設計僅上線2.5周后所帶來的驚人結果
當然，這次再設計本身做的還不錯，但也并不是那么有開創性。它只是準確的迎合了人們對于一個流行的在線服裝商店的期望。它是“開放的”, 響應式的，并在所有的產品頁面使用了統一的設計語言。
我們與舊頁面對比就會發現，顯而易見，正是缺少了這些通用的元素導致用戶不會在這個舊頁面上付費。
面對復雜的網站，我們會經歷什么樣的視覺信息處理過程？
連接中的這項研究課題，由哈佛大學，馬里蘭州立大學，科羅拉多州立大學共同完成，研究人員針對“美觀”這個課題，對不同地域的人群進行研究，發現了強有力且在數學上極為嚴謹的證據?——?比如，具有博士學位的測試者不喜歡特別花哨的網站——?當然，如果我們討論的是面向大眾視覺魅力，這就沒什么參考價值了。
我們能得到的唯一普遍真理是，視覺復雜程度越高的網站，視覺吸引力就越低。
為什么從科學角度講，簡單的信息更容易被大腦處理
“視覺復雜程度”低的網站之所以被認為更漂亮，很大一部分原因在于不復雜的網站不需要眼睛和大腦費力的去編譯，存儲和處理這些信息。
最初，你的視網膜會將真實世界的視覺信息轉化為電脈沖。然后，這些脈沖會通過特定路線進入對應的感光細胞，然后光和顏色信息被傳輸到大腦。
在頁面中，光和顏色的變化越多（視覺上復雜），就需要眼睛做更多工作以便將信息送入大腦。
“…眼睛接收視覺信息，然后將這些信息編譯成電子化的神經活動，正是這個過程完成了大腦中的“存儲”和“編譯”。這些信息可以被大腦的其他部分加以利用，關聯其他腦部活動，比如記憶，洞察和注意力。”-?Simplypsychology.org
每一個元素都在傳達微妙的信息
設計一個網站時，你必須記住，每一個元素都至關重要——字體，標志和顏色選擇——都轉達著關于品牌的微妙信息。
當這些設計元素都沒做到位的時候，自以為是的設計師會為了彌補這種不足而添加隨便找來的元素和圖像，然而這增加了網站的視覺雜亂程度，還導致整體的美感下降。
我們應該先考慮視覺信息的處理過程，再去優化一個頁面——尤其是要簡化信息從眼部傳入大腦的這個過程?—?這就需要用盡可能少的元素表達足夠多的信息.
雖然這篇文章只是講述他們品牌設計的個案，MailChimp標志再設計的反思.
但我們能從中看到，當他們決定讓自己的品牌成長時，他們并沒有添加類似于“我們自從2001年步入電子郵件領域，已經獲得了300萬忠實用戶，這就是為什么我們很酷，X&￥#@……”之類的信息。
相反，他們讓字體的書寫很嚴密，去掉了網站頂部標題上一句簡單的“讓發送郵件更美好”——并且針對核心產品，添加了一個更為簡潔的說明動畫。
雖然這只是其巨大放量策略的一部分，但結果還是令人震驚，自6月份新logo第一次啟用，帶來了超過100萬的新用戶增長。
“臨時記憶” & 轉換率圣杯
正是因為視覺信息更快捷的傳輸到了大腦，我們才能看到簡潔所帶來的成果。
普林斯頓大學，心理學家George A Miller的一個著名的研究中指出，平均計算，一個成年人的大腦能在短期內存儲5-9“堆”信息，稱之為臨時記憶.
臨時記憶是指，你大腦中的一部分，在一個短暫的過程中臨時存儲并處理這些信息。?正是臨時記憶幫助你集中注意力，減少分心，最重要的是，引導你去做出決定。
目前為止，我們所說的一切都是為了減少干擾以便讓“臨時記憶”能夠順暢的工作。
一個“復雜程度低，原型化很高的網站“中，只有一些為數不多的內容需要臨時記憶嘗試去處理，比如品質保證，產品描述，價格或者出價這樣的信息。當臨時記憶可以專注在真正需要處理的問題上時，試錯和解決問題的速度就會更快。
小的偏離導致了天壤之別
當你的網站不符合一個人的預期時——價格高于預期，配色和對齊都做得很糟糕，網站加載速度不夠快，照片的像素不夠高——臨時記憶就會去處理這些信息而不是真正重要的事情。
這是因為，臨時記憶會喚醒永久記憶，并用我們已知的方法去完成任務。當永久記憶不能為處理信息提供足夠的幫助時，整個過程被打斷，臨時記憶會取而代之繼續完成任務。
這就是為什么最至關重要的是，你必須要了解，對網站用戶來說，所有內容的曝光等級如何?——不僅局限于你同類別中的網站，對于所有的網頁設計來說——你都需要這么做，如果你想通過好的設計來“黑掉”他們的臨時記憶。
他們讀過的博客，經常購物的網站，他們的瀏覽器，年齡，性別和地理位置， 所有這些線索都會影響到他們對你的第一印象及熟悉程度。
結論
當用戶不能依靠過往的經驗去使用你的網站時，他們并不覺得這是一種創新。他們只是離開，同時還在想，為什么不把那些信息和按鈕放在“應該在的位置”。如果你想賣點兒東西，這種做法可不是個最佳選擇。
加分項:?簡潔的網站需要做的7件事兒
1.研究你的用戶還有他們最常用的網站。找一些上述網站設計調整方面的案例研究，還要了解這些設計是如何讓他們在關鍵數據上取得進步的。
2.用這些“有用的”零件為你自己的網站搭建一個大框架。
3.當你做設計布局時，要遵從認知流暢性的相關規則。把所有內容放在用戶習慣于看到的位置上。
4.僅依靠你自己的配色，標志，字體去和用戶交流，信息的呈現要清晰并且巧妙。不要添加隨便找來的東西或者圖片，除非這能傳達給用戶他們真正關心的信息。
5.盡可能的保持簡潔——?用1張大圖替代1堆小圖，1個表格替代3個——盡力利用留白去設計。
6.反復確認，必須確定你的網站符合大眾對于價格，美感，加載速度的期望。
7.記住?“原型”?并不意味著你網站的每一個部分都要符合條條框框的要求。
別把你的網站看成像一片雪花一樣獨一無二的藝術品，你應該把它當做一切最好設計的大合集。
你的用戶會因此愛死你。
