在谷歌于2012的一項研究中表明，用戶只需1/50或者1/20秒就能判斷一款界面，用戶本能上期望界面是有序、簡介、毫不費腦的，這就是為什么扁平化設計提倡簡約，為什么復雜的視覺設計越來越不吃香的原因。

　　進一步說，“有原型依據”的界面，結合簡約的設計理念，往往能夠更容易獲得用戶的青睞。

[Page: ]

　　越簡約，越好！

　　但是為什么呢？

　　本文，我們來探索一下“認知學理論”和“視覺信息處理理論”，希望以此為指導，能幫助你更好的進行界面簡化，提升你的設計觀念。

　　本文參考了一些界面（尤其是網站）的簡化對比，并給出了充分的數據證明，事實證明，簡化能夠大幅提高轉化率。

有原型依據的界面設計

　　如果我說“家具”這個名字，95%的人腦海中首先想到的一般都是“椅子。當我問“代表男孩的顏色”，一般人也都會想到“藍色”，“粉色”代表“女孩”，問到“汽車”，一般會想到“小轎車”

　　某物的原型指：當你與某物交互時，首先映入你腦海的精神形象。我們人類天生有這種“對號入座”的習慣，無論是是界面還是家具，當我們面對它們時，我們的大腦都會做出反應，看它和自己的“預期”像不像，也就是說，在我們的大腦中，存在著一個模板庫，不同類別的事物都有不同的模板，在我們看到相應事物時，我們都會和大腦中的模板對比，從而判斷相應事物的外觀和使用感受。

　　以網頁設計為例，原型依據的種類很多。對于電商網站，用戶有一種模板，對于社交網絡，又是另外一種，博客，又是一種。如果你看到的網站和你的預期不符，那么在心理上，你便會抗拒這個網站。

　　如果要設計一款“為年輕人提供服務的在線服飾商城” ，你心中的預期應該是這樣：

image credit（圖像來源）

　　下圖可以算是“在線服飾商店”的網站原型匯總，而上圖比較符合下圖的標準。但是上圖的網頁設計，在參考下圖的基礎上，還添加了一些自己的東西。

image credit（圖像來源）

　　事實上，導航高效的電商網站，幾乎模子都差不多。這不能說是竊取，因為用戶對電商網站的預期就是這樣，如果你過度表達創意，用戶不一定買單。

什么叫認知流暢的界面設計？

　　大腦看到事物后，會有一個預判，會判定這個東西是否容易理解，這就是“認知流暢”背后的基本理念。

　　“讓用戶掌握全局”，這句話在不少設計師口中反復出現，但到底什么是掌握全局呢？我來告訴你，掌握全局的意思就是：界面簡單，用戶掃一眼，就能知道功能是什么，界面中都有什么，我要找的東西在哪里。這就是掌握全局的含義。

[Page: ]

“界面的流暢性等同于界面的有效性，信息也有重量。” — Uxmatters.com

　　認知流暢和“曝光效應”（我們會偏好自己熟悉的事物）有所聯系，你越熟悉某類事物，你越能接受某類事物。

image source（圖像來源）

　　對于界面設計來說，同理。

　　用戶“很熟悉”博客網站中博文底部的評論輸入框。用戶“很熟悉”電商網站中高分辨率的大圖和精美的Banner。

　　如果你的界面設計和用戶心理預期不符，那么你的設計往往會被用戶否定。

　　看看下面這些電商網站，看你是否能找到一些相似性？

　　注意: 都說“不要盲從潮流”，可潮流是因為用戶認可才形成的，一定要尊重用戶，這樣你才能獲益。

　　因此你的設計一定要遵循用戶的預期，一定要有原型依據。

　　很多設計師不做研究，想當然的設計。很多電商網站使用自動滾動欄來展示圖像，但實際上，自動滾動欄降低轉化率。

[Page: ]

當設計遭遇用戶預期——案例研究

　　上圖的三幅圖像中，均展示了用戶想在電商網站中看到的元素。即便你從未上過此類網站，也能夠快速認同這種設計。

　　我們常說一句話"了解-掌握-深入"，這種符合用戶預期的設計，完全可以跳過了解/用戶指引/用戶教學流程，讓用戶快速上手，用戶上來就處于“掌握”階段。他們能大致了解功能、理解界面劃分，這便是高認知流暢的界面設計。

　　我們來看看下面這個案例 Skinnyties.com的網頁重設計。（這也是一個電商網站）

之前:

之后:

改版后的幾個關鍵點：

• 遵循了上面提到的電商類網站用戶預期原型圖。

• 大量留白，凸顯出更多的可點擊區域。

• “精”而“美”，分辨率高，單一產品的簡約性得到凸顯，采用了對照色來作為視覺強調。
  
  重設計后，新網站上線3周后的數據統計：

　　轉化率提高l了13.6%，跳出率降低了23.2%，各設備用戶增長率42.4%。

　　這款重設計本身，談不上多出彩。僅僅簡單的滿足了用戶預期，對應上了用戶對于電商網站的“模板”而已。新的設計“更開放”、響應式，設計元素一致。

　　和老版相比，重設計非常明智，減少元素，減少用戶的判斷和選擇，讓用戶實現快速購買。

[Page: ]

視覺信息處理理論與界面簡繁

　　哈佛大學、科羅拉多大學、馬里蘭大學以人口統計的形式制作了一張關于“美學愉悅感”的圖表。

　　紅線代表簡約，藍線代表復雜，簡而言之，界面設計越復雜，視覺吸引力越差。

　　為什么在科學上，人的大腦更容易處理簡約的信息？

　　簡約為美的原因，在于大腦和眼睛無需耗費心力去處理、解碼、貯存信息。

　　你的視網膜會將真實世界的圖像信息轉化為電脈沖。這些脈沖與相應的感受態細胞發生關聯。從而傳遞了色彩、圖形信息給大腦。

　　顏色和元素越多，眼睛需要做的工作就越多。

看似相同，實則不同，每個元素都能傳達微妙的信息

image source（圖像來源）

　　牽一發而動全身的蝴蝶效應是真的。因此在界面設計中，每個元素都很重要，無論是字體，Logo，色彩選擇，留白（上圖）都很重要，都會影響到用戶對界面的感受。

　　一些界面復雜的原因，是設計師的問題，設計師沒有充分利用每個元素的功能性，因此有些功能就需要視覺元素的“重復疊加”來實現，因此反復，美學上也不被用戶接受。

　　視覺信息處理理論不容小視，針對此進行設計優化，可以減少用戶信息搜索耗時，減少用戶認知負載——只要你能夠充分利用手頭的元素就好。

　　MailChimp Logo的重設計，看似很小的改動，感覺上，完全不同，第一版由于字體過于纏繞、潦草，雖然幾個字母，但是看起來很費力。而第二版的優化真可謂下了功夫（如下）:

　　增加筆劃間的距離，留白讓Logo看起來更“流暢”：

　　更流暢的節奏感：

　　在筆劃相遇點，采用更纖細的線條，提高字母主體的可讀性。

　　更流暢的弧度感。

　　MailChimp，這9個字母，很簡單了，是吧？但是看了上面的比較，你發現“簡單”也有“相對簡單”和“更簡單”的區別。新的Logo設計，讓用戶看起來更舒心，也能更好的傳達“流暢發送郵件”的產品理念。

　　數據統計，Logo改版之后，六月份新增了100W用戶。

[Page: ]

“工作內存”和轉化率圣杯

　　簡約為美、簡約有效、簡約致勝的原因可以在我們人類的大腦中找到答案。

　　普林斯頓的心理學家 George A Miller曾做了一份著名的報告，其中指出，人腦有5-9塊儲存短期信息的區域，叫做“工作內存”（各位聯想一下PC內存與硬盤的區別，一個短期，一個長期。）

　　工作內存是大腦的一部分，能夠讓我們在幾秒內貯存、處理信息。幫助你凝聚注意力，保持不分心，更重要的是，幫你做決定。

image source（圖像來源）

[Page: ]

　　簡約能夠減少工作內存中的“噪音干擾”

　　在“簡約，有原型依據的界面設計中”，5-9塊工作內存可以高效運轉，讓我們可以迅速掌握信息，從而解決問題。

偏差導致用戶離去
　
　　當你的設計不符合用戶預期時，就產生了偏差，用戶就會離去——我口袋只有200塊，我絕對不會買400塊的東西。

　　配色、對稱美、加載速度、圖像清晰度、這些用戶都有著相應的預期。那么面對一些不流暢的設計時，工作內存是怎樣處理的呢？

　　當遇到熟悉的事物時，工作內存會調用長期記憶來完成任務。當長期記憶中不存在此類記憶時，整個節奏就被破壞了。

　　這就是為什么一些文章反復提及用戶習慣，用戶習慣就是這么重要，不要隨便破壞。

　　用戶日常瀏覽的網站、用戶的年齡、性別、所處的國家，都會影響到他們的認知。

[Page: ]

結論

　　如果用戶在你的設計中找不到參考原型，那么他們便會否認你的網站。“應該會這樣”他們往往會有一個預期。想讓用戶買單，必須先滿足用戶的心理認知習慣。

　　附贈：簡約UI設計的7條建議

1. 研究用戶最常使用的應用和網站，多做案例研究，找出在關鍵位置設計的妙法。

2. 取其精華，去其糟粕，博百家之眾長，汲取成功設計的優點，混入你的設計中。

3. 設計布局時，要考慮認知學原理，最重要的東西放在用戶最習慣的地方。

4. 根據自己的色彩、Logo和字體，簡潔的進行視覺傳達。元素不宜過多

5. 保持簡單，巧妙使用留白。

6. 再三檢查加載速度、美學等因素。

7. 原型依據不是純粹的視覺抄襲，而是心理上的某種預期